@nolwenture/formik-jsonschema-form 1.0.0-beta.30 → 1.0.0-beta.32

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Clickable = void 0;
+exports.Clickable = exports.ClickableEl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
-const ClickableEl = styled_components_1.styled.button `
+exports.ClickableEl = styled_components_1.styled.button `
 `;
 const Clickable = ({ children, onClick, onMouseUp = () => { }, onMouseDown = () => { }, innerRef = () => { }, className, ariaLabel, ariaExpanded = false, ariaControls, id, }) => {
-    return ((0, jsx_runtime_1.jsx)(ClickableEl, { type: "button", onClick: onClick, onMouseUp: onMouseUp, onMouseDown: onMouseDown, ref: (r) => innerRef(r), className: className, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-controls": ariaControls, id: id, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.ClickableEl, { type: "button", onClick: onClick, onMouseUp: onMouseUp, onMouseDown: onMouseDown, ref: (r) => innerRef(r), className: className, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-controls": ariaControls, id: id, children: children }));
 };
 exports.Clickable = Clickable;

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

@@ -39,20 +39,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormButton = exports.FormButtonWrapper = exports.Form = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const formik = __importStar(require("formik"));
-const common_1 = require("../styles/common");
+const polished_1 = require("polished");
 exports.Form = (0, styled_components_1.default)(formik.Form) `
-  ${common_1.commonCheckboxStyles}
+ 
 
