@nolwenture/formik-jsonschema-form 1.2.8 → 1.3.0

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

@@ -11,7 +11,7 @@ exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledCo
   flex-wrap: wrap;
   justify-content: start;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing.l};
+  gap: ${(props) => props.theme.spacing.s};
 
   &:has(input[readonly]) {
     flex-direction: column;

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

@@ -28,7 +28,9 @@ exports.ObjectFieldDownButton = (0, styled_components_1.styled)(exports.ObjectFi
 exports.ObjectFieldRemoveButton = (0, styled_components_1.styled)(exports.ObjectFieldButton) ``;
 exports.ObjectFieldAddButton = (0, styled_components_1.styled)(exports.ObjectFieldButton) ``;
 exports.ObjectFieldSectionWrapper = styled_components_1.styled.fieldset `
-  padding: ${(props) => props.theme.spacing.s} ${(props) => props.theme.spacing.l} ${(props) => props.theme.spacing.s} ${(props) => props.theme.spacing.s};
+  padding: ${(props) => props.theme.spacing.s}
+    ${(props) => props.theme.spacing.l} ${(props) => props.theme.spacing.s}
+    ${(props) => props.theme.spacing.s};
 `;
 exports.ObjectFieldSectionTitle = styled_components_1.styled.legend `
   display: flex;

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

@@ -8,14 +8,15 @@ const common_1 = require("../../styles/common");
 exports.RadioFieldContainer = (0, styled_components_1.styled)(common_1.CommonCheckboxStyles) `
   color: ${(props) => props.theme.color.text.default};
   display: flex;
+  flex-direction: column;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  gap: ${(props) => props.theme.spacing.l};
+  gap: ${(props) => props.theme.spacing.s};
 
   &:has(input[readonly]) {
     flex-direction: column;
     gap: ${(props) => props.theme.spacing.xxs};
   }
-  
+
   input[type="radio"] {
     -webkit-appearance: none;
     appearance: none;
@@ -68,10 +69,7 @@ exports.RadioFieldElement = styled_components_1.styled.label `
     pointer-events: none;
   }
 `;
-exports.RadioFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
-  margin: unset;
-  margin-top: ${(props) => props.theme.spacing.xxs};
-`;
+exports.RadioFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) ``;
 exports.RadioFieldLabel = styled_components_1.styled.span `
   margin-left: ${(props) => props.theme.spacing.xs};
   line-height: ${(props) => props.theme.typography.lineHeight.small};

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

@@ -36,6 +36,6 @@ const CollapsibleObjectFieldTemplate = (props) => {
     const hide = collapsed;
     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 })), (0, jsx_runtime_1.jsx)(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
+                        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 })] }), (0, jsx_runtime_1.jsxs)(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: [description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] })] }));
 };
 exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;

package/dist/cjs/FormView/FormView.js

@@ -12,7 +12,6 @@ const templates_1 = require("./templates");
 const FormViewRegistry_1 = require("./FormViewRegistry");
 exports.FormWrapper = styled_components_1.default.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  //padding: ${(props) => props.theme.spacing.xxxxxl};
 `;
 const FormView = (props) => {
     const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;

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

@@ -11,9 +11,10 @@ const getStyle_1 = require("../../utils/getStyle");
 const fa_1 = require("react-icons/fa");
 exports.FieldWrapper = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
+  display: flex;
+  flex-direction: column;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.s};
-  margin-bottom: ${(props) => props.theme.spacing.s};
   width: min(100%, 70rem);
 `;
 exports.FieldTitle = styled_components_1.default.label `
@@ -84,18 +85,14 @@ const SelectedBox = styled_components_1.default.div `
   justify-content: center;
   align-items: start;
 `;
-const NotSelectedCircle = styled_components_1.default.div `
-  color: ${(props) => props.theme.color.text.default};
+const NotSelectedBox = styled_components_1.default.div `
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
     ${(props) => props.theme.color.border.default};
-  border-radius: ${(props) => props.theme.borderRadius.circle};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.small};
+  border-radius: ${(props) => props.theme.borderRadius.none};
   display: inline-flex;
-  justify-content: center;
-  align-items: start;
-  padding: 0 0.1rem;
+  width: 0.85rem;
+  height: 0.85rem;
 `;
 exports.SelectedIcon = (0, styled_components_1.default)(fa_1.FaCheck) `
   color: ${(props) => props.theme.color.text.default};
@@ -124,7 +121,7 @@ exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
   break-inside: avoid;
 `;
 const BooleanFieldValue = ({ name, className, value, label, }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: (0, jsx_runtime_1.jsx)(exports.SelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: (0, jsx_runtime_1.jsx)(exports.NotSelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: (0, jsx_runtime_1.jsx)(exports.SelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedBox, {}), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
 };
 exports.BooleanFieldValue = BooleanFieldValue;
 const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
@@ -132,6 +129,6 @@ const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected
                     selected.length > 0 &&
                     selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: (0, jsx_runtime_1.jsx)(exports.SelectedIcon, {}) }), (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: (0, jsx_runtime_1.jsx)(exports.NotSelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+                    notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedBox, {}), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
 };
 exports.MultipleChoiceFieldValue = MultipleChoiceFieldValue;

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

