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

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

@@ -0,0 +1,28 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templates = exports.components = void 0;
+exports.components = __importStar(require("./styledComponents"));
+exports.templates = __importStar(require("./CollapsibleObjectFieldTemplate"));

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleObjectFieldTemplateChildWrapper = exports.CollapsibleObjectFieldTemplateToggle = exports.CollapsibleObjectFieldTemplateErrorMessage = exports.CollapsibleObjectFieldTemplateRequiredIndicator = exports.CollapsibleObjectFieldTemplateInfo = exports.CollapsibleObjectFieldTemplateHelp = exports.CollapsibleObjectFieldTemplateDescription = exports.CollapsibleObjectFieldTemplateTitle = exports.CollapsibleObjectFieldTemplateIcon = exports.CollapsibleObjectFieldTemplateWrapper = void 0;
+exports.getComponents = getComponents;
+const styled_components_1 = require("styled-components");
+const Clickable_1 = require("../../components/Clickable");
+exports.CollapsibleObjectFieldTemplateWrapper = undefined;
+exports.CollapsibleObjectFieldTemplateIcon = undefined;
+exports.CollapsibleObjectFieldTemplateTitle = undefined;
+exports.CollapsibleObjectFieldTemplateDescription = undefined;
+exports.CollapsibleObjectFieldTemplateHelp = undefined;
+exports.CollapsibleObjectFieldTemplateInfo = undefined;
+exports.CollapsibleObjectFieldTemplateRequiredIndicator = undefined;
+exports.CollapsibleObjectFieldTemplateErrorMessage = undefined;
+exports.CollapsibleObjectFieldTemplateToggle = (0, styled_components_1.styled)(Clickable_1.Clickable) `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+exports.CollapsibleObjectFieldTemplateChildWrapper = styled_components_1.styled.div ``;
+function getComponents(components) {
+    return {
+        Wrapper: components.CollapsibleObjectFieldTemplateWrapper ??
+            components.ObjectFieldTemplateWrapper,
+        Icon: components.CollapsibleObjectFieldTemplateIcon ?? components.Icon,
+        Title: components.CollapsibleObjectFieldTemplateTitle ??
+            components.ObjectFieldTemplateTitle,
+        Description: components.CollapsibleObjectFieldTemplateDescription ??
+            components.ObjectFieldTemplateDescription ??
+            components.FieldDescription,
+        Help: components.CollapsibleObjectFieldTemplateHelp ??
+            components.ObjectFieldTemplateHelp ??
+            components.FieldHelp,
+        Info: components.CollapsibleObjectFieldTemplateInfo ??
+            components.ObjectFieldTemplateInfo ??
+            components.FieldInfo,
+        RequiredIndicator: components.CollapsibleObjectFieldTemplateRequiredIndicator ??
+            components.ObjectFieldTemplateRequiredIndicator ??
+            components.RequiredIndicator,
+        ErrorMessage: components.CollapsibleObjectFieldTemplateErrorMessage ??
+            components.ObjectFieldTemplateErrorMessage ??
+            components.ErrorMessage,
+        Toggle: components.CollapsibleObjectFieldTemplateToggle,
+        ChildWrapper: components.CollapsibleObjectFieldTemplateToggle,
+    };
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/{templates → Form/templates/FieldTemplate}/FieldTemplate.js

@@ -3,15 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldTemplate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Form_1 = require("../Form");
-const utils_1 = require("../utils");
-const hooks_1 = require("../hooks");
+const utils_1 = require("../../../utils");
+const FormRegistry_1 = require("../../FormRegistry");
 const FieldTemplate = (props) => {
-    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, InfoFieldButton, }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const { name, uiSchema, children, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
-    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const dataAttributes = Object.keys(otherProps)
         .filter((key) => key.startsWith("data-"))
         .reduce((acc, key) => {
@@ -23,6 +22,6 @@ const FieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes, // This will only include data-* attributes
     };
-    return ((0, jsx_runtime_1.jsxs)(FieldWrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, { children: "*" })] })), info && (0, jsx_runtime_1.jsx)(InfoFieldButton, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help }), (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
+    return ((0, jsx_runtime_1.jsxs)(FieldWrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(FieldInfo, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help }), (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
 };
 exports.FieldTemplate = FieldTemplate;

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

@@ -0,0 +1,27 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templates = void 0;
+exports.templates = __importStar(require("./FieldTemplate"));

package/dist/cjs/Form/templates/FieldTemplate/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/{templates → Form/templates/ObjectFieldTemplate}/ObjectFieldTemplate.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjectFieldTemplate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Form_1 = require("../Form");
-const utils_1 = require("../utils");
-const hooks_1 = require("../hooks");
-const styledComponents_1 = require("../styledComponents");
+const utils_1 = require("../../../utils");
+const FormRegistry_1 = require("../../FormRegistry");
+const styledComponents_1 = require("./styledComponents");
 const ObjectFieldTemplate = (props) => {
-    const { components: { FieldDescription, ObjectFieldTitle, ObjectFieldWrapper, FieldHelp, InfoFieldButton, }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
     const { children, uiSchema, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
@@ -16,7 +16,7 @@ const ObjectFieldTemplate = (props) => {
     //TODO: This is not right
     props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps,
     // error: errorProps,
-     } = {}, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+     } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const dataAttributes = Object.keys(otherProps)
         .filter((key) => key.startsWith("data-"))
         .reduce((acc, key) => {
@@ -27,6 +27,6 @@ const ObjectFieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes,
     };
-    return ((0, jsx_runtime_1.jsxs)(ObjectFieldWrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(ObjectFieldTitle, { ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(styledComponents_1.RequiredIndicator, { children: "*" })] })), info && (0, jsx_runtime_1.jsx)(InfoFieldButton, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
 };
 exports.ObjectFieldTemplate = ObjectFieldTemplate;

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

@@ -0,0 +1,28 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templates = exports.components = void 0;
+exports.components = __importStar(require("./styledComponents"));
+exports.templates = __importStar(require("./ObjectFieldTemplate"));

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectFieldTemplateErrorMessage = exports.ObjectFieldTemplateRequiredIndicator = exports.ObjectFieldTemplateInfo = exports.ObjectFieldTemplateHelp = exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = exports.ObjectFieldTemplateWrapper = void 0;
+exports.getComponents = getComponents;
+const styled_components_1 = require("styled-components");
+const common_1 = require("../../styles/common");
+exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
+  color: ${(props) => props.theme.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  margin-inline: 0;
+  margin-bottom: ${(props) => props.theme.spacing.xs};
+  ${common_1.commonInputStyles}
+  ${common_1.commonSelectStyles}
+`;
+exports.ObjectFieldTemplateTitle = styled_components_1.styled.legend `
+  color: ${(props) => props.theme.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+exports.ObjectFieldTemplateDescription = undefined;
+exports.ObjectFieldTemplateHelp = undefined;
+exports.ObjectFieldTemplateInfo = undefined;
+exports.ObjectFieldTemplateRequiredIndicator = undefined;
+exports.ObjectFieldTemplateErrorMessage = undefined;
+function getComponents(components) {
+    return {
+        Wrapper: components.ObjectFieldTemplateWrapper,
+        Title: components.ObjectFieldTemplateTitle,
+        Description: components.ObjectFieldTemplateDescription ?? components.FieldDescription,
+        Help: components.ObjectFieldTemplateHelp ?? components.FieldHelp,
+        Info: components.ObjectFieldTemplateInfo ?? components.FieldInfo,
+        RequiredIndicator: components.ObjectFieldTemplateRequiredIndicator ??
+            components.RequiredIndicator,
+        ErrorMessage: components.ObjectFieldTemplateErrorMessage ?? components.ErrorMessage,
+    };
+}

package/dist/cjs/Form/templates/ObjectFieldTemplate/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,45 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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"));
+const ObjectFieldTemplate = __importStar(require("./ObjectFieldTemplate"));
+//Please keep this in alphabetical order
+exports.templateComponents = {
+    ...ArrayFieldTemplate.components,
+    ...CollapsibleObjectFieldTemplate.components,
+    //...FieldTemplate.components, // Field template uses generic components (should it own those?)
+    ...ObjectFieldTemplate.components,
+};
+//Please keep this in alphabetical order
+exports.templates = {
+    ...ArrayFieldTemplate.templates,
+    ...CollapsibleObjectFieldTemplate.templates,
+    ...FieldTemplate.templates,
+    ...ObjectFieldTemplate.templates,
+};

package/dist/cjs/Form/types/FormRegistryContext.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/{pdfTemplates → Form/types}/index.js

@@ -14,7 +14,4 @@ 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("./ArrayFieldTemplate"), exports);
-__exportStar(require("./FieldTemplate"), exports);
-__exportStar(require("./ObjectFieldTemplate"), exports);
-__exportStar(require("./CollapsibleObjectFieldTemplate"), exports);
+__exportStar(require("./FormRegistryContext"), exports);

package/dist/cjs/FormView/FormView.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../utils");
+const fields_1 = require("./fields");
+const components_1 = require("./components");
+const templates_1 = require("./templates");
+const FormViewRegistry_1 = require("./FormViewRegistry");
+const FormView = (props) => {
+    (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
+        "schema",
+        "onSubmit",
+        "uiSchema",
+        "className",
+        "formData",
+        "className",
+        "children",
+        "fields",
+        "formContext",
+        "components",
+        "hideUnmarkedAdditionalProperties",
+        "values",
+    ]);
+    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, values = {}, } = props;
+    const schemaDefinitions = schema.definitions;
+    const uiSchemaDefinitions = uiSchema.definitions;
+    const registry = {
+        fields: { ...fields_1.fields, ...fields },
+        templates: { ...templates_1.templates, ...templates },
+        components: { ...components_1.components, ...components },
+        definitions: schemaDefinitions,
+        uiSchemaDefinitions,
+        formContext,
+        useItemsAsAdditionalItems,
+        hideUnmarkedAdditionalProperties,
+    };
+    const { Form: FormEl } = registry.components;
+    const SchemaField = registry.fields.SchemaField;
+    return ((0, jsx_runtime_1.jsx)(FormViewRegistry_1.FormViewRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(FormEl, { className: className, children: (0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }));
+};
+exports.FormView = FormView;

package/dist/cjs/FormView/FormViewRegistry.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormViewRegistry = void 0;
+const react_1 = __importDefault(require("react"));
+exports.FormViewRegistry = react_1.default.createContext({
+    fields: {},
+    templates: {},
+    components: {},
+    definitions: {},
+    uiSchemaDefinitions: {},
+    formContext: {},
+    useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
+});

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
+const styled_components_1 = require("styled-components");
+exports.FieldWrapper = styled_components_1.styled.div ``;
+exports.FieldTitle = styled_components_1.styled.label `
+  font-size: ${(props) => props.theme.typography.size.base};
+  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};
+`;
+exports.FieldDescription = styled_components_1.styled.div ``;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const styled_components_1 = require("styled-components");
+exports.Form = styled_components_1.styled.div ``;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const styled_components_1 = require("styled-components");
+exports.Icon = styled_components_1.styled.div `
+  padding: ${(props) => `0 ${props.theme.spacing.s}`};
+`;

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

@@ -0,0 +1,48 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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);
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.components = void 0;
+__exportStar(require("./Field"), exports);
+__exportStar(require("./Form"), exports);
+__exportStar(require("./Icon"), exports);
+const fields_1 = require("../fields");
+const templates_1 = require("../templates");
+//Please keep this in alphabetical order
+const Field = __importStar(require("./Field"));
+const Form = __importStar(require("./Form"));
+const Icon = __importStar(require("./Icon"));
+const oldComponents = __importStar(require("./old_styledComponents"));
+exports.components = {
+    ...oldComponents,
+    ...fields_1.fieldComponents,
+    ...templates_1.templateComponents,
+    //Please keep this in alphabetical order
+    ...Field,
+    ...Form,
+    ...Icon,
+};

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

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleChoiceFieldValue = exports.BooleanFieldValue = exports.BooleanFieldWrapper = exports.EJSFieldValue = exports.ArrayFieldItem = exports.TextAreaValue = exports.StringFieldValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const styledComponents_1 = require("../../Form/fields/MultipleChoiceField/styledComponents");
+const getStyle_1 = require("../../utils/getStyle");
+exports.StringFieldValue = styled_components_1.default.div `
+  white-space: pre-line;
+`;
+exports.TextAreaValue = styled_components_1.default.div `
+  white-space: pre-line;
+`;
+exports.ArrayFieldItem = styled_components_1.default.div ``;
+exports.EJSFieldValue = styled_components_1.default.div `
+  width: 100%;
+`;
+exports.BooleanFieldWrapper = styled_components_1.default.div ``;
+const BooleanFieldValue = ({ name, className, value, label, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2716" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Not selected" })] })) }));
+};
+exports.BooleanFieldValue = BooleanFieldValue;
+const NotSelected = styled_components_1.default.div `
+  opacity: 0.3;
+  display: flex;
+  align-items: center;
+`;
+const Selected = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const SelectedBox = styled_components_1.default.span `
+  color: ${(props) => props.theme.background.default};
+  background: ${(props) => props.theme.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: center;
+`;
+const NotSelectedCircle = styled_components_1.default.span `
+  color: ${(props) => props.theme.background.default};
+  background: ${(props) => props.theme.text.default};
+  padding: ${(props) => props.theme.spacing.xxs};
+  border-radius: ${(props) => props.theme.borderRadius.circle};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
+  line-height: 1.1;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 1rem;
+`;
+const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
+    return ((0, jsx_runtime_1.jsxs)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Nothing was selected" }), selected &&
+                selected.length > 0 &&
+                selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: "\u2713" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                notSelected?.length > 0 &&
+                notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: "\u2715" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }));
+};
+exports.MultipleChoiceFieldValue = MultipleChoiceFieldValue;

package/dist/cjs/{pdfFields → FormView/fields}/AnyField.js

@@ -4,9 +4,9 @@ exports.AnyField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const formik_1 = require("formik");
-const utils_1 = require("../utils");
+const constants_1 = require("../../common/constants");
+const utils_1 = require("../../utils");
 const SchemaField_1 = require("./SchemaField");
-const types_1 = require("./types");
 const AnyField = (props) => {
     const { name, schema, uiSchema } = props;
     const [{ value }] = (0, formik_1.useField)(name);
@@ -21,6 +21,6 @@ const AnyField = (props) => {
                 return { ...(schema || {}), type };
         }
     }, [type, schema]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(types_1.COMPONENT_TYPES).map((type) => ((0, jsx_runtime_1.jsx)("option", { value: type, children: type }, type))) }), (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(constants_1.COMPONENT_TYPES).map((type) => ((0, jsx_runtime_1.jsx)("option", { value: type, children: type }, type))) }), (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
 };
 exports.AnyField = AnyField;

package/dist/cjs/{pdfFields → FormView/fields}/ArrayField.js

@@ -4,12 +4,10 @@ exports.ArrayField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formik_1 = require("formik");
 const react_1 = require("react");
-const FormPdf_1 = require("../FormPdf");
-const hooks_1 = require("../hooks");
-const utils_1 = require("../utils");
+const utils_1 = require("../../utils");
+const FormViewRegistry_1 = require("../FormViewRegistry");
 const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem }, } = (0, react_1.useContext)(FormPdf_1.FormPdfRegistry);
-    (0, hooks_1.useSetDefault)(props);
+    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, 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

package/dist/cjs/{pdfFields → FormView/fields}/BooleanField.js

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BooleanField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const FormPdf_1 = require("../FormPdf");
-const hooks_1 = require("../hooks");
 const formik_1 = require("formik");
+const utils_1 = require("../../utils");
+const FormViewRegistry_1 = require("../FormViewRegistry");
 const BooleanField = (props) => {
-    const { templates: { FieldTemplate }, components: { BooleanFieldPdf, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormPdf_1.FormPdfRegistry);
-    (0, hooks_1.useSetDefault)(props);
+    const { templates: { FieldTemplate }, components: { BooleanFieldValue, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema } = props;
-    const { label } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { label } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const { values } = (0, formik_1.useFormikContext)();
     const value = (0, formik_1.getIn)(values, name);
     function findLabel(label) {
@@ -26,6 +25,6 @@ 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)(BooleanFieldPdf, { name: name, value: value, label: findLabel(label) }) }) }));
+    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) }) }) }));
 };
 exports.BooleanField = BooleanField;

package/dist/cjs/{pdfFields → FormView/fields}/EJSField.js

@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EJSField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const hooks_1 = require("../hooks");
 const ejs_browser_1 = __importDefault(require("ejs-browser"));
 const dompurify_1 = __importDefault(require("dompurify"));
 const formik_1 = require("formik");
-const utils_1 = require("../utils");
-const FormPdf_1 = require("../FormPdf");
+const utils_1 = require("../../utils");
+const FormViewRegistry_1 = require("../FormViewRegistry");
 const EJSField = (props) => {
-    const { components: { EJSField: PdfEJSField }, } = (0, react_1.useContext)(FormPdf_1.FormPdfRegistry);
-    (0, hooks_1.useSetDefault)(props);
+    const { components: { EJSFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema = {} } = props;
     const { values } = (0, formik_1.useFormikContext)();
     const title = (0, utils_1.getTitle)(props) || "Untitled Field";
@@ -34,7 +32,7 @@ const EJSField = (props) => {
         }
     }, [template, title, description, name, values]);
     const sanitizedHTML = dompurify_1.default.sanitize(renderedTemplate);
-    return ((0, jsx_runtime_1.jsx)(PdfEJSField, { dangerouslySetInnerHTML: {
+    return ((0, jsx_runtime_1.jsx)(EJSFieldValue, { dangerouslySetInnerHTML: {
             __html: sanitizedHTML,
         } }));
 };

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadField = void 0;
+const FileUploadField = (props) => {
+    return "TODO";
+};
+exports.FileUploadField = FileUploadField;