envoc-form 5.0.5 → 5.0.6

package/lib/Input/IconInputGroup.js

@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var InputGroup_1 = __importDefault(require("./InputGroup"));
 var FormDefaults_1 = require("../FormDefaults");
 function IconInputGroup(_a, ref) {
     var _b;
     var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
     var input = rest.input;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ icon: icon, ref: ref, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ icon: icon, ref: ref, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
                 if (!e.target.value) {
                     input.onChange(undefined);
                 }

package/lib/Input/InputGroup.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var FormDefaults_1 = require("../FormDefaults");
 var Group_1 = __importDefault(require("../Group"));
 function InputGroup(_a, ref) {
     var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "onChange", "value", "icon"]);
-    return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group'), children: [icon, (0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, value: value !== null && value !== void 0 ? value : '', onChange: onChange, ref: ref, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group') }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group'), children: [icon, (0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, value: value !== null && value !== void 0 ? value : '', onChange: onChange, ref: ref, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group') }))] }));
 }
 /** Generic controlled `<input/>` wrapped by a `<Group/>` */
 var InputGroupWithRef = react_1.default.forwardRef(InputGroup);

package/lib/Input/MoneyInputGroup.js

@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var InputGroup_1 = __importDefault(require("./InputGroup"));
 var FormDefaults_1 = require("../FormDefaults");
 function MoneyInputGroup(_a, ref) {
     var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
     var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
     var input = rest.input;
-    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
+    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/lib/Input/NumberInputGroup.js

@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var InputGroup_1 = __importDefault(require("./InputGroup"));
 var FormDefaults_1 = require("../FormDefaults");
 function NumberInputGroup(_a, ref) {
     var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
     var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
     var input = rest.input;
-    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref }, rest, { type: "number", className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
+    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref }, rest, { type: "number", className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/lib/Input/PhoneNumberInputGroup.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var InputGroup_1 = __importDefault(require("./InputGroup"));
 var FormDefaults_1 = require("../FormDefaults");
 var normalizers_1 = require("../Normalization/normalizers");
@@ -35,7 +35,7 @@ function PhoneNumberInputGroup(_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
     var input = rest.input;
-    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/lib/Input/StringInputGroup.js

@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var InputGroup_1 = __importDefault(require("./InputGroup"));
 var FormDefaults_1 = require("../FormDefaults");
 function StringInputGroup(_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
     var input = rest.input;
-    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref }, rest, { className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref }, rest, { className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/lib/Select/SelectGroup.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_select_1 = __importDefault(require("react-select"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var FormDefaults_1 = require("../FormDefaults");
 var Group_1 = __importDefault(require("../Group"));
 // TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
@@ -48,7 +48,7 @@ function SelectGroup(_a) {
                     ? options.resp
                     : [];
     var isLoading = (options && 'loading' in options && options.loading) || false;
-    return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: (0, classnames_1.default)(className, (_b = {},
+    return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: (0, clsx_1.clsx)(className, (_b = {},
             _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'multiple'] = multiple,
             _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'loading'] = isLoading,
             _b), FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), children: (0, jsx_runtime_1.jsx)(react_select_1.default, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
@@ -58,7 +58,7 @@ function SelectGroup(_a) {
                 else {
                     input.onChange(e === null || e === void 0 ? void 0 : e.value);
                 }
-            }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
+            }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
     function getValue() {
         if (multiple) {
             return effectiveOptions.filter(function (o) {

package/lib/StandardFormActions.js

@@ -4,15 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var formik_1 = require("formik");
-var SubmitFormButton_1 = __importDefault(require("./SubmitFormButton"));
 var FormDefaults_1 = require("./FormDefaults");
+var SubmitFormButton_1 = __importDefault(require("./SubmitFormButton"));
 /** Standard submit and cancel buttons. */
 function StandardFormActions(_a) {
     var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel;
     var isSubmitting = (0, formik_1.useFormikContext)().isSubmitting;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubmitFormButton_1.default, { allowPristineSubmit: allowPristineSubmit }), "\u00A0", (0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'), type: "button", disabled: isSubmitting, onClick: handleCancel || goBack, children: "Cancel" })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubmitFormButton_1.default, { allowPristineSubmit: allowPristineSubmit }), "\u00A0", (0, jsx_runtime_1.jsx)("button", { className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'), type: "button", disabled: isSubmitting, onClick: handleCancel || goBack, children: "Cancel" })] }));
     function goBack() {
         window.history.back();
     }

package/lib/SubmitFormButton.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var formik_1 = require("formik");
 var FormDefaults_1 = require("./FormDefaults");
 function SubmitFormButton(_a, ref) {
@@ -39,7 +39,7 @@ function SubmitFormButton(_a, ref) {
             ? 'Loading, please wait...'
             : preventSubmit
                 ? "You haven't made any changes"
-                : '', className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'submit-form-button', className), children: children || 'Submit' })));
+                : '', className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'submit-form-button', className), children: children || 'Submit' })));
 }
 /** Generic submit button for forms. */
 exports.default = react_1.default.forwardRef(SubmitFormButton);

package/lib/TextArea/TextAreaGroup.js

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var FormDefaults_1 = require("../FormDefaults");
 var Group_1 = __importDefault(require("../Group"));
 function TextAreaGroup(_a, ref) {
     var _b;
     var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "icon"]);
-    return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'text-area-group'), children: [icon, (0, jsx_runtime_1.jsx)("textarea", __assign({}, input, rest, { value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (val) { return input.onChange(val.target.value); }, ref: ref, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'text-area-group') }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'text-area-group'), children: [icon, (0, jsx_runtime_1.jsx)("textarea", __assign({}, input, rest, { value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (val) { return input.onChange(val.target.value); }, ref: ref, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'text-area-group') }))] }));
 }
 /** Generic controlled `<textarea/>` wrapped by a `<Group/>` */
 var TextAreaGroupWithRef = react_1.default.forwardRef(TextAreaGroup);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -36,9 +36,8 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^5.0.5",
+    "envoc-request": "^5.0.6",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",
@@ -53,7 +52,8 @@
     "uuid": "^8.3.2",
     "@fortawesome/react-fontawesome": "~0.1.16",
     "@fortawesome/free-solid-svg-icons": "~5.15.4",
-    "@fortawesome/fontawesome-svg-core": "~1.2.36"
+    "@fortawesome/fontawesome-svg-core": "~1.2.36",
+    "clsx": "^2.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.5",

package/src/ConfirmBaseForm/ConfirmBaseForm.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useAxiosRequest, useAxiosRequestProps } from 'envoc-request';
 import { FormDefaults } from '../FormDefaults';
 
