@nolwenture/formik-jsonschema-form 1.2.7 → 1.2.9

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

@@ -40,10 +40,10 @@ const formik = __importStar(require("formik"));
 exports.FieldWrapper = styled_components_1.styled.div `
   display: flex;
   flex-direction: column;
-  margin: ${(props) => `${props.theme.spacing.s} 0`};
+  gap: ${(props) => props.theme.spacing.xs};
   color: ${(props) => props.theme.color.text.default};
   opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
-  pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
+  pointer-events: ${(props) => (props.$isDisabled ? "none" : "auto")};
 `;
 exports.FieldTitleInfoWrapper = styled_components_1.styled.div `
   display: flex;
@@ -62,7 +62,9 @@ exports.FieldDescription = styled_components_1.styled.p `
   margin: 0;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
-  font-weight: ${(props) => (props.$isReadOnly ? props.theme.typography.weight.bold : props.theme.typography.weight.normal)};
+  font-weight: ${(props) => props.$isReadOnly
+    ? props.theme.typography.weight.bold
+    : props.theme.typography.weight.normal};
 `;
 exports.FieldHelp = styled_components_1.styled.p `
   color: ${(props) => props.theme.color.text.default};

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

@@ -11,6 +11,7 @@ exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledCo
   flex-wrap: wrap;
   justify-content: start;
   flex-direction: column;
+  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/ObjectFieldTemplate/styledComponents.js

@@ -7,12 +7,16 @@ const styled_components_1 = require("styled-components");
 exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
   display: flex;
   flex-direction: column;
+  gap: ${(props) => props.theme.spacing.m};
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   margin-inline: 0;
   margin-bottom: ${(props) => props.theme.spacing.xs};
 
-  &:has(input[disabled]), &:has(option[disabled]), &:has(select[disabled]), &:has(textarea[disabled]) {
+  &:has(input[disabled]),
+  &:has(option[disabled]),
+  &:has(select[disabled]),
+  &:has(textarea[disabled]) {
     border-color: ${(props) => (0, polished_1.lighten)(0.4, props.theme.color.border.default)};
 
     legend {
@@ -23,7 +27,6 @@ exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
       }
     }
   }
-
 `;
 exports.ObjectFieldTemplateTitle = styled_components_1.styled.legend `
   color: ${(props) => props.theme.color.text.default};

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,8 +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};
-  margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
+  gap: ${(props) => props.theme.spacing.s};
   width: min(100%, 70rem);
 `;
 exports.FieldTitle = styled_components_1.default.label `
@@ -21,7 +23,6 @@ exports.FieldTitle = styled_components_1.default.label `
   font-family: ${(props) => props.theme.typography.fontFamily.heading};
   font-size: ${(props) => props.theme.typography.size.base};
   font-weight: ${(props) => props.theme.typography.weight.bold};
-  margin: ${(props) => `${props.theme.spacing.xs} 0 ${props.theme.spacing.s} 0`};
   width: 100%;
 `;
 exports.FieldDescription = styled_components_1.default.div `
@@ -30,14 +31,12 @@ exports.FieldDescription = styled_components_1.default.div `
   font-weight: ${(props) => props.theme.typography.weight.normal};
   font-style: italic;
   font-size: ${(props) => props.theme.typography.size.small};
-  margin-bottom: ${(props) => props.theme.spacing.s};
 `;
 exports.StringFieldValue = 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.small};
   font-weight: ${(props) => props.theme.typography.weight.normal};
-  margin-bottom: ${(props) => props.theme.spacing.l};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
 `;
@@ -46,7 +45,6 @@ exports.TextAreaValue = styled_components_1.default.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   font-weight: ${(props) => props.theme.typography.weight.normal};
-  margin-bottom: ${(props) => props.theme.spacing.l};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
 `;
@@ -58,7 +56,6 @@ exports.ArrayFieldItem = styled_components_1.default.div `
   background-color: ${(props) => props.theme.color.background.default};
   padding: ${(props) => props.theme.spacing.l};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  margin-bottom: ${(props) => props.theme.spacing.s};
 `;
 exports.EJSFieldValue = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};

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/cjs/utils/getStyle.js

@@ -4,7 +4,7 @@ exports.getStyle = getStyle;
 function getStyle(key) {
     const style = {};
     if (key === "inline") {
-        style.display = "inline-grid";
+        style.flexDirection = "row";
     }
     if (key === "oneColumn") {
         style.display = "grid";

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

@@ -4,10 +4,10 @@ import * as formik from "formik";
 export const FieldWrapper = styled.div `
   display: flex;
   flex-direction: column;
