@nolwenture/formik-jsonschema-form 1.0.0-beta.22 → 1.0.0-beta.25

package/README.md

@@ -630,7 +630,7 @@ const collapsibleSchema: Schema = {
 };
 
 const collapsibleUiSchema: UiSchema = {
-  colObject: { "ui:props": { isCollapsible: true } },
+  colObject: { "ui:options": { isCollapsible: true } },
 };
 ```
 

package/dist/cjs/Form/fields/ArrayField/ArrayField.js

@@ -32,7 +32,7 @@ const moveInArray = (values, index, direction) => {
     }
 };
 const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate, FieldTemplate }, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { fields: { SchemaField }, templates, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, schema, uiSchema } = props;
     const { type, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -99,9 +99,11 @@ const ArrayField = (props) => {
     const { disabled } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
     const preventManipulation = disabled || schema.readOnly;
-    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SelectFieldInput, { type,
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    const SelectedArrayFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ArrayFieldTemplate;
+    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SelectFieldInput, { type,
             readOnly: schema.readOnly,
-            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(ArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [(0, jsx_runtime_1.jsxs)(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema(itemSchema, schema), uiSchema: {
+            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [(0, jsx_runtime_1.jsxs)(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema(itemSchema, schema), uiSchema: {
                                 disabled,
                                 ...(uiSchema?.[index] || uiSchema?.items),
                             }, 

package/dist/cjs/Form/fields/BooleanField/BooleanField.js

@@ -8,12 +8,13 @@ const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const utils_1 = require("../../../utils");
 const BooleanField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const { values, setValues } = (0, formik_1.useFormikContext)();
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsxs)(BooleanFieldWrapper, { children: [(0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "checkbox" }), (0, jsx_runtime_1.jsx)("span", { onClick: () => {
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsxs)(BooleanFieldWrapper, { children: [(0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "checkbox" }), (0, jsx_runtime_1.jsx)("span", { onClick: () => {
                         setValues({
                             ...values,
                             [name]: !values?.[name],

package/dist/cjs/Form/fields/DateField/DateField.js

@@ -8,10 +8,11 @@ const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 const DateField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.DateFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.DateFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
 };
 exports.DateField = DateField;

package/dist/cjs/Form/fields/FileUploadField/FileUploadField.js

@@ -9,7 +9,7 @@ const FileUploadContext_1 = require("../../../common/FileUploadContext");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const FileUploadField = (props) => {
-    const { templates: { FieldTemplate }, components: { FileUploadFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { FileUploadFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -61,6 +61,7 @@ const FileUploadField = (props) => {
             setFieldValue(name, null);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FileUploadFieldInput, { ...inputProps, name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"], hideRemoveButton: inputProps?.removeButton.hidden }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FileUploadFieldInput, { ...inputProps, name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"], hideRemoveButton: inputProps?.removeButton.hidden }) }));
 };
 exports.FileUploadField = FileUploadField;

package/dist/cjs/Form/fields/MultipleChoiceField/MultipleChoiceField.js

@@ -8,7 +8,7 @@ const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const MultipleChoiceField = (props) => {
-    const { templates: { FieldTemplate }, components: { MultipleChoiceFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { MultipleChoiceFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema, schema } = props;
     const { props: inputProps, style } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -27,6 +27,7 @@ const MultipleChoiceField = (props) => {
                 return { "data-fjsf-string": name };
         }
     })();
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
 };
 exports.MultipleChoiceField = MultipleChoiceField;

package/dist/cjs/Form/fields/NullField/NullField.js

@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const FormRegistry_1 = require("../../FormRegistry");
 const NullField = (props) => {
-    const { templates: { FieldTemplate }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const { name, uiSchema } = props;
-    return (0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-null": name });
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-null": name }));
 };
 exports.NullField = NullField;

package/dist/cjs/Form/fields/ObjectField/ObjectField.js

@@ -17,7 +17,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 const ObjectField = (props) => {
-    const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { fields: { SchemaField }, templates, components: { ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldButton, ObjectFieldAddButton, ObjectFieldRemoveButton, ObjectFieldUpButton, ObjectFieldDownButton, ObjectFieldSection, }, hideUnmarkedAdditionalProperties, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
@@ -35,9 +35,6 @@ const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = (0, react_1.useMemo)(() => Object.keys(properties || {}), [properties]);
     const additionalValues = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
-        ? CollapsibleObjectFieldTemplate
-        : ObjectFieldTemplate;
     const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
     const orderedAddProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(additionalValues || {}));
     const additionalPropertiesInOrder = (0, utils_1.orderAdditionalProperties)(orderedAddProperties, Object.keys(additionalValues || {}));
@@ -55,7 +52,11 @@ const ObjectField = (props) => {
                 return ((0, jsx_runtime_1.jsx)(ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(FieldTemplateComponent, { ...props, "data-fjsf-object": name, children: [orderedProperties
+    const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ??
+        (props.uiSchema?.["ui:options"]?.isCollapsible
+            ? templates.CollapsibleObjectFieldTemplate
+            : templates.ObjectFieldTemplate);
+    return ((0, jsx_runtime_1.jsxs)(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name, children: [orderedProperties
                 .map((child) => {
                 if (typeof child === "string") {
                     const childSchema = properties?.[child];

package/dist/cjs/Form/fields/RadioField/RadioField.js

@@ -7,10 +7,11 @@ const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const RadioField = (props) => {
-    const { templates: { FieldTemplate }, components: { RadioFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { RadioFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
 };
 exports.RadioField = RadioField;

package/dist/cjs/Form/fields/SearchableMultiTagSelectField/SearchableMultiTagSelectField.js

@@ -7,11 +7,12 @@ const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const SearchableMultiTagSelectField = (props) => {
-    const { templates: { FieldTemplate }, components: { SearchableMultiTagSelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { SearchableMultiTagSelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { placeholder, emptySearchMessage, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
 };
 exports.SearchableMultiTagSelectField = SearchableMultiTagSelectField;

package/dist/cjs/Form/fields/SearchableSelectField/SearchableSelectField.js

@@ -8,7 +8,7 @@ const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const SearchableSelectField = (props) => {
-    const { templates: { FieldTemplate }, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { SearchableSelectFieldContainer, SearchableSelectFieldDropdownContainer, SearchableSelectFieldListOption, SearchableSelectFieldListExpand, SearchableSelectFieldNotFound, SearchableSelectFieldInputElement, SearchableSelectFieldClearButton, SearchableSelectFieldInputContainer, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const ListOption = (props) => {
         const { isActive, children, ...rest } = props;
@@ -119,7 +119,8 @@ const SearchableSelectField = (props) => {
     const fieldDataAttribute = schema.type === "string"
         ? { "data-fjsf-string": name }
         : { "data-fjsf-number": name };
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchableSelectFieldInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && ((0, jsx_runtime_1.jsxs)(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchableSelectFieldInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && ((0, jsx_runtime_1.jsxs)(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
                     //ref={moreRef} //TODO
                     style: {
                         maxHeight: dropdownOptions.height,

package/dist/cjs/Form/fields/StringField/StringField.js

@@ -9,7 +9,7 @@ const FormRegistry_1 = require("../../FormRegistry");
 const hooks_1 = require("../../hooks");
 const styledComponents_1 = require("./styledComponents");
 const StringField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput, SelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { FieldInput, SelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema = {}, schema } = props;
     const { type, placeholder, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -18,9 +18,10 @@ const StringField = (props) => {
     const fieldDataAttribute = schema.type === "string"
         ? { "data-fjsf-string": name }
         : { "data-fjsf-number": name };
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
     switch (enums?.type) {
         case "select":
-            return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectFieldInput, { type,
+            return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectFieldInput, { type,
                         readOnly: props.schema.readOnly,
                         ...inputProps, name: name, formikAs: "select", onChange: (e) => {
                             const selectedOption = enums?.values.find((option) => option.const.toString() === e.target.value);
@@ -32,7 +33,7 @@ const StringField = (props) => {
                                 hidden: true,
                                 ...uiSchema["ui:placeholderOptionOptions"]?.props, children: placeholder }), enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const.toString(), children: option.title }, index)))] }) }) }));
         default:
-            return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
+            return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
                         placeholder,
                         readOnly: props.schema.readOnly,
                         ...inputProps, name: name }) }) }));

package/dist/cjs/Form/fields/TextAreaField/TextAreaField.js

@@ -7,10 +7,11 @@ const utils_1 = require("../../../utils");
 const FormRegistry_1 = require("../../FormRegistry");
 const hooks_1 = require("../../hooks");
 const TextAreaField = (props) => {
-    const { templates: { FieldTemplate }, components: { TextAreaFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { TextAreaFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
 };
 exports.TextAreaField = TextAreaField;

package/dist/cjs/Form/fields/ToggleField/ToggleField.js

@@ -7,10 +7,11 @@ const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const ToggleField = (props) => {
-    const { templates: { FieldTemplate }, components: { ToggleFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { ToggleFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
 };
 exports.ToggleField = ToggleField;

package/dist/cjs/Form/fields/index.js

@@ -34,7 +34,6 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fields = exports.fieldComponents = void 0;
-//Please keep this in alphabetical order
 const AnyField = __importStar(require("./AnyField"));
 const ArrayField = __importStar(require("./ArrayField"));
 const BooleanField = __importStar(require("./BooleanField"));

package/dist/cjs/Form/index.js

@@ -15,10 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormTemplates = exports.FormFields = exports.FormComponents = void 0;
-__exportStar(require("../utils"), exports);
-__exportStar(require("../common/types"), exports);
-__exportStar(require("../common/constants"), exports);
-__exportStar(require("../common/FileUploadContext"), exports);
 __exportStar(require("./hooks"), exports);
 const fields_1 = require("./fields");
 Object.defineProperty(exports, "FormFields", { enumerable: true, get: function () { return fields_1.fields; } });

package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js

@@ -8,7 +8,7 @@ const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 const CollapsibleObjectFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    const { Toggle, ChildWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
+    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
     const { children, name, uiSchema, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
@@ -29,6 +29,6 @@ const CollapsibleObjectFieldTemplate = (props) => {
     };
     const [collapsed, setCollapsed] = (0, react_1.useState)(isCollapsedOnLoad);
     const hide = collapsed;
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(Wrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
 };
 exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;

package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/styledComponents.js

@@ -41,6 +41,7 @@ function getComponents(components) {
             components.ObjectFieldTemplateErrorMessage ??
             components.ErrorMessage,
         Toggle: components.CollapsibleObjectFieldTemplateToggle,
-        ChildWrapper: components.CollapsibleObjectFieldTemplateToggle,
+        ChildrenWrapper: components.CollapsibleObjectFieldTemplateWrapper ??
+            components.ObjectFieldTemplateWrapper,
     };
 }

package/dist/cjs/Form/templates/index.js

@@ -34,7 +34,6 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = exports.templateComponents = void 0;
-//Please keep this in alphabetical order
 const ArrayFieldTemplate = __importStar(require("./ArrayFieldTemplate"));
 const CollapsibleObjectFieldTemplate = __importStar(require("./CollapsibleObjectFieldTemplate"));
 const FieldTemplate = __importStar(require("./FieldTemplate"));

package/dist/cjs/FormView/components/Field.js

@@ -11,8 +11,8 @@ const getStyle_1 = require("../../utils/getStyle");
 exports.FieldWrapper = styled_components_1.default.div `
     color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
