@digigov/form 2.0.0-4be8f7cc → 2.0.0-5701c39b

package/cjs/inputs/Input/index.js

@@ -1,76 +1,112 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Input_exports = {};
+__export(Input_exports, {
+  Input: () => Input,
+  default: () => Input_default
 });
-exports["default"] = exports.Input = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _reactHookForm = require("react-hook-form");
-var _Hint = require("@digigov/react-core/cjs/Hint");
-var _TextArea = _interopRequireDefault(require("@digigov/react-core/cjs/TextArea"));
-var _TextInput = _interopRequireDefault(require("@digigov/react-core/cjs/TextInput"));
-var _i18n = require("@digigov/ui/cjs/i18n");
-var _excluded = ["name", "control", "type", "extra"];
-var TYPES_MAP = {
-  string: 'text',
-  "int": 'text',
-  text: 'text',
-  date: 'date'
+module.exports = __toCommonJS(Input_exports);
+var import_react = __toESM(require("react"));
+var import_react_hook_form = require("react-hook-form");
+var import_utils = require("@digigov/form/utils");
+var import_TextArea = require("@digigov/ui/form/TextArea");
+var import_TextInput = require("@digigov/ui/form/TextInput");
+var import_i18n = require("@digigov/ui/i18n");
+var import_Hint = require("@digigov/ui/typography/Hint");
+const TYPES_MAP = {
+  string: "text",
+  password: "password",
+  int: "text",
+  text: "text",
+  date: "date"
 };
-var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function WrappedInput(_ref, ref) {
-  var name = _ref.name,
-    control = _ref.control,
-    type = _ref.type,
-    extra = _ref.extra,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  // eslint-disable-next-line prefer-const
-  var _ref2 = extra || {},
-    _ref2$multiline = _ref2.multiline,
-    multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
-    rows = _ref2.rows,
-    limit = _ref2.limit;
-  var _ref3 = extra || {},
-    className = _ref3.className;
-  // if enforced to multiline use true. Derive from type otherwise.
-  multiline = multiline === true || type === 'text';
-  // use explicit rows value if set. Derive from multiline otherwise.
-  rows = rows || (multiline ? 4 : 1);
-  // translate dilosi type to HTML Input type
-  var fieldType = TYPES_MAP[type || 'text'] || 'text';
-  var _useTranslation = (0, _i18n.useTranslation)(),
-    t = _useTranslation.t;
-  var currentValue = (0, _reactHookForm.useWatch)({
-    control: control,
-    name: name
-  });
-  if (multiline === true) {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextArea["default"], (0, _extends2["default"])({
-      name: name,
-      className: className,
-      rows: rows,
-      ref: ref
-    }, (0, _extends2["default"])({}, props, {
-      reset: undefined,
-      required: undefined,
-      type: fieldType
-    }))), (limit === null || limit === void 0 ? void 0 : limit.max) && /*#__PURE__*/_react["default"].createElement(_Hint.Hint, null, currentValue === undefined || (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) >= 0 && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) <= (limit === null || limit === void 0 ? void 0 : limit.max) ? /*#__PURE__*/_react["default"].createElement("span", null, t('form.info.text.you_have'), ' ', /*#__PURE__*/_react["default"].createElement("b", null, !currentValue ? limit.max : (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length)), ' ', currentValue && (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.remaining'), ".") : /*#__PURE__*/_react["default"].createElement("span", {
-      style: {
-        color: '#b60202'
+const Input = import_react.default.forwardRef(
+  function WrappedInput({ name, control, type, extra, ...props }, ref) {
+    let { multiline = false, rows, limit } = extra || {};
+    const { className } = extra || {};
+    multiline = multiline === true || type === "text";
+    rows = rows || (multiline ? 4 : 1);
+    const fieldType = TYPES_MAP[type || "text"] || "text";
+    const { t } = (0, import_i18n.useTranslation)();
+    const currentValue = (0, import_react_hook_form.useWatch)({ control, name });
+    const getRemainingChars = (currentValue2, limit2) => {
+      if (currentValue2) {
+        return limit2?.max - currentValue2.length;
       }
-    }, t('form.info.text.you_have'), ' ', /*#__PURE__*/_react["default"].createElement("b", null, currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max)), ' ', (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.too_many'), ".")));
-  } else {
-    return /*#__PURE__*/_react["default"].createElement(_TextInput["default"], (0, _extends2["default"])({
-      name: name,
-      type: fieldType,
-      className: className,
-      ref: ref
-    }, (0, _extends2["default"])({}, props, {
-      reset: undefined,
-      required: undefined
-    })));
+      return limit2?.max;
+    };
+    const constructRemainingText = (currentValue2, limit2) => {
+      const remainingChars = getRemainingChars(currentValue2, limit2);
+      let remainingText = Math.abs(remainingChars) === 1 ? t("form.info.text.character") : t("form.info.text.characters");
+      remainingText += remainingChars > 0 ? ` ${t("form.info.text.remaining")}.` : ` ${t("form.info.text.too_many")}.`;
+      return remainingText;
+    };
+    const transformedProps = (0, import_utils.omit)(props, ["Field", "resetField"]);
+    if (multiline === true) {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        import_TextArea.TextArea,
+        {
+          name,
+          className,
+          rows,
+          ref,
+          id: name,
+          ...{
+            ...transformedProps,
+            reset: void 0,
+            required: void 0,
+            type: fieldType
+          }
+        }
+      ), limit?.max && /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, { display: "flex" }, t("form.info.text.you_have"), /* @__PURE__ */ import_react.default.createElement("strong", null, "\xA0", `${Math.abs(getRemainingChars(currentValue, limit))}`, "\xA0"), constructRemainingText(currentValue, limit)));
+    } else {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_TextInput.TextInput,
+        {
+          name,
+          id: name,
+          type: fieldType,
+          "data-type": type,
+          className,
+          ref,
+          ...{
+            ...transformedProps,
+            reset: void 0,
+            required: void 0
+          }
+        }
+      );
+    }
   }
+);
+var Input_default = Input;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input
 });
