@nolwenture/formik-jsonschema-form 1.2.1 → 1.2.2

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

@@ -1,42 +1,23 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
-const formik = __importStar(require("formik"));
-exports.ErrorMessage = (0, styled_components_1.default)(formik.ErrorMessage) ``;
+const formik_1 = require("formik");
+const ErrorText = styled_components_1.default.div `
+  color: ${(props) => props.theme.color.intent.default.danger};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
+  margin-top: ${(props) => props.theme.spacing.xs};
+`;
+const ErrorMessage = ({ name }) => {
+    const [, meta] = (0, formik_1.useField)(name);
+    if (!meta.touched || !meta.error) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(ErrorText, { children: meta.error });
+};
+exports.ErrorMessage = ErrorMessage;

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

@@ -62,6 +62,7 @@ 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)};
 `;
 exports.FieldHelp = styled_components_1.styled.p `
   color: ${(props) => props.theme.color.text.default};

package/dist/cjs/Form/fields/DateField/DateField.js

@@ -9,15 +9,18 @@ const FormRegistry_1 = require("../../FormRegistry");
 const common_1 = require("../../styles/common");
 const DateInput_1 = require("./DateInput");
 const DateField = (props) => {
-    const { templates } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, formLocalization } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const {} = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema, schema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    const { label, placeholder, min, max, locale, helpText, disabled, errorMessages } = inputProps || {};
+    const { label, placeholder, min, max, locale, helpText, disabled, errorMessages, } = inputProps || {};
     const readOnly = schema.readOnly === true;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(common_1.CommonFieldWrapper, { children: (0, jsx_runtime_1.jsx)(DateInput_1.DateInput, { name: name, label: label, placeholder: placeholder, min: min, max: max, locale: locale, helpText: helpText, disabled: disabled, readOnly: readOnly, errorMessages: errorMessages }) }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(common_1.CommonFieldWrapper, { children: (0, jsx_runtime_1.jsx)(DateInput_1.DateInput, { name: name, label: label, placeholder: placeholder, min: min, max: max, locale: locale ??
+                    formLocalization?.fields?.DateField?.locale ??
+                    navigator.language, helpText: helpText, disabled: disabled, readOnly: readOnly, errorMessages: errorMessages }) }) }));
 };
 exports.DateField = DateField;

package/dist/cjs/Form/fields/DateField/DateInput.js

@@ -7,13 +7,10 @@ const formik_1 = require("formik");
 const styledComponents_1 = require("./styledComponents");
 const dateParsing_1 = require("./dateParsing");
 const fa_1 = require("react-icons/fa");
-const FormRegistry_1 = require("../../FormRegistry");
 const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disabled, readOnly, errorMessages, }) => {
-    const { formLocalization } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    const effectiveLocale = locale ?? formLocalization?.fields?.DateField?.locale ?? navigator.language;
-    const firstDatePart = new Intl.DateTimeFormat(effectiveLocale)
+    const firstDatePart = new Intl.DateTimeFormat(locale)
         .formatToParts(new Date(Date.UTC(2000, 0, 2)))
-        .find(p => p.type === "day" || p.type === "month" || p.type === "year");
+        .find((p) => p.type === "day" || p.type === "month" || p.type === "year");
     const preferOrder = firstDatePart?.type === "month" ? "MDY" : "DMY";
     const { setFieldTouched } = (0, formik_1.useFormikContext)();
     const [field, meta, helpers] = (0, formik_1.useField)(name);
@@ -26,16 +23,15 @@ const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disab
         if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) {
             if (iso === "now") {
                 const today = new Date();
-                return new Intl.DateTimeFormat(effectiveLocale, { timeZone: "UTC" })
-                    .format(new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())));
+                return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())));
             }
             return "";
         }
         const dt = new Date(`${iso}T00:00:00Z`);
         if (Number.isNaN(dt.getTime()))
             return "";
-        return new Intl.DateTimeFormat(effectiveLocale, { timeZone: "UTC" }).format(dt);
-    }, [effectiveLocale]);
+        return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(dt);
+    }, [locale]);
     const [displayValue, setDisplayValue] = (0, react_1.useState)(formatForDisplay(value));
     (0, react_1.useEffect)(() => {
         if (!value)
@@ -55,7 +51,10 @@ const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disab
             "Date is out of range.";
         const raw = errorMessages?.outOfRange;
         if (typeof raw === "function") {
-            return raw({ min, max });
+            return raw({
+                min,
+                max,
+            });
         }
         const s = typeof raw === "string" ? raw : fallback;
         return s.replace(/\{min\}/g, min ?? "").replace(/\{max\}/g, max ?? "");
@@ -98,7 +97,16 @@ const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disab
         else {
             setError(invalidMessage);
         }
-    }, [disabled, readOnly, preferOrder, name, onValueChange, setError, setFieldTouched, invalidMessage]);
+    }, [
+        disabled,
+        readOnly,
+        preferOrder,
+        name,
+        onValueChange,
+        setError,
+        setFieldTouched,
+        invalidMessage,
+    ]);
     const handlePaste = (0, react_1.useCallback)((e) => {
         if (readOnly || disabled)
             return;
@@ -106,8 +114,8 @@ const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disab
         const text = e.clipboardData.getData("text")?.trim();
         handleParseOrError(text ?? "");
     }, [readOnly, disabled, handleParseOrError]);
-    return ((0, jsx_runtime_1.jsxs)(styledComponents_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${name}-display`, children: label }), (0, jsx_runtime_1.jsxs)(styledComponents_1.Row, { children: [(0, jsx_runtime_1.jsx)(styledComponents_1.DisplayInput, { id: `${name}-display`, type: "text", placeholder: placeholder, autoComplete: "off", inputMode: "numeric", "aria-describedby": helpText ? `${name}-help` : undefined, "aria-invalid": hasExternalError, value: displayValue, onChange: (e) => setDisplayValue(e.target.value), onBlur: (e) => handleParseOrError(e.target.value), onPaste: handlePaste, disabled: disabled || readOnly, readOnly: readOnly }), !readOnly && ((0, jsx_runtime_1.jsx)(styledComponents_1.HiddenNative, { ref: nativeRef, id: `${name}-native`, type: "date", min: min, max: max, value: value ?? "", onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${name}-display`, children: label }), (0, jsx_runtime_1.jsxs)(styledComponents_1.Row, { children: [(0, jsx_runtime_1.jsx)(styledComponents_1.DisplayInput, { id: `${name}-display`, type: "text", placeholder: placeholder, autoComplete: "off", inputMode: "numeric", "aria-describedby": helpText ? `${name}-help` : undefined, "aria-invalid": hasExternalError, value: displayValue, onChange: (e) => setDisplayValue(e.target.value), onBlur: (e) => handleParseOrError(e.target.value), onPaste: handlePaste, disabled: disabled, readOnly: readOnly }), !readOnly && ((0, jsx_runtime_1.jsx)(styledComponents_1.HiddenNative, { ref: nativeRef, id: `${name}-native`, type: "date", min: min, max: max, value: value ?? "", onChange: (e) => {
                             onValueChange(e.target.value);
-                        }, tabIndex: -1, "aria-hidden": "true" })), (0, jsx_runtime_1.jsx)(styledComponents_1.PickerButton, { type: "button", onClick: openPicker, "aria-label": "Date picker", title: "Date picker", disabled: disabled || readOnly, children: (0, jsx_runtime_1.jsx)(fa_1.FaCalendar, {}) })] })] }));
+                        }, tabIndex: -1, "aria-hidden": "true" })), !readOnly && ((0, jsx_runtime_1.jsx)(styledComponents_1.PickerButton, { type: "button", onClick: openPicker, "aria-label": "Date picker", title: "Date picker", disabled: disabled, children: (0, jsx_runtime_1.jsx)(fa_1.FaCalendar, {}) }))] })] }));
 };
 exports.DateInput = DateInput;

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

@@ -3,20 +3,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerButton = exports.HiddenNative = exports.DisplayInput = exports.Row = exports.Wrapper = void 0;
+exports.PickerButton = exports.HiddenNative = exports.DisplayInput = exports.Row = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Wrapper = styled_components_1.default.div `
-  display: inline-flex;
-  flex-direction: column;
-  max-width: 360px;
-`;
 exports.Row = styled_components_1.default.div `
-  position: relative;
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  position: relative;
 `;
 exports.DisplayInput = styled_components_1.default.input `
-  flex: 1;
+  display: flex;
+  flex-grow: 1;
+  padding-right: ${(props) => props.theme.spacing.xxxl} !important; 
+
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
+
+  &:read-only {
+    &:focus, &:focus-visible {
+      border: none;
+      stroke: none;
+      box-shadow: none;
+    }
+  }
 `;
 exports.HiddenNative = styled_components_1.default.input `
   position: absolute;
@@ -26,20 +37,24 @@ exports.HiddenNative = styled_components_1.default.input `
   height: 0;
 `;
 exports.PickerButton = styled_components_1.default.button `
-  position: relative;
-  left: -40px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  left: auto;
   border: none;
   background: inherit;
   cursor: pointer;
   font: inherit;
-    &:focus { 
-        box-shadow: none;; 
-    }
-    &:disabled { 
-        cursor: not-allowed; 
-        opacity: 0.6; 
-    }
-    svg {
-        display: flex;
-    }
+  &:focus, &:focus-visible {
+    ${(props) => props.theme.focus.default};
+  }
+  &:disabled { 
+    cursor: not-allowed; 
+    opacity: 0.6; 
+  }
+  svg {
+    display: flex;
+    color: ${(props) => props.theme.color.intent.default.primary};
+  }
 `;

package/dist/cjs/Form/styles/common.js

@@ -30,6 +30,12 @@ exports.CommonFieldWrapper = styled_components_1.styled.div `
       &::placeholder {
         color: ${(props) => props.theme.color.text.default};
       }
+
+      &:focus, &:focus-visible {
+        border: none;
+        stroke: none;
+        box-shadow: none;
+      }
     }
 
     &:disabled {
@@ -41,20 +47,19 @@ exports.CommonFieldWrapper = styled_components_1.styled.div `
       &::placeholder {
         color: ${(props) => props.theme.color.text.muted};
       }
+
+      &:focus, &:focus-visible {
+        border: none;
+        stroke: none;
+        box-shadow: none;
+      }
     }
 
-    &:focus {
+    &:focus, &:focus-visible {
       ${(props) => props.theme.focus.default};
     }
   }
 
-  ::-webkit-calendar-picker-indicator {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.color.text
-    .default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
-
-    cursor: pointer;
-  }
-
   select {
     appearance: none;
     -webkit-appearance: none;

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

@@ -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: [(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 })] }));
+    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, "$isReadOnly": isReadOnly, 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/esm/Form/components/ErrorMessage.js

@@ -1,3 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-import * as formik from "formik";
-export const ErrorMessage = styled(formik.ErrorMessage) ``;
+import { useField } from 'formik';
+const ErrorText = styled.div `
+  color: ${(props) => props.theme.color.intent.default.danger};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
+  margin-top: ${(props) => props.theme.spacing.xs};
+`;
+export const ErrorMessage = ({ name }) => {
+    const [, meta] = useField(name);
+    if (!meta.touched || !meta.error) {
+        return null;
+    }
+    return _jsx(ErrorText, { children: meta.error });
+};

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

@@ -26,6 +26,7 @@ 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)};
 `;
 export const FieldHelp = styled.p `
   color: ${(props) => props.theme.color.text.default};

package/dist/esm/Form/fields/DateField/DateField.js

@@ -6,14 +6,17 @@ import { FormRegistry } from "../../FormRegistry";
 import { CommonFieldWrapper as DateFieldWrapper } from "../../styles/common";
 import { DateInput } from "./DateInput";
 export const DateField = (props) => {
-    const { templates } = useContext(FormRegistry);
+    const { templates, formLocalization } = useContext(FormRegistry);
+    const {} = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema, schema } = props;
     const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    const { label, placeholder, min, max, locale, helpText, disabled, errorMessages } = inputProps || {};
+    const { label, placeholder, min, max, locale, helpText, disabled, errorMessages, } = inputProps || {};
     const readOnly = schema.readOnly === true;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(DateFieldWrapper, { children: _jsx(DateInput, { name: name, label: label, placeholder: placeholder, min: min, max: max, locale: locale, helpText: helpText, disabled: disabled, readOnly: readOnly, errorMessages: errorMessages }) }) }));
+    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(DateFieldWrapper, { children: _jsx(DateInput, { name: name, label: label, placeholder: placeholder, min: min, max: max, locale: locale ??
+                    formLocalization?.fields?.DateField?.locale ??
+                    navigator.language, helpText: helpText, disabled: disabled, readOnly: readOnly, errorMessages: errorMessages }) }) }));
 };

package/dist/esm/Form/fields/DateField/DateInput.js

@@ -1,16 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useRef, useState, } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useField, useFormikContext } from "formik";
-import { Wrapper, Row, DisplayInput, HiddenNative, PickerButton, } from "./styledComponents";
+import { Row, DisplayInput, HiddenNative, PickerButton, } from "./styledComponents";
 import { parseDateString, toIsoDateString } from "./dateParsing";
 import { FaCalendar } from "react-icons/fa";
-import { FormRegistry } from "../../FormRegistry";
 export const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disabled, readOnly, errorMessages, }) => {
-    const { formLocalization } = useContext(FormRegistry);
-    const effectiveLocale = locale ?? formLocalization?.fields?.DateField?.locale ?? navigator.language;
-    const firstDatePart = new Intl.DateTimeFormat(effectiveLocale)
+    const firstDatePart = new Intl.DateTimeFormat(locale)
         .formatToParts(new Date(Date.UTC(2000, 0, 2)))
-        .find(p => p.type === "day" || p.type === "month" || p.type === "year");
+        .find((p) => p.type === "day" || p.type === "month" || p.type === "year");
     const preferOrder = firstDatePart?.type === "month" ? "MDY" : "DMY";
     const { setFieldTouched } = useFormikContext();
     const [field, meta, helpers] = useField(name);
@@ -23,16 +20,15 @@ export const DateInput = ({ name, label, placeholder, min, max, locale, helpText
         if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) {
             if (iso === "now") {
                 const today = new Date();
-                return new Intl.DateTimeFormat(effectiveLocale, { timeZone: "UTC" })
-                    .format(new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())));
+                return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())));
             }
             return "";
         }
         const dt = new Date(`${iso}T00:00:00Z`);
         if (Number.isNaN(dt.getTime()))
             return "";
-        return new Intl.DateTimeFormat(effectiveLocale, { timeZone: "UTC" }).format(dt);
-    }, [effectiveLocale]);
+        return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(dt);
+    }, [locale]);
     const [displayValue, setDisplayValue] = useState(formatForDisplay(value));
     useEffect(() => {
         if (!value)
@@ -52,7 +48,10 @@ export const DateInput = ({ name, label, placeholder, min, max, locale, helpText
             "Date is out of range.";
         const raw = errorMessages?.outOfRange;
         if (typeof raw === "function") {
-            return raw({ min, max });
+            return raw({
+                min,
+                max,
+            });
         }
         const s = typeof raw === "string" ? raw : fallback;
         return s.replace(/\{min\}/g, min ?? "").replace(/\{max\}/g, max ?? "");
@@ -95,7 +94,16 @@ export const DateInput = ({ name, label, placeholder, min, max, locale, helpText
         else {
             setError(invalidMessage);
         }
-    }, [disabled, readOnly, preferOrder, name, onValueChange, setError, setFieldTouched, invalidMessage]);
+    }, [
+        disabled,
+        readOnly,
+        preferOrder,
+        name,
+        onValueChange,
+        setError,
+        setFieldTouched,
+        invalidMessage,
+    ]);
     const handlePaste = useCallback((e) => {
         if (readOnly || disabled)
             return;
@@ -103,7 +111,7 @@ export const DateInput = ({ name, label, placeholder, min, max, locale, helpText
         const text = e.clipboardData.getData("text")?.trim();
         handleParseOrError(text ?? "");
     }, [readOnly, disabled, handleParseOrError]);
-    return (_jsxs(Wrapper, { children: [_jsx("label", { htmlFor: `${name}-display`, children: label }), _jsxs(Row, { children: [_jsx(DisplayInput, { id: `${name}-display`, type: "text", placeholder: placeholder, autoComplete: "off", inputMode: "numeric", "aria-describedby": helpText ? `${name}-help` : undefined, "aria-invalid": hasExternalError, value: displayValue, onChange: (e) => setDisplayValue(e.target.value), onBlur: (e) => handleParseOrError(e.target.value), onPaste: handlePaste, disabled: disabled || readOnly, readOnly: readOnly }), !readOnly && (_jsx(HiddenNative, { ref: nativeRef, id: `${name}-native`, type: "date", min: min, max: max, value: value ?? "", onChange: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: `${name}-display`, children: label }), _jsxs(Row, { children: [_jsx(DisplayInput, { id: `${name}-display`, type: "text", placeholder: placeholder, autoComplete: "off", inputMode: "numeric", "aria-describedby": helpText ? `${name}-help` : undefined, "aria-invalid": hasExternalError, value: displayValue, onChange: (e) => setDisplayValue(e.target.value), onBlur: (e) => handleParseOrError(e.target.value), onPaste: handlePaste, disabled: disabled, readOnly: readOnly }), !readOnly && (_jsx(HiddenNative, { ref: nativeRef, id: `${name}-native`, type: "date", min: min, max: max, value: value ?? "", onChange: (e) => {
                             onValueChange(e.target.value);
-                        }, tabIndex: -1, "aria-hidden": "true" })), _jsx(PickerButton, { type: "button", onClick: openPicker, "aria-label": "Date picker", title: "Date picker", disabled: disabled || readOnly, children: _jsx(FaCalendar, {}) })] })] }));
+                        }, tabIndex: -1, "aria-hidden": "true" })), !readOnly && (_jsx(PickerButton, { type: "button", onClick: openPicker, "aria-label": "Date picker", title: "Date picker", disabled: disabled, children: _jsx(FaCalendar, {}) }))] })] }));
 };

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

@@ -1,16 +1,27 @@
 import styled from "styled-components";
-export const Wrapper = styled.div `
-  display: inline-flex;
-  flex-direction: column;
-  max-width: 360px;
-`;
 export const Row = styled.div `
-  position: relative;
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  position: relative;
 `;
 export const DisplayInput = styled.input `
-  flex: 1;
+  display: flex;
+  flex-grow: 1;
+  padding-right: ${(props) => props.theme.spacing.xxxl} !important; 
+
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
+
+  &:read-only {
+    &:focus, &:focus-visible {
+      border: none;
+      stroke: none;
+      box-shadow: none;
+    }
+  }
 `;
 export const HiddenNative = styled.input `
   position: absolute;
@@ -20,20 +31,24 @@ export const HiddenNative = styled.input `
   height: 0;
 `;
 export const PickerButton = styled.button `
-  position: relative;
-  left: -40px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  left: auto;
   border: none;
   background: inherit;
   cursor: pointer;
   font: inherit;
-    &:focus { 
-        box-shadow: none;; 
-    }
-    &:disabled { 
-        cursor: not-allowed; 
-        opacity: 0.6; 
-    }
-    svg {
-        display: flex;
-    }
+  &:focus, &:focus-visible {
+    ${(props) => props.theme.focus.default};
+  }
+  &:disabled { 
+    cursor: not-allowed; 
+    opacity: 0.6; 
+  }
+  svg {
+    display: flex;
+    color: ${(props) => props.theme.color.intent.default.primary};
+  }
 `;

package/dist/esm/Form/styles/common.js

@@ -27,6 +27,12 @@ export const CommonFieldWrapper = styled.div `
       &::placeholder {
         color: ${(props) => props.theme.color.text.default};
       }
+
+      &:focus, &:focus-visible {
+        border: none;
+        stroke: none;
+        box-shadow: none;
+      }
     }
 
     &:disabled {
@@ -38,20 +44,19 @@ export const CommonFieldWrapper = styled.div `
       &::placeholder {
         color: ${(props) => props.theme.color.text.muted};
       }
+
+      &:focus, &:focus-visible {
+        border: none;
+        stroke: none;
+        box-shadow: none;
+      }
     }
 
