@nolwenture/formik-jsonschema-form 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/esm/Form/fields/ToggleField/styledComponents.js

@@ -7,8 +7,8 @@ export const ToggleFieldToggle = styled.span `
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
+  background: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   -webkit-transition: 0.4s;
   transition: 0.4s;
   border-radius: ${(props) => props.theme.borderRadius.circle};
@@ -18,7 +18,7 @@ export const ToggleFieldToggle = styled.span `
     content: "";
     height: 0.9rem;
     width: 0.9rem;
-    background: ${(props) => props.theme.background.default};
+    background: ${(props) => props.theme.color.background.default};
     -webkit-transition: 0.4s;
     transition: 0.4s;
     border-radius: ${(props) => props.theme.borderRadius.circle};
@@ -30,6 +30,10 @@ export const ToggleFieldLabel = styled.label `
   position: relative;
   display: inline-block;
   width: 2rem;
+
+  &:has(input[readonly]) {
+    pointer-events: none;
+  }
 `;
 export const ToggleFieldInputElement = styled(FieldInput) `
   opacity: 0;
@@ -37,7 +41,7 @@ export const ToggleFieldInputElement = styled(FieldInput) `
   height: 0;
 
   &:checked + ${ToggleFieldToggle} {
-    //background: ${(props) => props.theme.background.input};
+    //background: ${(props) => props.theme.color.background.input};
   }
 
   &:focus + ${ToggleFieldToggle} {

package/dist/esm/Form/index.js

@@ -7,4 +7,5 @@ import { fields as FormFields } from "./fields";
 import { components as FormComponents } from "./components";
 import { templates as FormTemplates } from "./templates";
 export * from "./Form";
+export * from "./FormRegistry";
 export { FormComponents, FormFields, FormTemplates };

package/dist/esm/Form/styles/common.js

@@ -2,12 +2,12 @@ import { css } from "styled-components";
 import { darken, readableColor } from "polished";
 export const commonButtonStyles = css `
   button {
-    background-color: ${(props) => props.theme.intent.none};
+    background-color: ${(props) => props.theme.color.intent.default.none};
     border: none;
     font-size: ${(props) => props.theme.typography.size.base};
     &:hover {
-      background: ${(props) => darken(0.1, props.theme.intent.none)};
-      color: ${(props) => readableColor(darken(0.1, props.theme.intent.none))};
+      background: ${(props) => darken(0.1, props.theme.color.intent.default.none)};
+      color: ${(props) => readableColor(darken(0.1, props.theme.color.intent.default.none))};
     }
     padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
 
@@ -18,17 +18,17 @@ export const commonButtonStyles = css `
 `;
 export const commonInputStyles = css `
   input {
-    background-color: ${(props) => props.theme.background.input};
+    background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.none};
     border: ${(props) => `${props.theme.strokeWidth.thin} solid
-        ${props.theme.border.default}`};
-    color: ${(props) => props.theme.text.default};
+        ${props.theme.color.border.default}`};
+    color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
     font-size: ${(props) => props.theme.typography.size.base};
     padding: ${(props) => props.theme.spacing.s};
 
     ::placeholder {
-      color: ${(props) => props.theme.text.muted};
+      color: ${(props) => props.theme.color.text.muted};
     }
 
     &:focus {
@@ -41,11 +41,11 @@ export const commonCheckboxStyles = css `
     margin-left: 0;
     -webkit-appearance: none;
     appearance: none;
-    background-color: ${(props) => props.theme.background.input};
+    background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.none};
     border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.border.default};
-    color: ${(props) => readableColor(props.theme.background.input)};
+      ${(props) => props.theme.color.border.default};
+    color: ${(props) => readableColor(props.theme.color.background.input)};
     cursor: pointer;
     display: grid;
     font: inherit;
@@ -133,7 +133,7 @@ export const commonCheckboxStyles = css `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -145,11 +145,11 @@ export const commonRadioStyles = css `
   input[type="radio"] {
     -webkit-appearance: none;
     appearance: none;
-    background-color: ${(props) => props.theme.background.input};
+    background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.circle};
     border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.border.default};
-    color: ${(props) => readableColor(props.theme.background.input)};
+      ${(props) => props.theme.color.border.default};
+    color: ${(props) => readableColor(props.theme.color.background.input)};
     cursor: pointer;
     display: grid;
     font: inherit;