@@ -2,4 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 const styled_components_1 = require("styled-components");
-exports.Form = styled_components_1.styled.div ``;
+exports.Form = styled_components_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.s};
+`;

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

@@ -7,18 +7,15 @@ exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = expo
 exports.getComponents = getComponents;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.ObjectFieldTemplateWrapper = styled_components_1.default.div `
-
-  &[data-fjsf-level="1"] {
-    margin-bottom: ${(props) => props.theme.spacing.xxl};
-  }
-  
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.l};
 `;
 exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
   font-weight: ${(props) => props.theme.typography.weight.medium};
-  margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
   page-break-after: avoid;
   break-after: avoid;
 
@@ -31,14 +28,13 @@ exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
     font-weight: ${(props) => props.theme.typography.weight.bold};
   }
   ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
-    font-size: ${(props) => props.theme.typography.size.h4};
+    font-size: ${(props) => props.theme.typography.size.h3};
     font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-top: 0;
+    margin-top: ${(props) => props.theme.spacing.m};
   }
   ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
-    font-size: ${(props) => props.theme.typography.size.large};
+    font-size: ${(props) => props.theme.typography.size.h4};
     font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-top: ${(props) => props.theme.spacing.xxxl};
   }
 `;
 exports.ObjectFieldTemplateDescription = undefined;

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

@@ -5,7 +5,7 @@ export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
   flex-wrap: wrap;
   justify-content: start;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing.l};
+  gap: ${(props) => props.theme.spacing.s};
 
   &:has(input[readonly]) {
     flex-direction: column;

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

@@ -25,7 +25,9 @@ export const ObjectFieldDownButton = styled(ObjectFieldButton) ``;
 export const ObjectFieldRemoveButton = styled(ObjectFieldButton) ``;
 export const ObjectFieldAddButton = styled(ObjectFieldButton) ``;
 export const ObjectFieldSectionWrapper = styled.fieldset `
-  padding: ${(props) => props.theme.spacing.s} ${(props) => props.theme.spacing.l} ${(props) => props.theme.spacing.s} ${(props) => props.theme.spacing.s};
+  padding: ${(props) => props.theme.spacing.s}
+    ${(props) => props.theme.spacing.l} ${(props) => props.theme.spacing.s}
+    ${(props) => props.theme.spacing.s};
 `;
 export const ObjectFieldSectionTitle = styled.legend `
   display: flex;

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

@@ -5,14 +5,15 @@ import { CommonCheckboxStyles } from "../../styles/common";
 export const RadioFieldContainer = styled(CommonCheckboxStyles) `
   color: ${(props) => props.theme.color.text.default};
   display: flex;
+  flex-direction: column;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  gap: ${(props) => props.theme.spacing.l};
+  gap: ${(props) => props.theme.spacing.s};
 
   &:has(input[readonly]) {
     flex-direction: column;
     gap: ${(props) => props.theme.spacing.xxs};
   }
-  
+
   input[type="radio"] {
     -webkit-appearance: none;
     appearance: none;
@@ -65,10 +66,7 @@ export const RadioFieldElement = styled.label `
     pointer-events: none;
   }
 `;
-export const RadioFieldInputElement = styled(FieldInput) `
-  margin: unset;
-  margin-top: ${(props) => props.theme.spacing.xxs};
-`;
+export const RadioFieldInputElement = styled(FieldInput) ``;
 export const RadioFieldLabel = styled.span `
   margin-left: ${(props) => props.theme.spacing.xs};
   line-height: ${(props) => props.theme.typography.lineHeight.small};

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

@@ -33,5 +33,5 @@ export const CollapsibleObjectFieldTemplate = (props) => {
     const hide = collapsed;
     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 })), _jsx(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
+                        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 })] }), _jsxs(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: [description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help })] })] }));
 };

package/dist/esm/FormView/FormView.js

@@ -6,7 +6,6 @@ import { templates as defaultTemplates } from "./templates";
 import { FormViewRegistry } from "./FormViewRegistry";
 export const FormWrapper = styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  //padding: ${(props) => props.theme.spacing.xxxxxl};
 `;
 export const FormView = (props) => {
     const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, formOptions = {}, formLocalization = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;

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

@@ -5,9 +5,10 @@ import { getStyle } from "../../utils/getStyle";
 import { FaCheck, FaTimes } from "react-icons/fa";
 export const FieldWrapper = styled.div `
   color: ${(props) => props.theme.color.text.default};
+  display: flex;
+  flex-direction: column;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.s};
-  margin-bottom: ${(props) => props.theme.spacing.s};
   width: min(100%, 70rem);
 `;
 export const FieldTitle = styled.label `
@@ -78,18 +79,14 @@ const SelectedBox = styled.div `
   justify-content: center;
   align-items: start;
 `;
-const NotSelectedCircle = styled.div `
-  color: ${(props) => props.theme.color.text.default};
+const NotSelectedBox = styled.div `
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
     ${(props) => props.theme.color.border.default};
-  border-radius: ${(props) => props.theme.borderRadius.circle};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.small};
+  border-radius: ${(props) => props.theme.borderRadius.none};
   display: inline-flex;
-  justify-content: center;
-  align-items: start;
-  padding: 0 0.1rem;
+  width: 0.85rem;
+  height: 0.85rem;
 `;
 export const SelectedIcon = styled(FaCheck) `
   color: ${(props) => props.theme.color.text.default};
@@ -118,12 +115,12 @@ export const MultipleChoiceFieldWrapper = styled.div `
   break-inside: avoid;
 `;
 export const BooleanFieldValue = ({ name, className, value, label, }) => {
-    return (_jsx("div", { className: className, children: value === true ? (_jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Selected" })] })) : (_jsxs(Selected, { children: [_jsx(NotSelectedCircle, { children: _jsx(NotSelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
+    return (_jsx("div", { className: className, children: value === true ? (_jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Selected" })] })) : (_jsxs(Selected, { children: [_jsx(NotSelectedBox, {}), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
 };
 export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
     return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, {}), selected &&
                     selected.length > 0 &&
                     selected.map((s) => (_jsx(MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
                     notSelected?.length > 0 &&
-                    notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: _jsx(NotSelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+                    notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedBox, {}), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
 };

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

@@ -1,2 +1,6 @@
 import { styled } from "styled-components";
-export const Form = styled.div ``;
+export const Form = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.s};
+`;

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

@@ -1,17 +1,14 @@
 import styled from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.div `
-
-  &[data-fjsf-level="1"] {
-    margin-bottom: ${(props) => props.theme.spacing.xxl};
-  }
-  
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.l};
 `;
 export const ObjectFieldTemplateTitle = styled.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
   font-weight: ${(props) => props.theme.typography.weight.medium};
-  margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
   page-break-after: avoid;
   break-after: avoid;
 
@@ -24,14 +21,13 @@ export const ObjectFieldTemplateTitle = styled.div `
     font-weight: ${(props) => props.theme.typography.weight.bold};
   }
   ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
-    font-size: ${(props) => props.theme.typography.size.h4};
+    font-size: ${(props) => props.theme.typography.size.h3};
     font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-top: 0;
+    margin-top: ${(props) => props.theme.spacing.m};
   }
   ${ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
-    font-size: ${(props) => props.theme.typography.size.large};
+    font-size: ${(props) => props.theme.typography.size.h4};
     font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-top: ${(props) => props.theme.spacing.xxxl};
   }
 `;
 export const ObjectFieldTemplateDescription = undefined;

package/package.json

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