-    &:focus {
+    &:focus, &:focus-visible {
       ${(props) => props.theme.focus.default};
     }
   }
 
-  ::-webkit-calendar-picker-indicator {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.color.text
-    .default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
-
-    cursor: pointer;
-  }
-
   select {
     appearance: none;
     -webkit-appearance: none;

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

@@ -20,5 +20,5 @@ export const FieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes, // This will only include data-* attributes
     };
-    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 })] }));
+    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, "$isReadOnly": isReadOnly, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

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

@@ -1,6 +1,3 @@
-import * as formik from "formik";
-export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<formik.ErrorMessageProps, never>> & string & Omit<import("react").FC<formik.ErrorMessageProps> & import("hoist-non-react-statics").NonReactStatics<import("react").ComponentClass<formik.ErrorMessageProps & {
-    formik: formik.FormikContextType<formik.ErrorMessageProps & {
-        formik: formik.FormikContextType<any>;
-    }>;
-}, any>, {}>, keyof import("react").Component<any, {}, any>>;
+export declare const ErrorMessage: ({ name }: {
+    name: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -5,7 +5,9 @@ export declare const FieldWrapper: import("styled-components/dist/types").IStyle
 }>> & 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 FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    $isReadOnly: boolean;
+}>> & string;
 export declare const FieldHelp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const FieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;

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

