@prokodo/ui 0.0.37 → 0.0.39

package/dist/components/image-text/ImageText.js

@@ -1,30 +1,30 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./ImageText.module.scss.js";
-import { RichText } from "../rich-text/RichText.js";
 import { Button } from "../button/Button.js";
+import { Lottie } from "../lottie/Lottie.js";
 import { Grid } from "../grid/Grid.js";
 import { GridRow } from "../grid/GridRow.js";
 import { Animated } from "../animated/Animated.js";
-import { Headline } from "../headline/Headline.server.js";
-import { Lottie } from "../lottie/Lottie.js";
+import { Headline } from "../headline/Headline.js";
+import { RichText } from "../rich-text/RichText.js";
 import { Image } from "../image/Image.js";
 const bem = create(styles, "ImageText");
 const ImageText = /* @__PURE__ */ __name(({
   animatedBorder,
   reverse,
   subTitle,
+  subTitleProps,
   title,
+  titleProps,
   content,
   animation,
   image,
   button
 }) => {
-  const [lineVisible, setLineVisible] = useState(false);
   const leftColumnMd = image ? animatedBorder ? 4 : 6 : animatedBorder ? 10 : 12;
   return /* @__PURE__ */ jsx("div", { className: bem(), children: /* @__PURE__ */ jsxs(
     Grid,
@@ -33,37 +33,27 @@ const ImageText = /* @__PURE__ */ __name(({
         "is-reverse": Boolean(reverse)
       }),
       children: [
-        animatedBorder && /* @__PURE__ */ jsx(GridRow, { className: bem("animated__border__wrapper"), sm: 2, xs: 3, children: /* @__PURE__ */ jsx(
-          Animated,
-          {
-            className: bem("animated__border", {
-              "is-visible": lineVisible,
-              [`${(animatedBorder == null ? void 0 : animatedBorder.direction) ?? "top-to-bottom"}`]: !!(animatedBorder == null ? void 0 : animatedBorder.direction)
-            }),
-            onAnimate: /* @__PURE__ */ __name((visible) => setLineVisible(visible), "onAnimate")
-          }
-        ) }),
         /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: leftColumnMd, xs: 10, children: /* @__PURE__ */ jsxs(Animated, { children: [
-          subTitle && /* @__PURE__ */ jsx(
+          isString(subTitle) && /* @__PURE__ */ jsx(
             Headline,
             {
               highlight: true,
-              className: bem("sub__headline", void 0, subTitle == null ? void 0 : subTitle.className),
               size: "sm",
               type: "h3",
               variant: "primary",
-              ...subTitle,
-              children: subTitle == null ? void 0 : subTitle.content
+              ...subTitleProps,
+              className: bem("sub__headline", void 0, subTitleProps == null ? void 0 : subTitleProps.className),
+              children: subTitle
             }
           ),
           /* @__PURE__ */ jsx(
             Headline,
             {
-              className: bem("headline", void 0, title == null ? void 0 : title.className),
               size: "lg",
               type: "h2",
-              ...title,
-              children: title.content
+              ...titleProps,
+              className: bem("headline", void 0, titleProps == null ? void 0 : titleProps.className),
+              children: title
             }
           ),
           isString(content) && /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }),
@@ -76,19 +66,13 @@ const ImageText = /* @__PURE__ */ __name(({
             }
           )
         ] }) }),
-        image && /* @__PURE__ */ jsx(GridRow, { className: bem("image"), md: 6, xs: 10, children: /* @__PURE__ */ jsx(
-          Animated,
+        image && /* @__PURE__ */ jsx(GridRow, { className: bem("image"), md: 6, xs: 10, children: /* @__PURE__ */ jsx(Animated, { className: bem("animated__container"), children: isString(animation) ? /* @__PURE__ */ jsx(
+          Lottie,
           {
-            className: bem("animated__container"),
-            children: animation ? /* @__PURE__ */ jsx(
-              Lottie,
-              {
-                animationName: animation,
-                className: bem("animation")
-              }
-            ) : /* @__PURE__ */ jsx(Image, { className: bem("image__src"), ...image })
+            animation,
+            className: bem("animation")
           }
-        ) })
+        ) : /* @__PURE__ */ jsx(Image, { className: bem("image__src"), ...image }) }) })
       ]
     }
   ) });

package/dist/components/image-text/ImageText.module.scss.js

@@ -3,10 +3,6 @@ const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-ImageText__grid": "prokodo-ImageText__grid",
   "prokodo-ImageText__grid--is-reverse": "prokodo-ImageText__grid--is-reverse",
-  "prokodo-ImageText__animated__border": "prokodo-ImageText__animated__border",
-  "prokodo-ImageText__animated__border--bottom-to-top": "prokodo-ImageText__animated__border--bottom-to-top",
-  "prokodo-ImageText__animated__border--is-visible": "prokodo-ImageText__animated__border--is-visible",
-  "prokodo-ImageText__animated__border__wrapper": "prokodo-ImageText__animated__border__wrapper",
   "prokodo-ImageText__sub__headline": "prokodo-ImageText__sub__headline",
   "prokodo-ImageText__content": "prokodo-ImageText__content",
   "prokodo-ImageText__content__paragraph": "prokodo-ImageText__content__paragraph",

package/dist/components/input/Input.client.js

@@ -0,0 +1,105 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback, useMemo } from "react";
+import { isNull, isNumber } from "../../helpers/validations.js";
+import { InputView } from "./Input.view.js";
+import { handleValidation } from "./InputValidation.js";
+function InputClient({
+  multiline,
+  isFocused,
+  type: rawType = "text",
+  name,
+  value,
+  required,
+  min,
+  max,
+  maxLength,
+  customRegexPattern,
+  errorText,
+  errorTranslations,
+  onValidate,
+  onChange,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const [focused, setFocused] = useState(false);
+  const [val, setVal] = useState(value);
+  const [err, setErr] = useState(errorText);
+  useEffect(() => {
+    if (!isNull(value)) setVal(value);
+  }, [value]);
+  const handleChange = useCallback(
+    (e) => {
+      const v = e.target.value;
+      if (isNumber(maxLength) && v.length > maxLength) return;
+      setVal(v);
+      const minInt = rawType === "number" ? min : void 0;
+      const maxInt = rawType === "number" ? max : void 0;
+      handleValidation(
+        Boolean(multiline) ? "text" : rawType,
+        name,
+        v,
+        required,
+        minInt,
+        maxInt,
+        customRegexPattern,
+        errorTranslations,
+        (n, error) => {
+          setErr(error);
+          onValidate == null ? void 0 : onValidate(n, error);
+        }
+      );
+      onChange == null ? void 0 : onChange(e);
+    },
+    [
+      multiline,
+      rawType,
+      name,
+      required,
+      min,
+      max,
+      maxLength,
+      customRegexPattern,
+      errorTranslations,
+      onValidate,
+      onChange
+    ]
+  );
+  const handleFocus = useCallback((e) => {
+    setFocused(true);
+    onFocus == null ? void 0 : onFocus(e);
+  }, [onFocus]);
+  const handleBlur = useCallback((e) => {
+    setFocused(false);
+    onBlur == null ? void 0 : onBlur(e);
+  }, [onBlur]);
+  const viewBase = useMemo(() => ({
+    ...rest,
+    name,
+    isFocused: isFocused !== void 0 ? Boolean(isFocused) : focused,
+    value: val,
+    errorText: err,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }), [isFocused, focused, val, err, name, handleChange, handleFocus, handleBlur, rest]);
+  const viewProps = Boolean(multiline) ? {
+    ...viewBase,
+    multiline: true
+  } : {
+    ...viewBase,
+    type: rawType,
+    rows: void 0,
+    minRows: void 0,
+    maxRows: void 0
+  };
+  return /* @__PURE__ */ jsx(InputView, { ...viewProps });
+}
+__name(InputClient, "InputClient");
+const InputClient$1 = memo(InputClient);
+export {
+  InputClient$1 as default
+};

package/dist/components/input/Input.js

@@ -1,205 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Input as Input$1 } from "@mui/base";
-import { memo, useState, useEffect, useCallback } from "react";
-import { create } from "../../helpers/bem.js";
-import { isNull, isString } from "../../helpers/validations.js";
-import styles from "./Input.module.scss.js";
-import { handleValidation } from "./InputValidation.js";
-import { Label } from "../label/Label.js";
-const bem = create(styles, "Input");
-const Input = memo(
-  ({
-    fullWidth,
-    inputRef,
-    hideCounter,
-    type,
-    color = "primary",
-    value,
-    name,
-    min,
-    max,
-    multiline,
-    maxRows,
-    minRows,
-    rows,
-    disabled,
-    maxLength,
-    placeholder,
-    label,
-    customRegexPattern,
-    errorTranslations,
-    labelProps = {},
-    className,
-    fieldClassName,
-    inputContainerClassName,
-    inputClassName,
-    required,
-    hideLegend,
-    errorText,
-    helperText,
-    onFocus,
-    onBlur,
-    onChange,
-    onValidate,
-    ...props
-  }) => {
-    var _a, _b;
-    const [Value, setValue] = useState(value);
-    const [focused, setFocused] = useState(false);
-    useEffect(() => {
-      if (!isNull(value)) {
-        setValue(value);
-      }
-    }, [value]);
-    const renderPlaceholder = useCallback(() => {
-      switch (type) {
-        case "url":
-          return "www.example.com";
-        case "email":
-          return "muster@example.com";
-        case "tel":
-          return "+49123456789";
-        case "color":
-          return "#FFFFFF";
-        default:
-          return placeholder;
-      }
-    }, [type, placeholder]);
-    const isError = isString(errorText);
-    const isRequired = required === true;
-    const inputProps = Boolean(multiline) ? {
-      multiline,
-      maxRows,
-      minRows: minRows ?? 3,
-      rows
-    } : {
-      multiline: false,
-      maxRows: void 0,
-      minRows: void 0,
-      type
-    };
-    return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [color]: !!color }, className), children: [
-      isString(label) && /* @__PURE__ */ jsx(
-        Label,
-        {
-          ...labelProps,
-          className: bem("label", void 0, labelProps == null ? void 0 : labelProps.className),
-          error: isError,
-          htmlFor: name,
-          label,
-          required: isRequired
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: bem("field", void 0, fieldClassName), children: /* @__PURE__ */ jsx(
-        Input$1,
-        {
-          "aria-required": isRequired ? "true" : void 0,
-          color,
-          id: name,
-          ...props,
-          ...inputProps,
-          "aria-invalid": isError,
-          disabled,
-          error: isError,
-          name,
-          placeholder: renderPlaceholder(),
-          required: isRequired,
-          value: Value ?? "",
-          "aria-describedby": isError ? `${name}-error` : isString(helperText) ? `${name}-helper` : void 0,
-          className: bem(
-            "input",
-            {
-              focused,
-              multiline: Boolean(multiline),
-              disabled: Boolean(disabled),
-              fullWidth: Boolean(fullWidth)
-            },
-            inputContainerClassName
-          ),
-          slotProps: {
-            input: {
-              ref: inputRef,
-              className: bem(
-                "input__node",
-                {
-                  multiline: Boolean(multiline)
-                },
-                inputClassName
-              )
-            }
-          },
-          onBlur: /* @__PURE__ */ __name((e) => {
-            onBlur == null ? void 0 : onBlur(e);
-            setFocused(false);
-          }, "onBlur"),
-          onChange: /* @__PURE__ */ __name((e) => {
-            var _a2, _b2;
-            const { value: value2 } = e.target;
-            if (maxLength !== void 0 && value2.length > maxLength) return;
-            setValue(e.target.value);
-            (_b2 = handleValidation) == null ? void 0 : _b2(
-              type === void 0 ? "text" : type,
-              name,
-              (_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value,
-              required,
-              min,
-              max,
-              customRegexPattern,
-              errorTranslations,
-              onValidate
-            );
-            if (onChange) {
-              onChange(e);
-            }
-          }, "onChange"),
-          onFocus: /* @__PURE__ */ __name((e) => {
-            onFocus == null ? void 0 : onFocus(e);
-            setFocused(true);
-          }, "onFocus")
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
-        isError || isString(helperText) || max !== void 0 && Value !== void 0 ? /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "aria-live": isError ? "assertive" : "polite",
-            className: bem("helperText"),
-            id: isError ? `${name}-error` : `${name}-helper`,
-            role: isError ? "alert" : void 0,
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  role: "alert",
-                  className: bem("helperText__content", {
-                    "is-error": Boolean(errorText)
-                  }),
-                  children: errorText ?? helperText
-                }
-              ),
-              max !== void 0 && Value !== void 0 && hideLegend === false && /* @__PURE__ */ jsxs("span", { className: bem("helperText__legend"), children: [
-                ((_a = Value == null ? void 0 : Value.toString()) == null ? void 0 : _a.length) ?? 0,
-                " / ",
-                max
-              ] })
-            ]
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: bem("helperText") }),
-        maxLength !== void 0 && type !== "number" && (hideCounter === void 0 || hideCounter === false) && /* @__PURE__ */ jsx("div", { className: bem("counter"), children: /* @__PURE__ */ jsxs("span", { children: [
-          "(",
-          value !== void 0 ? ((_b = String(value)) == null ? void 0 : _b.length) ?? 0 : 0,
-          " /",
-          " ",
-          maxLength,
-          ")"
-        ] }) })
-      ] })
-    ] });
-  }
-);
-Input.displayName = "Input";
+import { createIsland } from "../../helpers/createIsland.js";
+import InputServer from "./Input.server.js";
+const Input = createIsland({
+  name: "Input",
+  Server: InputServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Input.lazy.js"), "loadLazy")
+});
 export {
   Input
 };

package/dist/components/input/Input.lazy.js

@@ -0,0 +1,12 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import InputClient from "./Input.client.js";
+import InputServer from "./Input.server.js";
+const Input_lazy = createLazyWrapper({
+  name: "Input",
+  Client: InputClient,
+  Server: InputServer
+});
+export {
+  Input_lazy as default
+};

package/dist/components/input/Input.module.scss.js

@@ -1,15 +1,13 @@
-const Input__field = "Input__field";
 const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Input": "prokodo-Input",
   "prokodo-Input__label": "prokodo-Input__label",
-  "prokodo-Input--primary": "prokodo-Input--primary",
-  Input__field,
-  "prokodo-Input--secondary": "prokodo-Input--secondary",
-  "prokodo-Input--error": "prokodo-Input--error",
+  "prokodo-Input__label--is-focused": "prokodo-Input__label--is-focused",
+  "prokodo-Input__inner": "prokodo-Input__inner",
   "prokodo-Input__field": "prokodo-Input__field",
   "prokodo-Input__input": "prokodo-Input__input",
+  "prokodo-Input__input--is-focused": "prokodo-Input__input--is-focused",
   "prokodo-Input__input--multiline": "prokodo-Input__input--multiline",
   "prokodo-Input__input--focused": "prokodo-Input__input--focused",
   "prokodo-Input__input--disabled": "prokodo-Input__input--disabled",
@@ -26,7 +24,6 @@ const styles = {
   fadeInKeyframe
 };
 export {
-  Input__field,
   styles as default,
   fadeInKeyframe,
   gradientMove

package/dist/components/input/Input.server.js

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { InputView } from "./Input.view.js";
+function InputServer(p) {
+  return /* @__PURE__ */ jsx(InputView, { ...p, readOnly: true });
+}
+__name(InputServer, "InputServer");
+export {
+  InputServer as default
+};

package/dist/components/input/Input.view.js

@@ -0,0 +1,128 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./Input.module.scss.js";
+import { Label } from "../label/Label.js";
+const bem = create(styles, "Input");
+function InputView({
+  name,
+  label,
+  disabled,
+  placeholder,
+  isFocused,
+  labelProps = {},
+  value,
+  helperText,
+  errorText,
+  required,
+  fullWidth,
+  multiline,
+  maxLength,
+  className,
+  fieldClassName,
+  inputContainerClassName,
+  inputClassName,
+  rows,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  minRows,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  maxRows,
+  type = "text",
+  ...rest
+}) {
+  delete rest.onValidate;
+  delete rest.errorTranslations;
+  const isError = typeof errorText === "string";
+  const hasValue = value !== void 0 && value !== "" || Boolean(placeholder);
+  const hasHelperText = isString(helperText);
+  const errorId = isError ? `${name}-error` : void 0;
+  const helperId = !isError && hasHelperText ? `${name}-helper` : void 0;
+  const describedBy = [errorId, helperId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: bem("inner"), children: [
+      typeof label === "string" && /* @__PURE__ */ jsx(
+        Label,
+        {
+          ...labelProps,
+          error: isError,
+          htmlFor: name,
+          label,
+          required,
+          className: bem("label", {
+            "is-focused": Boolean(isFocused) || hasValue
+          }, labelProps.className)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: bem("field", void 0, fieldClassName), children: /* @__PURE__ */ jsx("div", { className: bem("input", {
+        "is-focused": Boolean(isFocused),
+        disabled: Boolean(disabled),
+        multiline: Boolean(multiline),
+        fullWidth: Boolean(fullWidth)
+      }, inputContainerClassName), children: Boolean(multiline) ? /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ...rest,
+          "aria-describedby": describedBy,
+          "aria-invalid": isError,
+          "aria-required": required,
+          className: bem("input__node", { multiline: true }, inputClassName),
+          disabled,
+          id: name,
+          name,
+          placeholder,
+          rows
+        }
+      ) : /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          "aria-describedby": describedBy,
+          "aria-invalid": isError,
+          "aria-required": required,
+          disabled,
+          id: name,
+          name,
+          placeholder,
+          type,
+          value: value ?? "",
+          className: bem(
+            "input__node",
+            { multiline: false },
+            inputClassName
+          )
+        }
+      ) }) })
+    ] }),
+    (isError || hasHelperText || typeof maxLength === "number") && /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
+      (isError || hasHelperText) && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-live": isError ? "assertive" : "polite",
+          className: bem("helperText"),
+          id: errorId ?? helperId,
+          role: isError ? "alert" : void 0,
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: bem("helperText__content", {
+                "is-error": isError
+              }),
+              children: errorText ?? helperText
+            }
+          )
+        }
+      ),
+      typeof maxLength === "number" && /* @__PURE__ */ jsx("div", { className: bem("counter"), children: /* @__PURE__ */ jsxs("span", { children: [
+        value != null ? String(value).length : 0,
+        " / ",
+        maxLength
+      ] }) })
+    ] })
+  ] });
+}
+__name(InputView, "InputView");
+export {
+  InputView
+};

