@nolwenture/formik-jsonschema-form 1.0.5 → 1.0.7

package/dist/cjs/Form/Form.js

@@ -9,7 +9,7 @@ const fields_1 = require("./fields");
 const templates_1 = require("./templates");
 const Form = (props) => {
     const { isSubmitting } = (0, formik_1.useFormikContext)();
-    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema?.definitions;
     const registry = {
@@ -25,6 +25,8 @@ const Form = (props) => {
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,
+        formOptions,
+        formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
     };

package/dist/cjs/Form/FormRegistry.js

@@ -13,6 +13,7 @@ exports.FormRegistry = react_1.default.createContext({
     uiSchemaDefinitions: {},
     formContext: {},
     formLocalization: {},
+    formOptions: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

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

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldInfo = exports.FieldInfoLabel = exports.FieldInfoContainer = exports.FieldInfoBoxInnerElement = exports.FieldInfoBoxArrowElement = exports.FieldInfoBoxElement = void 0;
+exports.FieldInfo = exports.InlineFieldInfoWrapper = exports.FieldInfoLabel = exports.FieldInfoContainer = exports.InlineFieldInfoBoxInnerElement = exports.FieldInfoBoxInnerElement = exports.FieldInfoBoxArrowElement = exports.FieldInfoBoxElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_components_1 = require("styled-components");
 const polished_1 = require("polished");
+const FormRegistry_1 = require("../FormRegistry");
 exports.FieldInfoBoxElement = styled_components_1.styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
@@ -55,17 +57,17 @@ exports.FieldInfoBoxArrowElement = styled_components_1.styled.div `
   width: 0;
   position: absolute;
   pointer-events: none;
-  border-top-color: ${({ position, theme }) => position === "top" ? theme.color.intent.default.none : "transparent"};
-  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.color.intent.default.none : "transparent"};
-  border-right-color: ${({ position, theme }) => position === "right" ? theme.color.intent.default.none : "transparent"};
-  border-left-color: ${({ position, theme }) => position === "left" ? theme.color.intent.default.none : "transparent"};
+  border-top-color: ${({ position, theme }) => position === "top" ? theme.color.intent.default.warning : "transparent"};
+  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.color.intent.default.warning : "transparent"};
+  border-right-color: ${({ position, theme }) => position === "right" ? theme.color.intent.default.warning : "transparent"};
+  border-left-color: ${({ position, theme }) => position === "left" ? theme.color.intent.default.warning : "transparent"};
   border-width: 5px;
   margin-left: -5px;
 `;
 exports.FieldInfoBoxInnerElement = styled_components_1.styled.div `
-    background: ${(props) => props.theme.color.background.default};
+    background: ${(props) => props.theme.color.intent.default.warning};
     border-radius: ${(props) => props.theme.borderRadius.none};
-    border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
+    border: none;
     color: ${(props) => props.theme.color.text.default};
     cursor: default;
     font-size: ${(props) => props.theme.typography.size.small};
@@ -75,21 +77,31 @@ exports.FieldInfoBoxInnerElement = styled_components_1.styled.div `
     text-align: left;
     white-space: pre-wrap;
 `;
+exports.InlineFieldInfoBoxInnerElement = styled_components_1.styled.div `
+    background: ${(props) => props.theme.color.intent.default.warning};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: none;
+    color: ${(props) => props.theme.color.text.default};
+    cursor: default;
+    font-size: ${(props) => props.theme.typography.size.small};
+    line-height: ${(props) => props.theme.typography.lineHeight.small};
+    padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+    text-align: left;
+    white-space: pre-wrap;
+`;
 exports.FieldInfoContainer = styled_components_1.styled.a `
-  position: relative;
-  color: ${(props) => props.theme.color.text.default};
   background: none;
-  outline: none;
-  cursor: pointer;
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid
-      ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.circle};
-  line-height: 1em;
+  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.small};
+  margin: ${(props) => `0 ${props.theme.spacing.s} 0 -${props.theme.spacing.xs}`};
+  outline: none;
   padding: ${(props) => `0 ${props.theme.spacing.s}`};
+  position: relative;
   text-decoration: unset;
-  margin: ${(props) => `0 ${props.theme.spacing.s} 0 -${props.theme.spacing.xs}`};
   width: fit-content;
 
   &:active,
@@ -103,7 +115,30 @@ exports.FieldInfoContainer = styled_components_1.styled.a `
   }
 `;
 exports.FieldInfoLabel = styled_components_1.styled.span ``;
-const FieldInfo = ({ label, content, position, props, className, }) => {
-    return ((0, jsx_runtime_1.jsxs)(exports.FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoLabel, { children: label ?? "i" }), (0, jsx_runtime_1.jsxs)(exports.FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoBoxArrowElement, { position: position ?? "top" }), (0, jsx_runtime_1.jsx)(exports.FieldInfoBoxInnerElement, { children: content })] })] }));
+exports.InlineFieldInfoWrapper = styled_components_1.styled.div `
+  display: flex;
+  margin: ${(props) => `${props.theme.spacing.m} 0`};
+  width: 100%;
+`;
+const FieldInfo = ({ label, content, position, display: displayProp, className, }) => {
+    const { formOptions } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const [isInlineVisible, setIsInlineVisible] = (0, react_1.useState)(false);
+    const config = {
+        display: "tooltip",
+        ...(formOptions?.components?.FieldInfo ?? {}),
+        ...(displayProp && { display: displayProp }),
+    };
+    const handleToggle = (e) => {
+        e.preventDefault();
+        if (config.display === "inline") {
+            setIsInlineVisible((prev) => !prev);
+        }
+    };
+    if (config.display === "inline") {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoContainer, { href: "#", onClick: handleToggle, className: className, children: (0, jsx_runtime_1.jsx)(exports.FieldInfoLabel, { children: label ?? "i" }) }), isInlineVisible && ((0, jsx_runtime_1.jsx)(exports.InlineFieldInfoWrapper, { children: (0, jsx_runtime_1.jsx)(exports.InlineFieldInfoBoxInnerElement, { children: content }) }))] }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsxs)(exports.FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoLabel, { children: label ?? "i" }), (0, jsx_runtime_1.jsxs)(exports.FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoBoxArrowElement, { position: position ?? "top" }), (0, jsx_runtime_1.jsx)(exports.FieldInfoBoxInnerElement, { children: content })] })] }));
+    }
 };
 exports.FieldInfo = FieldInfo;

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectFieldInput = exports.FieldInput = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
+exports.SelectFieldInput = exports.FieldInput = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldTitleInfoWrapper = exports.FieldWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
 const formik = __importStar(require("formik"));
