@nolwenture/formik-jsonschema-form 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/cjs/Form/fields/TextAreaField/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fields = exports.components = void 0;
 exports.components = __importStar(require("./styledComponents"));

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

@@ -7,11 +7,12 @@ exports.TextAreaFieldInput = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const FieldInput_1 = require("../../components/FieldInput");
 exports.TextAreaFieldInput = (0, styled_components_1.default)(FieldInput_1.FieldInput) `
-  background-color: ${(props) => props.theme.background.input};
-  width: 100%;
-  min-height: 5rem;
-  color: ${(props) => props.theme.text.default};
+  background-color: ${(props) => props.theme.color.background.input};
+  color: ${(props) => props.theme.color.text.default};
+  display: inline-block;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
+  min-height: 5rem;
   padding: ${(props) => props.theme.spacing.s};
+  width: 95%;
 `;

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

@@ -11,6 +11,6 @@ const ToggleField = (props) => {
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleFieldInput, { inputProps: inputProps, name: name }) }));
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
 };
 exports.ToggleField = ToggleField;

package/dist/cjs/Form/fields/ToggleField/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.components = exports.fields = void 0;
 const ToggleFieldInput_1 = require("./ToggleFieldInput");

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

@@ -10,8 +10,8 @@ exports.ToggleFieldToggle = styled_components_1.styled.span `
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
+  background: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   -webkit-transition: 0.4s;
   transition: 0.4s;
   border-radius: ${(props) => props.theme.borderRadius.circle};
@@ -21,7 +21,7 @@ exports.ToggleFieldToggle = styled_components_1.styled.span `
     content: "";
     height: 0.9rem;
     width: 0.9rem;
-    background: ${(props) => props.theme.background.default};
+    background: ${(props) => props.theme.color.background.default};
     -webkit-transition: 0.4s;
     transition: 0.4s;
     border-radius: ${(props) => props.theme.borderRadius.circle};
@@ -33,6 +33,10 @@ exports.ToggleFieldLabel = styled_components_1.styled.label `
   position: relative;
   display: inline-block;
   width: 2rem;
+
+  &:has(input[readonly]) {
+    pointer-events: none;
+  }
 `;
 exports.ToggleFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
   opacity: 0;
@@ -40,7 +44,7 @@ exports.ToggleFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.F
   height: 0;
 
   &:checked + ${exports.ToggleFieldToggle} {
-    //background: ${(props) => props.theme.background.input};
+    //background: ${(props) => props.theme.color.background.input};
   }
 
   &:focus + ${exports.ToggleFieldToggle} {

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fields = exports.fieldComponents = void 0;
 //Please keep this in alphabetical order

package/dist/cjs/Form/index.js

@@ -27,3 +27,4 @@ Object.defineProperty(exports, "FormComponents", { enumerable: true, get: functi
 const templates_1 = require("./templates");
 Object.defineProperty(exports, "FormTemplates", { enumerable: true, get: function () { return templates_1.templates; } });
 __exportStar(require("./Form"), exports);
+__exportStar(require("./FormRegistry"), exports);

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

@@ -5,12 +5,12 @@ const styled_components_1 = require("styled-components");
 const polished_1 = require("polished");
 exports.commonButtonStyles = (0, styled_components_1.css) `
   button {
-    background-color: ${(props) => props.theme.intent.none};
+    background-color: ${(props) => props.theme.color.intent.default.none};
     border: none;
     font-size: ${(props) => props.theme.typography.size.base};
     &:hover {
-      background: ${(props) => (0, polished_1.darken)(0.1, props.theme.intent.none)};
-      color: ${(props) => (0, polished_1.readableColor)((0, polished_1.darken)(0.1, props.theme.intent.none))};
+      background: ${(props) => (0, polished_1.darken)(0.1, props.theme.color.intent.default.none)};
+      color: ${(props) => (0, polished_1.readableColor)((0, polished_1.darken)(0.1, props.theme.color.intent.default.none))};
     }
     padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
 
@@ -21,17 +21,17 @@ exports.commonButtonStyles = (0, styled_components_1.css) `
 `;
 exports.commonInputStyles = (0, styled_components_1.css) `
   input {
-    background-color: ${(props) => props.theme.background.input};
+    background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.none};
     border: ${(props) => `${props.theme.strokeWidth.thin} solid
-        ${props.theme.border.default}`};
-    color: ${(props) => props.theme.text.default};
+        ${props.theme.color.border.default}`};
+    color: ${(props) => props.theme.color.text.default};
     font-family: ${(props) => props.theme.typography.fontFamily.base};
     font-size: ${(props) => props.theme.typography.size.base};
     padding: ${(props) => props.theme.spacing.s};
 
     ::placeholder {
-      color: ${(props) => props.theme.text.muted};
+      color: ${(props) => props.theme.color.text.muted};
     }
 
     &:focus {
@@ -44,11 +44,11 @@ exports.commonCheckboxStyles = (0, styled_components_1.css) `
     margin-left: 0;
     -webkit-appearance: none;
     appearance: none;
-    background-color: ${(props) => props.theme.background.input};
+    background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.none};
     border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.border.default};
-    color: ${(props) => (0, polished_1.readableColor)(props.theme.background.input)};
+      ${(props) => props.theme.color.border.default};
+    color: ${(props) => (0, polished_1.readableColor)(props.theme.color.background.input)};
     cursor: pointer;
     display: grid;
     font: inherit;
@@ -136,7 +136,7 @@ exports.commonCheckboxStyles = (0, styled_components_1.css) `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -148,11 +148,11 @@ exports.commonRadioStyles = (0, styled_components_1.css) `
   input[type="radio"] {
     -webkit-appearance: none;
     appearance: none;
-    background-color: ${(props) => props.theme.background.input};
+    background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.circle};
     border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.border.default};