-var _default = exports["default"] = Input;
+//# sourceMappingURL=index.js.map

package/cjs/inputs/Input/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/inputs/Input/index.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport type { UseFormReturn } from 'react-hook-form';\nimport { useWatch } from 'react-hook-form';\nimport type { UncontrolledFieldProps } from '@digigov/form/Field/types';\nimport { omit } from '@digigov/form/utils';\nimport { TextArea } from '@digigov/ui/form/TextArea';\nimport { TextInput } from '@digigov/ui/form/TextInput';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nconst TYPES_MAP = {\n  string: 'text',\n  password: 'password',\n  int: 'text',\n  text: 'text',\n  date: 'date',\n};\n\nexport interface InputProps\n  extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {\n  extra?: {\n    fullWidth?: boolean;\n    multiline?: boolean;\n    className?: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    rows?: any;\n    limit: {\n      min?: number;\n      max?: number;\n    };\n  };\n  Field?: UncontrolledFieldProps['Field'];\n  resetField: UseFormReturn['resetField'];\n}\n\nexport const Input: React.ExoticComponent<InputProps> = React.forwardRef(\n  function WrappedInput({ name, control, type, extra, ...props }, ref: never) {\n    // eslint-disable-next-line prefer-const\n    let { multiline = false, rows, limit } = extra || {};\n    const { className } = extra || {};\n    // if enforced to multiline use true. Derive from type otherwise.\n    multiline = multiline === true || type === 'text';\n    // use explicit rows value if set. Derive from multiline otherwise.\n    rows = rows || (multiline ? 4 : 1);\n    // translate dilosi type to HTML Input type\n    const fieldType = TYPES_MAP[type || 'text'] || 'text';\n    const { t } = useTranslation();\n    const currentValue: string | '' = useWatch({ control, name });\n\n    const getRemainingChars = (currentValue, limit) => {\n      if (currentValue) {\n        return limit?.max - currentValue.length;\n      }\n      return limit?.max;\n    };\n\n    const constructRemainingText = (currentValue, limit) => {\n      const remainingChars = getRemainingChars(currentValue, limit);\n      let remainingText =\n        Math.abs(remainingChars) === 1\n          ? t('form.info.text.character')\n          : t('form.info.text.characters');\n      remainingText +=\n        remainingChars > 0\n          ? ` ${t('form.info.text.remaining')}.`\n          : ` ${t('form.info.text.too_many')}.`;\n      return remainingText;\n    };\n\n    const transformedProps = omit(props, ['Field', 'resetField']);\n\n    if (multiline === true) {\n      return (\n        <>\n          <TextArea\n            name={name}\n            className={className}\n            rows={rows}\n            ref={ref as React.RefObject<HTMLTextAreaElement>}\n            id={name}\n            {...{\n              ...transformedProps,\n              reset: undefined,\n              required: undefined,\n              type: fieldType,\n            }}\n          />\n          {limit?.max && (\n            <Hint display={'flex'}>\n              {t('form.info.text.you_have')}\n              <strong>\n                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}\n                &nbsp;\n              </strong>\n              {constructRemainingText(currentValue, limit)}\n            </Hint>\n          )}\n        </>\n      );\n    } else {\n      return (\n        <TextInput\n          name={name}\n          id={name}\n          type={fieldType}\n          data-type={type}\n          className={className}\n          ref={ref as React.RefObject<HTMLInputElement>}\n          {...{\n            ...transformedProps,\n            reset: undefined,\n            required: undefined,\n          }}\n        />\n      );\n    }\n  }\n);\n\nexport default Input;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,6BAAyB;AAEzB,mBAAqB;AACrB,sBAAyB;AACzB,uBAA0B;AAC1B,kBAA+B;AAC/B,kBAAqB;AAErB,MAAM,YAAY;AAAA,EAChB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AACR;AAmBO,MAAM,QAA2C,aAAAA,QAAM;AAAA,EAC5D,SAAS,aAAa,EAAE,MAAM,SAAS,MAAM,OAAO,GAAG,MAAM,GAAG,KAAY;AAE1E,QAAI,EAAE,YAAY,OAAO,MAAM,MAAM,IAAI,SAAS,CAAC;AACnD,UAAM,EAAE,UAAU,IAAI,SAAS,CAAC;AAEhC,gBAAY,cAAc,QAAQ,SAAS;AAE3C,WAAO,SAAS,YAAY,IAAI;AAEhC,UAAM,YAAY,UAAU,QAAQ,MAAM,KAAK;AAC/C,UAAM,EAAE,EAAE,QAAI,4BAAe;AAC7B,UAAM,mBAA4B,iCAAS,EAAE,SAAS,KAAK,CAAC;AAE5D,UAAM,oBAAoB,CAACC,eAAcC,WAAU;AACjD,UAAID,eAAc;AAChB,eAAOC,QAAO,MAAMD,cAAa;AAAA,MACnC;AACA,aAAOC,QAAO;AAAA,IAChB;AAEA,UAAM,yBAAyB,CAACD,eAAcC,WAAU;AACtD,YAAM,iBAAiB,kBAAkBD,eAAcC,MAAK;AAC5D,UAAI,gBACF,KAAK,IAAI,cAAc,MAAM,IACzB,EAAE,0BAA0B,IAC5B,EAAE,2BAA2B;AACnC,uBACE,iBAAiB,IACb,IAAI,EAAE,0BAA0B,CAAC,MACjC,IAAI,EAAE,yBAAyB,CAAC;AACtC,aAAO;AAAA,IACT;AAEA,UAAM,uBAAmB,mBAAK,OAAO,CAAC,SAAS,YAAY,CAAC;AAE5D,QAAI,cAAc,MAAM;AACtB,aACE,6BAAAF,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACH,GAAG;AAAA,YACF,GAAG;AAAA,YACH,OAAO;AAAA,YACP,UAAU;AAAA,YACV,MAAM;AAAA,UACR;AAAA;AAAA,MACF,GACC,OAAO,OACN,6BAAAA,QAAA,cAAC,oBAAK,SAAS,UACZ,EAAE,yBAAyB,GAC5B,6BAAAA,QAAA,cAAC,gBAAO,QACC,GAAG,KAAK,IAAI,kBAAkB,cAAc,KAAK,CAAC,CAAC,IAAG,MAE/D,GACC,uBAAuB,cAAc,KAAK,CAC7C,CAEJ;AAAA,IAEJ,OAAO;AACL,aACE,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI;AAAA,UACJ,MAAM;AAAA,UACN,aAAW;AAAA,UACX;AAAA,UACA;AAAA,UACC,GAAG;AAAA,YACF,GAAG;AAAA,YACH,OAAO;AAAA,YACP,UAAU;AAAA,UACZ;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;",
+  "names": ["React", "currentValue", "limit"]
+}

package/cjs/inputs/Label/index.js

@@ -1,29 +1,50 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Label_exports = {};
+__export(Label_exports, {
+  Label: () => Label,
+  default: () => Label_default
 });
-exports["default"] = exports.Label = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Hint = _interopRequireDefault(require("@digigov/react-core/cjs/Hint"));
-var _LabelTitle = _interopRequireDefault(require("@digigov/react-core/cjs/LabelTitle"));
-var _i18n = require("@digigov/ui/cjs/i18n");
-var Label = exports.Label = function Label(_ref) {
-  var className = _ref.className,
-    label = _ref.label,
-    value = _ref.value;
-  var _useTranslation = (0, _i18n.useTranslation)(),
-    t = _useTranslation.t;
+module.exports = __toCommonJS(Label_exports);
+var import_react = __toESM(require("react"));
+var import_LabelContainer = require("@digigov/ui/form/LabelContainer");
+var import_i18n = require("@digigov/ui/i18n");
+var import_Hint = require("@digigov/ui/typography/Hint");
+const Label = ({ className, label, value }) => {
+  const { t } = (0, import_i18n.useTranslation)();
   if ((!label || label && !label.primary && !label.secondary) && !value) {
     return null;
   }
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LabelTitle["default"], {
-    className: className,
-    size: "sm"
-  }, label && label.primary && t(label.primary) || value), label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary)));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_LabelContainer.LabelTitle, { className, size: "sm" }, label && label.primary && t(label.primary) || value), label && label.secondary && /* @__PURE__ */ import_react.default.createElement(import_Hint.Hint, null, t(label.secondary)));
 };
