@nolwenture/formik-jsonschema-form 1.2.8 → 1.2.9

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/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 `

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.s};
 `;
 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;
 
@@ -33,12 +30,10 @@ exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
   ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
     font-size: ${(props) => props.theme.typography.size.h4};
     font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-top: 0;
   }
   ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
     font-size: ${(props) => props.theme.typography.size.large};
     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/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 `

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.s};
 `;
 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;
 
@@ -26,12 +23,10 @@ export const ObjectFieldTemplateTitle = styled.div `
   ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
     font-size: ${(props) => props.theme.typography.size.h4};
     font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-top: 0;
   }
   ${ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
     font-size: ${(props) => props.theme.typography.size.large};
     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.2.9",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [