@digigov/form 2.0.0-rc.7 → 2.0.2

package/inputs/OtpInput/index.js

@@ -1,140 +1,123 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["name", "maxLength"];
-import React, { useState, useCallback } from 'react';
-import SingleCharacterInputs, { SingleCharacterInput } from '@digigov/ui/form/SingleCharacterInputs';
-export var RE_DIGIT = new RegExp(/^\d+$/);
-export var REMOVE_SPACES = new RegExp(/\s+/g);
-export function useOtp(onChange, maxLength) {
-  var _useState = useState(Array(maxLength).fill('')),
-    _useState2 = _slicedToArray(_useState, 2),
-    otpValues = _useState2[0],
-    setOtpValues = _useState2[1];
-  var handleChange = useCallback(function (otp) {
-    setOtpValues(otp);
-    var otpValue = otp.join('');
-    onChange(otpValue);
-  }, [onChange]);
-  var setOtp = function setOtp(item, idx) {
-    var updatedOTPValues = _toConsumableArray(otpValues);
-    if (item.length === 1 || item.length === 0) {
-      updatedOTPValues[idx] = item[0] || '';
-      handleChange(updatedOTPValues);
-    } else if (item.length === maxLength) {
-      var valueArray = item.split('').slice(0, maxLength);
-      handleChange(valueArray);
-    }
-  };
-  var setSelectionRange = useCallback(function (target) {
-    return target.setSelectionRange(0, target.value.length);
-  }, []);
-  var focusToNextInput = useCallback(function (target) {
-    var nextElement = target.nextElementSibling;
-    if (nextElement) {
-      nextElement.focus();
-    }
-  }, []);
-  var focusToPrevInput = useCallback(function (target) {
-    var previousElement = target.previousElementSibling;
-    if (previousElement) {
-      previousElement.focus();
-    }
-  }, []);
-  var handleKeyDown = 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);
-      }
-      setOtp(targetValue, idx);
-      return e.preventDefault();
-    }
-  }, [setOtp, focusToPrevInput, focusToNextInput]);
-  var handleFocus = useCallback(function (e) {
-    var target = e.target;
-    setSelectionRange(target);
-  }, [setSelectionRange]);
-  var handleOtpChange = 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();
-      }
-      focusToNextInput(target);
-    }
-  }, [setOtp, handleKeyDown, handleFocus]);
-  var handlePaste = useCallback(function (e) {
-    e.preventDefault();
-    var 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
-  };
-}
-var SingleCharacterInputPart = function SingleCharacterInputPart(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(SingleCharacterInput, props);
-};
-export var OtpInput = function OtpInput(_ref2) {
-  var name = _ref2.name,
-    _ref2$maxLength = _ref2.maxLength,
-    maxLength = _ref2$maxLength === void 0 ? 6 : _ref2$maxLength,
-    props = _objectWithoutProperties(_ref2, _excluded);
-  var otp = useOtp(props.onChange, maxLength);
-  return /*#__PURE__*/React.createElement(SingleCharacterInputs, null, otp.otpValues.map(function (digit, idx) {
-    return /*#__PURE__*/React.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);
+import react, { useCallback, useState } from "react";
+import SingleCharacterInputs, { SingleCharacterInput } from "@digigov/ui/form/SingleCharacterInputs/index.js";
+const RE_DIGIT = new RegExp(/^\d+$/);
+const REMOVE_SPACES = new RegExp(/\s+/g);
+function useOtp(onChange, maxLength) {
+    const [otpValues, setOtpValues] = useState(Array(maxLength).fill(''));
+    const handleChange = useCallback((otp)=>{
+        setOtpValues(otp);
+        const otpValue = otp.join('');
+        onChange(otpValue);
+    }, [
+        onChange
+    ]);
+    const setOtp = (item, idx)=>{
+        const updatedOTPValues = [
+            ...otpValues
+        ];
+        if (1 === item.length || 0 === item.length) {
+            updatedOTPValues[idx] = item[0] || '';
+            handleChange(updatedOTPValues);
+        } else if (item.length === maxLength) {
+            const valueArray = item.split('').slice(0, maxLength);
+            handleChange(valueArray);
+        }
+    };
+    const setSelectionRange = useCallback((target)=>target.setSelectionRange(0, target.value.length), []);
+    const focusToNextInput = useCallback((target)=>{
+        const nextElement = target.nextElementSibling;
+        if (nextElement) nextElement.focus();
+    }, []);
+    const focusToPrevInput = useCallback((target)=>{
+        const previousElement = target.previousElementSibling;
+        if (previousElement) previousElement.focus();
+    }, []);
+    const handleKeyDown = useCallback((e, idx)=>{
+        const { key } = e;
+        const target = e.target;
+        let targetValue = target.value;
+        setSelectionRange(target);
+        if ('ArrowRight' === key || 'ArrowDown' === key) {
+            e.preventDefault();
+            return focusToNextInput(target);
+        }
+        if ('ArrowLeft' === key || 'ArrowUp' === key) {
+            e.preventDefault();
+            return focusToPrevInput(target);
         }
-      },
-      onKeyDown: function onKeyDown(e) {
-        return otp.handleKeyDown(e, idx);
-      },
-      onFocus: otp.handleFocus,
-      onPaste: otp.handlePaste,
-      error: !digit ? props.error : false
-    });
-  }));
-};
-export default OtpInput;
+        if ('Backspace' === e.key || 'Delete' === e.key) {
+            if ('' !== targetValue) targetValue = '';
+            else focusToPrevInput(target);
+            setOtp(targetValue, idx);
+            return e.preventDefault();
+        }
+    }, [
+        setOtp,
+        focusToPrevInput,
+        focusToNextInput
+    ]);
+    const handleFocus = useCallback((e)=>{
+        const { target } = e;
+        setSelectionRange(target);
+    }, [
+        setSelectionRange
+    ]);
+    const handleOtpChange = 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 = useCallback((e)=>{
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
+        if (pastedData) setOtp(pastedData, 0);
+    }, []);
+    return {
+        otpValues,
+        handleOtpChange,
+        handleKeyDown,
+        handleFocus,
+        handlePaste
+    };
+}
+const SingleCharacterInputPart = /*#__PURE__*/ react.forwardRef(({ ...props }, ref)=>/*#__PURE__*/ react.createElement(SingleCharacterInput, {
+        ...props,
+        ref: ref
+    }));
+SingleCharacterInputPart.displayName = 'SingleCharacterInputPart';
+const OtpInput_OtpInput = /*#__PURE__*/ react.forwardRef(({ name, maxLength = 6, ...props }, ref)=>{
+    const otp = useOtp(props.onChange, maxLength);
+    return /*#__PURE__*/ react.createElement(SingleCharacterInputs, null, otp.otpValues.map((digit, idx)=>/*#__PURE__*/ react.createElement(SingleCharacterInputPart, {
+            ref: 0 === idx ? ref : null,
+            name: `${name}-${idx}`,
+            id: `${name}-${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: (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 ? false : props.error
+        })));
+});
+OtpInput_OtpInput.displayName = 'OtpInput';
+const OtpInput = OtpInput_OtpInput;
+export { OtpInput_OtpInput as OtpInput, REMOVE_SPACES, RE_DIGIT, OtpInput as default, useOtp };

package/inputs/Radio/index.d.ts

@@ -1,12 +1,19 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+import type { FieldOptionProps } from '../Label/index.js';
 export interface RadioButtonsGroupProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra: {
         className?: string;
-        options: Array<FieldOptionProps>;
+        options: FieldOptionProps[];
         dense?: boolean;
     };
+    fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;
+    resetField: UseFormReturn['resetField'];
 }
 export declare const RadioButtonsGroup: React.FC<RadioButtonsGroupProps>;
+export declare const ControlledRadioButtonsGroup: React.ForwardRefExoticComponent<RadioButtonsGroupProps & {
+    onChange: (e: any) => void;
+    value: any;
+} & React.RefAttributes<HTMLInputElement>>;
 export default RadioButtonsGroup;

package/inputs/Radio/index.js

@@ -1,57 +1,73 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "control", "register", "extra", "disabled"],
-  _excluded2 = ["label", "value", "show", "disabled", "selected"];
-import React from 'react';
-import { useWatch } from 'react-hook-form';
-import { Field } from '@digigov/form';
-import { RadioConditional } from '@digigov/react-core/RadioConditional';
-import Hint from '@digigov/react-core/Hint';
-import RadioContainer from '@digigov/react-core/RadioContainer';
-import RadioItem from '@digigov/react-core/RadioItem';
-import { useTranslation } from '@digigov/ui/i18n';
-export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
-  var name = _ref.name,
-    control = _ref.control,
-    register = _ref.register,
-    _ref$extra = _ref.extra,
-    options = _ref$extra.options,
-    className = _ref$extra.className,
-    disabled = _ref.disabled,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var currentValue = useWatch({
-    control: control,
-    name: name
-  });
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(RadioContainer, {
-    className: className,
-    defaultValue: currentValue,
-    id: name
-  }, options.map(function (_ref2) {
-    var label = _ref2.label,
-      v = _ref2.value,
-      show = _ref2.show,
-      optionDisabled = _ref2.disabled,
-      selected = _ref2.selected,
-      option = _objectWithoutProperties(_ref2, _excluded2);
-    return /*#__PURE__*/React.createElement("div", {
-      key: "".concat(name, ".").concat(v)
-    }, /*#__PURE__*/React.createElement(RadioItem, _extends({}, register(name), {
-      value: v,
-      disabled: disabled || optionDisabled
-    }, option, _extends({}, props, {
-      reset: undefined,
-      required: undefined,
-      'aria-describedby': undefined,
-      type: 'radio'
-    })), label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && /*#__PURE__*/React.createElement(RadioConditional, null, show.map(function (fieldName) {
-      return /*#__PURE__*/React.createElement(Field, {
-        name: fieldName,
-        key: fieldName
-      });
-    })));
-  }));
+import react from "react";
+import { useWatch } from "react-hook-form";
+import { omit } from "../../utils.js";
+import { RadioConditional, RadioContainer, RadioItem } from "@digigov/ui/form/RadioContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+import { Base } from "@digigov/ui/utils/Base/index.js";
+const RadioButtonsGroup = ({ name, control, register, extra: { options, className }, disabled, Field, ...props })=>{
+    const currentValue = useWatch({
+        control,
+        name
+    });
+    const { t } = useTranslation();
+    return /*#__PURE__*/ react.createElement(RadioContainer, {
+        className: className,
+        id: name
+    }, options.map(({ label, value: v, show, disabled: optionDisabled, selected, ...option })=>/*#__PURE__*/ react.createElement(Base, {
+            as: "div",
+            key: `${name}.${v}`
+        }, /*#__PURE__*/ react.createElement(RadioItem, {
+            ...register(name),
+            id: `${name}.${v}`,
+            value: v,
+            disabled: disabled || optionDisabled,
+            ...option,
+            ...omit(props, [
+                'resetField'
+            ]),
+            reset: void 0,
+            required: void 0,
+            error: void 0,
+            'aria-describedby': void 0,
+            type: 'radio'
+        }, label && label.primary && /*#__PURE__*/ react.createElement(Base, {
+            as: "span"
+        }, t(label.primary) || v), label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && Field && /*#__PURE__*/ react.createElement(RadioConditional, null, show.map((fieldName)=>/*#__PURE__*/ react.createElement(Field, {
+                name: fieldName,
+                key: fieldName
+            }))))));
 };
-export default RadioButtonsGroup;
+const Radio_ControlledRadioButtonsGroup = /*#__PURE__*/ react.forwardRef(function({ name, extra: { options, className }, disabled, onChange, value, Field, ...props }, ref) {
+    const currentValue = value;
+    const { t } = useTranslation();
+    return /*#__PURE__*/ react.createElement(RadioContainer, {
+        className: className,
+        id: name
+    }, options.map(({ label, value: v, show, disabled: optionDisabled, selected, ...option }, index)=>/*#__PURE__*/ react.createElement(react.Fragment, {
+            key: `${name}.${v}`
+        }, /*#__PURE__*/ react.createElement(RadioItem, {
+            ref: 0 === index ? ref : void 0,
+            onChange: (e)=>{
+                console.log(e);
+                onChange(e);
+            },
+            id: `${name}.${v}`,
+            value: v,
+            checked: currentValue === v,
+            disabled: disabled || optionDisabled,
+            ...option,
+            ...props,
+            reset: void 0,
+            required: void 0,
+            error: void 0,
+            Field: void 0,
+            'aria-describedby': void 0,
+            type: 'radio'
+        }, label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && /*#__PURE__*/ react.createElement(RadioConditional, null, show.map((fieldName)=>/*#__PURE__*/ react.createElement(Field, {
+                name: fieldName,
+                key: fieldName
+            }))))));
+});
+const Radio = RadioButtonsGroup;
+export { Radio_ControlledRadioButtonsGroup as ControlledRadioButtonsGroup, RadioButtonsGroup, Radio as default };

package/inputs/Select/index.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
-export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+import type { FieldOptionProps } from '../Label/index.js';
+export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
     extra: {
         className?: string;
-        options: Array<FieldOptionProps>;
+        options: FieldOptionProps[];
     };
+    Field?: UncontrolledFieldProps['Field'];
+    resetField: UseFormReturn['resetField'];
 }
 export declare const Select: React.ExoticComponent<SelectProps>;
 export default Select;

package/inputs/Select/index.js

@@ -1,31 +1,24 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "extra", "disabled"];
-import React from 'react';
-import SelectContainer from '@digigov/react-core/SelectContainer';
-import SelectOption from '@digigov/react-core/SelectOption';
-export var Select = /*#__PURE__*/React.forwardRef(function WrappedSelect(_ref, ref) {
-  var name = _ref.name,
-    _ref$extra = _ref.extra,
-    options = _ref$extra.options,
-    className = _ref$extra.className,
-    disabled = _ref.disabled,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(SelectContainer, _extends({
-    className: className,
-    ref: ref,
-    name: name,
-    disabled: disabled
-  }, _extends({}, props, {
-    reset: undefined,
-    required: undefined
-  })), options.map(function (_ref2) {
-    var value = _ref2.value,
-      label = _ref2.label;
-    return /*#__PURE__*/React.createElement(SelectOption, {
-      key: value,
-      value: value
-    }, label && label.primary ? label.primary : value);
-  }));
+import react from "react";
+import { omit } from "../../utils.js";
+import { SelectContainer, SelectOption } from "@digigov/ui/form/SelectContainer/index.js";
+const Select = /*#__PURE__*/ react.forwardRef(function({ name, extra: { options, className }, disabled, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(SelectContainer, {
+        className: className,
+        ref: ref,
+        name: name,
+        id: name,
+        disabled: disabled,
+        ...omit(props, [
+            'Field',
+            'resetField'
+        ]),
+        reset: void 0,
+        error: void 0,
+        required: void 0
+    }, options.map(({ value, label }, index)=>/*#__PURE__*/ react.createElement(SelectOption, {
+            key: index,
+            value: value
+        }, label && label.primary ? label.primary : value)));
 });
-export default Select;
+const inputs_Select = Select;
+export { Select, inputs_Select as default };

package/inputs/index.d.ts

@@ -1,9 +1,9 @@
-export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
-export { default as DateInput } from '@digigov/form/inputs/DateInput';
-export { default as OtpInput } from '@digigov/form/inputs/OtpInput';
-export { default as FileInput } from '@digigov/form/inputs/FileInput';
-export { default as ImageInput } from '@digigov/form/inputs/ImageInput';
-export { default as Input } from '@digigov/form/inputs/Input';
-export { default as Label } from '@digigov/form/inputs/Label';
-export { default as Radio } from '@digigov/form/inputs/Radio';
-export { default as Select } from '@digigov/form/inputs/Select';
+export { default as Checkboxes } from './Checkboxes/index.js';
+export { default as DateInput } from './DateInput/index.js';
+export { default as OtpInput } from './OtpInput/index.js';
+export { default as FileInput } from './FileInput/index.js';
+export { default as ImageInput } from './ImageInput/index.js';
+export { default as Input } from './Input/index.js';
+export { default as Label } from './Label/index.js';
+export { default as Radio } from './Radio/index.js';
+export { default as Select } from './Select/index.js';

package/inputs/index.js

@@ -1,9 +1,10 @@
-export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
-export { default as DateInput } from '@digigov/form/inputs/DateInput';
-export { default as OtpInput } from '@digigov/form/inputs/OtpInput';
-export { default as FileInput } from '@digigov/form/inputs/FileInput';
-export { default as ImageInput } from '@digigov/form/inputs/ImageInput';
-export { default as Input } from '@digigov/form/inputs/Input';
-export { default as Label } from '@digigov/form/inputs/Label';
-export { default as Radio } from '@digigov/form/inputs/Radio';
-export { default as Select } from '@digigov/form/inputs/Select';
+import Checkboxes from "./Checkboxes/index.js";
+import DateInput from "./DateInput/index.js";
+import OtpInput from "./OtpInput/index.js";
+import FileInput from "./FileInput/index.js";
+import ImageInput from "./ImageInput/index.js";
+import Input from "./Input/index.js";
+import Label from "./Label/index.js";
+import Radio from "./Radio/index.js";
+import Select from "./Select/index.js";
+export { Checkboxes, DateInput, FileInput, ImageInput, Input, Label, OtpInput, Radio, Select };

package/inputs/registry.d.ts

@@ -0,0 +1,5 @@
+import { type FieldComponentItem } from '../Field/types.js';
+export type FieldComponentRegistry = Record<string, FieldComponentItem>;
+export declare const FIELD_COMPONENTS: FieldComponentRegistry;
+export declare const ALTERNATIVE_COMPONENTS: FieldComponentRegistry;
+export declare const CONTROLLED_FIELD_COMPONENTS: FieldComponentRegistry;

package/inputs/registry.js

@@ -0,0 +1,80 @@
+import AutoCompleteInput from "./AutoCompleteInput/index.js";
+import Checkboxes from "./Checkboxes/index.js";
+import DateInput from "./DateInput/index.js";
+import DateTimeInput from "./DateTimeInput/index.js";
+import FileInput from "./FileInput/index.js";
+import ImageInput from "./ImageInput/index.js";
+import Input from "./Input/index.js";
+import OtpInput from "./OtpInput/index.js";
+import Radio, { ControlledRadioButtonsGroup } from "./Radio/index.js";
+import Select from "./Select/index.js";
+const FIELD_COMPONENTS = {
+    text: {
+        component: Input
+    },
+    string: {
+        component: Input
+    },
+    file: {
+        wrapper: 'fieldset',
+        component: FileInput
+    },
+    image: {
+        wrapper: 'fieldset',
+        component: ImageInput,
+        controlled: true
+    },
+    date: {
+        wrapper: 'fieldset',
+        controlled: true,
+        component: DateInput
+    },
+    datetime: {
+        wrapper: 'fieldset',
+        controlled: true,
+        component: DateTimeInput
+    },
+    otp: {
+        wrapper: 'fieldset',
+        controlled: true,
+        component: OtpInput
+    },
+    'choice:multiple': {
+        wrapper: 'fieldset',
+        controlled: true,
+        component: Checkboxes
+    },
+    'choice:single': {
+        wrapper: 'fieldset',
+        controlled: false,
+        component: Radio
+    }
+};
+const ALTERNATIVE_COMPONENTS = {
+    Select: {
+        component: Select,
+        controlled: false
+    },
+    AutoComplete: {
+        component: AutoCompleteInput,
+        controlled: true,
+        wrapper: 'fieldset'
+    }
+};
+const CONTROLLED_FIELD_COMPONENTS = {
+    ...FIELD_COMPONENTS,
+    'choice:single': {
+        wrapper: 'fieldset',
+        controlled: true,
+        component: ControlledRadioButtonsGroup
+    },
+    text: {
+        component: Input,
+        controlled: true
+    },
+    string: {
+        component: Input,
+        controlled: true
+    }
+};
+export { ALTERNATIVE_COMPONENTS, CONTROLLED_FIELD_COMPONENTS, FIELD_COMPONENTS };