@@ -174,7 +174,7 @@ export const commonRadioStyles = css `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -183,26 +183,44 @@ export const commonRadioStyles = css `
   }
 `;
 export const commonSelectStyles = css `
-  select {
-    background-color: ${(props) => props.theme.background.input};
-    border-radius: ${(props) => props.theme.borderRadius.none};
-    border: ${(props) => `${props.theme.strokeWidth.thin} solid
-        ${props.theme.border.default}`};
-    color: ${(props) => props.theme.text.default};
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-size: ${(props) => props.theme.typography.size.base};
-    font-weight: ${(props) => props.theme.typography.weight.base};
-    padding: ${(props) => `${props.theme.spacing.s}`};
+    select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        background-color: ${(props) => props.theme.color.background.input};
+        border-radius: ${(props) => props.theme.borderRadius.none};
+        border: ${(props) => `${props.theme.strokeWidth.thin} solid
+            ${props.theme.color.border.default}`};
+        color: ${(props) => props.theme.color.text.default};
+        cursor: pointer;
+        font-family: ${(props) => props.theme.typography.fontFamily.base};
+        font-size: ${(props) => props.theme.typography.size.base};
+        font-weight: ${(props) => props.theme.typography.weight.normal};
+        outline: none;
+        padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+        width: 100%;
+        
+        background-image: ${(props) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 320 512'%3E%3Cpath fill='${encodeURIComponent(props.theme.color.text.default)}' d='M31 192h258c17 0 26 21 14 33l-129 129c-8 8-21 8-29 0L17 225c-12-12-3-33 14-33z'/%3E%3C/svg%3E")`};
+        background-position: ${(props) => `right ${props.theme.spacing.m} top 50%`};
+        background-repeat: no-repeat;
+        background-size: ${(props) => props.theme.spacing.l}; auto;
 
-    &:focus {
-      ${(props) => props.theme.focus.default};
+        &:focus {
+            ${(props) => props.theme.focus.default};
+        }
+    } 
+
+    select[multiple] {
+        appearance: auto;
+        background-image: none;
+        overflow: auto;
     }
-  }
 `;
 export const datePickerIconStyles = css `
-    ::-webkit-calendar-picker-indicator {
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.text.default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
+  ::-webkit-calendar-picker-indicator {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.color.text
+    .default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
 
-        cursor: pointer;
-    }
+    cursor: pointer;
+  }
 `;

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

@@ -9,9 +9,9 @@ export const CollapsibleObjectFieldTemplate = (props) => {
     const { children, name, uiSchema, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
-    const { help, info, 
+    const { help, info, isCollapsedOnLoad = true, openIcon, collapsedIcon, 
     //TODO: This is not right
-    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, ariaLabel,
     // error: errorProps,
      } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const dataAttributes = Object.keys(otherProps)

package/dist/esm/Form/templates/ObjectFieldTemplate/styledComponents.js

@@ -1,7 +1,7 @@
 import { styled } from "styled-components";
 import { commonInputStyles, commonSelectStyles } from "../../styles/common";
 export const ObjectFieldTemplateWrapper = styled.fieldset `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   margin-inline: 0;
   margin-bottom: ${(props) => props.theme.spacing.xs};
@@ -9,7 +9,7 @@ export const ObjectFieldTemplateWrapper = styled.fieldset `
   ${commonSelectStyles}
 `;
 export const ObjectFieldTemplateTitle = styled.legend `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
 export const ObjectFieldTemplateDescription = undefined;

package/dist/esm/FormView/FormView.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
 import { warnFromUnsupportedKeys } from "../utils";
 import { fields as defaultFields } from "./fields";
 import { components as defaultComponents } from "./components";
 import { templates as defaultTemplates } from "./templates";
 import { FormViewRegistry } from "./FormViewRegistry";
+export const FormWrapper = styled.div `
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  //padding: ${(props) => props.theme.spacing.xxxxxl};
+`;
 export const FormView = (props) => {
     warnFromUnsupportedKeys("Form", props, [
         "schema",
@@ -17,9 +22,8 @@ export const FormView = (props) => {
         "formContext",
         "components",
         "hideUnmarkedAdditionalProperties",
-        "values",
     ]);
-    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, values = {}, } = props;
+    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;
     const registry = {
@@ -34,5 +38,5 @@ export const FormView = (props) => {
     };
     const { Form: FormEl } = registry.components;
     const SchemaField = registry.fields.SchemaField;
-    return (_jsx(FormViewRegistry.Provider, { value: registry, children: _jsx(FormEl, { className: className, children: _jsx(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }));
+    return (_jsx(FormWrapper, { children: _jsx(FormViewRegistry.Provider, { value: registry, children: _jsx(FormEl, { className: className, children: _jsx(SchemaField, { name: "", schema: schema, uiSchema: uiSchema }) }) }) }));
 };

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

@@ -1,10 +1,111 @@
-import { styled } from "styled-components";
-export const FieldWrapper = styled.div ``;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldLabel, } from "../../Form/fields/MultipleChoiceField/styledComponents";
+import { getStyle } from "../../utils/getStyle";
+export const FieldWrapper = styled.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);
+`;
 export const FieldTitle = styled.label `
-  font-size: ${(props) => props.theme.typography.size.base};
+    break-before: avoid;
+    color: ${(props) => props.theme.color.text.default};
+    display: inline-block;
+    font-family: ${(props) => props.theme.typography.fontFamily.heading};
+    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%;
+`;
+export const FieldDescription = styled.div `
+    break-before: avoid;
+    color: ${(props) => props.theme.color.text.default};
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-weight: ${(props) => props.theme.typography.weight.normal};
+    font-style: italic;
+    font-size: ${(props) => props.theme.typography.size.base};
+    margin-bottom: ${(props) => props.theme.spacing.xs};
+    max-width: 66ch;
+`;
+export const StringFieldValue = styled.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};
+    max-width: 66ch;
+    white-space: pre-line;
+`;
+export const TextAreaValue = styled.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};
+    max-width: 66ch;
+    white-space: pre-line;
+`;
+export const ArrayFieldItem = styled.div `
+    break-before: avoid;
+    color: ${(props) => props.theme.color.text.default};
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+export const EJSFieldValue = styled.div `
+    break-before: avoid;
+    color: ${(props) => props.theme.color.text.default};
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    width: 100%;
+`;
+const NotSelected = styled.div `
+  opacity: 0.3;
+  display: flex;
+  align-items: start;
+`;
+const Selected = styled.div `
+  display: flex;
+  align-items: start;
+`;
+const SelectedBox = styled.span `
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
+  padding: ${(props) => `0 ${props.theme.spacing.xs}`};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
+  display: inline-flex;
+  justify-content: center;
+  align-items: start;
+`;
+const NotSelectedCircle = styled.span `
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
+  padding: ${(props) => props.theme.spacing.xxs};
+  border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-weight: ${(props) => props.theme.typography.weight.medium};
-  margin-right: ${(props) => props.theme.spacing.s};
-  color: ${(props) => props.theme.text.default};
+  font-size: ${(props) => props.theme.typography.size.small};
+  line-height: 1.1;
+  display: inline-flex;
+  justify-content: center;
+  align-items: start;
+  flex: 0 0 1rem;
+`;
+export const BooleanFieldWrapper = styled.div `
+    break-before: avoid;
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+  
+`;
+export const MultipleChoiceFieldWrapper = styled.div `
+    break-before: avoid;
+    label {
+        align-items: start;
+    }
 `;
-export const FieldDescription = styled.div ``;
+export const BooleanFieldValue = ({ name, className, value, label, }) => {
+    return (_jsx("div", { className: className, children: value === true ? (_jsxs("div", { children: [_jsx("span", { children: "\u2713" }), _jsx("span", { children: label !== undefined ? label : "Selected" })] })) : (_jsxs("div", { children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: label !== undefined ? label : "Not selected" })] })) }));
+};
+export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
+    return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, { children: "Nothing was selected" }), selected &&
+                    selected.length > 0 &&
+                    selected.map((s) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: "\u2713" }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                    notSelected?.length > 0 &&
+                    notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: "\u2715" }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+};

package/dist/esm/FormView/components/index.js

@@ -7,9 +7,7 @@ import { templateComponents } from "../templates";
 import * as Field from "./Field";
 import * as Form from "./Form";
 import * as Icon from "./Icon";
-import * as oldComponents from "./old_styledComponents";
 export const components = {
-    ...oldComponents,
     ...fieldComponents,
     ...templateComponents,
     //Please keep this in alphabetical order

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

@@ -27,7 +27,7 @@ export const ObjectField = (props) => {
             setValue(newValue);
         }
     }, [valuesToRemove]);
-    const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
+    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));

package/dist/esm/FormView/index.js

@@ -1,3 +1,10 @@
-export * from "./fields";
-export * from "./templates";
+export * from "../utils";
+export * from "../common/types";
+export * from "../common/constants";
+export * from "../common/FileUploadContext";
+import { fields as FormViewFields } from "./fields";
+import { components as FormViewComponents } from "./components";
+import { templates as FormViewTemplates } from "./templates";
 export * from "./FormView";
+export * from "./FormViewRegistry";
+export { FormViewComponents, FormViewFields, FormViewTemplates };

package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js

@@ -1,6 +1,13 @@
 import styled from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.div ``;
-export const ObjectFieldTemplateTitle = styled.div ``;
+export const ObjectFieldTemplateTitle = styled.div `
+    break-before: avoid;
+    color: ${(props) => props.theme.color.text.default};
+    font-family: ${(props) => props.theme.typography.fontFamily.heading};
+    font-size: ${(props) => props.theme.typography.size.h4};
+    font-weight: ${(props) => props.theme.typography.weight.bold};
+    margin: ${(props) => `${props.theme.spacing.l} 0`};
+`;
 export const ObjectFieldTemplateDescription = undefined;
 export function getComponents(components) {
     return {

package/dist/esm/FormView/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 //This file exists for purpose releasing "moduleResolution": "node" compatible version (until we split this to multiple packages)
 export * from "./Form";
-export * as view from "./FormView";
+export * from "./FormView";

package/dist/esm/styles/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/getTitleAndDescription.js

@@ -1,9 +1,10 @@
 export const getTitle = ({ title, uiSchema, schema, name, }) => {
-    return (title ||
-        uiSchema?.["ui:options"]?.title ||
-        uiSchema?.["ui:title"] ||
-        schema?.title ||
-        name?.split(".")[name?.split(".").length - 1]);
+    return uiSchema?.["ui:options"]?.hideTitle
+        ? undefined
+        : title ||
+            uiSchema?.["ui:title"] ||
+            schema?.title ||
+            name?.split(".")[name?.split(".").length - 1];
 };
 export const getDescription = ({ description, uiSchema, schema, }) => {
     return (description ||

package/dist/esm/utils/index.js

@@ -9,6 +9,7 @@ export * from "./solveReferences";
 export * from "./createInitialValues";
 export * from "./createValidationSchema";
 export * from "./orderByUiSchema";
+export * from "./orderAdditionalProperties";
 //TODO: REMOVE WHEN ALL SUPPORTED
 export const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
     Object.keys(data).forEach((key) => {

package/dist/esm/utils/orderAdditionalProperties.js

@@ -0,0 +1,43 @@
+export function orderAdditionalProperties(uiOrderArray, valuesArray) {
+    if (uiOrderArray.length === 0)
+        return valuesArray;
+    const includesAsterisk = uiOrderArray.includes("*");
+    const filteredValues = (arr) => arr.filter((element) => valuesArray.includes(element));
+    let finalArray = [];
+    if (!includesAsterisk) {
+        finalArray = filteredValues(uiOrderArray);
+    }
+    else {
+        const uiOrderArrayWithoutAsterisk = uiOrderArray.filter((item) => item !== "*");
+        if (uiOrderArray.length === 1) {
+            finalArray = valuesArray;
+        }
+        else if (uiOrderArray.indexOf("*") === 0) {
+            // wildcard is first element
+            const individualValues = valuesArray.filter((element) => !uiOrderArrayWithoutAsterisk.includes(element));
+            const commonValues = filteredValues(uiOrderArrayWithoutAsterisk);
+            finalArray = [...individualValues, ...commonValues];
+        }
+        else if (uiOrderArray.indexOf("*") === uiOrderArray.length - 1) {
+            // wildcard is final element
+            const individualValues = valuesArray.filter((element) => !uiOrderArrayWithoutAsterisk.includes(element));
+            const commonValues = filteredValues(uiOrderArrayWithoutAsterisk);
+            finalArray = [...commonValues, ...individualValues];
+        }
+        else {
+            // wildcard is somewhere in the middle
+            const indexForUnspecified = uiOrderArray.indexOf("*");
+            const definedBefore = uiOrderArray.slice(0, indexForUnspecified);
+            const definedAfter = uiOrderArray.slice(indexForUnspecified + 1);
+            const commonBeforeValues = filteredValues(definedBefore);
+            const commonAfterValues = filteredValues(definedAfter);
+            const individualValues = valuesArray.filter((element) => ![...commonBeforeValues, ...commonAfterValues].includes(element));
+            finalArray = [
+                ...commonBeforeValues,
+                ...individualValues,
+                ...commonAfterValues,
+            ];
+        }
+    }
+    return finalArray;
+}

package/dist/types/Form/components/FieldInput.d.ts

@@ -7,3 +7,8 @@ export declare const FieldHelp: import("styled-components/dist/types").IStyledCo
 export declare const FieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;
 }, never>> & string & Omit<({ formikAs, ...props }: Omit<formik.FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
+export declare const SelectFieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+    ref?: unknown;
+}, never>, "ref"> & {
+    ref?: unknown;
+}, never>> & string;

package/dist/types/Form/components/index.d.ts

@@ -19,6 +19,11 @@ export declare const components: {
     FieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {
         ref?: unknown;
     }, never>> & string & Omit<({ formikAs, ...props }: Omit<import("formik").FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+    SelectFieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+        ref?: unknown;
+    }, never>, "ref"> & {
+        ref?: unknown;
+    }, never>> & string;
     FieldInfoBoxElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../common/types/FieldInfo").FieldInfoBoxElementProps>> & string;
     FieldInfoBoxArrowElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../common/types/FieldInfo").FieldInfoBoxElementProps>> & string;
     FieldInfoBoxInnerElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types/Form/index.d.ts

@@ -7,5 +7,6 @@ import { fields as FormFields } from "./fields";
 import { components as FormComponents } from "./components";
 import { templates as FormTemplates } from "./templates";
 export * from "./Form";
+export * from "./FormRegistry";
 export { FormComponents, FormFields, FormTemplates };
 export type * from "./types";

package/dist/types/Form/templates/ArrayFieldTemplate/types.d.ts

@@ -4,8 +4,4 @@ export type ArrayFieldTemplateProps = React.PropsWithChildren<{
     schema: Schema;
     [key: string]: any;
     uiSchema?: UiSchema;
-    hidden?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
 }>;

package/dist/types/Form/templates/FieldTemplate/types.d.ts

@@ -4,8 +4,4 @@ export type FieldTemplateProps = React.PropsWithChildren<{
     schema: Schema;
     [key: string]: any;
     uiSchema?: UiSchema;
-    hidden?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
 }>;

package/dist/types/FormView/FormView.d.ts

@@ -1,4 +1,4 @@
 import type { FormProps } from "../common/types";
-export declare const FormView: <T>(props: FormProps<T> & {
-    values: Record<string, any>;
-}) => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare const FormWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FormView: <T>(props: FormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/FormView/components/Field.d.ts

@@ -1,3 +1,36 @@
-export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
-export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import * as formik from "formik";
+import React from "react";
+export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StringFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TextAreaValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EJSFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BooleanFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MultipleChoiceFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type BooleanValueFieldProps = {
+    name: string;
+    className?: string;
+    value: boolean;
+    label?: string;
+};
+export declare const BooleanFieldValue: React.FC<BooleanValueFieldProps>;
+type MultipleChoiceFieldValueProps = {
+    selected: {
+        const: string | number;
+        title: string;
+    }[] | undefined;
+    notSelected: {
+        const: string | number;
+        title: string;
+    }[] | undefined;
+    inputProps?: any;
+    name?: React.ReactNode;
+    className?: string;
+    style?: string;
+    value?: string | number;
+    form?: formik.FormikContextType<unknown>;
+};
+export declare const MultipleChoiceFieldValue: React.FC<MultipleChoiceFieldValueProps>;
+export {};