@nolwenture/formik-jsonschema-form 0.4.2 → 0.5.0

package/dist/styledComponents.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as formik from "formik";
-import { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps } from "./types";
+import { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps } from "./types";
 export declare const Form: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "noValidate" | "target" | "key"> & import("react").RefAttributes<HTMLFormElement>>, any, {}, never>;
 export declare const FormButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FormButton: import("styled-components").StyledComponent<"button", any, {}, never>;
@@ -53,4 +53,53 @@ export declare const InfoFieldButton: {
 export declare const ErrorMessage: import("styled-components").StyledComponent<import("react").ComponentType<formik.ErrorMessageProps>, any, {}, never>;
 export declare const FieldInput: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
 export declare const RequiredIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Toggle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ToggleLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const ToggleFieldInput: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
+export declare const ToggleSwitchField: {
+    ({ inputProps, name, className, }: ToggleSwitchFieldProps): JSX.Element;
+    styles: {
+        ToggleLabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
+        ToggleFieldInputStyle: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
+        ToggleStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+    };
+};
+export declare const RadioButtonFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RadioButtonFieldElement: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const RadioButtonFieldInput: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
+export declare const ButtonLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ButtonLabelTrue: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ButtonLabelFalse: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const RadioButtonField: {
+    ({ label, inputProps, name, className, }: RadioButtonFieldProps): JSX.Element;
+    styles: {
+        RadioButtonFieldContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+        RadioButtonFieldElementStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
+        RadioButtonFieldInputStyle: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
+        ButtonLabelStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+        ButtonLabelTrueStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+        ButtonLabelFalseStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+    };
+};
+export declare const MultiSelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MultiSelectInput: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
+export declare const MultiSelectBadgeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MultiSelectBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MultiSelectBadgeCloseElement: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MultiSelectOptionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const MultiSelectOptionListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const MultiSelectOptionListWithoutItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const SearchableMultiTagSelectField: {
+    ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }: SelectFieldProps): JSX.Element;
+    styles: {
+        MultiSelectContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+        MultiSelectInputStyle: import("styled-components").StyledComponent<({ formikAs, ...props }: any) => JSX.Element, any, {}, never>;
+        MultiSelectBadgeContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+        MultiSelectBadgeStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+        MultiSelectBadgeCloseElementStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+        MultiSelectOptionListStyle: import("styled-components").StyledComponent<"ul", any, {}, never>;
+        MultiSelectOptionListItemStyle: import("styled-components").StyledComponent<"li", any, {}, never>;
+        MultiSelectOptionListWithoutItemStyle: import("styled-components").StyledComponent<"li", any, {}, never>;
+    };
+};
 export {};

package/dist/styledComponents.js

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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)
@@ -28,137 +13,185 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import * as formik from "formik";
 import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose, } from "./types";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { FormRegistry } from "./Form";