-    color: ${(props) => (0, polished_1.readableColor)(props.theme.background.input)};
+      ${(props) => props.theme.color.border.default};
+    color: ${(props) => (0, polished_1.readableColor)(props.theme.color.background.input)};
     cursor: pointer;
     display: grid;
     font: inherit;
@@ -177,7 +177,7 @@ exports.commonRadioStyles = (0, styled_components_1.css) `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -186,26 +186,44 @@ exports.commonRadioStyles = (0, styled_components_1.css) `
   }
 `;
 exports.commonSelectStyles = (0, styled_components_1.css) `
-  select {
-    background-color: ${(props) => props.theme.background.input};
-    border-radius: ${(props) => props.theme.borderRadius.none};
-    border: ${(props) => `${props.theme.strokeWidth.thin} solid
-        ${props.theme.border.default}`};
-    color: ${(props) => props.theme.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.base};
-    padding: ${(props) => `${props.theme.spacing.s}`};
+    select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        background-color: ${(props) => props.theme.color.background.input};
+        border-radius: ${(props) => props.theme.borderRadius.none};
+        border: ${(props) => `${props.theme.strokeWidth.thin} solid
+            ${props.theme.color.border.default}`};
+        color: ${(props) => props.theme.color.text.default};
+        cursor: pointer;
+        font-family: ${(props) => props.theme.typography.fontFamily.base};
+        font-size: ${(props) => props.theme.typography.size.base};
+        font-weight: ${(props) => props.theme.typography.weight.normal};
+        outline: none;
+        padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+        width: 100%;
+        
+        background-image: ${(props) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 320 512'%3E%3Cpath fill='${encodeURIComponent(props.theme.color.text.default)}' d='M31 192h258c17 0 26 21 14 33l-129 129c-8 8-21 8-29 0L17 225c-12-12-3-33 14-33z'/%3E%3C/svg%3E")`};
+        background-position: ${(props) => `right ${props.theme.spacing.m} top 50%`};
+        background-repeat: no-repeat;
+        background-size: ${(props) => props.theme.spacing.l}; auto;
 
-    &:focus {
-      ${(props) => props.theme.focus.default};
+        &:focus {
+            ${(props) => props.theme.focus.default};
+        }
+    } 
+
+    select[multiple] {
+        appearance: auto;
+        background-image: none;
+        overflow: auto;
     }
-  }
 `;
 exports.datePickerIconStyles = (0, styled_components_1.css) `
-    ::-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.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>');
+  ::-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;
-    }
+    cursor: pointer;
+  }
 `;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = exports.components = void 0;
 exports.components = __importStar(require("./styledComponents"));

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

@@ -12,9 +12,9 @@ const CollapsibleObjectFieldTemplate = (props) => {
     const { children, name, uiSchema, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
-    const { help, info, 
+    const { help, info, isCollapsedOnLoad = true, openIcon, collapsedIcon, 
     //TODO: This is not right
-    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, ariaLabel,
     // error: errorProps,
      } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const dataAttributes = Object.keys(otherProps)

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = exports.components = void 0;
 exports.components = __importStar(require("./styledComponents"));

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = void 0;
 exports.templates = __importStar(require("./FieldTemplate"));

package/dist/cjs/Form/templates/ObjectFieldTemplate/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = exports.components = void 0;
 exports.components = __importStar(require("./styledComponents"));

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

@@ -5,7 +5,7 @@ exports.getComponents = getComponents;
 const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
 exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
-  color: ${(props) => props.theme.text.default};
+  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};
@@ -13,7 +13,7 @@ exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
   ${common_1.commonSelectStyles}
 `;
 exports.ObjectFieldTemplateTitle = styled_components_1.styled.legend `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
 exports.ObjectFieldTemplateDescription = undefined;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = exports.templateComponents = void 0;
 //Please keep this in alphabetical order

package/dist/cjs/FormView/FormView.js

@@ -1,12 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormView = void 0;
+exports.FormView = exports.FormWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../utils");
 const fields_1 = require("./fields");
 const components_1 = require("./components");
 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) => {
     (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
         "schema",
@@ -20,9 +28,8 @@ const FormView = (props) => {
         "formContext",
         "components",
         "hideUnmarkedAdditionalProperties",
-        "values",
     ]);
-    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, values = {}, } = props;
+    const { schema, uiSchema = {}, className, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, } = props;
     const schemaDefinitions = schema.definitions;
     const uiSchemaDefinitions = uiSchema.definitions;
     const registry = {
@@ -37,6 +44,6 @@ const FormView = (props) => {
     };
     const { Form: FormEl } = registry.components;
     const SchemaField = registry.fields.SchemaField;
-    return ((0, jsx_runtime_1.jsx)(FormViewRegistry_1.FormViewRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(FormEl, { className: className, children: (0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.FormWrapper, { children: (0, jsx_runtime_1.jsx)(FormViewRegistry_1.FormViewRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(FormEl, { className: className, children: (0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema }) }) }) }));
 };
 exports.FormView = FormView;