envoc-form 5.0.3 → 5.0.6

package/README.md

@@ -13,11 +13,11 @@ Base form package for envoc projects.
 [npm]: https://www.npmjs.com/package/envoc-form
 Important naming conventions for our sanity while creating envoc-form types:
 
-- TForm = The type of the some form. e.g. LoginDto
-- TProp = The key / symbol of a individual property of some form. e.g. TProp would be literally "Username" for the prop of the same name for a LoginDto
-- TValue = The value of an individual property of some form. e.g. a "Username" property would probably have a TValue of string
-- Field = the abstract thing that deals with some specific TProp. Might represent several composed elements (e.g. label, input, helperText, etc) or may just be a direct component
-- TRenderComponent = The type of any 'Component' passed to a Field, e.g. 'StandardTextInputGroup' passed to Component means TRenderComponent is typeof(StandardTextInputGroup)
+- TForm = The type of the some form. e.g. LoginDto
+- TProp = The key / symbol of a individual property of some form. e.g. TProp would be literally "Username" for the prop of the same name for a LoginDto
+- TValue = The value of an individual property of some form. e.g. a "Username" property would probably have a TValue of string
+- Field = the abstract thing that deals with some specific TProp. Might represent several composed elements (e.g. label, input, helperText, etc) or may just be a direct component
+- TRenderComponent = The type of any 'Component' passed to a Field, e.g. 'StandardTextInputGroup' passed to Component means TRenderComponent is typeof(StandardTextInputGroup)
 - TComponentProps = For any 'Component' passed to a Field as a prop, this represents that Component's props
 
 # Interfaces
@@ -216,6 +216,131 @@ Omit.required
 packages/envoc-form/src/Group.tsx:21
 
 