-export var Form = styled(formik.Form)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var FormButtonWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-export var FormButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-export var ObjectFieldWrapper = styled.fieldset(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-export var ObjectFieldTitle = styled.legend(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
-export var ObjectFieldList = styled.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  list-style-type: none;\n  padding: 0;\n"], ["\n  list-style-type: none;\n  padding: 0;\n"])));
-export var ObjectFieldItem = styled.li(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var ObjectFieldItemButtons = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  margin: 0.5rem;\n"], ["\n  display: flex;\n  margin: 0.5rem;\n"])));
-export var ObjectFieldButton = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n  border: 1px solid black;\n  line-height: 1em;\n  height: 1em;\n  padding: 0 0.3em;\n"], ["\n  cursor: pointer;\n  border: 1px solid black;\n  line-height: 1em;\n  height: 1em;\n  padding: 0 0.3em;\n"])));
-export var ObjectFieldLineButton = styled(ObjectFieldButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
-export var ObjectFieldUpButton = styled(ObjectFieldLineButton)(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
-export var ObjectFieldDownButton = styled(ObjectFieldLineButton)(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
-export var ObjectFieldRemoveButton = styled(ObjectFieldLineButton)(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-export var ObjectFieldAddButton = styled(ObjectFieldButton)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
-export function getObjectFieldButton(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    var purpose = _a.purpose, onClick = _a.onClick, uiSchema = _a.uiSchema;
+import { Field } from "formik";
+export const Form = styled(formik.Form) ``;
+export const FormButtonWrapper = styled.div ``;
+export const FormButton = styled.button ``;
+export const ObjectFieldWrapper = styled.fieldset ``;
+export const ObjectFieldTitle = styled.legend ``;
+export const ObjectFieldList = styled.ul `
+  list-style-type: none;
+  padding: 0;
+`;
+export const ObjectFieldItem = styled.li `
+  display: flex;
+`;
+export const ObjectFieldItemButtons = styled.div `
+  display: flex;
+  margin: 0.5rem;
+`;
+export const ObjectFieldButton = styled.a `
+  cursor: pointer;
+  border: 1px solid black;
+  line-height: 1em;
+  height: 1em;
+  padding: 0 0.3em;
+`;
+export const ObjectFieldLineButton = styled(ObjectFieldButton) ``;
+export const ObjectFieldUpButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldDownButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldRemoveButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldAddButton = styled(ObjectFieldButton) ``;
+export function getObjectFieldButton({ purpose, onClick, uiSchema, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     switch (purpose) {
         case ObjectFieldButtonPurpose.ADD:
-            return (_jsx(ObjectFieldAddButton, __assign({}, ((_c = (_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {}), { onClick: onClick }, { children: (_e = (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : "+" })));
+            return (_jsx(ObjectFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: onClick }, { children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })));
         case ObjectFieldButtonPurpose.REMOVE:
-            return (_jsx(ObjectFieldRemoveButton, __assign({}, ((_g = (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _f === void 0 ? void 0 : _f.props) !== null && _g !== void 0 ? _g : {}), { onClick: onClick }, { children: (_j = (_h = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "-" })));
+            return (_jsx(ObjectFieldRemoveButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: onClick }, { children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "-" })));
         case ObjectFieldButtonPurpose.MOVE_UP:
-            return (_jsx(ObjectFieldUpButton, __assign({}, ((_l = (_k = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _k === void 0 ? void 0 : _k.props) !== null && _l !== void 0 ? _l : {}), { onClick: onClick }, { children: (_o = (_m = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _m === void 0 ? void 0 : _m.content) !== null && _o !== void 0 ? _o : "↑" })));
+            return (_jsx(ObjectFieldUpButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: onClick }, { children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↑" })));
         case ObjectFieldButtonPurpose.MOVE_DOWN:
-            return (_jsx(ObjectFieldDownButton, __assign({}, ((_q = (_p = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _p === void 0 ? void 0 : _p.props) !== null && _q !== void 0 ? _q : {}), { onClick: onClick }, { children: (_s = (_r = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _r === void 0 ? void 0 : _r.content) !== null && _s !== void 0 ? _s : "↓" })));
+            return (_jsx(ObjectFieldDownButton, Object.assign({}, ((_p = (_o = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _o === void 0 ? void 0 : _o.props) !== null && _p !== void 0 ? _p : {}), { onClick: onClick }, { children: (_r = (_q = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _q === void 0 ? void 0 : _q.content) !== null && _r !== void 0 ? _r : "↓" })));
         default:
-            return (_jsx(ObjectFieldButton, __assign({}, ((_u = (_t = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _t === void 0 ? void 0 : _t.props) !== null && _u !== void 0 ? _u : {}), { onClick: onClick }, { children: (_w = (_v = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : "" })));
+            return (_jsx(ObjectFieldButton, Object.assign({}, ((_t = (_s = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _s === void 0 ? void 0 : _s.props) !== null && _t !== void 0 ? _t : {}), { onClick: onClick }, { children: (_v = (_u = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : "" })));
     }
 }
-export var ArrayFieldWrapper = ObjectFieldWrapper;
-export var ArrayFieldTitle = ObjectFieldTitle;
-export var ArrayFieldList = ObjectFieldList;
-export var ArrayFieldItem = ObjectFieldItem;
-export var ArrayFieldItemButtons = ObjectFieldItemButtons;
-export var ArrayFieldButton = styled(ObjectFieldButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
-export var ArrayFieldLineButton = styled(ArrayFieldButton)(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
-export var ArrayFieldUpButton = styled(ArrayFieldLineButton)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])));
-export var ArrayFieldDownButton = styled(ArrayFieldLineButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject([""], [""])));
-export var ArrayFieldRemoveButton = styled(ArrayFieldLineButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])));
-export var ArrayFieldAddButton = styled(ArrayFieldButton)(templateObject_20 || (templateObject_20 = __makeTemplateObject([""], [""])));
-export function GetArrayFieldButton(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    var purpose = _a.purpose, onClick = _a.onClick, uiSchema = _a.uiSchema;
-    var _x = useContext(FormRegistry).components, ArrayFieldAddButton = _x.ArrayFieldAddButton, ArrayFieldRemoveButton = _x.ArrayFieldRemoveButton, ArrayFieldUpButton = _x.ArrayFieldUpButton, ArrayFieldDownButton = _x.ArrayFieldDownButton;
+export const ArrayFieldWrapper = ObjectFieldWrapper;
+export const ArrayFieldTitle = ObjectFieldTitle;
+export const ArrayFieldList = ObjectFieldList;
+export const ArrayFieldItem = ObjectFieldItem;
+export const ArrayFieldItemButtons = ObjectFieldItemButtons;
+export const ArrayFieldButton = styled(ObjectFieldButton) ``;
+export const ArrayFieldLineButton = styled(ArrayFieldButton) ``;
+export const ArrayFieldUpButton = styled(ArrayFieldLineButton) ``;
+export const ArrayFieldDownButton = styled(ArrayFieldLineButton) ``;
+export const ArrayFieldRemoveButton = styled(ArrayFieldLineButton) ``;
+export const ArrayFieldAddButton = styled(ArrayFieldButton) ``;
+export function GetArrayFieldButton({ purpose, onClick, uiSchema, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const { components: { ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, } = useContext(FormRegistry);
     switch (purpose) {
         case ArrayFieldButtonPurpose.ADD:
-            return (_jsx(ArrayFieldAddButton, __assign({}, ((_c = (_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {}), { onClick: onClick }, { children: (_e = (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : "+" })));
+            return (_jsx(ArrayFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: onClick }, { children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })));
         case ArrayFieldButtonPurpose.REMOVE:
-            return (_jsx(ArrayFieldRemoveButton, __assign({}, ((_g = (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _f === void 0 ? void 0 : _f.props) !== null && _g !== void 0 ? _g : {}), { onClick: onClick }, { children: (_j = (_h = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "-" })));
+            return (_jsx(ArrayFieldRemoveButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: onClick }, { children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "-" })));
         case ArrayFieldButtonPurpose.MOVE_UP:
-            return (_jsx(ArrayFieldUpButton, __assign({}, ((_l = (_k = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _k === void 0 ? void 0 : _k.props) !== null && _l !== void 0 ? _l : {}), { onClick: onClick }, { children: (_o = (_m = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _m === void 0 ? void 0 : _m.content) !== null && _o !== void 0 ? _o : "↑" })));
+            return (_jsx(ArrayFieldUpButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: onClick }, { children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↑" })));
         case ArrayFieldButtonPurpose.MOVE_DOWN:
-            return (_jsx(ArrayFieldDownButton, __assign({}, ((_q = (_p = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _p === void 0 ? void 0 : _p.props) !== null && _q !== void 0 ? _q : {}), { onClick: onClick }, { children: (_s = (_r = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _r === void 0 ? void 0 : _r.content) !== null && _s !== void 0 ? _s : "↓" })));
+            return (_jsx(ArrayFieldDownButton, Object.assign({}, ((_p = (_o = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _o === void 0 ? void 0 : _o.props) !== null && _p !== void 0 ? _p : {}), { onClick: onClick }, { children: (_r = (_q = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _q === void 0 ? void 0 : _q.content) !== null && _r !== void 0 ? _r : "↓" })));
         default:
-            return (_jsx(ArrayFieldButton, __assign({}, ((_u = (_t = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _t === void 0 ? void 0 : _t.props) !== null && _u !== void 0 ? _u : {}), { onClick: onClick }, { children: (_w = (_v = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : "" })));
+            return (_jsx(ArrayFieldButton, Object.assign({}, ((_t = (_s = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _s === void 0 ? void 0 : _s.props) !== null && _t !== void 0 ? _t : {}), { onClick: onClick }, { children: (_v = (_u = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : "" })));
     }
 }
-export var FieldWrapper = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin: 0.5rem 0;\n"], ["\n  margin: 0.5rem 0;\n"])));
-export var FieldTitle = styled.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
-export var FieldDescription = styled.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
-export var FieldHelp = styled.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
-export var InfoFieldBoxElement = styled.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  transition: opacity 0.5s;\n  position: absolute;\n  z-index: 1080;\n  opacity: 0;\n  visibility: hidden;\n  margin: 0;\n  font-size: 0.875rem;\n  word-wrap: break-word;\n  min-width: max-content;\n\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(\n    ", ",\n    ", "\n  );\n"], ["\n  transition: opacity 0.5s;\n  position: absolute;\n  z-index: 1080;\n  opacity: 0;\n  visibility: hidden;\n  margin: 0;\n  font-size: 0.875rem;\n  word-wrap: break-word;\n  min-width: max-content;\n\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(\n    ", ",\n    ", "\n  );\n"])), function (_a) {
-    var position = _a.position;
-    return position === "bottom" ? "140%" : position === "top" ? "auto" : "50%";
-}, function (_a) {
-    var position = _a.position;
-    return position === "top"
-        ? "140%"
-        : position === "right" || position === "left"
-            ? "50%"
-            : "auto";
-}, function (_a) {
-    var position = _a.position;
-    return position === "right"
-        ? "100%"
-        : position === "bottom" || position === "top"
-            ? "50%"
-            : "auto";
-}, function (_a) {
-    var position = _a.position;
-    return position === "left"
-        ? "100%"
-        : position === "bottom" || position === "top"
-            ? "50%"
-            : "auto";
-}, function (_a) {
-    var position = _a.position;
-    return position === "bottom" || position === "top" ? "-50%" : "0";
-}, function (_a) {
-    var position = _a.position;
-    return position === "right" || position === "left" ? "-50%" : "0";
-});
-export var InfoFieldBoxArrowElement = styled.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  border: solid transparent;\n  content: \"\";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-top-color: ", ";\n  border-bottom-color: ", ";\n  border-right-color: ", ";\n  border-left-color: ", ";\n  border-width: 5px;\n  margin-left: -5px;\n"], ["\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  border: solid transparent;\n  content: \"\";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-top-color: ", ";\n  border-bottom-color: ", ";\n  border-right-color: ", ";\n  border-left-color: ", ";\n  border-width: 5px;\n  margin-left: -5px;\n"])), function (_a) {
-    var position = _a.position;
-    return position === "top"
-        ? "100%"
-        : position === "right" || position === "left"
-            ? "40%"
-            : "unset";
-}, function (_a) {
-    var position = _a.position;
-    return position === "top" || position === "bottom"
+export const FieldWrapper = styled.div `
+  margin: 0.5rem 0;
+`;
+export const FieldTitle = styled.label `
+  font-weight: 700;
+`;
+export const FieldDescription = styled.p `
+  margin: 0;
+  font-size: 0.9em;
+`;
+export const FieldHelp = styled.p `
+  margin: 0;
+  font-size: 0.9em;
+`;
+export const InfoFieldBoxElement = styled.div `
+  transition: opacity 0.5s;
+  position: absolute;
+  z-index: 1080;
+  opacity: 0;
+  visibility: hidden;
+  margin: 0;
+  font-size: 0.875rem;
+  word-wrap: break-word;
+  min-width: max-content;
+
+  top: ${({ position }) => position === "bottom" ? "140%" : position === "top" ? "auto" : "50%"};
+  bottom: ${({ position }) => position === "top"
+    ? "140%"
+    : position === "right" || position === "left"
+        ? "50%"
+        : "auto"};
+  left: ${({ position }) => position === "right"
+    ? "100%"
+    : position === "bottom" || position === "top"
         ? "50%"
-        : position === "right"
-            ? "-2%"
-            : "102.5%";
-}, function (_a) {
-    var position = _a.position;
-    return (position === "bottom" ? "100%" : "unset");
-}, function (_a) {
-    var position = _a.position;
-    return position === "top" ? "grey" : "transparent";
-}, function (_a) {
-    var position = _a.position;
-    return position === "bottom" ? "grey" : "transparent";
-}, function (_a) {
-    var position = _a.position;
-    return position === "right" ? "grey" : "transparent";
-}, function (_a) {
-    var position = _a.position;
-    return position === "left" ? "grey" : "transparent";
-});
-export var InfoFieldBoxInnerElement = styled.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding: 0.25rem 0.5rem;\n  color: white;\n  text-align: center;\n  background: grey;\n  border: solid 1px grey;\n  border-radius: 0.25rem;\n  cursor: default;\n"], ["\n  padding: 0.25rem 0.5rem;\n  color: white;\n  text-align: center;\n  background: grey;\n  border: solid 1px grey;\n  border-radius: 0.25rem;\n  cursor: default;\n"])));
-export var InfoFieldContainerElement = styled.a(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  position: relative;\n  color: black;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  border: 1px solid black;\n  border-radius: 50%;\n  line-height: 1em;\n  font-size: 0.7em;\n  padding: 0 0.44em;\n  text-decoration: unset;\n\n  &:active,\n  &:focus {\n    color: white;\n    background: black;\n    ", " {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n"], ["\n  position: relative;\n  color: black;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  border: 1px solid black;\n  border-radius: 50%;\n  line-height: 1em;\n  font-size: 0.7em;\n  padding: 0 0.44em;\n  text-decoration: unset;\n\n  &:active,\n  &:focus {\n    color: white;\n    background: black;\n    ", " {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n"])), InfoFieldBoxElement);
-export var InfoFieldLabel = styled.span(templateObject_29 || (templateObject_29 = __makeTemplateObject([""], [""])));
-export var InfoFieldButton = function (_a) {
-    var label = _a.label, content = _a.content, position = _a.position, props = _a.props, className = _a.className;
-    return (_jsxs(InfoFieldContainerElement, __assign({ href: "#", onClick: function (e) { return e.preventDefault(); }, className: className }, { children: [_jsx(InfoFieldLabel, { children: label !== null && label !== void 0 ? label : "i" }), _jsxs(InfoFieldBoxElement, __assign({ position: position !== null && position !== void 0 ? position : "top", role: "tooltip" }, { children: [_jsx(InfoFieldBoxArrowElement, { position: position !== null && position !== void 0 ? position : "top" }), _jsx(InfoFieldBoxInnerElement, { children: content })] }))] })));
+        : "auto"};
+  right: ${({ position }) => position === "left"
+    ? "100%"
+    : position === "bottom" || position === "top"
+        ? "50%"
+        : "auto"};
+  transform: translate(
+    ${({ position }) => position === "bottom" || position === "top" ? "-50%" : "0"},
+    ${({ position }) => position === "right" || position === "left" ? "-50%" : "0"}
+  );
+`;
+export const InfoFieldBoxArrowElement = styled.div `
+  top: ${({ position }) => position === "top"
+    ? "100%"
+    : position === "right" || position === "left"
+        ? "40%"
+        : "unset"};
+  left: ${({ position }) => position === "top" || position === "bottom"
+    ? "50%"
+    : position === "right"
+        ? "-2%"
+        : "102.5%"};
+  bottom: ${({ position }) => (position === "bottom" ? "100%" : "unset")};
+  border: solid transparent;
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-top-color: ${({ position }) => position === "top" ? "grey" : "transparent"};
+  border-bottom-color: ${({ position }) => position === "bottom" ? "grey" : "transparent"};
+  border-right-color: ${({ position }) => position === "right" ? "grey" : "transparent"};
+  border-left-color: ${({ position }) => position === "left" ? "grey" : "transparent"};
+  border-width: 5px;
+  margin-left: -5px;
+`;
+export const InfoFieldBoxInnerElement = styled.div `
+  padding: 0.25rem 0.5rem;
+  color: white;
+  text-align: center;
+  background: grey;
+  border: solid 1px grey;
+  border-radius: 0.25rem;
+  cursor: default;
+`;
+export const InfoFieldContainerElement = styled.a `
+  position: relative;
+  color: black;
+  background: none;
+  outline: none;
+  cursor: pointer;
+  border: 1px solid black;
+  border-radius: 50%;
+  line-height: 1em;
+  font-size: 0.7em;
+  padding: 0 0.44em;
+  text-decoration: unset;
+
+  &:active,
+  &:focus {
+    color: white;
+    background: black;
+    ${InfoFieldBoxElement} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;
+export const InfoFieldLabel = styled.span ``;
+export const InfoFieldButton = ({ label, content, position, props, className, }) => {
+    return (_jsxs(InfoFieldContainerElement, Object.assign({ href: "#", onClick: (e) => e.preventDefault(), className: className }, { children: [_jsx(InfoFieldLabel, { children: label !== null && label !== void 0 ? label : "i" }), _jsxs(InfoFieldBoxElement, Object.assign({ position: position !== null && position !== void 0 ? position : "top", role: "tooltip" }, { children: [_jsx(InfoFieldBoxArrowElement, { position: position !== null && position !== void 0 ? position : "top" }), _jsx(InfoFieldBoxInnerElement, { children: content })] }))] })));
 };
 InfoFieldButton.styles = {
     InfoFieldContainerElementStyle: InfoFieldContainerElement,
@@ -167,14 +200,186 @@ InfoFieldButton.styles = {
     InfoFieldBoxArrowElementStyle: InfoFieldBoxArrowElement,
     InfoFieldLabelStyle: InfoFieldLabel,
 };
-export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_30 || (templateObject_30 = __makeTemplateObject([""], [""])));
+// <--- InfoFieldButton
+export const ErrorMessage = styled(formik.ErrorMessage) ``;
 /*
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
  *
  */
-export var FieldInput = styled(function (_a) {
-    var formikAs = _a.formikAs, props = __rest(_a, ["formikAs"]);
-    return _jsx(formik.Field, __assign({}, props, { as: formikAs }));
-})(templateObject_31 || (templateObject_31 = __makeTemplateObject([""], [""])));
-export var RequiredIndicator = styled.span(templateObject_32 || (templateObject_32 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
+export const FieldInput = styled((_a) => {
+    var { formikAs } = _a, props = __rest(_a, ["formikAs"]);
+    return _jsx(formik.Field, Object.assign({}, props, { as: formikAs }));
+}) ``;
+export const RequiredIndicator = styled.span ``;
+// ToggleSwitchField --->
+export const Toggle = styled.span `
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 34px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 0.9em;
+    width: 0.9em;
+    background: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+    top: 0.13em;
+    left: 0.13em;
+  }
+`;
+export const ToggleLabel = styled.label `
+  position: relative;
+  display: inline-block;
+  width: 2em;
+`;
+export const ToggleFieldInput = styled(FieldInput) `
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + ${Toggle} {
+    background: #2196f3;
+  }
+
+  &:focus + ${Toggle} {
+    box-shadow: 0 0 1px #2196f3;
+  }
+
+  &:checked + ${Toggle}:before {
+    transform: translateX(0.85em);
+  }
+`;
+export const ToggleSwitchField = ({ inputProps, name, className, }) => {
+    return (_jsxs(ToggleLabel, Object.assign({ className: className }, { children: [_jsx(ToggleFieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), _jsx(Toggle, {})] })));
+};
+ToggleSwitchField.styles = {
+    ToggleLabelStyle: ToggleLabel,
+    ToggleFieldInputStyle: ToggleFieldInput,
+    ToggleStyle: Toggle,
+};
+// <--- ToggleSwitchField
+// RadioButtonField --->
+export const RadioButtonFieldContainer = styled.div `
+  display: flex;
+  gap: 1em;
+`;
+export const RadioButtonFieldElement = styled.label `
+  display: inline-flex;
+  align-items: center;
+`;
+export const RadioButtonFieldInput = styled(FieldInput) `
+  margin: unset;
+  margin-top: 0.15em;
+`;
+export const ButtonLabel = styled.span `
+  margin-left: 0.2em;
+`;
+export const ButtonLabelTrue = styled(ButtonLabel) ``;
+export const ButtonLabelFalse = styled(ButtonLabel) ``;
+export const RadioButtonField = ({ label, inputProps, name, className, }) => {
+    var _a, _b;
+    return (_jsxs(RadioButtonFieldContainer, Object.assign({ className: className }, { children: [_jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "true" })), _jsx(ButtonLabelTrue, { children: (_a = label === null || label === void 0 ? void 0 : label.true) !== null && _a !== void 0 ? _a : "true" })] }), _jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "false" })), _jsx(ButtonLabelFalse, { children: (_b = label === null || label === void 0 ? void 0 : label.false) !== null && _b !== void 0 ? _b : "false" })] })] })));
+};
+RadioButtonField.styles = {
+    RadioButtonFieldContainerStyle: RadioButtonFieldContainer,
+    RadioButtonFieldElementStyle: RadioButtonFieldElement,
+    RadioButtonFieldInputStyle: RadioButtonFieldInput,
+    ButtonLabelStyle: ButtonLabel,
+    ButtonLabelTrueStyle: ButtonLabelTrue,
+    ButtonLabelFalseStyle: ButtonLabelFalse,
+};
+// ---> SearchableMultiTagSelectField
+export const MultiSelectContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+export const MultiSelectInput = styled(FieldInput) ``;
+export const MultiSelectBadgeContainer = styled.div `
+  margin: 0.3em 0;
+  display: inline-flex;
+  gap: 1em;
+`;
+export const MultiSelectBadge = styled.span `
+  background: lightgray;
+  padding: 0 0.2em 0 0.5em;
+  border-radius: 0.1em;
+  display: flex;
+`;
+export const MultiSelectBadgeCloseElement = styled.span `
+  cursor: pointer;
+  margin-left: 0.5em;
+  font-size: 0.7em;
+  align-self: baseline;
+  font-family: sans-serif;
+`;
+export const MultiSelectOptionList = styled.ul `
+  padding: unset;
+  margin: unset;
+  border: 1px solid gray;
+  border-radius: 0.2em;
+  position: absolute;
+  background: white;
+  margin: 1.3em 0;
+`;
+export const MultiSelectOptionListItem = styled.li `
+  cursor: pointer;
+  list-style-type: none;
+  padding: 0.06em 0.2em;
+  height: 1.2em;
+  &:hover {
+    background: lightgray;
+  }
+`;
+export const MultiSelectOptionListWithoutItem = styled.li `
+  cursor: default;
+  color: gray;
+  list-style-type: none;
+  padding: 0.06em 0.2em;
+  height: 1.2em;
+`;
+export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }) => {
+    const [search, setSearch] = useState("");
+    function searchIncludedInEnum() {
+        const hasValue = enums === null || enums === void 0 ? void 0 : enums.values.map((value) => value.title.toLowerCase().includes(search.toLowerCase()));
+        return hasValue === null || hasValue === void 0 ? void 0 : hasValue.includes(true);
+    }
+    return (_jsx(Field, Object.assign({ className: className, name: name, multiple: true }, { children: ({ field, form: { setValues }, meta }) => {
+            var _a;
+            return (_jsxs(MultiSelectContainer, Object.assign({ className: className }, { children: [_jsx(FieldInput, Object.assign({ type: "hidden" }, field)), _jsx(MultiSelectInput, { className: className, type: "text", onChange: (e) => {
+                            setSearch(e.currentTarget.value);
+                        }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
+                            var _a;
+                            return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, Object.assign({ onClick: () => setValues({
+                                            [name]: field.value.filter((v) => v !== value),
+                                        }) }, { children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" }))] }));
+                        }) }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, Object.assign({ value: option.const, onClick: () => {
+                                var _a;
+                                setValues({
+                                    [name]: [
+                                        ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
+                                    ],
+                                });
+                                setSearch("");
+                            } }, { children: option.title }), index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) })), meta.touched && meta.error && (_jsx("div", Object.assign({ className: "error" }, { children: meta.error })))] })));
+        } })));
+};
+SearchableMultiTagSelectField.styles = {
+    MultiSelectContainerStyle: MultiSelectContainer,
+    MultiSelectInputStyle: MultiSelectInput,
+    MultiSelectBadgeContainerStyle: MultiSelectBadgeContainer,
+    MultiSelectBadgeStyle: MultiSelectBadge,
+    MultiSelectBadgeCloseElementStyle: MultiSelectBadgeCloseElement,
+    MultiSelectOptionListStyle: MultiSelectOptionList,
+    MultiSelectOptionListItemStyle: MultiSelectOptionListItem,
+    MultiSelectOptionListWithoutItemStyle: MultiSelectOptionListWithoutItem,
+};