-  ${common_1.commonRadioStyles}
-
-    color: ${(props) => props.theme.color.text.default};
+  color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 
-  ${common_1.commonButtonStyles}
-
-  ${common_1.commonInputStyles}
-
-    ${common_1.commonSelectStyles}
+  
 
     :focus {
     ${(props) => props.theme.focus.default};
@@ -60,5 +54,19 @@ exports.Form = (0, styled_components_1.default)(formik.Form) `
 `;
 exports.FormButtonWrapper = styled_components_1.default.div ``;
 exports.FormButton = styled_components_1.default.button `
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  border: none;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
+  padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
+  transition: 0.2s background ease;
+
+  &:hover {
+    background-color: ${(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))};
+  }
+  
+  &:focus {
+    ${(props) => props.theme.focus.default};
+  }
 `;

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

@@ -3,7 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnyFieldWrapper = void 0;
 const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
-exports.AnyFieldWrapper = styled_components_1.styled.div `
-    ${common_1.commonInputStyles}
-    ${common_1.commonSelectStyles}
-`;
+exports.AnyFieldWrapper = (0, styled_components_1.styled)(common_1.CommonFieldWrapper) ``;

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

@@ -7,6 +7,7 @@ const formik_1 = require("formik");
 const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
+const styledComponents_1 = require("./styledComponents");
 const appendArray = (values, schema) => {
     const newItem = (0, utils_1.getDefaultValueForType)(schema?.type);
     return values ? [...values, newItem] : [newItem];
@@ -106,9 +107,9 @@ const ArrayField = (props) => {
     const SelectedArrayFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.ArrayFieldTemplate;
-    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SelectFieldInput, { type,
-            readOnly: schema.readOnly,
-            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, items: valueArray, renderItem: (item, index) => ((0, jsx_runtime_1.jsxs)(ArrayFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema((index < schemas.items.length && schemas.items[index]) ||
+    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.SelectFieldInputWrapper, { children: (0, jsx_runtime_1.jsx)(SelectFieldInput, { type,
+                readOnly: schema.readOnly,
+                ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, items: valueArray, renderItem: (item, index) => ((0, jsx_runtime_1.jsxs)(ArrayFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema((index < schemas.items.length && schemas.items[index]) ||
                                 schemas.additionalItems, schema), uiSchema: {
                                 disabled,
                                 ...(uiSchema?.[index] || uiSchema?.items),

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

@@ -3,9 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldDownButton = exports.ArrayFieldUpButton = exports.ArrayFieldLineButton = exports.ArrayFieldButton = exports.ArrayFieldItemButtons = exports.ArrayFieldItem = void 0;
+exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldDownButton = exports.ArrayFieldUpButton = exports.ArrayFieldLineButton = exports.ArrayFieldButton = exports.ArrayFieldItemButtons = exports.ArrayFieldItem = exports.SelectFieldInputWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const styledComponents_1 = require("../ObjectField/styledComponents");
+const common_1 = require("../../styles/common");
+exports.SelectFieldInputWrapper = (0, styled_components_1.default)(common_1.CommonFieldWrapper) ``;
 exports.ArrayFieldItem = styledComponents_1.ObjectFieldItem;
 exports.ArrayFieldItemButtons = styledComponents_1.ObjectFieldItemButtons;
 exports.ArrayFieldButton = (0, styled_components_1.default)(styledComponents_1.ObjectFieldButton) ``;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BooleanFieldWrapper = void 0;
 const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
-exports.BooleanFieldWrapper = styled_components_1.styled.div `
+exports.BooleanFieldWrapper = (0, styled_components_1.styled)(common_1.CommonCheckboxStyles) `
   align-items: center;
   color: ${(props) => props.theme.color.text.default};
   cursor: pointer;
@@ -11,8 +11,6 @@ exports.BooleanFieldWrapper = styled_components_1.styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.s};
 
-  ${common_1.commonCheckboxStyles}
-
   & > input[readonly], & > input[readonly] ~ span {
     pointer-events: none;
   }

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
-const styledComponents_1 = require("./styledComponents");
+const common_1 = require("../../styles/common");
 const DateField = (props) => {
     const { templates, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
@@ -15,6 +15,6 @@ const DateField = (props) => {
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.DateFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
+    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)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
 };
 exports.DateField = DateField;

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

@@ -1,9 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateFieldWrapper = void 0;
-const styled_components_1 = require("styled-components");
-const common_1 = require("../../styles/common");
-exports.DateFieldWrapper = styled_components_1.styled.div `
-    ${common_1.commonInputStyles}
-    ${common_1.datePickerIconStyles}
-`;

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

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultipleChoiceFieldLabel = exports.MultipleChoiceFieldInputElement = exports.MultipleChoiceFieldElement = exports.MultipleChoiceFieldContainer = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const styledComponents_1 = require("../RadioField/styledComponents");
-const common_1 = require("../../styles/common");
 exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledComponents_1.RadioFieldContainer) `
-    ${common_1.commonCheckboxStyles}
-    ${common_1.commonRadioStyles}
     font-family: ${(props) => props.theme.typography.fontFamily.base};
     flex-wrap: wrap;
     justify-content: start;

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

@@ -2,7 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberFieldWrapper = void 0;
 const styled_components_1 = require("styled-components");
-const common_1 = require("../../styles/common");
 exports.NumberFieldWrapper = styled_components_1.styled.div `
-    ${common_1.commonInputStyles}
 `;

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

@@ -4,6 +4,7 @@ exports.ObjectField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formik_1 = require("formik");
 const react_1 = require("react");
+const styledComponents_1 = require("./styledComponents");
 const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
@@ -57,53 +58,53 @@ const ObjectField = (props) => {
         (props.uiSchema?.["ui:options"]?.isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);
-    return ((0, jsx_runtime_1.jsxs)(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name, children: [orderedProperties
-                .map((child) => {
-                if (typeof child === "string") {
-                    const childSchema = properties?.[child];
-                    if (!childSchema)
-                        return undefined;
-                    return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child] }, child));
-                }
-                else {
-                    const { title, fields, collapsible } = child;
-                    return ((0, jsx_runtime_1.jsx)(ObjectFieldSection, { title: title, collapsible: collapsible, children: fields.map((child2) => {
-                            const childSchema = properties?.[child2];
-                            if (!childSchema)
-                                return undefined;
-                            return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child2] }, child2));
-                        }) }, fields.join("_")));
-                }
-            })
-                .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
-                additionalPropertiesInOrder.map((childName) => {
-                    let correctUiSchema = uiSchema?.[childName];
-                    if (uiSchema.properties?.["ui:order"] !== undefined &&
-                        uiSchema?.[childName]?.["ui:order"] === undefined) {
-                        correctUiSchema = {
-                            ...correctUiSchema,
-                            "ui:order": uiSchema.properties?.["ui:order"],
-                        };
+    return ((0, jsx_runtime_1.jsx)(styledComponents_1.ObjectFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name, children: [orderedProperties
+                    .map((child) => {
+                    if (typeof child === "string") {
+                        const childSchema = properties?.[child];
+                        if (!childSchema)
+                            return undefined;
+                        return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child] }, child));
                     }
-                    return ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), (0, jsx_runtime_1.jsx)(ObjectFieldItemButtons, { children: getObjectFieldButton({
-                                    purpose: types_1.ObjectFieldButtonPurpose.REMOVE,
-                                    onClick: () => {
-                                        const { [childName]: _removedProperty, ...newValue } = value;
-                                        setValue(newValue);
-                                    },
-                                    uiSchema: uiSchema,
-                                }) })] }, childName));
-                }), additionalProperties &&
-                getObjectFieldButton({
-                    purpose: types_1.ObjectFieldButtonPurpose.ADD,
-                    onClick: () => {
-                        const key = prompt("Give key");
-                        if (key) {
-                            setValue({ ...value, [key]: undefined });
+                    else {
+                        const { title, fields, collapsible } = child;
+                        return ((0, jsx_runtime_1.jsx)(ObjectFieldSection, { title: title, collapsible: collapsible, children: fields.map((child2) => {
+                                const childSchema = properties?.[child2];
+                                if (!childSchema)
+                                    return undefined;
+                                return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child2] }, child2));
+                            }) }, fields.join("_")));
+                    }
+                })
+                    .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
+                    additionalPropertiesInOrder.map((childName) => {
+                        let correctUiSchema = uiSchema?.[childName];
+                        if (uiSchema.properties?.["ui:order"] !== undefined &&
+                            uiSchema?.[childName]?.["ui:order"] === undefined) {
+                            correctUiSchema = {
+                                ...correctUiSchema,
+                                "ui:order": uiSchema.properties?.["ui:order"],
+                            };
                         }
-                    },
-                    uiSchema: uiSchema,
-                })] }));
+                        return ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), (0, jsx_runtime_1.jsx)(ObjectFieldItemButtons, { children: getObjectFieldButton({
+                                        purpose: types_1.ObjectFieldButtonPurpose.REMOVE,
+                                        onClick: () => {
+                                            const { [childName]: _removedProperty, ...newValue } = value;
+                                            setValue(newValue);
+                                        },
+                                        uiSchema: uiSchema,
+                                    }) })] }, childName));
+                    }), additionalProperties &&
+                    getObjectFieldButton({
+                        purpose: types_1.ObjectFieldButtonPurpose.ADD,
+                        onClick: () => {
+                            const key = prompt("Give key");
+                            if (key) {
+                                setValue({ ...value, [key]: undefined });
+                            }
+                        },
+                        uiSchema: uiSchema,
+                    })] }) }));
 };
 exports.ObjectField = ObjectField;
 function prepareChildSchema(childSchema, parentSchema) {

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

@@ -1,7 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = void 0;
+exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldWrapper = void 0;
 const styled_components_1 = require("styled-components");
+const polished_1 = require("polished");
+const common_1 = require("../../styles/common");
+exports.ObjectFieldWrapper = (0, styled_components_1.styled)(common_1.CommonFieldWrapper) `
+  button {
+    background-color: ${(props) => props.theme.color.intent.default.none};
+    border: none;
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-size: ${(props) => props.theme.typography.size.base};
+    padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
+    transition: 0.2s background ease;
+
+    &:hover {
+      background-color: ${(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))};
+    }
+    
+    &:focus {
+      ${(props) => props.theme.focus.default};
+    }
+  }
+
+`;
 exports.ObjectFieldItem = styled_components_1.styled.li `
   color: ${(props) => props.theme.color.text.default};
   display: flex;

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

@@ -2,14 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioFieldLabelFalse = exports.RadioFieldLabelTrue = exports.RadioFieldLabel = exports.RadioFieldInputElement = exports.RadioFieldElement = exports.RadioFieldContainer = void 0;
 const styled_components_1 = require("styled-components");
+const polished_1 = require("polished");
 const FieldInput_1 = require("../../components/FieldInput");
 const common_1 = require("../../styles/common");
-exports.RadioFieldContainer = styled_components_1.styled.div `
+exports.RadioFieldContainer = (0, styled_components_1.styled)(common_1.CommonCheckboxStyles) `
   color: ${(props) => props.theme.color.text.default};
   display: flex;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.l};
-  ${common_1.commonRadioStyles}
+  
+  input[type="radio"] {
+    -webkit-appearance: none;
+    appearance: none;
+    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.color.border.default};
+    color: ${(props) => (0, polished_1.readableColor)(props.theme.color.background.input)};
+    cursor: pointer;
+    display: grid;
+    font: inherit;
+    height: ${(props) => props.theme.spacing.l};
+    margin: 0;
+    place-content: center;
+    width: ${(props) => props.theme.spacing.l};
+
+    &:before {
+      background-color: CanvasText; //support for forced-colors
+      border-radius: ${(props) => props.theme.borderRadius.circle};
+      content: "";
+      display: inline-block;
+      height: ${(props) => props.theme.spacing.s};
+      transform: scale(0);
+      transition: 0.12s transform ease-in-out;
+      width: ${(props) => props.theme.spacing.s};
+    }
+
+    &:focus {
+      ${(props) => props.theme.focus.default};
+    }
+
+    &:checked {
+      background-color: ${(props) => props.theme.color.intent.default.none};
+
+      &:before {
+        transform: scale(1);
+      }
+    }
+  }
 `;
 exports.RadioFieldElement = styled_components_1.styled.label `
   display: inline-flex;

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

@@ -4,11 +4,11 @@ exports.SearchableMultiTagSelectFieldOptionListWithoutItem = exports.SearchableM
 const styled_components_1 = require("styled-components");
 const FieldInput_1 = require("../../components/FieldInput");
 const common_1 = require("../../styles/common");
-exports.SearchableMultiTagSelectFieldContainer = styled_components_1.styled.div `
+exports.SearchableMultiTagSelectFieldContainer = (0, styled_components_1.styled)(common_1.CommonFieldWrapper) `
   display: flex;
   flex-direction: column;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  ${common_1.commonInputStyles}
+  
 `;
 exports.SearchableMultiTagSelectFieldSearchContainer = styled_components_1.styled.div `
   display: inline-block;

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

@@ -3,7 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StringFieldWrapper = void 0;
 const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
-exports.StringFieldWrapper = styled_components_1.styled.div `
-    ${common_1.commonInputStyles}
-    ${common_1.commonSelectStyles}
-`;
+exports.StringFieldWrapper = (0, styled_components_1.styled)(common_1.CommonFieldWrapper) ``;

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

@@ -1,25 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.datePickerIconStyles = exports.commonSelectStyles = exports.commonRadioStyles = exports.commonCheckboxStyles = exports.commonInputStyles = exports.commonButtonStyles = void 0;
+exports.CommonCheckboxStyles = exports.CommonFieldWrapper = void 0;
 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.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.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}`};
-
-    &:focus {
-      ${(props) => props.theme.focus.default};
-    }
-  }
-`;
-exports.commonInputStyles = (0, styled_components_1.css) `
+exports.CommonFieldWrapper = styled_components_1.styled.div `
   input {
     background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.none};
@@ -38,8 +22,48 @@ exports.commonInputStyles = (0, styled_components_1.css) `
       ${(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;
+    -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};
+    }
+  } 
+
+  select[multiple] {
+    appearance: auto;
+    background-image: none;
+    overflow: auto;
+  }
 `;
-exports.commonCheckboxStyles = (0, styled_components_1.css) `
+exports.CommonCheckboxStyles = styled_components_1.styled.div `
   input[type="checkbox"] {
     margin-left: 0;
     -webkit-appearance: none;
@@ -144,86 +168,3 @@ exports.commonCheckboxStyles = (0, styled_components_1.css) `
     }
   }
 `;
-exports.commonRadioStyles = (0, styled_components_1.css) `
-  input[type="radio"] {
-    -webkit-appearance: none;
-    appearance: none;
-    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.color.border.default};
-    color: ${(props) => (0, polished_1.readableColor)(props.theme.color.background.input)};
-    cursor: pointer;
-    display: grid;
-    font: inherit;
-    height: ${(props) => props.theme.spacing.l};
-    margin: 0;
-    place-content: center;
-    width: ${(props) => props.theme.spacing.l};
-
-    &:before {
-      background-color: CanvasText; //support for forced-colors
-      border-radius: ${(props) => props.theme.borderRadius.circle};
-      content: "";
-      display: inline-block;
-      height: ${(props) => props.theme.spacing.s};
-      transform: scale(0);
-      transition: 0.12s transform ease-in-out;
-      width: ${(props) => props.theme.spacing.s};
-    }
-
-    &:focus {
-      ${(props) => props.theme.focus.default};
-    }
-
-    &:checked {
-      background-color: ${(props) => props.theme.color.intent.default.none};
-
-      &:before {
-        transform: scale(1);
-      }
-    }
-  }
-`;
-exports.commonSelectStyles = (0, styled_components_1.css) `
-    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};
-        }
-    } 
-
-    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.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;
-  }
-`;

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

@@ -29,6 +29,6 @@ const CollapsibleObjectFieldTemplate = (props) => {
     };
     const [collapsed, setCollapsed] = (0, react_1.useState)(isCollapsedOnLoad);
     const hide = collapsed;
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
 };
 exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;

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

@@ -4,9 +4,13 @@ exports.CollapsibleObjectFieldTemplateChildWrapper = exports.CollapsibleObjectFi
 exports.getComponents = getComponents;
 const styled_components_1 = require("styled-components");
 const Clickable_1 = require("../../components/Clickable");
+const styledComponents_1 = require("../ObjectFieldTemplate/styledComponents");
 exports.CollapsibleObjectFieldTemplateWrapper = undefined;
 exports.CollapsibleObjectFieldTemplateIcon = undefined;
-exports.CollapsibleObjectFieldTemplateTitle = undefined;
+exports.CollapsibleObjectFieldTemplateTitle = (0, styled_components_1.styled)(styledComponents_1.ObjectFieldTemplateTitle) `
+  display: flex;
+  align-items: center;
+`;
 exports.CollapsibleObjectFieldTemplateDescription = undefined;
 exports.CollapsibleObjectFieldTemplateHelp = undefined;
 exports.CollapsibleObjectFieldTemplateInfo = undefined;
@@ -15,9 +19,10 @@ exports.CollapsibleObjectFieldTemplateErrorMessage = undefined;
 exports.CollapsibleObjectFieldTemplateToggle = (0, styled_components_1.styled)(Clickable_1.Clickable) `
   display: flex;
   flex-direction: column;
-  width: 100%;
+  //width: 100%;
+`;
+exports.CollapsibleObjectFieldTemplateChildWrapper = styled_components_1.styled.div `
 `;
-exports.CollapsibleObjectFieldTemplateChildWrapper = styled_components_1.styled.div ``;
 function getComponents(components) {
     return {
         Wrapper: components.CollapsibleObjectFieldTemplateWrapper ??

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

@@ -3,14 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjectFieldTemplateErrorMessage = exports.ObjectFieldTemplateRequiredIndicator = exports.ObjectFieldTemplateInfo = exports.ObjectFieldTemplateHelp = exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = exports.ObjectFieldTemplateWrapper = void 0;
 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.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   margin-inline: 0;
   margin-bottom: ${(props) => props.theme.spacing.xs};
-  ${common_1.commonInputStyles}
-  ${common_1.commonSelectStyles}
+
 `;
 exports.ObjectFieldTemplateTitle = styled_components_1.styled.legend `
   color: ${(props) => props.theme.color.text.default};