+<a name="interfacescheckboxinputgrouppropsmd"></a>
+
+[envoc-form](#readmemd) / [Exports](#modulesmd) / CheckboxInputGroupProps
+
+## Interface: CheckboxInputGroupProps
+
+### Hierarchy
+
+- `Omit`<[`InputGroupProps`](#interfacesinputgrouppropsmd)<`boolean` \| `undefined` \| ``null``\>, ``"onChange"`` \| ``"type"`` \| ``"value"``\>
+
+  ↳ **`CheckboxInputGroupProps`**
+
+### Table of contents
+
+#### Properties
+
+- [className](#classname)
+- [helpText](#helptext)
+- [icon](#icon)
+- [input](#input)
+- [label](#label)
+- [labelOnLeft](#labelonleft)
+- [meta](#meta)
+
+### Properties
+
+#### className
+
+• `Optional` **className**: `string`
+
+Extra class names to apply.
+
+##### Inherited from
+
+Omit.className
+
+##### Defined in
+
+packages/envoc-form/src/Group.tsx:8
+
+___
+
+#### helpText
+
+• `Optional` **helpText**: `ReactNode`
+
+Simple helper text after the input.
+
+##### Inherited from
+
+Omit.helpText
+
+##### Defined in
+
+packages/envoc-form/src/Group.tsx:16
+
+___
+
+#### icon
+
+• `Optional` **icon**: `ReactNode`
+
+##### Inherited from
+
+Omit.icon
+
+##### Defined in
+
+packages/envoc-form/src/Input/InputGroup.tsx:20
+
+___
+
+#### input
+
+• **input**: `CustomFieldInputProps`<`undefined` \| ``null`` \| `boolean`\>
+
+##### Inherited from
+
+Omit.input
+
+##### Defined in
+
+packages/envoc-form/src/Field/InjectedFieldProps.ts:6
+
+___
+
+#### label
+
+• `Optional` **label**: `string`
+
+Simple text label before the input.
+
+##### Inherited from
+
+Omit.label
+
+##### Defined in
+
+packages/envoc-form/src/Group.tsx:13
+
+___
+
+#### labelOnLeft
+
+• `Optional` **labelOnLeft**: `boolean`
+
+##### Defined in
+
+packages/envoc-form/src/Input/CheckboxInputGroup.tsx:12
+
+___
+
+#### meta
+
+• **meta**: `CustomFieldMetaProps`<`undefined` \| ``null`` \| `boolean`\>
+
+##### Inherited from
+
+Omit.meta
+
+##### Defined in
+
+packages/envoc-form/src/Field/InjectedFieldProps.ts:7
+
+
 <a name="interfacesconfirmbaseformpropsmd"></a>
 
 [envoc-form](#readmemd) / [Exports](#modulesmd) / ConfirmBaseFormProps
@@ -3721,6 +3846,7 @@ packages/envoc-form/src/Field/useStandardField.ts:18
 
 - [AddressInputProps](#interfacesaddressinputpropsmd)
 - [BooleanSelectGroupProps](#interfacesbooleanselectgrouppropsmd)
+- [CheckboxInputGroupProps](#interfacescheckboxinputgrouppropsmd)
 - [ConfirmBaseFormProps](#interfacesconfirmbaseformpropsmd)
 - [ConfirmDeleteFormProps](#interfacesconfirmdeleteformpropsmd)
 - [DatePickerGroupProps](#interfacesdatepickergrouppropsmd)
@@ -3769,6 +3895,7 @@ packages/envoc-form/src/Field/useStandardField.ts:18
 
 ### Variables
 
+- [CheckboxInputGroup](#checkboxinputgroup)
 - [FieldNameContext](#fieldnamecontext)
 - [FileGroup](#filegroup)
 - [FormDefaults](#formdefaults)
@@ -3962,6 +4089,22 @@ packages/envoc-form/src/Field/StandAloneInput.tsx:8
 
 ## Variables
 
+### CheckboxInputGroup
+
+• `Const` **CheckboxInputGroup**: `ComponentType`<[`CheckboxInputGroupProps`](#interfacescheckboxinputgrouppropsmd)\>
+
+Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
+
+ If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
+
+ If the user should be required to check the box before submission, use the `required` prop.
+
+#### Defined in
+
+packages/envoc-form/src/Input/CheckboxInputGroup.tsx:74
+
+___
+
 ### FieldNameContext
 
 • `Const` **FieldNameContext**: `Context`<`undefined` \| `string`\>
@@ -3982,7 +4125,7 @@ File upload input group.
 
 #### Defined in
 
-packages/envoc-form/src/File/FileGroup.tsx:81
+packages/envoc-form/src/File/FileGroup.tsx:78
 
 ___
 
@@ -4024,7 +4167,7 @@ Standard number input group. By default allows for float values.
 
 #### Defined in
 
-packages/envoc-form/src/Input/NumberInputGroup.tsx:44
+packages/envoc-form/src/Input/NumberInputGroup.tsx:41
 
 ___
 
@@ -4032,7 +4175,7 @@ ___
 
 • `Const` **PhoneNumberInputGroup**: `ComponentType`<[`PhoneNumberInputGroupProps`](#interfacesphonenumberinputgrouppropsmd)\>
 
-A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
+A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
 The data will get sent in the same format as displayed. Uses `normalizers.phoneNumber`.
 
 **`Default`**
@@ -4067,7 +4210,7 @@ Standard string input group.
 
 #### Defined in
 
-packages/envoc-form/src/Input/StringInputGroup.tsx:49
+packages/envoc-form/src/Input/StringInputGroup.tsx:46
 
 ___
 
@@ -4087,13 +4230,13 @@ packages/envoc-form/src/TextArea/TextAreaGroup.tsx:60
 
 ▸ **AddressInput**(`«destructured»`): `Element`
 
-Collection of `<Field/>`s for inputting an address. Includes:
-```txt
-Address 1
-Address 2
-City
-State
-Zip
+Collection of `<Field/>`s for inputting an address. Includes:
+```txt
+Address 1
+Address 2
+City
+State
+Zip
 ```
 
 #### Parameters
@@ -4138,7 +4281,7 @@ ___
 
 ▸ **ConfirmBaseForm**(`«destructured»`): `Element`
 
-Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
+Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
 Commonly used for confirming delete and archive.
 
 See `<ConfirmDeleteForm/>` if the confirmation is specifically for deletion.
@@ -4217,7 +4360,7 @@ ___
 
 ▸ **Field**<`TForm`, `TProp`, `TRenderComponent`\>(`«destructured»`, `ref`): `Element`
 
-Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
+Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
 Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
 
 #### Type parameters
@@ -4670,7 +4813,7 @@ ___
 
 #### Defined in
 
-packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:106
+packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:100
 
 ___
 
@@ -4934,7 +5077,7 @@ packages/envoc-form/src/Field/useStandardField.ts:24
 
 ##### Defined in
 
-packages/envoc-form/src/Form/Form.tsx:214
+packages/envoc-form/src/Form/Form.tsx:211
 
 
 <a name="modulesnormalizersmd"></a>

package/es/ConfirmBaseForm/ConfirmBaseForm.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useAxiosRequest } from 'envoc-request';
 import { FormDefaults } from '../FormDefaults';
 // TODO: ask about how we should use 'children'
@@ -35,7 +35,7 @@ export default function ConfirmBaseForm(_a) {
     var handleCancel = _a.handleCancel, request = _a.request, style = _a.style, title = _a.title, confirmButtonText = _a.confirmButtonText, confirmButtonClass = _a.confirmButtonClass, children = _a.children, props = __rest(_a, ["handleCancel", "request", "style", "title", "confirmButtonText", "confirmButtonClass", "children"]);
     var webRequest = useAxiosRequest(Object.assign({}, request, { autoExecute: false }));
     var onCancel = handleCancel !== null && handleCancel !== void 0 ? handleCancel : goBack;
-    return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", { className: classNames(confirmButtonClass !== null && confirmButtonClass !== void 0 ? confirmButtonClass : FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'), type: "button", onClick: webRequest.submitRequest, children: confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Confirm' }), _jsx("button", { className: classNames(FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel, children: "Cancel" })] })));
+    return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", { className: clsx(confirmButtonClass !== null && confirmButtonClass !== void 0 ? confirmButtonClass : FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'), type: "button", onClick: webRequest.submitRequest, children: confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Confirm' }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel, children: "Cancel" })] })));
     function goBack() {
         window.history.back();
     }

package/es/DatePicker/DatePickerGroup.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import DatePicker from 'react-date-picker/dist/entry.nostyle';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import parseISO from 'date-fns/parseISO';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../Group';
@@ -48,7 +48,7 @@ export default function DatePickerGroup(_a) {
             }
         }
     }, [setDisplayDate, input.value]);
-    return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: _jsx(DatePicker, __assign({}, rest, { className: classnames(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) }));
+    return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: _jsx(DatePicker, __assign({}, rest, { className: clsx(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) }));
     function handleChange(e) {
         var onChange = input.onChange;
         if (onChange === null) {

package/es/FieldArray/FieldArray.js

@@ -19,7 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Field from '../Field/Field';
 import { FieldNameContext } from '../Field/FieldNameContext';
 import useStandardFormInput from '../Field/useStandardField';
@@ -42,15 +42,15 @@ export default function FieldArray(_a) {
         : Array.isArray(input.value)
             ? input.value
             : [];
-    return (_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array', children: [_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array-header', children: [_jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-title', children: label }), _jsx("button", { className: classNames(FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem, children: "+" })] }), _jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-body', children: values.map(function (value, index) {
+    return (_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array', children: [_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array-header', children: [_jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-title', children: label }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem, children: "+" })] }), _jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-body', children: values.map(function (value, index) {
                     var _a, _b;
                     var itemName = "".concat(input.name, "[").concat(index, "]");
-                    return (_jsxs("div", { className: classNames(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
+                    return (_jsxs("div", { className: clsx(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
                             _a[FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
                             _a)), role: "listitem", children: [_jsx(FieldNameContext.Provider, { value: itemName, children: children({
                                     Field: Field,
                                     FieldArray: FieldArray,
-                                }) }), _jsx("button", { className: classNames(FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); }, children: "-" })] }, (value && value['form-input-array-key']) ||
+                                }) }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); }, children: "-" })] }, (value && value['form-input-array-key']) ||
                         (value && value['id']) ||
                         itemName));
                 }) })] }));

package/es/File/FileGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import FileList from './FileList';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../Group';
 function FileGroup(_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, multiple = _a.multiple, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "multiple"]);
-    return (_jsxs(Group, { input: input, meta: meta, label: label, helpText: helpText, className: classNames(className, (_b = {}, _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple, _b), FormDefaults.cssClassPrefix + 'file-group'), required: required, disabled: disabled, children: [_jsx("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
+    return (_jsxs(Group, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, (_b = {}, _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple, _b), FormDefaults.cssClassPrefix + 'file-group'), required: required, disabled: disabled, children: [_jsx("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
                     var _a, _b;
                     if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length)) {
                         input.onChange(undefined);
@@ -46,7 +46,7 @@ function FileGroup(_a, ref) {
                             input.onChange(files);
                         }
                     }
-                }, value: undefined, ref: ref, type: "file", className: classNames(className, FormDefaults.cssClassPrefix + 'file-group') })), _jsx(FileList, { files: input.value })] }));
+                }, value: undefined, ref: ref, type: "file", className: clsx(className, FormDefaults.cssClassPrefix + 'file-group') })), _jsx(FileList, { files: input.value })] }));
 }
 /** File upload input group.  */
 var FileGroupWithRef = React.forwardRef(FileGroup);

package/es/Form/Form.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useState, } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Form as FormikFormWrapper, Formik, useFormikContext, } from 'formik';
 import FocusError from './FocusError';
 import FormBasedPreventNavigation from './FormBasedPreventNavigation';
@@ -54,7 +54,7 @@ export default function Form(_a) {
                 _a)));
         },
     }); }, [serverErrors]);
-    return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, { value: serverErrorContextValue, children: _jsxs(FormikFormWrapper, { className: classNames(className, FormDefaults.cssClassPrefix + 'form'), style: style, children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
+    return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, { value: serverErrorContextValue, children: _jsxs(FormikFormWrapper, { className: clsx(className, FormDefaults.cssClassPrefix + 'form'), style: style, children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
                         // hack for ref forwarding
                         Field: Field,
                         FieldArray: FieldArray,

package/es/Group.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { FormDefaults } from './FormDefaults';
+import { clsx } from 'clsx';
 import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
+import { FormDefaults } from './FormDefaults';
 /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
 export default function Group(_a) {
     var _b;
     var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled, required = _a.required;
-    return (_jsxs("div", { className: classNames(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
+    return (_jsxs("div", { className: clsx(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
             _b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
             _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
             _b[FormDefaults.cssClassPrefix + 'required'] = required,

package/es/Input/CheckboxGroup.d.ts

@@ -0,0 +1,6 @@
+import { GroupProps } from '../Group';
+export interface CheckboxGroupProps extends GroupProps {
+    labelOnLeft?: boolean;
+}
+/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
+export default function CheckboxGroup({ className, children, label, helpText, meta, input, disabled, required, labelOnLeft, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;

package/es/Input/CheckboxGroup.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
+import { FormDefaults } from '../FormDefaults';
+/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
+export default function CheckboxGroup(_a) {
+    var _b;
+    var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled, required = _a.required, labelOnLeft = _a.labelOnLeft;
+    return (_jsxs("div", { className: clsx(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
+            _b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
+            _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
+            _b[FormDefaults.cssClassPrefix + 'required'] = required,
+            _b)), children: [_jsx(FieldErrorScrollTarget, {}), meta.warning && (_jsx("div", { className: FormDefaults.cssClassPrefix + 'warning', children: meta.warning })), _jsx("div", { className: FormDefaults.cssClassPrefix + 'checkbox-group-input', children: labelOnLeft ? (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: input.id, children: label }), children] })) : (_jsxs(_Fragment, { children: [children, _jsx("label", { htmlFor: input.id, children: label })] })) }), meta.error && (_jsx("div", { id: "".concat(input.id, "-error"), className: FormDefaults.cssClassPrefix + 'error', children: meta.error })), helpText && (_jsx("div", { className: FormDefaults.cssClassPrefix + 'help', children: helpText }))] }));
+}

package/es/Input/CheckboxInputGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InputGroupProps } from './InputGroup';
+export interface CheckboxInputGroupProps extends Omit<InputGroupProps<boolean | undefined | null>, 'onChange' | 'type' | 'value'> {
+    labelOnLeft?: boolean;
+}
+/** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
+ *
+ *  If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
+ *
+ *  If the user should be required to check the box before submission, use the `required` prop.
+ */
+declare const CheckboxInputGroupWithRef: React.ComponentType<CheckboxInputGroupProps>;
+export default CheckboxInputGroupWithRef;

package/es/Input/CheckboxInputGroup.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { clsx } from 'clsx';
+import CheckboxGroup from './CheckboxGroup';
+import { FormDefaults } from '../FormDefaults';
+function CheckboxInputGroup(_a, ref) {
+    var input = _a.input, meta = _a.meta, disabled = _a.disabled, label = _a.label, required = _a.required, helpText = _a.helpText, className = _a.className, labelOnLeft = _a.labelOnLeft, rest = __rest(_a, ["input", "meta", "disabled", "label", "required", "helpText", "className", "labelOnLeft"]);
+    return (_jsx(CheckboxGroup, { input: input, meta: meta, disabled: disabled, required: required, label: label, helpText: helpText, labelOnLeft: labelOnLeft, className: clsx(className, FormDefaults.cssClassPrefix + 'checkbox-group', { 'label-on-left': labelOnLeft }, { 'label-on-right': !labelOnLeft }), children: _jsx("input", __assign({}, rest, { type: "checkbox", "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, className: clsx(className, FormDefaults.cssClassPrefix + 'checkbox-group'), checked: input.value === true, onChange: function (e) {
+                input.onChange(e.target.checked);
+            }, disabled: disabled, required: required, onBlur: input.onBlur, id: input.id, name: input.name, ref: ref })) }));
+}
+/** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
+ *
+ *  If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
+ *
+ *  If the user should be required to check the box before submission, use the `required` prop.
+ */
+var CheckboxInputGroupWithRef = React.forwardRef(CheckboxInputGroup);
+export default CheckboxInputGroupWithRef;

package/es/Input/IconInputGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroupWithRef from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 function IconInputGroup(_a, ref) {
     var _b;
     var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
     var input = rest.input;
-    return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className: classNames(className, FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className: clsx(className, 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/es/Input/InputGroup.js

@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../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 (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: classNames(className, FormDefaults.cssClassPrefix + 'input-group'), children: [icon, _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: classNames(className, FormDefaults.cssClassPrefix + 'input-group') }))] }));
+    return (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'input-group'), children: [icon, _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: clsx(className, FormDefaults.cssClassPrefix + 'input-group') }))] }));
 }
 /** Generic controlled `<input/>` wrapped by a `<Group/>` */
 var InputGroupWithRef = React.forwardRef(InputGroup);

package/es/Input/MoneyInputGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup from './InputGroup';
 import { FormDefaults } from '../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 (_jsx(InputGroup, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: classNames(className, FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
+    return (_jsx(InputGroup, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: clsx(className, FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/es/Input/NumberInputGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup from './InputGroup';
 import { FormDefaults } from '../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 (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: classNames(className, FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
+    return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: clsx(className, FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/es/Input/PhoneNumberInputGroup.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 import { phoneNumber } from '../Normalization/normalizers';
@@ -30,7 +30,7 @@ function PhoneNumberInputGroup(_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
     var input = rest.input;
-    return (_jsx(InputGroup, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: classNames(className, FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return (_jsx(InputGroup, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: clsx(className, 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/es/Input/StringInputGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 function StringInputGroup(_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
     var input = rest.input;
-    return (_jsx(InputGroup, __assign({ ref: ref }, rest, { className: classNames(className, FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return (_jsx(InputGroup, __assign({ ref: ref }, rest, { className: clsx(className, FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/es/Select/SelectGroup.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as ReactSelect } from 'react-select';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../Group';
 // TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
@@ -43,7 +43,7 @@ export default function SelectGroup(_a) {
                     ? options.resp
                     : [];
     var isLoading = (options && 'loading' in options && options.loading) || false;
-    return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: classNames(className, (_b = {},
+    return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: clsx(className, (_b = {},
             _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple,
             _b[FormDefaults.cssClassPrefix + 'loading'] = isLoading,
             _b), FormDefaults.cssClassPrefix + 'select-group'), children: _jsx(ReactSelect, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
@@ -53,7 +53,7 @@ export default 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: classNames(className, 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: clsx(className, FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
     function getValue() {
         if (multiple) {
             return effectiveOptions.filter(function (o) {