package/dist/components/input/InputValidation.js

@@ -31,7 +31,7 @@ const handleValidation = /* @__PURE__ */ __name((type, name, value, required, mi
   const minMaxError = handleValidationMinMax(value, min, max, errorTranslations);
   if (minMaxError !== void 0) return onValidate(name, minMaxError);
   let regexPatterns = {
-    text: /^[a-zA-Z\s,.!?'-]+$/,
+    // text: /^[a-zA-Z\s,.!?'-]+$/,
     email: /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x21\x23-\x5b\x5d-\x7e]|\\[\x21-\x7e])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}|(?:\[(?:(?:2(?:5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(?:2(?:5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x21-\x5a\x53-\x7e]|\\[\x21-\x7e])+)])$/i,
     tel: /^\+?[1-9]\d{1,14}$/,
     url: /^(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})$/,
@@ -51,7 +51,7 @@ const handleValidation = /* @__PURE__ */ __name((type, name, value, required, mi
     }
   }
   const errorMessages = {
-    text: "Text can only include letters and common punctuation.",
+    // text: "Text can only include letters and common punctuation.",
     email: "Please enter a valid email address (e.g., name@example.com).",
     tel: "Please enter a valid phone number.",
     url: "Please enter a valid URL.",

package/dist/components/inputOTP/InputOTP.js

@@ -3,7 +3,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useState, useRef, createElement } from "react";
 import { create } from "../../helpers/bem.js";
-import { isArray } from "../../helpers/validations.js";
 import styles from "./InputOTP.module.scss.js";
 import { Input } from "../input/Input.js";
 const bem = create(styles, "InputOTP");
@@ -33,17 +32,6 @@ const InputOTP = memo(
         onComplete(newOtp.join(""));
       }
     }, "handleChange");
-    const handleKeyDown = /* @__PURE__ */ __name((e, index) => {
-      var _a, _b, _c;
-      if (e.key === "Backspace" && index > 0 && isArray(otp) && otp[index] !== void 0) {
-        (_a = inputs.current[index - 1]) == null ? void 0 : _a.focus();
-      }
-      if (e.key === "ArrowLeft" && index > 0) {
-        (_b = inputs.current[index - 1]) == null ? void 0 : _b.focus();
-      } else if (e.key === "ArrowRight" && index < length - 1) {
-        (_c = inputs.current[index + 1]) == null ? void 0 : _c.focus();
-      }
-    }, "handleKeyDown");
     const handlePaste = /* @__PURE__ */ __name((e) => {
       var _a;
       const paste = e.clipboardData.getData("text").slice(0, length).split("");
@@ -97,8 +85,7 @@ const InputOTP = memo(
               inputRef: /* @__PURE__ */ __name((el) => {
                 inputs.current[index] = el;
               }, "inputRef"),
-              onChange: /* @__PURE__ */ __name((e) => handleChange(e.target.value, index), "onChange"),
-              onKeyDown: /* @__PURE__ */ __name((e) => handleKeyDown(e, index), "onKeyDown")
+              onChange: /* @__PURE__ */ __name((e) => handleChange(e.target.value, index), "onChange")
             }
           ))
         ]