@mekari/pixel3-input 0.0.0 → 0.0.1

package/dist/modules/input.connects.d.mts

@@ -1,12 +1,12 @@
-import { InputState, InputSend, InputClasses, InputApiMachine, InputGroupState, InputGroupApiMachine, InputAddonState, InputAddonApiMachine } from './input.types.mjs';
+import { InputState, InputClasses, InputApiMachine, InputGroupState, InputGroupApiMachine, InputAddonState, InputAddonApiMachine } from './input.types.mjs';
 import '@mekari/pixel3-utils';
 
 /**
  * Exported input connects.
  */
 
-declare function inputConnect(state: InputState, send: InputSend, classes: InputClasses): InputApiMachine;
-declare function inputGroupConnect(state: InputGroupState, send: InputSend, classes: InputClasses): InputGroupApiMachine;
-declare function inputAddonConnect(state: InputAddonState, send: InputSend, classes: InputClasses): InputAddonApiMachine;
+declare function inputConnect(state: InputState, emit: CallableFunction, classes: InputClasses): InputApiMachine;
+declare function inputGroupConnect(state: InputGroupState, classes: InputClasses): InputGroupApiMachine;
+declare function inputAddonConnect(state: InputAddonState, classes: InputClasses): InputAddonApiMachine;
 
 export { inputAddonConnect, inputConnect, inputGroupConnect };

package/dist/modules/input.connects.d.ts

@@ -1,12 +1,12 @@
-import { InputState, InputSend, InputClasses, InputApiMachine, InputGroupState, InputGroupApiMachine, InputAddonState, InputAddonApiMachine } from './input.types.js';
+import { InputState, InputClasses, InputApiMachine, InputGroupState, InputGroupApiMachine, InputAddonState, InputAddonApiMachine } from './input.types.js';
 import '@mekari/pixel3-utils';
 
 /**
  * Exported input connects.
  */
 
-declare function inputConnect(state: InputState, send: InputSend, classes: InputClasses): InputApiMachine;
-declare function inputGroupConnect(state: InputGroupState, send: InputSend, classes: InputClasses): InputGroupApiMachine;
-declare function inputAddonConnect(state: InputAddonState, send: InputSend, classes: InputClasses): InputAddonApiMachine;
+declare function inputConnect(state: InputState, emit: CallableFunction, classes: InputClasses): InputApiMachine;
+declare function inputGroupConnect(state: InputGroupState, classes: InputClasses): InputGroupApiMachine;
+declare function inputAddonConnect(state: InputAddonState, classes: InputClasses): InputAddonApiMachine;
 
 export { inputAddonConnect, inputConnect, inputGroupConnect };

package/dist/modules/input.connects.js

@@ -26,8 +26,10 @@ __export(input_connects_exports, {
   inputGroupConnect: () => inputGroupConnect
 });
 module.exports = __toCommonJS(input_connects_exports);
+var import_pixel3_form_control = require("@mekari/pixel3-form-control");
+var import_pixel3_utils = 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,
@@ -37,70 +39,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_utils.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: {
@@ -112,28 +100,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_utils.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_utils.useId)()}`;
   return {
     rootProps: {
-      id,
+      id: idx,
       class: classes.root,
       "data-placement": placement,
       "data-has-background": hasBackground,

package/dist/modules/input.connects.mjs

@@ -2,7 +2,7 @@ import {
   inputAddonConnect,
   inputConnect,
   inputGroupConnect
-} from "../chunk-T766ACNL.mjs";
+} from "../chunk-45BJFHHR.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   inputAddonConnect,

package/dist/modules/input.hooks.js

@@ -27,62 +27,13 @@ __export(input_hooks_exports, {
 });
 module.exports = __toCommonJS(input_hooks_exports);
 var import_vue = require("vue");
-var import_vue2 = require("@xstate/vue");
-var import_pixel3_utils = 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_utils = 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,
@@ -92,70 +43,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_utils.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: {
@@ -167,28 +104,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_utils.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_utils.useId)()}`;
   return {
     rootProps: {
-      id,
+      id: idx,
       class: classes.root,
       "data-placement": placement,
       "data-has-background": hasBackground,
@@ -200,58 +139,22 @@ __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_utils.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 [inputProps] = import_recipes.inputSlotRecipe.splitVariantProps(context.value);
-  const classes = (0, import_recipes.inputSlotRecipe)(inputProps);
-  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_utils.useId)()}`
-  }));
-  const [inputGroupProps] = import_recipes.inputGroupSlotRecipe.splitVariantProps(context.value);
-  const classes = (0, import_recipes.inputGroupSlotRecipe)(inputGroupProps);
-  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_utils.useId)()}`
-  }));
-  const [inputAddonProps] = import_recipes.inputAddonSlotRecipe.splitVariantProps(context.value);
-  const classes = (0, import_recipes.inputAddonSlotRecipe)(inputAddonProps);
-  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");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/modules/input.hooks.mjs

@@ -2,9 +2,8 @@ import {
   useInput,
   useInputAddon,
   useInputGroup
-} from "../chunk-ME6YL7P6.mjs";
-import "../chunk-T766ACNL.mjs";
-import "../chunk-EF6JEV72.mjs";
+} from "../chunk-IP4RFVD7.mjs";
+import "../chunk-45BJFHHR.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   useInput,

package/dist/modules/input.types.d.mts

@@ -58,20 +58,16 @@ interface InputGroupApiMachine<T extends PropTypes = PropTypes> {
 interface InputAddonApiMachine<T extends PropTypes = PropTypes> {
     rootProps?: T['element'];
 }
-interface InputState {
-    context: InputProps;
+interface InputState extends InputProps {
 }
-interface InputGroupState {
-    context: InputGroupProps;
+interface InputGroupState extends InputGroupProps {
 }
-interface InputAddonState {
-    context: InputAddonProps;
+interface InputAddonState extends InputAddonProps {
 }
-type InputSend = CallableFunction;
 interface InputClasses {
     root?: string;
     control?: string;
     clear?: string;
 }
 
-export { InputAddonApiMachine, InputAddonDefinedContext, InputAddonPlacement, InputAddonProps, InputAddonState, InputApiMachine, InputClasses, InputDefinedContext, InputGroupApiMachine, InputGroupDefinedContext, InputGroupProps, InputGroupState, InputProps, InputSend, InputSize, InputState, InputVNode, InputVariant };
+export { InputAddonApiMachine, InputAddonDefinedContext, InputAddonPlacement, InputAddonProps, InputAddonState, InputApiMachine, InputClasses, InputDefinedContext, InputGroupApiMachine, InputGroupDefinedContext, InputGroupProps, InputGroupState, InputProps, InputSize, InputState, InputVNode, InputVariant };

package/dist/modules/input.types.d.ts

@@ -58,20 +58,16 @@ interface InputGroupApiMachine<T extends PropTypes = PropTypes> {
 interface InputAddonApiMachine<T extends PropTypes = PropTypes> {
     rootProps?: T['element'];
 }
-interface InputState {
-    context: InputProps;
+interface InputState extends InputProps {
 }
-interface InputGroupState {
-    context: InputGroupProps;
+interface InputGroupState extends InputGroupProps {
 }
-interface InputAddonState {
-    context: InputAddonProps;
+interface InputAddonState extends InputAddonProps {
 }
-type InputSend = CallableFunction;
 interface InputClasses {
     root?: string;
     control?: string;
     clear?: string;
 }
 
-export { InputAddonApiMachine, InputAddonDefinedContext, InputAddonPlacement, InputAddonProps, InputAddonState, InputApiMachine, InputClasses, InputDefinedContext, InputGroupApiMachine, InputGroupDefinedContext, InputGroupProps, InputGroupState, InputProps, InputSend, InputSize, InputState, InputVNode, InputVariant };
+export { InputAddonApiMachine, InputAddonDefinedContext, InputAddonPlacement, InputAddonProps, InputAddonState, InputApiMachine, InputClasses, InputDefinedContext, InputGroupApiMachine, InputGroupDefinedContext, InputGroupProps, InputGroupState, InputProps, InputSize, InputState, InputVNode, InputVariant };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-input",
   "description": "Mekari Pixel 3 | Input component is used to get user input in a text field",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "license": "LGPL-3.0",
   "author": "Dirga Prakesha <dirga.prakesha@mekari.com>",
   "sideEffects": false,
@@ -10,11 +10,10 @@
     "dist"
   ],
   "dependencies": {
-    "@xstate/vue": "2.0.0",
-    "xstate": "4.35.0",
-    "@mekari/pixel3-button": "0.0.0",
-    "@mekari/pixel3-styled-system": "0.0.0",
-    "@mekari/pixel3-utils": "0.0.0"
+    "@mekari/pixel3-form-control": "0.0.1",
+    "@mekari/pixel3-styled-system": "0.0.1",
+    "@mekari/pixel3-button": "0.0.1",
+    "@mekari/pixel3-utils": "0.0.1"
   },
   "peerDependencies": {
     "vue": "^3.3.7"

package/dist/chunk-EF6JEV72.mjs

@@ -1,58 +0,0 @@
-import {
-  __name
-} from "./chunk-QZ7VFGWC.mjs";
-
-// src/modules/input.machines.ts
-import { createMachine } from "xstate";
-function inputMachine(context) {
-  return 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 createMachine({
-    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
-    id: "input-group",
-    context,
-    predictableActionArguments: true
-  });
-}
-__name(inputGroupMachine, "inputGroupMachine");
-function inputAddonMachine(context) {
-  return createMachine({
-    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEsMAHAVwBcBaAQwgiw3xGK1gPIIaYA9EBGAEzoAnvwHIJyIA */
-    id: "input-addon",
-    context,
-    predictableActionArguments: true
-  });
-}
-__name(inputAddonMachine, "inputAddonMachine");
-
-export {
-  inputMachine,
-  inputGroupMachine,
-  inputAddonMachine
-};