-  margin: ${(props) => `${props.theme.spacing.s} 0`};
+  gap: ${(props) => props.theme.spacing.xs};
   color: ${(props) => props.theme.color.text.default};
   opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
-  pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
+  pointer-events: ${(props) => (props.$isDisabled ? "none" : "auto")};
 `;
 export const FieldTitleInfoWrapper = styled.div `
   display: flex;
@@ -26,7 +26,9 @@ export const FieldDescription = styled.p `
   margin: 0;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
-  font-weight: ${(props) => (props.$isReadOnly ? props.theme.typography.weight.bold : props.theme.typography.weight.normal)};
+  font-weight: ${(props) => props.$isReadOnly
+    ? props.theme.typography.weight.bold
+    : props.theme.typography.weight.normal};
 `;
 export const FieldHelp = styled.p `
   color: ${(props) => props.theme.color.text.default};

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

@@ -5,6 +5,7 @@ export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
   flex-wrap: wrap;
   justify-content: start;
   flex-direction: column;
+  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/ObjectFieldTemplate/styledComponents.js

@@ -3,12 +3,16 @@ import { styled } from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.fieldset `
   display: flex;
   flex-direction: column;
+  gap: ${(props) => props.theme.spacing.m};
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   margin-inline: 0;
   margin-bottom: ${(props) => props.theme.spacing.xs};
 
-  &:has(input[disabled]), &:has(option[disabled]), &:has(select[disabled]), &:has(textarea[disabled]) {
+  &:has(input[disabled]),
+  &:has(option[disabled]),
+  &:has(select[disabled]),
+  &:has(textarea[disabled]) {
     border-color: ${(props) => lighten(0.4, props.theme.color.border.default)};
 
     legend {
@@ -19,7 +23,6 @@ export const ObjectFieldTemplateWrapper = styled.fieldset `
       }
     }
   }
-
 `;
 export const ObjectFieldTemplateTitle = styled.legend `
   color: ${(props) => props.theme.color.text.default};

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,8 +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};
-  margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
+  gap: ${(props) => props.theme.spacing.s};
   width: min(100%, 70rem);
 `;
 export const FieldTitle = styled.label `
@@ -15,7 +17,6 @@ export const FieldTitle = styled.label `
   font-family: ${(props) => props.theme.typography.fontFamily.heading};
   font-size: ${(props) => props.theme.typography.size.base};
   font-weight: ${(props) => props.theme.typography.weight.bold};
-  margin: ${(props) => `${props.theme.spacing.xs} 0 ${props.theme.spacing.s} 0`};
   width: 100%;
 `;
 export const FieldDescription = styled.div `
@@ -24,14 +25,12 @@ export const FieldDescription = styled.div `
   font-weight: ${(props) => props.theme.typography.weight.normal};
   font-style: italic;
   font-size: ${(props) => props.theme.typography.size.small};
-  margin-bottom: ${(props) => props.theme.spacing.s};
 `;
 export const StringFieldValue = styled.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   font-weight: ${(props) => props.theme.typography.weight.normal};
-  margin-bottom: ${(props) => props.theme.spacing.l};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
 `;
@@ -40,7 +39,6 @@ export const TextAreaValue = styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   font-weight: ${(props) => props.theme.typography.weight.normal};
-  margin-bottom: ${(props) => props.theme.spacing.l};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
 `;
@@ -52,7 +50,6 @@ export const ArrayFieldItem = styled.div `
   background-color: ${(props) => props.theme.color.background.default};
   padding: ${(props) => props.theme.spacing.l};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  margin-bottom: ${(props) => props.theme.spacing.s};
 `;
 export const EJSFieldValue = styled.div `
   color: ${(props) => props.theme.color.text.default};

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/dist/esm/utils/getStyle.js

@@ -1,7 +1,7 @@
 export function getStyle(key) {
     const style = {};
     if (key === "inline") {
-        style.display = "inline-grid";
+        style.flexDirection = "row";
     }
     if (key === "oneColumn") {
         style.display = "grid";

package/package.json

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