-    margin: ${(props) => `${props.theme.spacing.l} 0 `};
-    width: clamp(20rem, 100%, 70rem);
+    margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
+    width: min(100%, 70rem);
 `;
 exports.FieldTitle = styled_components_1.default.label `
     break-before: avoid;
@@ -22,7 +22,6 @@ exports.FieldTitle = styled_components_1.default.label `
     font-size: ${(props) => props.theme.typography.size.base};
     font-weight: ${(props) => props.theme.typography.weight.bold};
     margin: ${(props) => `${props.theme.spacing.xs} 0`};
-    padding-top: ${(props) => props.theme.spacing.s};
     width: 100%;
 `;
 exports.FieldDescription = styled_components_1.default.div `
@@ -39,7 +38,7 @@ exports.StringFieldValue = styled_components_1.default.div `
     break-before: avoid;
     color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
-    margin-bottom: ${(props) => props.theme.spacing.m};
+    margin-bottom: ${(props) => props.theme.spacing.l};
     max-width: 66ch;
     padding-left: ${(props) => props.theme.spacing.l};
     white-space: pre-line;
@@ -48,7 +47,7 @@ exports.TextAreaValue = styled_components_1.default.div `
     break-before: avoid;
     color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
-    margin-bottom: ${(props) => props.theme.spacing.m};
+    margin-bottom: ${(props) => props.theme.spacing.l};
     max-width: 66ch;
     padding-left: ${(props) => props.theme.spacing.l};
     white-space: pre-line;

package/dist/cjs/FormView/fields/ArrayField.js

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const FormViewRegistry_1 = require("../FormViewRegistry");
 const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
+    const { fields: { SchemaField }, templates, components: { ArrayFieldItem }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema } = props;
     const [{ value }, _] = (0, formik_1.useField)(name);
     const findEnumInProps = props.schema.additionalItems
@@ -20,7 +20,8 @@ const ArrayField = (props) => {
         }
         return item;
     }
-    return ((0, jsx_runtime_1.jsx)(ArrayFieldTemplate, { ...props, children: value &&
+    const SelectedArrayFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ArrayFieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedArrayFieldTemplate, { ...props, children: value &&
             value.map((item, index) => typeof item === "object" ? ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: typeof props.schema.additionalItems !== "boolean"
                         ? props.schema.additionalItems
                         : {}, uiSchema: uiSchema }) }, index)) : ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)("div", { "data-keyword": item, children: getValue(item) }) }, item))) }));

package/dist/cjs/FormView/fields/BooleanField.js

@@ -7,7 +7,7 @@ const formik_1 = require("formik");
 const utils_1 = require("../../utils");
 const FormViewRegistry_1 = require("../FormViewRegistry");
 const BooleanField = (props) => {
-    const { templates: { FieldTemplate }, components: { BooleanFieldValue, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
+    const { templates, components: { BooleanFieldValue, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema } = props;
     const { label } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const { values } = (0, formik_1.useFormikContext)();
@@ -25,6 +25,7 @@ const BooleanField = (props) => {
         }
         return typeof label === "string" ? label : undefined;
     }
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(BooleanFieldWrapper, { children: (0, jsx_runtime_1.jsx)(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(BooleanFieldWrapper, { children: (0, jsx_runtime_1.jsx)(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
 };
 exports.BooleanField = BooleanField;

package/dist/cjs/FormView/fields/MultipleChoiceField.js

@@ -7,7 +7,7 @@ const formik_1 = require("formik");
 const utils_1 = require("../../utils");
 const FormViewRegistry_1 = require("../FormViewRegistry");
 const MultipleChoiceField = (props) => {
-    const { templates: { FieldTemplate }, components: { MultipleChoiceFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
+    const { templates, components: { MultipleChoiceFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema } = props;
     const { props: inputProps, style, onlyShowSelected, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
@@ -16,6 +16,7 @@ const MultipleChoiceField = (props) => {
     const selected = (0, utils_1.getSelectedEnum)(value, enums);
     const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v));
     const hideNotSelected = onlyShowSelected === true || selected === undefined;
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
 };
 exports.MultipleChoiceField = MultipleChoiceField;

package/dist/cjs/FormView/fields/NullField.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const FormViewRegistry_1 = require("../FormViewRegistry");
 const NullField = (props) => {
-    const { templates: { FieldTemplate }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
-    return (0, jsx_runtime_1.jsx)(FieldTemplate, { ...props });
+    const { templates } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return (0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props });
 };
 exports.NullField = NullField;

package/dist/cjs/FormView/fields/ObjectField/ObjectField.js

@@ -15,7 +15,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 const ObjectField = (props) => {
-    const { fields: { SchemaField }, components: { ObjectFieldSection }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
+    const { fields: { SchemaField }, components: { ObjectFieldSection }, templates, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, schema, uiSchema } = props;
     const { value, setValue } = useObjectField(name);
     const [{ properties }, valuesToRemove] = (0, react_1.useMemo)(() => {
@@ -30,11 +30,9 @@ const ObjectField = (props) => {
             setValue(newValue);
         }
     }, [valuesToRemove]);
-    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
-        ? CollapsibleObjectFieldTemplate
-        : ObjectFieldTemplate;
     const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    return ((0, jsx_runtime_1.jsx)(FieldTemplateComponent, { ...props, children: orderedProperties
+    const SelectedObjectFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.ObjectFieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedObjectFieldTemplate, { ...props, children: orderedProperties
             .map((child, index) => {
             if (typeof child === "string") {
                 const childSchema = properties?.[child];

package/dist/cjs/FormView/fields/StringField.js

@@ -7,7 +7,7 @@ const formik_1 = require("formik");
 const utils_1 = require("../../utils");
 const FormViewRegistry_1 = require("../FormViewRegistry");
 const StringField = (props) => {
-    const { templates: { FieldTemplate }, components: { StringFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
+    const { templates, components: { StringFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name } = props;
     const { values } = (0, formik_1.useFormikContext)();
     const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
@@ -16,6 +16,7 @@ const StringField = (props) => {
         value =
             enums.values.find((element) => element.const === value)?.title ?? value;
     }
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(StringFieldValue, { "data-keyword": value, children: value }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(StringFieldValue, { "data-keyword": value, children: value }) }));
 };
 exports.StringField = StringField;

package/dist/cjs/FormView/fields/TextAreaField.js

@@ -6,10 +6,11 @@ const react_1 = require("react");
 const formik_1 = require("formik");
 const FormViewRegistry_1 = require("../FormViewRegistry");
 const TextAreaField = (props) => {
-    const { templates: { FieldTemplate }, components: { TextAreaValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
+    const { templates, components: { TextAreaValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema } = props;
     const { values } = (0, formik_1.useFormikContext)();
     const value = (0, formik_1.getIn)(values, name);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(TextAreaValue, { children: value }) }));
+    const SelectedFieldTemplate = templates[props.uiSchema?.["ui:template"]] ?? templates.FieldTemplate;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(TextAreaValue, { children: value }) }));
 };
 exports.TextAreaField = TextAreaField;

package/dist/cjs/FormView/index.js

@@ -15,10 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormViewTemplates = exports.FormViewFields = exports.FormViewComponents = void 0;
-__exportStar(require("../utils"), exports);
-__exportStar(require("../common/types"), exports);
-__exportStar(require("../common/constants"), exports);
-__exportStar(require("../common/FileUploadContext"), exports);
 const fields_1 = require("./fields");
 Object.defineProperty(exports, "FormViewFields", { enumerable: true, get: function () { return fields_1.fields; } });
 const components_1 = require("./components");

package/dist/cjs/FormView/templates/index.js

@@ -34,15 +34,12 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = exports.templateComponents = void 0;
-//Please keep this in alphabetical order
 const ArrayFieldTemplate = __importStar(require("./ArrayFieldTemplate"));
 const FieldTemplate = __importStar(require("./FieldTemplate"));
 const ObjectFieldTemplate = __importStar(require("./ObjectFieldTemplate"));
-const CollapsibleObjectFieldTemplate = __importStar(require("./CollapsibleObjectFieldTemplate"));
 //Please keep this in alphabetical order
 exports.templateComponents = {
     ...ArrayFieldTemplate.components,
-    //...CollapsibleObjectFieldTemplate.components, // In print version this should look same as the ObjectFieldTemplate
     //...FieldTemplate.components, // Field template uses generic components (should it own those?)
     ...ObjectFieldTemplate.components,
 };
@@ -51,5 +48,4 @@ exports.templates = {
     ...ArrayFieldTemplate.templates,
     ...FieldTemplate.templates,
     ...ObjectFieldTemplate.templates,
-    ...CollapsibleObjectFieldTemplate.templates,
 };

package/dist/cjs/common/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./FileUploadContext"), exports);

package/dist/cjs/common/types/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Field"), exports);
 __exportStar(require("./Form"), exports);
 __exportStar(require("./Schemas"), exports);
+__exportStar(require("./Templates"), exports);

package/dist/cjs/index.js

@@ -15,5 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 //This file exists for purpose releasing "moduleResolution": "node" compatible version (until we split this to multiple packages)
+__exportStar(require("./common"), exports);
 __exportStar(require("./Form"), exports);
 __exportStar(require("./FormView"), exports);
+__exportStar(require("./utils"), exports);