@itcase/forms 1.1.32 → 1.1.33

package/dist/css/form/Field/MaskedInput/FormFieldMaskedInput.css

@@ -1,5 +1,5 @@
 .form {
-  &-maskedInput {
+  &-masked-input {
     position: relative;
     &&_state {
       &_success {
@@ -34,12 +34,4 @@
       }
     }
   }
-}
-
-:root {
-  --input-success-border: var(--color-success-border-primary);
-  --input-success-border-hover: var(--color-surface-border-quaternary);
-  --input-error-border: var(--color-error-border-primary);
-  --input-focus-background: var(--color-surface-primary);
-  --input-focus-border: var(--color-surface-border-quaternary);
-}
+}

package/dist/css/form/Field/Switch/FormFieldSwitch.css

@@ -2,7 +2,7 @@
   &-switch {
     width: 100%;
     flex-direction: row;
-    padding: 12px 0;
+    padding: 8px 0;
     ^&__label {
       flex: 1;
       display: flex;

package/dist/itcase-forms.cjs.js

@@ -229,8 +229,10 @@ function useValidationAppearanceInputProps(props) {
           updatedInputProps[propKey] = propValue;
         }
       });
+      return updatedInputProps;
+    } else {
+      return inputProps;
     }
-    return updatedInputProps;
   }, [validationStateKey, inputProps]);
   return validationAppearanceInputProps;
 }
@@ -1104,6 +1106,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1112,7 +1115,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
@@ -1151,6 +1154,8 @@ const defaultChipsProps = {
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeM solid rounded'
+  // Success
+  // successAppearance: 'successPrimary sizeM solid rounded',
 };
 
 function FormFieldChips(props) {
@@ -1195,6 +1200,7 @@ function FormFieldChips(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1203,7 +1209,7 @@ function FormFieldChips(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     const activeOptionsList = React.useMemo(() => {
       const emptyOptionsList = [{
@@ -1264,11 +1270,11 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
     name,
     initialValue,
     label,
+    messageType,
     isDisabled,
     classNameGroupItem,
     fieldProps,
     inputProps,
-    messageType,
     options,
     placeholder,
     showMessage,
@@ -1310,10 +1316,11 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
       return emptyOption;
     }, [input.value]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1321,7 +1328,7 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_choice', 'form__item_choice', classNameGroupItem),
@@ -1347,9 +1354,9 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
       inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
+      setActiveSegment: setActiveSegment,
       isCheckbox: isCheckbox,
-      isRequired: isRequired,
-      setActiveSegment: setActiveSegment
+      isRequired: isRequired
     }, updatedInputProps)));
   });
 });
@@ -1367,6 +1374,8 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
   const {
     name,
     initialValue,
+    messageType,
+    label,
     isDisabled,
     classNameGroupItem,
     fieldProps = {},
@@ -1389,19 +1398,27 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
      */
 
     const {
+      errorKey,
+      errorMessage,
       isErrorState,
-      isValidState,
-      errorKey} = useFieldValidationState({
+      successKey,
+      isValidState
+    } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field-code', 'form__item_code', classNameGroupItem),
+      label: label,
+      messageType: messageType,
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
       fieldClassName: 'form-code',
       inputName: input.name,
       inputValue: input.value,
@@ -1601,7 +1618,9 @@ const defaultInputProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'requirePrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded'
 };
 
 const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFieldInput(props) {
@@ -1651,6 +1670,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1659,7 +1679,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
@@ -1756,6 +1776,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1764,7 +1785,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
@@ -1855,6 +1876,7 @@ function FormFieldSegmented(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1863,7 +1885,7 @@ function FormFieldSegmented(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_segmented', 'form__item_segmented'),
@@ -1969,10 +1991,11 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
       setSelectedOptions(defaultValue);
     }, [defaultValue]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1980,7 +2003,7 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
     });
     const updatedSelectProps = useValidationAppearanceInputProps({
       inputProps: selectProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_select', 'form__item_select', classNameGroupItem),
@@ -2053,6 +2076,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2061,7 +2085,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field-switch', 'form__item_switch', classNameGroupItem),
@@ -2127,6 +2151,7 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2135,7 +2160,7 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_textarea', 'form__item_textarea', classNameGroupItem),
@@ -2219,6 +2244,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2227,10 +2253,10 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_maskedInput', 'form__item_maskedInput', classNameGroupItem),
+      className: clsx__default.default('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,

package/dist/itcase-forms.esm.js

@@ -218,8 +218,10 @@ function useValidationAppearanceInputProps(props) {
           updatedInputProps[propKey] = propValue;
         }
       });
+      return updatedInputProps;
+    } else {
+      return inputProps;
     }
-    return updatedInputProps;
   }, [validationStateKey, inputProps]);
   return validationAppearanceInputProps;
 }
@@ -1093,6 +1095,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1101,7 +1104,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
@@ -1140,6 +1143,8 @@ const defaultChipsProps = {
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
   requiredAppearance: 'requirePrimary sizeM solid rounded'
+  // Success
+  // successAppearance: 'successPrimary sizeM solid rounded',
 };
 
 function FormFieldChips(props) {
@@ -1184,6 +1189,7 @@ function FormFieldChips(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1192,7 +1198,7 @@ function FormFieldChips(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     const activeOptionsList = useMemo(() => {
       const emptyOptionsList = [{
@@ -1253,11 +1259,11 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
     name,
     initialValue,
     label,
+    messageType,
     isDisabled,
     classNameGroupItem,
     fieldProps,
     inputProps,
-    messageType,
     options,
     placeholder,
     showMessage,
@@ -1299,10 +1305,11 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
       return emptyOption;
     }, [input.value]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1310,7 +1317,7 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_choice', 'form__item_choice', classNameGroupItem),
@@ -1336,9 +1343,9 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
       inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
+      setActiveSegment: setActiveSegment,
       isCheckbox: isCheckbox,
-      isRequired: isRequired,
-      setActiveSegment: setActiveSegment
+      isRequired: isRequired
     }, updatedInputProps)));
   });
 });
@@ -1356,6 +1363,8 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
   const {
     name,
     initialValue,
+    messageType,
+    label,
     isDisabled,
     classNameGroupItem,
     fieldProps = {},
@@ -1378,19 +1387,27 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
      */
 
     const {
+      errorKey,
+      errorMessage,
       isErrorState,
-      isValidState,
-      errorKey} = useFieldValidationState({
+      successKey,
+      isValidState
+    } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-code', 'form__item_code', classNameGroupItem),
+      label: label,
+      messageType: messageType,
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
       fieldClassName: 'form-code',
       inputName: input.name,
       inputValue: input.value,
@@ -1590,7 +1607,9 @@ const defaultInputProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'requirePrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded'
 };
 
 const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
@@ -1640,6 +1659,7 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1648,7 +1668,7 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
@@ -1745,6 +1765,7 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1753,7 +1774,7 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
@@ -1844,6 +1865,7 @@ function FormFieldSegmented(props) {
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1852,7 +1874,7 @@ function FormFieldSegmented(props) {
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_segmented', 'form__item_segmented'),
@@ -1958,10 +1980,11 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
       setSelectedOptions(defaultValue);
     }, [defaultValue]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
@@ -1969,7 +1992,7 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
     });
     const updatedSelectProps = useValidationAppearanceInputProps({
       inputProps: selectProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_select', 'form__item_select', classNameGroupItem),
@@ -2042,6 +2065,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2050,7 +2074,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field-switch', 'form__item_switch', classNameGroupItem),
@@ -2116,6 +2140,7 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2124,7 +2149,7 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
@@ -2208,6 +2233,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
       errorKey,
       errorMessage,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2216,10 +2242,10 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
     });
     const updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : 'success'
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_maskedInput', 'form__item_maskedInput', classNameGroupItem),
+      className: clsx('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",