@@ -17,7 +17,9 @@ export declare const components: {
     }>> & 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;
+    FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+        $isReadOnly: boolean;
+    }>> & string;
     FieldHelp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
     FieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {
         ref?: unknown;
@@ -35,26 +37,24 @@ export declare const components: {
     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 & {
-            formik: import("formik").FormikContextType<any>;
-        }>;
-    }, any>, {}>, keyof import("react").Component<any, {}, any>>;
+    ErrorMessage: ({ name }: {
+        name: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     ClickableEl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
     Clickable: React.FC<Clickable.ClickableProps>;
     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;
+        Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+            $isReadOnly: boolean;
+        }>> & 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>;
         RequiredIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-        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 & {
-                formik: import("formik").FormikContextType<any>;
-            }>;
-        }, any>, {}>, keyof import("react").Component<any, {}, any>>;
+        ErrorMessage: ({ name }: {
+            name: string;
+        }) => import("react/jsx-runtime").JSX.Element | null;
     };
     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;

package/dist/types/Form/fields/DateField/DateInput.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 export type DateInputProps = {
     name: string;
+    locale: string;
     label?: string;
     placeholder?: string;
     min?: string;
     max?: string;
-    locale?: string;
     helpText?: string;
     disabled?: boolean;
     readOnly?: boolean;

package/dist/types/Form/fields/DateField/styledComponents.d.ts

@@ -1,4 +1,3 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Row: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DisplayInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 export declare const HiddenNative: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

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

@@ -18,13 +18,13 @@ 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;
+    Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+        $isReadOnly: boolean;
+    }>> & 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>;
     RequiredIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    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 & {
-            formik: import("formik").FormikContextType<any>;
-        }>;
-    }, any>, {}>, keyof import("react").Component<any, {}, any>>;
+    ErrorMessage: ({ name }: {
+        name: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
 };

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

@@ -22,15 +22,15 @@ export declare function getComponents(components: ComponentsType): {
     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;
     }, never>> & string;
-    Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+    Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+        $isReadOnly: boolean;
+    }>> & 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>;
     RequiredIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    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 & {
-            formik: import("formik").FormikContextType<any>;
-        }>;
-    }, any>, {}>, keyof import("react").Component<any, {}, any>>;
+    ErrorMessage: ({ name }: {
+        name: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     Toggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof Button, keyof import("react").Component<any, {}, any>>;
     ChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
 };

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

@@ -15,13 +15,13 @@ 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;
+    Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+        $isReadOnly: boolean;
+    }>> & 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>;
     RequiredIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    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 & {
-            formik: import("formik").FormikContextType<any>;
-        }>;
-    }, any>, {}>, keyof import("react").Component<any, {}, any>>;
+    ErrorMessage: ({ name }: {
+        name: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
 };

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

@@ -5,15 +5,15 @@ export declare const templateComponents: {
         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;
+        Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+            $isReadOnly: boolean;
+        }>> & 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>;
         RequiredIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-        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 & {
-                formik: import("formik").FormikContextType<any>;
-            }>;
-        }, any>, {}>, keyof import("react").Component<any, {}, any>>;
+        ErrorMessage: ({ name }: {
+            name: string;
+        }) => import("react/jsx-runtime").JSX.Element | null;
     };
     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;

package/package.json

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