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

package/dist/input-addon.d.ts

@@ -1,3 +1,4 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import { InputSize, InputAddonPlacement } from './modules/input.types.js';
 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 };

package/dist/input-addon.js

@@ -26,8 +26,8 @@ __export(input_addon_exports, {
   MpInputRightAddon: () => MpInputRightAddon
 });
 module.exports = __toCommonJS(input_addon_exports);
+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");
@@ -52,33 +52,22 @@ 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 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 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,
@@ -90,22 +79,14 @@ __name(inputAddonConnect, "inputAddonConnect");
 
 // src/modules/input.hooks.ts
 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-addon.tsx
-var MpInputAddon = (0, import_vue4.defineComponent)({
+var MpInputAddon = (0, import_vue3.defineComponent)({
   name: "MpInputAddon",
   props: inputAddonProps,
   setup(props, {
@@ -114,16 +95,16 @@ var MpInputAddon = (0, import_vue4.defineComponent)({
     const api = useInputAddon(props);
     return () => {
       var _a;
-      return (0, import_vue3.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      return (0, import_vue2.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-var MpInputLeftAddon = (0, import_vue4.defineComponent)({
+var MpInputLeftAddon = (0, import_vue3.defineComponent)({
   name: "MpInputLeftAddon",
   setup(_, {
     slots
   }) {
-    return () => (0, import_vue3.createVNode)(MpInputAddon, {
+    return () => (0, import_vue2.createVNode)(MpInputAddon, {
       "placement": "left"
     }, {
       default: () => {
@@ -133,12 +114,12 @@ var MpInputLeftAddon = (0, import_vue4.defineComponent)({
     });
   }
 });
-var MpInputRightAddon = (0, import_vue4.defineComponent)({
+var MpInputRightAddon = (0, import_vue3.defineComponent)({
   name: "MpInputRightAddon",
   setup(_, {
     slots
   }) {
-    return () => (0, import_vue3.createVNode)(MpInputAddon, {
+    return () => (0, import_vue2.createVNode)(MpInputAddon, {
       "placement": "right"
     }, {
       default: () => {

package/dist/input-addon.mjs

@@ -2,10 +2,9 @@ import {
   MpInputAddon,
   MpInputLeftAddon,
   MpInputRightAddon
-} from "./chunk-JW2SLWRV.mjs";
-import "./chunk-ME6YL7P6.mjs";
-import "./chunk-T766ACNL.mjs";
-import "./chunk-EF6JEV72.mjs";
+} from "./chunk-VD5GL77E.mjs";
+import "./chunk-IP4RFVD7.mjs";
+import "./chunk-45BJFHHR.mjs";
 import "./chunk-ZQ2NFCFA.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {

package/dist/input-group.d.mts

@@ -1,3 +1,4 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import { InputSize } from './modules/input.types.mjs';
 import * as vue from 'vue';
 import '@mekari/pixel3-utils';
@@ -13,7 +14,7 @@ declare const MpInputGroup: vue.DefineComponent<{
         type: vue.PropType<InputSize | undefined>;
         default: string;
     };
-}, () => 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>;
     };

package/dist/input-group.d.ts

@@ -1,3 +1,4 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import { InputSize } from './modules/input.types.js';
 import * as vue from 'vue';
 import '@mekari/pixel3-utils';
@@ -13,7 +14,7 @@ declare const MpInputGroup: vue.DefineComponent<{
         type: vue.PropType<InputSize | undefined>;
         default: string;
     };
-}, () => 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>;
     };

package/dist/input-group.js

@@ -24,8 +24,8 @@ __export(input_group_exports, {
   MpInputGroup: () => MpInputGroup
 });
 module.exports = __toCommonJS(input_group_exports);
+var import_vue2 = require("vue");
 var import_vue3 = require("vue");
-var import_vue4 = require("vue");
 var import_pixel3_utils3 = require("@mekari/pixel3-utils");
 
 // src/modules/input.props.ts
@@ -43,31 +43,20 @@ 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 inputGroupMachine(context) {
-  return (0, import_xstate.createMachine)({
-    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
-    id: "input-group",
-    context,
-    predictableActionArguments: true
-  });
-}
-__name(inputGroupMachine, "inputGroupMachine");
-
 // 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 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"
     }
@@ -77,36 +66,28 @@ __name(inputGroupConnect, "inputGroupConnect");
 
 // src/modules/input.hooks.ts
 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");
 
 // src/input-group.tsx
-var MpInputGroup = (0, import_vue4.defineComponent)({
+var MpInputGroup = (0, import_vue3.defineComponent)({
   name: "MpInputGroup",
   props: inputGroupProps,
   setup(props, {
     slots
   }) {
     const api = useInputGroup(props);
-    const children = (0, import_vue4.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
-    const cloneChildren = (0, import_vue4.computed)(() => (0, import_vue4.computed)(() => children.value).value.map((vnode) => {
+    const children = (0, import_vue3.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
+    const cloneChildren = (0, import_vue3.computed)(() => (0, import_vue3.computed)(() => children.value).value.map((vnode) => {
       const overrideProps = (0, import_pixel3_utils3.objectFilterUndefined)({
         size: props.size
       });
-      return (0, import_vue4.cloneVNode)(vnode, overrideProps);
+      return (0, import_vue3.cloneVNode)(vnode, overrideProps);
     }));
-    return () => (0, import_vue3.createVNode)("div", api.value.rootProps, [cloneChildren.value]);
+    return () => (0, import_vue2.createVNode)("div", api.value.rootProps, [cloneChildren.value]);
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/input-group.mjs

@@ -1,9 +1,8 @@
 import {
   MpInputGroup
-} from "./chunk-62L6URRB.mjs";
-import "./chunk-ME6YL7P6.mjs";
-import "./chunk-T766ACNL.mjs";
-import "./chunk-EF6JEV72.mjs";
+} from "./chunk-4YFPKPDU.mjs";
+import "./chunk-IP4RFVD7.mjs";
+import "./chunk-45BJFHHR.mjs";
 import "./chunk-ZQ2NFCFA.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {

package/dist/input.js

@@ -24,8 +24,8 @@ __export(input_exports, {
   MpInput: () => MpInput
 });
 module.exports = __toCommonJS(input_exports);
+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");
@@ -80,44 +80,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;
-  }
-};
-
 // 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,
@@ -127,70 +96,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: {
@@ -205,55 +160,37 @@ __name(inputConnect, "inputConnect");
 
 // 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");
 
 // 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;
@@ -283,13 +220,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

package/dist/input.mjs

@@ -1,9 +1,8 @@
 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/metafile-cjs.json

@@ -1 +1 @@
-{"inputs":{"src/modules/input.props.ts":{"bytes":2122,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./input.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/input.machines.ts":{"bytes":1588,"imports":[{"path":"xstate","kind":"import-statement","external":true},{"path":"./input.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/input.connects.ts":{"bytes":2957,"imports":[{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"./input.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/input.hooks.ts":{"bytes":2375,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@xstate/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/input.machines.ts","kind":"import-statement","original":"./input.machines"},{"path":"src/modules/input.connects.ts","kind":"import-statement","original":"./input.connects"},{"path":"./input.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/input.tsx":{"bytes":3063,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/input.props.ts","kind":"import-statement","original":"./modules/input.props"},{"path":"src/modules/input.hooks.ts","kind":"import-statement","original":"./modules/input.hooks"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./modules/input.types","kind":"import-statement","external":true},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true}],"format":"esm"},"src/input-group.tsx":{"bytes":1000,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/input.props.ts","kind":"import-statement","original":"./modules/input.props"},{"path":"src/modules/input.hooks.ts","kind":"import-statement","original":"./modules/input.hooks"}],"format":"esm"},"src/input-addon.tsx":{"bytes":1097,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/input.props.ts","kind":"import-statement","original":"./modules/input.props"},{"path":"src/modules/input.hooks.ts","kind":"import-statement","original":"./modules/input.hooks"}],"format":"esm"},"src/index.ts":{"bytes":472,"imports":[{"path":"src/input.tsx","kind":"import-statement","original":"./input"},{"path":"src/input-group.tsx","kind":"import-statement","original":"./input-group"},{"path":"src/input-addon.tsx","kind":"import-statement","original":"./input-addon"}],"format":"esm"},"src/modules/input.types.ts":{"bytes":2087,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@xstate/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"xstate","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":245},"src/input.tsx":{"bytesInOutput":2866},"src/modules/input.props.ts":{"bytesInOutput":1153},"src/modules/input.hooks.ts":{"bytesInOutput":2461},"src/modules/input.machines.ts":{"bytesInOutput":1422},"src/modules/input.connects.ts":{"bytesInOutput":2728},"src/input-group.tsx":{"bytesInOutput":825},"src/input-addon.tsx":{"bytesInOutput":1122}},"bytes":14131},"dist/input-addon.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@xstate/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"xstate","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/input-addon.tsx","inputs":{"src/input-addon.tsx":{"bytesInOutput":1365},"src/modules/input.props.ts":{"bytesInOutput":392},"src/modules/input.hooks.ts":{"bytesInOutput":817},"src/modules/input.machines.ts":{"bytesInOutput":354},"src/modules/input.connects.ts":{"bytesInOutput":435}},"bytes":4608},"dist/input-group.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@xstate/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"xstate","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/input-group.tsx","inputs":{"src/input-group.tsx":{"bytesInOutput":978},"src/modules/input.props.ts":{"bytesInOutput":272},"src/modules/input.hooks.ts":{"bytesInOutput":817},"src/modules/input.machines.ts":{"bytesInOutput":359},"src/modules/input.connects.ts":{"bytesInOutput":322}},"bytes":3952},"dist/input.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@xstate/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"xstate","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/input.tsx","inputs":{"src/input.tsx":{"bytesInOutput":2991},"src/modules/input.props.ts":{"bytesInOutput":819},"src/modules/input.hooks.ts":{"bytesInOutput":1237},"src/modules/input.machines.ts":{"bytesInOutput":787},"src/modules/input.connects.ts":{"bytesInOutput":2095}},"bytes":9116},"dist/modules/input.connects.js":{"imports":[{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/input.connects.ts","inputs":{"src/modules/input.connects.ts":{"bytesInOutput":2982}},"bytes":4053},"dist/modules/input.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@xstate/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"xstate","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/input.hooks.ts","inputs":{"src/modules/input.hooks.ts":{"bytesInOutput":2672},"src/modules/input.machines.ts":{"bytesInOutput":1422},"src/modules/input.connects.ts":{"bytesInOutput":2728}},"bytes":7977},"dist/modules/input.machines.js":{"imports":[{"path":"xstate","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/input.machines.ts","inputs":{"src/modules/input.machines.ts":{"bytesInOutput":1676}},"bytes":2747},"dist/modules/input.props.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/input.props.ts","inputs":{"src/modules/input.props.ts":{"bytesInOutput":1418}},"bytes":2404},"dist/modules/input.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/input.types.ts","inputs":{"src/modules/input.types.ts":{"bytesInOutput":82}},"bytes":784}}}
+{"inputs":{"src/modules/input.props.ts":{"bytes":2122,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./input.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/input.connects.ts":{"bytes":3403,"imports":[{"path":"@mekari/pixel3-form-control","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"./input.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/input.hooks.ts":{"bytes":1340,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/input.connects.ts","kind":"import-statement","original":"./input.connects"},{"path":"./input.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/input.tsx":{"bytes":3104,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/input.props.ts","kind":"import-statement","original":"./modules/input.props"},{"path":"src/modules/input.hooks.ts","kind":"import-statement","original":"./modules/input.hooks"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./modules/input.types","kind":"import-statement","external":true},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true}],"format":"esm"},"src/input-group.tsx":{"bytes":1000,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/input.props.ts","kind":"import-statement","original":"./modules/input.props"},{"path":"src/modules/input.hooks.ts","kind":"import-statement","original":"./modules/input.hooks"}],"format":"esm"},"src/input-addon.tsx":{"bytes":1097,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/input.props.ts","kind":"import-statement","original":"./modules/input.props"},{"path":"src/modules/input.hooks.ts","kind":"import-statement","original":"./modules/input.hooks"}],"format":"esm"},"src/index.ts":{"bytes":472,"imports":[{"path":"src/input.tsx","kind":"import-statement","original":"./input"},{"path":"src/input-group.tsx","kind":"import-statement","original":"./input-group"},{"path":"src/input-addon.tsx","kind":"import-statement","original":"./input-addon"}],"format":"esm"},"src/modules/input.types.ts":{"bytes":2030,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-form-control","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":245},"src/input.tsx":{"bytesInOutput":2907},"src/modules/input.props.ts":{"bytesInOutput":1153},"src/modules/input.hooks.ts":{"bytesInOutput":1176},"src/modules/input.connects.ts":{"bytesInOutput":3684},"src/input-group.tsx":{"bytesInOutput":825},"src/input-addon.tsx":{"bytesInOutput":1122}},"bytes":12387},"dist/input-addon.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-form-control","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/input-addon.tsx","inputs":{"src/input-addon.tsx":{"bytesInOutput":1365},"src/modules/input.props.ts":{"bytesInOutput":392},"src/modules/input.hooks.ts":{"bytesInOutput":465},"src/modules/input.connects.ts":{"bytesInOutput":646}},"bytes":4079},"dist/input-group.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-form-control","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/input-group.tsx","inputs":{"src/input-group.tsx":{"bytesInOutput":978},"src/modules/input.props.ts":{"bytesInOutput":272},"src/modules/input.hooks.ts":{"bytesInOutput":465},"src/modules/input.connects.ts":{"bytesInOutput":533}},"bytes":3418},"dist/input.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-form-control","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/input.tsx","inputs":{"src/input.tsx":{"bytesInOutput":3032},"src/modules/input.props.ts":{"bytesInOutput":819},"src/modules/input.hooks.ts":{"bytesInOutput":452},"src/modules/input.connects.ts":{"bytesInOutput":2895}},"bytes":8351},"dist/modules/input.connects.js":{"imports":[{"path":"@mekari/pixel3-form-control","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/input.connects.ts","inputs":{"src/modules/input.connects.ts":{"bytesInOutput":3934}},"bytes":5005},"dist/modules/input.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-form-control","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/input.hooks.ts","inputs":{"src/modules/input.hooks.ts":{"bytesInOutput":1397},"src/modules/input.connects.ts":{"bytesInOutput":3680}},"bytes":6198},"dist/modules/input.props.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/input.props.ts","inputs":{"src/modules/input.props.ts":{"bytesInOutput":1418}},"bytes":2404},"dist/modules/input.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/input.types.ts","inputs":{"src/modules/input.types.ts":{"bytesInOutput":82}},"bytes":784}}}