@@ -50,7 +50,7 @@ export default function ConfirmBaseForm({
       <h3>{title}</h3>
       {children}
       <button
-        className={classNames(
+        className={clsx(
           confirmButtonClass ??
             FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'
         )}
@@ -59,7 +59,7 @@ export default function ConfirmBaseForm({
         {confirmButtonText ?? 'Confirm'}
       </button>
       <button
-        className={classNames(
+        className={clsx(
           FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'
         )}
         type="button"

package/src/DatePicker/DatePickerGroup.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import DatePicker, {
   DatePickerProps,
 } from 'react-date-picker/dist/entry.nostyle';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import parseISO from 'date-fns/parseISO';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import { FormDefaults } from '../FormDefaults';
@@ -54,18 +54,12 @@ export default function DatePickerGroup<T>({
       meta={meta}
       label={label}
       helpText={helpText}
-      className={classnames(
-        className,
-        FormDefaults.cssClassPrefix + 'date-picker'
-      )}
+      className={clsx(className, FormDefaults.cssClassPrefix + 'date-picker')}
       required={required}
       disabled={disabled}>
       <DatePicker
         {...rest}
-        className={classnames(
-          FormDefaults.cssClassPrefix + 'date-picker',
-          className
-        )}
+        className={clsx(FormDefaults.cssClassPrefix + 'date-picker', className)}
         value={displayDate}
         onChange={handleChange}
       />

package/src/FieldArray/FieldArray.tsx

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Field, { FieldProps } from '../Field/Field';
 import { FieldNameContext } from '../Field/FieldNameContext';
 import useStandardFormInput from '../Field/useStandardField';
@@ -80,7 +80,7 @@ export default function FieldArray<
           {label}
         </div>
         <button
-          className={classNames(
+          className={clsx(
             FormDefaults.cssClassPrefix + 'add-array-item-button',
             { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
           )}
@@ -100,7 +100,7 @@ export default function FieldArray<
                 (value && value['id']) ||
                 itemName
               }
-              className={classNames(
+              className={clsx(
                 FormDefaults.cssClassPrefix + 'field-array-item',
                 {
                   [FormDefaults.cssClassPrefix + 'removed']: value.isDeleted,
@@ -114,7 +114,7 @@ export default function FieldArray<
                 } as any)}
               </FieldNameContext.Provider>
               <button
-                className={classNames(
+                className={clsx(
                   FormDefaults.cssClassPrefix + 'remove-array-item-button',
                   { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
                 )}

package/src/File/FileGroup.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType, LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import FileList from './FileList';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import { FormDefaults } from '../FormDefaults';
@@ -37,7 +37,7 @@ function FileGroup(
       meta={meta}
       label={label}
       helpText={helpText}
-      className={classNames(
+      className={clsx(
         className,
         { [FormDefaults.cssClassPrefix + 'multiple']: multiple },
         FormDefaults.cssClassPrefix + 'file-group'
@@ -66,10 +66,7 @@ function FileGroup(
         value={undefined}
         ref={ref}
         type="file"
-        className={classNames(
-          className,
-          FormDefaults.cssClassPrefix + 'file-group'
-        )}
+        className={clsx(className, FormDefaults.cssClassPrefix + 'file-group')}
       />
       {/* Note: because input.value is any - due to how files are currently handled - type safeness isn't great here */}
       <FileList files={input.value} />

package/src/Form/Form.tsx

@@ -5,7 +5,7 @@ import {
   useMemo,
   useState,
 } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import {
   Form as FormikFormWrapper,
   Formik,
@@ -119,10 +119,7 @@ export default function Form<TForm extends object>({
       {...props}>
       <ServerErrorContext.Provider value={serverErrorContextValue}>
         <FormikFormWrapper
-          className={classNames(
-            className,
-            FormDefaults.cssClassPrefix + 'form'
-          )}
+          className={clsx(className, FormDefaults.cssClassPrefix + 'form')}
           style={style}>
           <FocusError serverErrors={serverErrorContextValue} />
           <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />

package/src/Group.tsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames';
-import { FormDefaults } from './FormDefaults';
+import { clsx } from 'clsx';
 import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
 import { InjectedFieldProps } from './Field/InjectedFieldProps';
+import { FormDefaults } from './FormDefaults';
 
 export interface GroupProps extends InjectedFieldProps<any> {
   /** Extra class names to apply. */
@@ -34,7 +34,7 @@ export default function Group({
 }: GroupProps) {
   return (
     <div
-      className={classNames(className, FormDefaults.cssClassPrefix + 'group', {
+      className={clsx(className, FormDefaults.cssClassPrefix + 'group', {
         [FormDefaults.cssClassPrefix + 'invalid']: meta.error,
         [FormDefaults.cssClassPrefix + 'disabled']: disabled,
         [FormDefaults.cssClassPrefix + 'required']: required,

package/src/Input/CheckboxGroup.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames';
-import { FormDefaults } from '../FormDefaults';
+import { clsx } from 'clsx';
 import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
+import { FormDefaults } from '../FormDefaults';
 import { GroupProps } from '../Group';
 
 export interface CheckboxGroupProps extends GroupProps {
@@ -21,7 +21,7 @@ export default function CheckboxGroup({
 }: CheckboxGroupProps) {
   return (
     <div
-      className={classNames(className, FormDefaults.cssClassPrefix + 'group', {
+      className={clsx(className, FormDefaults.cssClassPrefix + 'group', {
         [FormDefaults.cssClassPrefix + 'invalid']: meta.error,
         [FormDefaults.cssClassPrefix + 'disabled']: disabled,
         [FormDefaults.cssClassPrefix + 'required']: required,

package/src/Input/CheckboxInputGroup.tsx

@@ -1,5 +1,5 @@
 import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CheckboxGroup from './CheckboxGroup';
 import { InputGroupProps } from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
@@ -35,7 +35,7 @@ function CheckboxInputGroup(
       label={label}
       helpText={helpText}
       labelOnLeft={labelOnLeft}
-      className={classNames(
+      className={clsx(
         className,
         FormDefaults.cssClassPrefix + 'checkbox-group',
         { 'label-on-left': labelOnLeft },
@@ -46,7 +46,7 @@ function CheckboxInputGroup(
         type="checkbox"
         aria-invalid={!!meta.error}
         aria-errormessage={!!meta.error ? `${input.name}-error` : undefined}
-        className={classNames(
+        className={clsx(
           className,
           FormDefaults.cssClassPrefix + 'checkbox-group'
         )}

package/src/Input/IconInputGroup.tsx

@@ -1,5 +1,5 @@
 import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroupWithRef, { InputGroupProps } from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 
@@ -28,7 +28,7 @@ function IconInputGroup(
       <InputGroupWithRef
         icon={icon}
         ref={ref}
-        className={classNames(
+        className={clsx(
           className,
           FormDefaults.cssClassPrefix + 'icon-input-group'
         )}

package/src/Input/InputGroup.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEventHandler, LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import { FormDefaults } from '../FormDefaults';
 import Group, { GroupProps } from '../Group';
@@ -44,10 +44,7 @@ function InputGroup<TValue>(
       disabled={disabled}
       label={label}
       helpText={helpText}
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'input-group'
-      )}>
+      className={clsx(className, FormDefaults.cssClassPrefix + 'input-group')}>
       {icon}
       <input
         {...input}
@@ -57,10 +54,7 @@ function InputGroup<TValue>(
         value={value ?? ''}
         onChange={onChange}
         ref={ref}
-        className={classNames(
-          className,
-          FormDefaults.cssClassPrefix + 'input-group'
-        )}
+        className={clsx(className, FormDefaults.cssClassPrefix + 'input-group')}
       />
     </Group>
   );

package/src/Input/MoneyInputGroup.tsx

@@ -1,5 +1,5 @@
 import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup, { InputGroupProps } from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 
@@ -26,10 +26,7 @@ function MoneyInputGroup(
       min={0}
       {...rest}
       type="number"
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'money-group'
-      )}
+      className={clsx(className, FormDefaults.cssClassPrefix + 'money-group')}
       value={input.value || ''}
       onChange={(e) => {
         if (!e.target.value) {

package/src/Input/NumberInputGroup.tsx

@@ -1,5 +1,5 @@
 import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup, { InputGroupProps } from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 
@@ -24,10 +24,7 @@ function NumberInputGroup(
       ref={ref}
       {...rest}
       type="number"
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'number-group'
-      )}
+      className={clsx(className, FormDefaults.cssClassPrefix + 'number-group')}
       value={input.value || ''}
       onChange={(e) => {
         if (!e.target.value) {

package/src/Input/PhoneNumberInputGroup.tsx

@@ -1,5 +1,5 @@
 import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup, { InputGroupProps } from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 import { phoneNumber } from '../Normalization/normalizers';
@@ -20,7 +20,7 @@ function PhoneNumberInputGroup(
       autoComplete="tel-national"
       {...rest}
       type="text"
-      className={classNames(
+      className={clsx(
         className,
         FormDefaults.cssClassPrefix + 'phone-number-group'
       )}

package/src/Input/StringInputGroup.tsx

@@ -1,5 +1,5 @@
 import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup, { InputGroupProps } from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 
@@ -29,10 +29,7 @@ function StringInputGroup(
     <InputGroup
       ref={ref}
       {...rest}
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'string-group'
-      )}
+      className={clsx(className, FormDefaults.cssClassPrefix + 'string-group')}
       value={input.value ?? ''}
       onChange={(e) => {
         if (!e.target.value) {

package/src/Select/SelectGroup.tsx

@@ -1,5 +1,5 @@
 import { default as ReactSelect } from 'react-select';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import { FormDefaults } from '../FormDefaults';
 import Group, { GroupProps } from '../Group';
@@ -74,7 +74,7 @@ export default function SelectGroup<TValue>({
       meta={meta}
       required={required}
       disabled={disabled}
-      className={classNames(
+      className={clsx(
         className,
         {
           [FormDefaults.cssClassPrefix + 'multiple']: multiple,
@@ -100,7 +100,7 @@ export default function SelectGroup<TValue>({
           }
         }}
         getOptionLabel={(option) => option?.label ?? ''}
-        className={classNames(
+        className={clsx(
           className,
           FormDefaults.cssClassPrefix + 'select-group'
         )}

package/src/StandardFormActions.tsx

@@ -1,8 +1,8 @@
 import { MouseEventHandler } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useFormikContext } from 'formik';
-import SubmitFormButton from './SubmitFormButton';
 import { FormDefaults } from './FormDefaults';
+import SubmitFormButton from './SubmitFormButton';
 
 export interface StandardFormActionsProps {
   /** Allow the form to be submitted without any changes. By default this is not allowed. */
@@ -25,7 +25,7 @@ export default function StandardFormActions({
       <SubmitFormButton allowPristineSubmit={allowPristineSubmit} />
       &nbsp;
       <button
-        className={classNames(
+        className={clsx(
           FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'
         )}
         type="button"

package/src/SubmitFormButton.tsx

@@ -1,5 +1,5 @@
 import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useFormikContext } from 'formik';
 import { FormDefaults } from './FormDefaults';
 
@@ -39,7 +39,7 @@ function SubmitFormButton(
           ? "You haven't made any changes"
           : ''
       }
-      className={classNames(
+      className={clsx(
         FormDefaults.cssClassPrefix + 'submit-form-button',
         className
       )}>