@@ -45,6 +45,11 @@ exports.FieldWrapper = styled_components_1.styled.div `
   opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
   pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
 `;
+exports.FieldTitleInfoWrapper = styled_components_1.styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
 exports.FieldTitle = styled_components_1.styled.label `
   font-size: ${(props) => props.theme.typography.size.base};
   font-family: ${(props) => props.theme.typography.fontFamily.base};

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

@@ -9,7 +9,7 @@ const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 const ArrayFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
+    const { Wrapper, Title, TitleInfoWrapper, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
     const { name, uiSchema, items, renderItem, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
@@ -31,6 +31,6 @@ const ArrayFieldTemplate = (props) => {
     // In case of array of objects, it will give error message as an object value,
     // which is incorrect value for React, causing UI to crash.
     const errorIsString = typeof error === "string";
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, 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 })), items && items.map((item, index) => renderItem(item, index)), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [(0, jsx_runtime_1.jsxs)(TitleInfoWrapper, { children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, 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 })), items && items.map((item, index) => renderItem(item, index)), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
 };
 exports.ArrayFieldTemplate = ArrayFieldTemplate;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrayFieldTemplateErrorMessage = exports.ArrayFieldTemplateRequiredIndicator = exports.ArrayFieldTemplateInfo = exports.ArrayFieldTemplateHelp = exports.ArrayFieldTemplateDescription = exports.ArrayFieldTemplateTitle = exports.ArrayFieldTemplateIcon = exports.ArrayFieldTemplateWrapper = void 0;
+exports.ArrayFieldTemplateErrorMessage = exports.ArrayFieldTemplateRequiredIndicator = exports.ArrayFieldTemplateInfo = exports.ArrayFieldTemplateHelp = exports.ArrayFieldTemplateDescription = exports.ArrayFieldTemplateTitle = exports.ArrayFieldTemplateIcon = exports.ArrayFieldTemplateWrapper = exports.ArrayFieldTitleInfoWrapper = void 0;
 exports.getComponents = getComponents;
+exports.ArrayFieldTitleInfoWrapper = undefined;
 exports.ArrayFieldTemplateWrapper = undefined;
 exports.ArrayFieldTemplateIcon = undefined;
 exports.ArrayFieldTemplateTitle = undefined;
@@ -14,6 +15,8 @@ function getComponents(components) {
     return {
         Wrapper: components.ArrayFieldTemplateWrapper ??
             components.ObjectFieldTemplateWrapper,
+        TitleInfoWrapper: components.ArrayFieldTitleInfoWrapper ??
+            components.ObjectFieldTitleInfoWrapper,
         Title: components.ArrayFieldTemplateTitle ?? components.ObjectFieldTemplateTitle,
         Description: components.ArrayFieldTemplateDescription ?? components.FieldDescription,
         Help: components.ArrayFieldTemplateHelp ?? components.FieldHelp,

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

@@ -9,7 +9,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, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
+    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, TitleInfoWrapper, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
     const { children, name, uiSchema, ...otherProps } = props;
     const formikCtx = (0, formik_1.useFormikContext)();
     const values = formikCtx.values
@@ -34,8 +34,8 @@ 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, { ...titleProps, htmlFor: name, 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 })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [(0, jsx_runtime_1.jsxs)(TitleInfoWrapper, { children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), 
+                        //ariaExpanded={!hide}
+                        ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, 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

@@ -1,11 +1,12 @@
 "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.CollapsibleObjectFieldTemplateChildWrapper = exports.CollapsibleObjectFieldTemplateToggle = exports.CollapsibleObjectFieldTemplateErrorMessage = exports.CollapsibleObjectFieldTemplateRequiredIndicator = exports.CollapsibleObjectFieldTemplateInfo = exports.CollapsibleObjectFieldTemplateHelp = exports.CollapsibleObjectFieldTemplateDescription = exports.CollapsibleObjectFieldTemplateTitle = exports.CollapsibleObjectFieldTemplateIcon = exports.CollapsibleObjectTitleInfoWrapper = exports.CollapsibleObjectFieldTemplateWrapper = void 0;
 exports.getComponents = getComponents;
 const styled_components_1 = require("styled-components");
 const styledComponents_1 = require("../ObjectFieldTemplate/styledComponents");
 const component_library_1 = require("@nolwenture/component-library");
 exports.CollapsibleObjectFieldTemplateWrapper = undefined;
+exports.CollapsibleObjectTitleInfoWrapper = undefined;
 exports.CollapsibleObjectFieldTemplateIcon = undefined;
 exports.CollapsibleObjectFieldTemplateTitle = (0, styled_components_1.styled)(styledComponents_1.ObjectFieldTemplateTitle) `
   display: flex;