-Label.defaultProps = {
-  label: {}
-};
-var _default = exports["default"] = Label;
+var Label_default = Label;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Label
+});
+//# sourceMappingURL=index.js.map

package/cjs/inputs/Label/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/inputs/Label/index.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport type { FieldLabelProps } from '@digigov/form/types';\nimport { LabelTitle } from '@digigov/ui/form/LabelContainer';\nimport { useTranslation } from '@digigov/ui/i18n';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport interface FieldOptionProps {\n  label?: FieldLabelProps;\n  value: string;\n  show?: string[];\n  disabled?: boolean;\n  selected?: () => React.ReactNode;\n  divider?: string;\n}\n\nexport interface LabelProps {\n  primary?: string;\n  secondary?: string;\n  className?: string;\n  value?: string;\n  label?: FieldLabelProps;\n}\n\nexport const Label: React.FC<LabelProps> = ({ className, label, value }) => {\n  const { t } = useTranslation();\n  if ((!label || (label && !label.primary && !label.secondary)) && !value) {\n    return null;\n  }\n  return (\n    <>\n      <LabelTitle className={className} size=\"sm\">\n        {(label && label.primary && t(label.primary)) || value}\n      </LabelTitle>\n      {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}\n    </>\n  );\n};\n\nexport default Label;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,4BAA2B;AAC3B,kBAA+B;AAC/B,kBAAqB;AAmBd,MAAM,QAA8B,CAAC,EAAE,WAAW,OAAO,MAAM,MAAM;AAC1E,QAAM,EAAE,EAAE,QAAI,4BAAe;AAC7B,OAAK,CAAC,SAAU,SAAS,CAAC,MAAM,WAAW,CAAC,MAAM,cAAe,CAAC,OAAO;AACvE,WAAO;AAAA,EACT;AACA,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,oCAAW,WAAsB,MAAK,QACnC,SAAS,MAAM,WAAW,EAAE,MAAM,OAAO,KAAM,KACnD,GACC,SAAS,MAAM,aAAa,6BAAAA,QAAA,cAAC,wBAAM,EAAE,MAAM,SAAS,CAAE,CACzD;AAEJ;AAEA,IAAO,gBAAQ;",
+  "names": ["React"]
+}

package/cjs/inputs/OtpInput/index.js

@@ -1,151 +1,186 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var OtpInput_exports = {};
+__export(OtpInput_exports, {
+  OtpInput: () => OtpInput,
+  REMOVE_SPACES: () => REMOVE_SPACES,
+  RE_DIGIT: () => RE_DIGIT,
+  default: () => OtpInput_default,
+  useOtp: () => useOtp
 });
-exports["default"] = exports.RE_DIGIT = exports.REMOVE_SPACES = exports.OtpInput = void 0;
-exports.useOtp = useOtp;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _SingleCharacterInputs = _interopRequireWildcard(require("@digigov/ui/cjs/form/SingleCharacterInputs"));
-var _excluded = ["name", "maxLength"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var RE_DIGIT = exports.RE_DIGIT = new RegExp(/^\d+$/);
-var REMOVE_SPACES = exports.REMOVE_SPACES = new RegExp(/\s+/g);
+module.exports = __toCommonJS(OtpInput_exports);
+var import_react = __toESM(require("react"));
+var import_SingleCharacterInputs = __toESM(require("@digigov/ui/form/SingleCharacterInputs"));
+const RE_DIGIT = new RegExp(/^\d+$/);
+const REMOVE_SPACES = new RegExp(/\s+/g);
 function useOtp(onChange, maxLength) {
-  var _useState = (0, _react.useState)(Array(maxLength).fill('')),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    otpValues = _useState2[0],
-    setOtpValues = _useState2[1];
-  var handleChange = (0, _react.useCallback)(function (otp) {
-    setOtpValues(otp);
-    var otpValue = otp.join('');
-    onChange(otpValue);
-  }, [onChange]);
-  var setOtp = function setOtp(item, idx) {
-    var updatedOTPValues = (0, _toConsumableArray2["default"])(otpValues);
+  const [otpValues, setOtpValues] = (0, import_react.useState)(Array(maxLength).fill(""));
+  const handleChange = (0, import_react.useCallback)(
+    (otp) => {
+      setOtpValues(otp);
+      const otpValue = otp.join("");
+      onChange(otpValue);
+    },
+    [onChange]
+  );
+  const setOtp = (item, idx) => {
+    const updatedOTPValues = [...otpValues];
     if (item.length === 1 || item.length === 0) {
-      updatedOTPValues[idx] = item[0] || '';
+      updatedOTPValues[idx] = item[0] || "";
       handleChange(updatedOTPValues);
     } else if (item.length === maxLength) {
-      var valueArray = item.split('').slice(0, maxLength);
+      const valueArray = item.split("").slice(0, maxLength);
       handleChange(valueArray);
     }
   };
-  var setSelectionRange = (0, _react.useCallback)(function (target) {
+  const setSelectionRange = (0, import_react.useCallback)((target) => {
     return target.setSelectionRange(0, target.value.length);
   }, []);
-  var focusToNextInput = (0, _react.useCallback)(function (target) {
-    var nextElement = target.nextElementSibling;
+  const focusToNextInput = (0, import_react.useCallback)((target) => {
+    const nextElement = target.nextElementSibling;
     if (nextElement) {
       nextElement.focus();
     }
   }, []);
-  var focusToPrevInput = (0, _react.useCallback)(function (target) {
-    var previousElement = target.previousElementSibling;
+  const focusToPrevInput = (0, import_react.useCallback)((target) => {
+    const previousElement = target.previousElementSibling;
     if (previousElement) {
       previousElement.focus();
     }
   }, []);
-  var handleKeyDown = (0, _react.useCallback)(function (e, idx) {
-    var key = e.key;
-    var target = e.target;
-    var targetValue = target.value;
-    setSelectionRange(target);
-    if (key === 'ArrowRight' || key === 'ArrowDown') {
-      e.preventDefault();
-      return focusToNextInput(target);
-    }
-    if (key === 'ArrowLeft' || key === 'ArrowUp') {
-      e.preventDefault();
-      return focusToPrevInput(target);
-    }
-    if (e.key === 'Backspace' || e.key === 'Delete') {
-      if (targetValue !== '') {
-        targetValue = '';
-      } else {
-        focusToPrevInput(target);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e, idx) => {
+      const { key } = e;
+      const target = e.target;
+      let targetValue = target.value;
+      setSelectionRange(target);
+      if (key === "ArrowRight" || key === "ArrowDown") {
+        e.preventDefault();
+        return focusToNextInput(target);
       }
-      setOtp(targetValue, idx);
-      return e.preventDefault();
-    }
-  }, [setOtp, focusToPrevInput, focusToNextInput]);
-  var handleFocus = (0, _react.useCallback)(function (e) {
-    var target = e.target;
-    setSelectionRange(target);
-  }, [setSelectionRange]);
-  var handleOtpChange = (0, _react.useCallback)(function (e, idx) {
-    var target = e.target;
-    var targetValue = target.value;
-    var isTargetValueDigit = RE_DIGIT.test(targetValue);
-    // We want to pass the empty string when the value is deleted
-    // emptry string replaces the deleted value
-    if (isTargetValueDigit || targetValue === '') {
-      setOtp(targetValue, idx);
-      if (target.value.length > 1) {
-        target.blur();
+      if (key === "ArrowLeft" || key === "ArrowUp") {
+        e.preventDefault();
+        return focusToPrevInput(target);
       }
-      focusToNextInput(target);
-    }
-  }, [setOtp, handleKeyDown, handleFocus]);
-  var handlePaste = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-    var pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
-    if (pastedData) {
-      setOtp(pastedData, 0);
-    }
-  }, []);
+      if (e.key === "Backspace" || e.key === "Delete") {
+        if (targetValue !== "") {
+          targetValue = "";
+        } else {
+          focusToPrevInput(target);
+        }
+        setOtp(targetValue, idx);
+        return e.preventDefault();
+      }
+    },
+    [setOtp, focusToPrevInput, focusToNextInput]
+  );
+  const handleFocus = (0, import_react.useCallback)(
+    (e) => {
+      const { target } = e;
+      setSelectionRange(target);
+    },
+    [setSelectionRange]
+  );
+  const handleOtpChange = (0, import_react.useCallback)(
+    (e, idx) => {
+      const target = e.target;
+      const targetValue = target.value;
+      const isTargetValueDigit = RE_DIGIT.test(targetValue);
+      if (isTargetValueDigit || targetValue === "") {
+        setOtp(targetValue, idx);
+        if (target.value.length > 1) {
+          target.blur();
+        }
+        focusToNextInput(target);
+      }
+    },
+    [setOtp, handleKeyDown, handleFocus]
+  );
+  const handlePaste = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const pastedData = e.clipboardData.getData("text/plain").replace(REMOVE_SPACES, "");
+      if (pastedData) {
+        setOtp(pastedData, 0);
+      }
+    },
+    []
+  );
   return {
-    otpValues: otpValues,
-    handleOtpChange: handleOtpChange,
-    handleKeyDown: handleKeyDown,
-    handleFocus: handleFocus,
-    handlePaste: handlePaste
+    otpValues,
+    handleOtpChange,
+    handleKeyDown,
+    handleFocus,
+    handlePaste
   };
 }
-var SingleCharacterInputPart = function SingleCharacterInputPart(_ref) {
-  var props = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
-  return /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, props);
-};
-var OtpInput = exports.OtpInput = function OtpInput(_ref2) {
-  var name = _ref2.name,
-    _ref2$maxLength = _ref2.maxLength,
-    maxLength = _ref2$maxLength === void 0 ? 6 : _ref2$maxLength,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  var otp = useOtp(props.onChange, maxLength);
-  return /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs["default"], null, otp.otpValues.map(function (digit, idx) {
-    return /*#__PURE__*/_react["default"].createElement(SingleCharacterInputPart, {
-      name: "".concat(name, "-").concat(idx),
-      type: "text",
-      key: idx,
-      autoComplete: "one-time-code",
-      pattern: "\\d{1}",
-      maxLength: maxLength,
-      value: digit,
-      disabled: props.disabled,
-      "aria-required": props['aria-required'],
-      onChange: function onChange(e) {
-        return otp.handleOtpChange(e, idx);
-      },
-      onInput: function onInput(e) {
-        if (e.target.value === digit) {
-          otp.handleOtpChange(e, idx);
-        }
-      },
-      onKeyDown: function onKeyDown(e) {
-        return otp.handleKeyDown(e, idx);
-      },
-      onFocus: otp.handleFocus,
-      onPaste: otp.handlePaste,
-      error: !digit ? props.error : false
-    });
-  }));
-};
-var _default = exports["default"] = OtpInput;
+const SingleCharacterInputPart = import_react.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_SingleCharacterInputs.SingleCharacterInput, { ...props, ref });
+});
+SingleCharacterInputPart.displayName = "SingleCharacterInputPart";
+const OtpInput = import_react.default.forwardRef(
+  ({ name, maxLength = 6, ...props }, ref) => {
+    const otp = useOtp(props.onChange, maxLength);
+    return /* @__PURE__ */ import_react.default.createElement(import_SingleCharacterInputs.default, null, otp.otpValues.map((digit, idx) => /* @__PURE__ */ import_react.default.createElement(
+      SingleCharacterInputPart,
+      {
+        ref: idx === 0 ? ref : null,
+        name: `${name}-${idx}`,
+        id: `${name}-${idx}`,
+        type: "text",
+        key: idx,
+        autoComplete: "one-time-code",
+        pattern: "\\d{1}",
+        maxLength,
+        value: digit,
+        disabled: props.disabled,
+        "aria-required": props["aria-required"],
+        onChange: (e) => otp.handleOtpChange(e, idx),
+        onInput: (e) => {
+          if (e.target.value === digit) {
+            otp.handleOtpChange(e, idx);
+          }
+        },
+        onKeyDown: (e) => otp.handleKeyDown(e, idx),
+        onFocus: otp.handleFocus,
+        onPaste: otp.handlePaste,
+        error: !digit ? props.error : false
+      }
+    )));
+  }
+);
+OtpInput.displayName = "OtpInput";
+var OtpInput_default = OtpInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OtpInput,
+  REMOVE_SPACES,
+  RE_DIGIT,
+  useOtp
+});
+//# sourceMappingURL=index.js.map