@@ -27,6 +28,8 @@ function getComponents(components) {
     return {
         Wrapper: components.CollapsibleObjectFieldTemplateWrapper ??
             components.ObjectFieldTemplateWrapper,
+        TitleInfoWrapper: components.CollapsibleObjectTitleInfoWrapper ??
+            components.ObjectFieldTitleInfoWrapper,
         Icon: components.CollapsibleObjectFieldTemplateIcon ?? components.Icon,
         Title: components.CollapsibleObjectFieldTemplateTitle ??
             components.ObjectFieldTemplateTitle,

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const utils_1 = require("../../../utils");
 const FormRegistry_1 = require("../../FormRegistry");
 const FieldTemplate = (props) => {
-    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { components: { FieldWrapper, FieldTitleInfoWrapper, 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);
@@ -23,6 +23,6 @@ const FieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes, // This will only include data-* attributes
     };
-    return ((0, jsx_runtime_1.jsxs)(FieldWrapper, { ...mergedWrapperProps, "$isDisabled": isDisabled, 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 })] }));
+    return ((0, jsx_runtime_1.jsxs)(FieldWrapper, { ...mergedWrapperProps, "$isDisabled": isDisabled, children: [(0, jsx_runtime_1.jsxs)(FieldTitleInfoWrapper, { 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/ObjectFieldTemplate/ObjectFieldTemplate.js

@@ -8,7 +8,7 @@ const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 const ObjectFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
+    const { Wrapper, Title, TitleInfoWrapper, 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);
@@ -27,6 +27,6 @@ const ObjectFieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes,
     };
-    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 })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [(0, jsx_runtime_1.jsxs)(TitleInfoWrapper, { 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/styledComponents.js

@@ -1,10 +1,12 @@
 "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.ObjectFieldTemplateErrorMessage = exports.ObjectFieldTemplateRequiredIndicator = exports.ObjectFieldTemplateInfo = exports.ObjectFieldTemplateHelp = exports.ObjectFieldTemplateDescription = exports.ObjectFieldTitleInfoWrapper = exports.ObjectFieldTemplateTitle = exports.ObjectFieldTemplateWrapper = void 0;
 exports.getComponents = getComponents;
 const polished_1 = require("polished");
 const styled_components_1 = require("styled-components");
 exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
+  display: flex;
+  flex-direction: column;
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   margin-inline: 0;
@@ -27,6 +29,11 @@ exports.ObjectFieldTemplateTitle = styled_components_1.styled.legend `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
+exports.ObjectFieldTitleInfoWrapper = styled_components_1.styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
 exports.ObjectFieldTemplateDescription = undefined;
 exports.ObjectFieldTemplateHelp = undefined;
 exports.ObjectFieldTemplateInfo = undefined;
@@ -36,6 +43,7 @@ function getComponents(components) {
     return {
         Wrapper: components.ObjectFieldTemplateWrapper,
         Title: components.ObjectFieldTemplateTitle,
+        TitleInfoWrapper: components.ObjectFieldTitleInfoWrapper,
         Description: components.ObjectFieldTemplateDescription ?? components.FieldDescription,
         Help: components.ObjectFieldTemplateHelp ?? components.FieldHelp,
         Info: components.ObjectFieldTemplateInfo ?? components.FieldInfo,

package/dist/cjs/FormView/FormView.js

@@ -15,7 +15,7 @@ exports.FormWrapper = styled_components_1.default.div `
   //padding: ${(props) => props.theme.spacing.xxxxxl};
 `;
 const FormView = (props) => {
-    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
+    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;
     const registry = {
@@ -25,6 +25,8 @@ const FormView = (props) => {
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,
+        formOptions,
+        formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
     };

package/dist/cjs/FormView/FormViewRegistry.js

@@ -12,6 +12,8 @@ exports.FormViewRegistry = react_1.default.createContext({
     definitions: {},
     uiSchemaDefinitions: {},
     formContext: {},
+    formOptions: {},
+    formLocalization: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

package/dist/esm/Form/Form.js

@@ -6,7 +6,7 @@ import { fields as defaultFields } from "./fields";
 import { templates as defaultTemplates } from "./templates";
 export const Form = (props) => {
     const { isSubmitting } = useFormikContext();
-    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
+    const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema?.definitions;
     const registry = {
@@ -22,6 +22,8 @@ export const Form = (props) => {
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,
+        formOptions,
+        formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
     };

package/dist/esm/Form/FormRegistry.js

@@ -7,6 +7,7 @@ export const FormRegistry = React.createContext({
     uiSchemaDefinitions: {},
     formContext: {},
     formLocalization: {},
+    formOptions: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

package/dist/esm/Form/components/FieldInfo.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
 import { styled } from "styled-components";
 import { readableColor } from "polished";
+import { FormRegistry } from "../FormRegistry";
 export const FieldInfoBoxElement = styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
@@ -52,17 +54,17 @@ export const FieldInfoBoxArrowElement = styled.div `
   width: 0;
   position: absolute;
   pointer-events: none;
-  border-top-color: ${({ position, theme }) => position === "top" ? theme.color.intent.default.none : "transparent"};
-  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.color.intent.default.none : "transparent"};
-  border-right-color: ${({ position, theme }) => position === "right" ? theme.color.intent.default.none : "transparent"};
-  border-left-color: ${({ position, theme }) => position === "left" ? theme.color.intent.default.none : "transparent"};
+  border-top-color: ${({ position, theme }) => position === "top" ? theme.color.intent.default.warning : "transparent"};
+  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.color.intent.default.warning : "transparent"};
+  border-right-color: ${({ position, theme }) => position === "right" ? theme.color.intent.default.warning : "transparent"};
+  border-left-color: ${({ position, theme }) => position === "left" ? theme.color.intent.default.warning : "transparent"};
   border-width: 5px;
   margin-left: -5px;
 `;
 export const FieldInfoBoxInnerElement = styled.div `
-    background: ${(props) => props.theme.color.background.default};
+    background: ${(props) => props.theme.color.intent.default.warning};
     border-radius: ${(props) => props.theme.borderRadius.none};
-    border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
+    border: none;
     color: ${(props) => props.theme.color.text.default};
     cursor: default;
     font-size: ${(props) => props.theme.typography.size.small};
@@ -72,21 +74,31 @@ export const FieldInfoBoxInnerElement = styled.div `
     text-align: left;
     white-space: pre-wrap;
 `;
+export const InlineFieldInfoBoxInnerElement = styled.div `
+    background: ${(props) => props.theme.color.intent.default.warning};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: none;
+    color: ${(props) => props.theme.color.text.default};
+    cursor: default;
+    font-size: ${(props) => props.theme.typography.size.small};
+    line-height: ${(props) => props.theme.typography.lineHeight.small};
+    padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+    text-align: left;
+    white-space: pre-wrap;
+`;
 export const FieldInfoContainer = styled.a `
-  position: relative;
-  color: ${(props) => props.theme.color.text.default};
   background: none;
-  outline: none;
-  cursor: pointer;
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid
-      ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.circle};
-  line-height: 1em;
+  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.small};
+  margin: ${(props) => `0 ${props.theme.spacing.s} 0 -${props.theme.spacing.xs}`};
+  outline: none;
   padding: ${(props) => `0 ${props.theme.spacing.s}`};
+  position: relative;
   text-decoration: unset;
-  margin: ${(props) => `0 ${props.theme.spacing.s} 0 -${props.theme.spacing.xs}`};
   width: fit-content;
 
   &:active,
@@ -100,6 +112,29 @@ export const FieldInfoContainer = styled.a `
   }
 `;
 export const FieldInfoLabel = styled.span ``;
-export const FieldInfo = ({ label, content, position, props, className, }) => {
-    return (_jsxs(FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [_jsx(FieldInfoLabel, { children: label ?? "i" }), _jsxs(FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [_jsx(FieldInfoBoxArrowElement, { position: position ?? "top" }), _jsx(FieldInfoBoxInnerElement, { children: content })] })] }));
+export const InlineFieldInfoWrapper = styled.div `
+  display: flex;
+  margin: ${(props) => `${props.theme.spacing.m} 0`};
+  width: 100%;
+`;
+export const FieldInfo = ({ label, content, position, display: displayProp, className, }) => {
+    const { formOptions } = useContext(FormRegistry);
+    const [isInlineVisible, setIsInlineVisible] = useState(false);
+    const config = {
+        display: "tooltip",
+        ...(formOptions?.components?.FieldInfo ?? {}),
+        ...(displayProp && { display: displayProp }),
+    };
+    const handleToggle = (e) => {
+        e.preventDefault();
+        if (config.display === "inline") {
+            setIsInlineVisible((prev) => !prev);
+        }
+    };
+    if (config.display === "inline") {
+        return (_jsxs(_Fragment, { children: [_jsx(FieldInfoContainer, { href: "#", onClick: handleToggle, className: className, children: _jsx(FieldInfoLabel, { children: label ?? "i" }) }), isInlineVisible && (_jsx(InlineFieldInfoWrapper, { children: _jsx(InlineFieldInfoBoxInnerElement, { children: content }) }))] }));
+    }
+    else {
+        return (_jsxs(FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [_jsx(FieldInfoLabel, { children: label ?? "i" }), _jsxs(FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [_jsx(FieldInfoBoxArrowElement, { position: position ?? "top" }), _jsx(FieldInfoBoxInnerElement, { children: content })] })] }));
+    }
 };

package/dist/esm/Form/components/FieldInput.js

@@ -9,6 +9,11 @@ export const FieldWrapper = styled.div `
   opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
   pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
 `;
+export const FieldTitleInfoWrapper = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
 export const FieldTitle = styled.label `
   font-size: ${(props) => props.theme.typography.size.base};
   font-family: ${(props) => props.theme.typography.fontFamily.base};

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

@@ -6,7 +6,7 @@ import { FormRegistry } from "../../FormRegistry";
 import { getComponents } from "./styledComponents";
 export const ArrayFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
-    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
+    const { Wrapper, Title, TitleInfoWrapper, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
     const { name, uiSchema, items, renderItem, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
@@ -28,5 +28,5 @@ export const ArrayFieldTemplate = (props) => {
     // In case of array of objects, it will give error message as an object value,
     // which is incorrect value for React, causing UI to crash.
     const errorIsString = typeof error === "string";
-    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index)), help && _jsx(Help, { ...helpProps, children: help }), errorIsString && _jsx(ErrorMessage, { ...errorProps, name: name })] }));
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [_jsxs(TitleInfoWrapper, { children: [title && (_jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index)), help && _jsx(Help, { ...helpProps, children: help }), errorIsString && _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

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

@@ -1,3 +1,4 @@
+export const ArrayFieldTitleInfoWrapper = undefined;
 export const ArrayFieldTemplateWrapper = undefined;
 export const ArrayFieldTemplateIcon = undefined;
 export const ArrayFieldTemplateTitle = undefined;
@@ -10,6 +11,8 @@ export function getComponents(components) {
     return {
         Wrapper: components.ArrayFieldTemplateWrapper ??
             components.ObjectFieldTemplateWrapper,
+        TitleInfoWrapper: components.ArrayFieldTitleInfoWrapper ??
+            components.ObjectFieldTitleInfoWrapper,
         Title: components.ArrayFieldTemplateTitle ?? components.ObjectFieldTemplateTitle,
         Description: components.ArrayFieldTemplateDescription ?? components.FieldDescription,
         Help: components.ArrayFieldTemplateHelp ?? components.FieldHelp,

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

@@ -6,7 +6,7 @@ import { FormRegistry } from "../../FormRegistry";
 import { getComponents } from "./styledComponents";
 export const CollapsibleObjectFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
-    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = getComponents(components);
+    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, TitleInfoWrapper, Wrapper, Help, Info, } = getComponents(components);
     const { children, name, uiSchema, ...otherProps } = props;
     const formikCtx = useFormikContext();
     const values = formikCtx.values
@@ -31,7 +31,7 @@ export const CollapsibleObjectFieldTemplate = (props) => {
     };
     const [collapsed, setCollapsed] = useState(isCollapsedOnLoad);
     const hide = collapsed;
-    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), 
-                //ariaExpanded={!hide}
-                ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), !hide && _jsx(ChildrenWrapper, { children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [_jsxs(TitleInfoWrapper, { children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), 
+                        //ariaExpanded={!hide}
+                        ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), !hide && _jsx(ChildrenWrapper, { children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
 };

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

@@ -2,6 +2,7 @@ import { styled } from "styled-components";
 import { ObjectFieldTemplateTitle, } from "../ObjectFieldTemplate/styledComponents";
 import { Button } from "@nolwenture/component-library";
 export const CollapsibleObjectFieldTemplateWrapper = undefined;
+export const CollapsibleObjectTitleInfoWrapper = undefined;
 export const CollapsibleObjectFieldTemplateIcon = undefined;
 export const CollapsibleObjectFieldTemplateTitle = styled(ObjectFieldTemplateTitle) `
   display: flex;
@@ -23,6 +24,8 @@ export function getComponents(components) {
     return {
         Wrapper: components.CollapsibleObjectFieldTemplateWrapper ??
             components.ObjectFieldTemplateWrapper,
+        TitleInfoWrapper: components.CollapsibleObjectTitleInfoWrapper ??
+            components.ObjectFieldTitleInfoWrapper,
         Icon: components.CollapsibleObjectFieldTemplateIcon ?? components.Icon,
         Title: components.CollapsibleObjectFieldTemplateTitle ??
             components.ObjectFieldTemplateTitle,

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

@@ -3,7 +3,7 @@ import { useContext, useMemo } from "react";
 import { extractUiSchema, getDescription, getTitle } from "../../../utils";
 import { FormRegistry } from "../../FormRegistry";
 export const FieldTemplate = (props) => {
-    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = useContext(FormRegistry);
+    const { components: { FieldWrapper, FieldTitleInfoWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = useContext(FormRegistry);
     const { name, uiSchema, children, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
@@ -20,5 +20,5 @@ export const FieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes, // This will only include data-* attributes
     };
-    return (_jsxs(FieldWrapper, { ...mergedWrapperProps, "$isDisabled": isDisabled, children: [title && (_jsxs(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, {})] })), info && _jsx(FieldInfo, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
+    return (_jsxs(FieldWrapper, { ...mergedWrapperProps, "$isDisabled": isDisabled, children: [_jsxs(FieldTitleInfoWrapper, { children: [title && (_jsxs(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, {})] })), info && _jsx(FieldInfo, { ...info })] }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

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

@@ -5,7 +5,7 @@ import { FormRegistry } from "../../FormRegistry";
 import { getComponents } from "./styledComponents";
 export const ObjectFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
-    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
+    const { Wrapper, Title, TitleInfoWrapper, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
     const { children, uiSchema, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
@@ -24,5 +24,5 @@ export const ObjectFieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes,
     };
-    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsxs(Title, { ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help })] }));
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [_jsxs(TitleInfoWrapper, { children: [title && (_jsxs(Title, { ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help })] }));
 };

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

@@ -1,6 +1,8 @@
 import { lighten } from "polished";
 import { styled } from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.fieldset `
+  display: flex;
+  flex-direction: column;
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   margin-inline: 0;
@@ -23,6 +25,11 @@ export const ObjectFieldTemplateTitle = styled.legend `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
+export const ObjectFieldTitleInfoWrapper = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
 export const ObjectFieldTemplateDescription = undefined;
 export const ObjectFieldTemplateHelp = undefined;
 export const ObjectFieldTemplateInfo = undefined;
@@ -32,6 +39,7 @@ export function getComponents(components) {
     return {
         Wrapper: components.ObjectFieldTemplateWrapper,
         Title: components.ObjectFieldTemplateTitle,
+        TitleInfoWrapper: components.ObjectFieldTitleInfoWrapper,
         Description: components.ObjectFieldTemplateDescription ?? components.FieldDescription,
         Help: components.ObjectFieldTemplateHelp ?? components.FieldHelp,
         Info: components.ObjectFieldTemplateInfo ?? components.FieldInfo,

package/dist/esm/FormView/FormView.js

@@ -9,7 +9,7 @@ export const FormWrapper = styled.div `
   //padding: ${(props) => props.theme.spacing.xxxxxl};
 `;
 export const FormView = (props) => {
-    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
+    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;
     const registry = {
@@ -19,6 +19,8 @@ export const FormView = (props) => {
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,
+        formOptions,
+        formLocalization,
         useItemsAsAdditionalItems,
         hideUnmarkedAdditionalProperties,
     };

package/dist/esm/FormView/FormViewRegistry.js

@@ -6,6 +6,8 @@ export const FormViewRegistry = React.createContext({
     definitions: {},
     uiSchemaDefinitions: {},
     formContext: {},
+    formOptions: {},
+    formLocalization: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

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

@@ -3,6 +3,8 @@ import { FieldInfoBoxElementProps, FieldInfoProps } from "../../common/types/Fie
 export declare const FieldInfoBoxElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FieldInfoBoxElementProps>> & string;
 export declare const FieldInfoBoxArrowElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FieldInfoBoxElementProps>> & string;
 export declare const FieldInfoBoxInnerElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InlineFieldInfoBoxInnerElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FieldInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const FieldInfoLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const InlineFieldInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FieldInfo: React.FC<FieldInfoProps>;

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

@@ -3,6 +3,7 @@ import * as formik from "formik";
 export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isDisabled?: boolean;
 }>> & string;
+export declare const FieldTitleInfoWrapper: 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<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const FieldHelp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;

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

@@ -15,6 +15,7 @@ export declare const components: {
     FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
         $isDisabled?: boolean;
     }>> & string;
+    FieldTitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     FieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
     FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
     FieldHelp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -29,8 +30,10 @@ export declare const components: {
     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;
+    InlineFieldInfoBoxInnerElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     FieldInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
     FieldInfoLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+    InlineFieldInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     FieldInfo: React.FC<import("../../common/types/FieldInfo").FieldInfoProps>;
     ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("formik").ErrorMessageProps, never>> & string & Omit<import("react").FC<import("formik").ErrorMessageProps> & import("hoist-non-react-statics").NonReactStatics<import("react").ComponentClass<import("formik").ErrorMessageProps & {
         formik: import("formik").FormikContextType<import("formik").ErrorMessageProps & {
@@ -42,6 +45,7 @@ export declare const components: {
     getComponents(components: ComponentsType): {
         Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
         Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+        TitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
         Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
         Help: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
         Info: import("react").FC<import("../../common/types/FieldInfo").FieldInfoProps>;
@@ -54,12 +58,14 @@ export declare const components: {
     };
     ObjectFieldTemplateWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
     ObjectFieldTemplateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+    ObjectFieldTitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ObjectFieldTemplateDescription: typeof Field.FieldDescription | undefined;
     ObjectFieldTemplateHelp: typeof Field.FieldHelp | undefined;
     ObjectFieldTemplateInfo: typeof FieldInfo.FieldInfo | undefined;
     ObjectFieldTemplateRequiredIndicator: typeof RequiredIndicator.RequiredIndicator | undefined;
     ObjectFieldTemplateErrorMessage: typeof ErrorMessage.ErrorMessage | undefined;
     CollapsibleObjectFieldTemplateWrapper: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTemplateWrapper | undefined;
+    CollapsibleObjectTitleInfoWrapper: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTitleInfoWrapper | undefined;
     CollapsibleObjectFieldTemplateIcon: typeof Icon.Icon | undefined;
     CollapsibleObjectFieldTemplateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>, "ref"> & {
         ref?: ((instance: HTMLLegendElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLegendElement> | null | undefined;
@@ -71,6 +77,7 @@ export declare const components: {
     CollapsibleObjectFieldTemplateErrorMessage: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTemplateErrorMessage | undefined;
     CollapsibleObjectFieldTemplateToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
     CollapsibleObjectFieldTemplateChildWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    ArrayFieldTitleInfoWrapper: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTitleInfoWrapper | undefined;
     ArrayFieldTemplateWrapper: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTemplateWrapper | undefined;
     ArrayFieldTemplateIcon: typeof Icon.Icon | undefined;
     ArrayFieldTemplateTitle: typeof import("../templates/ObjectFieldTemplate/styledComponents").ObjectFieldTemplateTitle | undefined;

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

@@ -4,7 +4,8 @@ import { FieldInfo } from "../../components/FieldInfo";
 import { FieldDescription, FieldHelp } from "../../components/FieldInput";
 import { Icon } from "../../components/Icon";
 import { RequiredIndicator } from "../../components/RequiredIndicator";
-import { ObjectFieldTemplateWrapper, ObjectFieldTemplateTitle } from "../ObjectFieldTemplate/styledComponents";
+import { ObjectFieldTemplateWrapper, ObjectFieldTemplateTitle, ObjectFieldTitleInfoWrapper } from "../ObjectFieldTemplate/styledComponents";
+export declare const ArrayFieldTitleInfoWrapper: typeof ObjectFieldTitleInfoWrapper | undefined;
 export declare const ArrayFieldTemplateWrapper: typeof ObjectFieldTemplateWrapper | undefined;
 export declare const ArrayFieldTemplateIcon: typeof Icon | undefined;
 export declare const ArrayFieldTemplateTitle: typeof ObjectFieldTemplateTitle | undefined;
@@ -15,6 +16,7 @@ export declare const ArrayFieldTemplateRequiredIndicator: typeof RequiredIndicat
 export declare const ArrayFieldTemplateErrorMessage: typeof ErrorMessage | undefined;
 export declare function getComponents(components: ComponentsType): {
     Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+    TitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
     Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
     Help: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;

package/dist/types/Form/templates/CollapsibleObjectFieldTemplate/styledComponents.d.ts

@@ -1,8 +1,9 @@
 import type { ComponentsType } from "../../components";
-import { ObjectFieldTemplateDescription, ObjectFieldTemplateErrorMessage, ObjectFieldTemplateHelp, ObjectFieldTemplateInfo, ObjectFieldTemplateRequiredIndicator, ObjectFieldTemplateWrapper } from "../ObjectFieldTemplate/styledComponents";
+import { ObjectFieldTemplateDescription, ObjectFieldTemplateErrorMessage, ObjectFieldTemplateHelp, ObjectFieldTemplateInfo, ObjectFieldTemplateRequiredIndicator, ObjectFieldTemplateWrapper, ObjectFieldTitleInfoWrapper } from "../ObjectFieldTemplate/styledComponents";
 import { Icon } from "../../components/Icon";
 import { Button } from "@nolwenture/component-library";
 export declare const CollapsibleObjectFieldTemplateWrapper: typeof ObjectFieldTemplateWrapper | undefined;
+export declare const CollapsibleObjectTitleInfoWrapper: typeof ObjectFieldTitleInfoWrapper | undefined;
 export declare const CollapsibleObjectFieldTemplateIcon: typeof Icon | undefined;
 export declare const CollapsibleObjectFieldTemplateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>, "ref"> & {
     ref?: ((instance: HTMLLegendElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLegendElement> | null | undefined;
@@ -16,6 +17,7 @@ export declare const CollapsibleObjectFieldTemplateToggle: import("styled-compon
 export declare const CollapsibleObjectFieldTemplateChildWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare function getComponents(components: ComponentsType): {
     Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+    TitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>, "ref"> & {
         ref?: ((instance: HTMLLegendElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLegendElement> | null | undefined;

package/dist/types/Form/templates/ObjectFieldTemplate/styledComponents.d.ts

@@ -5,6 +5,7 @@ import { RequiredIndicator } from "../../components/RequiredIndicator";
 import { ErrorMessage } from "../../components/ErrorMessage";
 export declare const ObjectFieldTemplateWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
 export declare const ObjectFieldTemplateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+export declare const ObjectFieldTitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ObjectFieldTemplateDescription: typeof FieldDescription | undefined;
 export declare const ObjectFieldTemplateHelp: typeof FieldHelp | undefined;
 export declare const ObjectFieldTemplateInfo: typeof FieldInfo | undefined;
@@ -13,6 +14,7 @@ export declare const ObjectFieldTemplateErrorMessage: typeof ErrorMessage | unde
 export declare function getComponents(components: ComponentsType): {
     Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
     Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+    TitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
     Help: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
     Info: import("react").FC<import("../../../common/types/FieldInfo").FieldInfoProps>;

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

@@ -4,6 +4,7 @@ export declare const templateComponents: {
     getComponents(components: import("..").ComponentsType): {
         Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
         Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+        TitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
         Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
         Help: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
         Info: import("react").FC<import("../../common/types/FieldInfo").FieldInfoProps>;
@@ -16,12 +17,14 @@ export declare const templateComponents: {
     };
     ObjectFieldTemplateWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
     ObjectFieldTemplateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+    ObjectFieldTitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ObjectFieldTemplateDescription: typeof import("../components/FieldInput").FieldDescription | undefined;
     ObjectFieldTemplateHelp: typeof import("../components/FieldInput").FieldHelp | undefined;
     ObjectFieldTemplateInfo: typeof import("../components/FieldInfo").FieldInfo | undefined;
     ObjectFieldTemplateRequiredIndicator: typeof import("../components/RequiredIndicator").RequiredIndicator | undefined;
     ObjectFieldTemplateErrorMessage: typeof import("../components/ErrorMessage").ErrorMessage | undefined;
     CollapsibleObjectFieldTemplateWrapper: typeof ObjectFieldTemplate.components.ObjectFieldTemplateWrapper | undefined;
+    CollapsibleObjectTitleInfoWrapper: typeof ObjectFieldTemplate.components.ObjectFieldTitleInfoWrapper | undefined;
     CollapsibleObjectFieldTemplateIcon: typeof import("../components/Icon").Icon | undefined;
     CollapsibleObjectFieldTemplateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>, "ref"> & {
         ref?: ((instance: HTMLLegendElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLegendElement> | null | undefined;
@@ -33,6 +36,7 @@ export declare const templateComponents: {
     CollapsibleObjectFieldTemplateErrorMessage: typeof ObjectFieldTemplate.components.ObjectFieldTemplateErrorMessage | undefined;
     CollapsibleObjectFieldTemplateToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
     CollapsibleObjectFieldTemplateChildWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    ArrayFieldTitleInfoWrapper: typeof ObjectFieldTemplate.components.ObjectFieldTitleInfoWrapper | undefined;
     ArrayFieldTemplateWrapper: typeof ObjectFieldTemplate.components.ObjectFieldTemplateWrapper | undefined;
     ArrayFieldTemplateIcon: typeof import("../components/Icon").Icon | undefined;
     ArrayFieldTemplateTitle: typeof ObjectFieldTemplate.components.ObjectFieldTemplateTitle | undefined;

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

@@ -16,6 +16,7 @@ export type FormRegistryContext = {
     } | undefined;
     formContext: Record<string, any>;
     formLocalization?: Record<string, any>;
+    formOptions?: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
     hideUnmarkedAdditionalProperties: boolean;
 };

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

@@ -14,6 +14,8 @@ export type FormViewRegistryContext = {
         [key: string]: UiSchema;
     } | undefined;
     formContext: Record<string, any>;
+    formLocalization?: Record<string, any>;
+    formOptions?: Record<string, any>;
     useItemsAsAdditionalItems: boolean;
     hideUnmarkedAdditionalProperties: boolean;
 };

package/dist/types/common/types/FieldInfo.d.ts

@@ -4,8 +4,10 @@ export interface FieldInfoBoxElementProps {
 }
 export type FieldInfoProps = {
     label?: React.ReactNode;
-    content: React.ReactNode;
+    content?: React.ReactNode;
     position?: "top" | "right" | "bottom" | "left";
     className?: string;
     props?: any;
+    display?: "tooltip" | "inline";
+    formOptions?: Record<string, any>;
 };

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

@@ -15,6 +15,8 @@ export type FormProps<T> = React.PropsWithChildren<{
     uiSchema?: UiSchema | undefined;
     /** Data that is passed down to all fields. Used for implementing context aware fields */
     formContext?: Record<string, any>;
+    formOptions?: Record<string, any>;
+    formLocalization?: Record<string, any>;
     /** Dictionary of registered fields */
     fields?: Partial<FieldsType>;
     templates?: Partial<TemplatesType>;

package/dist/types/common/types/Schemas.d.ts

@@ -18,7 +18,8 @@ export type UiSchema = {
     "ui:field"?: Field | string;
     "ui:template"?: string;
     "ui:options"?: {
-        [key: string]: boolean | number | string | object | any[] | null;
+        info?: Partial<FieldInfoProps>;
+        [key: string]: any;
     };
     "ui:props"?: {
         [key: string]: any;

package/dist/types/utils/getTitleAndDescription.d.ts

@@ -9,4 +9,4 @@ export declare const getDescription: ({ description, uiSchema, schema, }: {
     description?: string;
     uiSchema?: UiSchema;
     schema?: Schema;
-}) => string | number | true | object | undefined;
+}) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [