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

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

@@ -63,22 +63,22 @@ exports.FieldInfoBoxArrowElement = styled_components_1.styled.div `
   margin-left: -5px;
 `;
 exports.FieldInfoBoxInnerElement = styled_components_1.styled.div `
-  background: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.intent.none}`};
+  background: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
-  color: ${(props) => (0, polished_1.readableColor)(props.theme.text.default)};
+  color: ${(props) => (0, polished_1.readableColor)(props.theme.color.text.default)};
   cursor: default;
   padding: ${(props) => `${props.theme.spacing.xs} ${props.theme.spacing.s}`};
   text-align: center;
 `;
 exports.FieldInfoContainer = styled_components_1.styled.a `
   position: relative;
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   background: none;
   outline: none;
   cursor: pointer;
   border: ${(props) => `${props.theme.strokeWidth.thin} solid
-      ${props.theme.border.default}`};
+      ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   line-height: 1em;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -89,8 +89,8 @@ exports.FieldInfoContainer = styled_components_1.styled.a `
 
   &:active,
   &:focus {
-    color: ${(props) => (0, polished_1.readableColor)(props.theme.text.default)};
-    background: ${(props) => props.theme.text.default};
+    color: ${(props) => (0, polished_1.readableColor)(props.theme.color.text.default)};
+    background: ${(props) => props.theme.color.text.default};
     ${exports.FieldInfoBoxElement} {
       opacity: 1;
       visibility: visible;

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

@@ -28,27 +28,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
 const formik = __importStar(require("formik"));
 exports.FieldWrapper = styled_components_1.styled.div `
-    margin: ${(props) => `${props.theme.spacing.s} 0`};
-    color: ${(props) => props.theme.text.default};
+  margin: ${(props) => `${props.theme.spacing.s} 0`};
+  color: ${(props) => props.theme.color.text.default};
 `;
 exports.FieldTitle = styled_components_1.styled.label `
-    font-size: ${(props) => props.theme.typography.size.base};
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-right: ${(props) => props.theme.spacing.s};
-    color: ${(props) => props.theme.text.default};
+  font-size: ${(props) => props.theme.typography.size.base};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-weight: ${(props) => props.theme.typography.weight.medium};
+  margin-right: ${(props) => props.theme.spacing.s};
+  color: ${(props) => props.theme.color.text.default};
 `;
 exports.FieldDescription = styled_components_1.styled.p `
-    color: ${(props) => props.theme.text.default};
-    margin: 0;
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-size: ${(props) => props.theme.typography.size.base};
+  color: ${(props) => props.theme.color.text.default};
+  margin: 0;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
 `;
 exports.FieldHelp = styled_components_1.styled.p `
-    color: ${(props) => props.theme.text.default};
-    margin: 0;
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-size: ${(props) => props.theme.typography.size.small};
+  color: ${(props) => props.theme.color.text.default};
+  margin: 0;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
 `;
 /*
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.

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

@@ -31,22 +31,22 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const formik = __importStar(require("formik"));
 const common_1 = require("../styles/common");
 exports.Form = (0, styled_components_1.default)(formik.Form) `
-    ${common_1.commonCheckboxStyles}
+  ${common_1.commonCheckboxStyles}
 
-    ${common_1.commonRadioStyles}
+  ${common_1.commonRadioStyles}
 
-    color: ${(props) => props.theme.text.default};
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    color: ${(props) => props.theme.color.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
 
-    ${common_1.commonButtonStyles}
+  ${common_1.commonButtonStyles}
 
-    ${common_1.commonInputStyles}
+  ${common_1.commonInputStyles}
 
     ${common_1.commonSelectStyles}
 
     :focus {
-        ${(props) => props.theme.focus.default};
-    }
+    ${(props) => props.theme.focus.default};
+  }
 `;
 exports.FormButtonWrapper = styled_components_1.default.div ``;
 exports.FormButton = styled_components_1.default.button `

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

@@ -5,7 +5,7 @@ const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
 exports.BooleanFieldWrapper = styled_components_1.styled.div `
   align-items: center;
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   cursor: pointer;
   display: flex;
   font-family: ${(props) => props.theme.typography.fontFamily.base};

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

@@ -7,8 +7,8 @@ exports.FileUploadFieldContainer = exports.FileUploadFieldFileInfoText = exports
 const styled_components_1 = __importDefault(require("styled-components"));
 const polished_1 = require("polished");
 exports.FileUploadFieldFileUploadButton = styled_components_1.default.button `
-  background-color: ${(props) => props.theme.intent.none};
-  color: ${(props) => (0, polished_1.readableColor)(props.theme.intent.none)};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  color: ${(props) => (0, polished_1.readableColor)(props.theme.color.intent.default.none)};
   padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xl}`};
   border: none;
   border-radius: ${(props) => props.theme.borderRadius.none};
@@ -23,14 +23,14 @@ exports.FileUploadFieldProgressBarContainer = styled_components_1.default.div `
   width: 7.5rem;
   height: ${(props) => props.theme.spacing.xl};
   border-radius: ${(props) => props.theme.strokeWidth.thick};
-  background-color: ${(props) => props.theme.background.input};
+  background-color: ${(props) => props.theme.color.background.input};
   position: relative;
   margin-left: ${(props) => props.theme.spacing.s};
 `;
 exports.FileUploadFieldProgressBar = styled_components_1.default.div `
   width: ${(props) => props.$progress}%;
   height: 100%;
-  background-color: ${(props) => props.theme.neutral[500]};
+  background-color: ${(props) => props.theme.color.palette.neutral[500]};
   border-radius: ${(props) => props.theme.strokeWidth.thick};
   transition: width 0.2s ease;
 `;
@@ -39,7 +39,7 @@ exports.FileUploadFieldProgressText = styled_components_1.default.span `
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: ${(props) => props.theme.neutral[200]};
+  color: ${(props) => props.theme.color.palette.neutral[200]};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-weight: ${(props) => props.theme.typography.weight.bold};
 `;
@@ -58,6 +58,6 @@ exports.FileUploadFieldFileInfoText = styled_components_1.default.span `
   margin-left: ${(props) => props.theme.spacing.s};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
 `;
 exports.FileUploadFieldContainer = styled_components_1.default.div ``;

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

@@ -3,12 +3,12 @@ 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 = exports.ObjectFieldList = void 0;
 const styled_components_1 = require("styled-components");
 exports.ObjectFieldList = styled_components_1.styled.ul `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   list-style-type: none;
   padding: 0;
 `;
 exports.ObjectFieldItem = styled_components_1.styled.li `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   display: flex;
 `;
 exports.ObjectFieldItemButtons = styled_components_1.styled.div `
@@ -16,9 +16,9 @@ exports.ObjectFieldItemButtons = styled_components_1.styled.div `
   margin: ${(props) => props.theme.spacing.s};
 `;
 exports.ObjectFieldButton = styled_components_1.styled.a `
-  background-color: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
-  color: ${(props) => props.theme.neutral[900]};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  color: ${(props) => props.theme.color.palette.neutral[900]};
   cursor: pointer;
   display: inline-block;
   font-weight: ${(props) => props.theme.typography.weight.bold};

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

@@ -5,7 +5,7 @@ const styled_components_1 = require("styled-components");
 const FieldInput_1 = require("../../components/FieldInput");
 const common_1 = require("../../styles/common");
 exports.RadioFieldContainer = styled_components_1.styled.div `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   display: flex;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.l};

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

@@ -25,8 +25,8 @@ exports.SearchableMultiTagSelectFieldBadgeContainer = styled_components_1.styled
   gap: ${(props) => props.theme.strokeWidth.thin};
 `;
 exports.SearchableMultiTagSelectFieldBadge = styled_components_1.styled.span `
-  color: ${(props) => props.theme.background.input};
-  background: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.background.input};
+  background: ${(props) => props.theme.color.text.default};
   padding: ${(props) => `0 ${props.theme.spacing.xs} 0 ${props.theme.spacing.s}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
   display: flex;
@@ -35,7 +35,7 @@ exports.SearchableMultiTagSelectFieldBadge = styled_components_1.styled.span `
 exports.SearchableMultiTagSelectFieldBadgeCloseElement = styled_components_1.styled.span `
   cursor: pointer;
   margin-left: ${(props) => props.theme.spacing.s};
-  font-size: ${(props) => props.theme.typography.size.s};
+  font-size: ${(props) => props.theme.typography.size.small};
   align-self: baseline;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
@@ -43,10 +43,10 @@ exports.SearchableMultiTagSelectFieldOptionList = styled_components_1.styled.ul
   width: 100%;
   padding: unset;
   margin: unset;
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.s};
   position: absolute;
-  background: ${(props) => props.theme.background.default};
+  background: ${(props) => props.theme.color.background.default};
   top: 100%;
   z-index: 1000;
 `;
@@ -56,12 +56,12 @@ exports.SearchableMultiTagSelectFieldOptionListItem = styled_components_1.styled
   padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
   height: ${(props) => props.theme.spacing.xl};
   &:hover {
-    background: ${(props) => props.theme.background.input};
+    background: ${(props) => props.theme.color.background.input};
   }
 `;
 exports.SearchableMultiTagSelectFieldOptionListWithoutItem = styled_components_1.styled.li `
   cursor: default;
-  color: ${(props) => props.theme.background.default};
+  color: ${(props) => props.theme.color.background.default};
   list-style-type: none;
   padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
   height: ${(props) => props.theme.spacing.xl};

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

@@ -38,7 +38,7 @@ exports.SearchableSelectFieldClearButton = styled_components_1.styled.span `
   bottom: 0;
   top: 0;
   margin: auto;
-  background-color: ${(props) => props.theme.neutral[500]};
+  background-color: ${(props) => props.theme.color.palette.neutral[500]};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   line-height: 1rem;
   min-width: 1rem;

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

@@ -7,10 +7,10 @@ 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};
+  background-color: ${(props) => props.theme.color.background.input};
   width: 100%;
   min-height: 5rem;
-  color: ${(props) => props.theme.text.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};

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};
@@ -40,7 +40,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/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);
@@ -187,14 +187,14 @@ exports.commonRadioStyles = (0, styled_components_1.css) `
 `;
 exports.commonSelectStyles = (0, styled_components_1.css) `
   select {
-    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};
-    font-weight: ${(props) => props.theme.typography.weight.base};
+    font-weight: ${(props) => props.theme.typography.weight.normal};
     padding: ${(props) => `${props.theme.spacing.s}`};
 
     &:focus {
@@ -203,9 +203,10 @@ exports.commonSelectStyles = (0, styled_components_1.css) `
   }
 `;
 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/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/FormView/components/Field.js

@@ -8,6 +8,6 @@ exports.FieldTitle = styled_components_1.styled.label `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-weight: ${(props) => props.theme.typography.weight.medium};
   margin-right: ${(props) => props.theme.spacing.s};
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
 `;
 exports.FieldDescription = styled_components_1.styled.div ``;

package/dist/cjs/FormView/components/old_styledComponents.js

@@ -33,8 +33,8 @@ const Selected = styled_components_1.default.div `
   align-items: center;
 `;
 const SelectedBox = styled_components_1.default.span `
-  color: ${(props) => props.theme.background.default};
-  background: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
   padding: ${(props) => `0 ${props.theme.spacing.xs}`};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
@@ -43,8 +43,8 @@ const SelectedBox = styled_components_1.default.span `
   align-items: center;
 `;
 const NotSelectedCircle = styled_components_1.default.span `
-  color: ${(props) => props.theme.background.default};
-  background: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
   padding: ${(props) => props.theme.spacing.xxs};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};

package/dist/cjs/styles/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -60,22 +60,22 @@ export const FieldInfoBoxArrowElement = styled.div `
   margin-left: -5px;
 `;
 export const FieldInfoBoxInnerElement = styled.div `
-  background: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.intent.none}`};
+  background: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
-  color: ${(props) => readableColor(props.theme.text.default)};
+  color: ${(props) => readableColor(props.theme.color.text.default)};
   cursor: default;
   padding: ${(props) => `${props.theme.spacing.xs} ${props.theme.spacing.s}`};
   text-align: center;
 `;
 export const FieldInfoContainer = styled.a `
   position: relative;
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   background: none;
   outline: none;
   cursor: pointer;
   border: ${(props) => `${props.theme.strokeWidth.thin} solid
-      ${props.theme.border.default}`};
+      ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   line-height: 1em;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -86,8 +86,8 @@ export const FieldInfoContainer = styled.a `
 
   &:active,
   &:focus {
-    color: ${(props) => readableColor(props.theme.text.default)};
-    background: ${(props) => props.theme.text.default};
+    color: ${(props) => readableColor(props.theme.color.text.default)};
+    background: ${(props) => props.theme.color.text.default};
     ${FieldInfoBoxElement} {
       opacity: 1;
       visibility: visible;

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

@@ -2,27 +2,27 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import * as formik from "formik";
 export const FieldWrapper = styled.div `
-    margin: ${(props) => `${props.theme.spacing.s} 0`};
-    color: ${(props) => props.theme.text.default};
+  margin: ${(props) => `${props.theme.spacing.s} 0`};
+  color: ${(props) => props.theme.color.text.default};
 `;
 export const FieldTitle = styled.label `
-    font-size: ${(props) => props.theme.typography.size.base};
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-right: ${(props) => props.theme.spacing.s};
-    color: ${(props) => props.theme.text.default};
+  font-size: ${(props) => props.theme.typography.size.base};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-weight: ${(props) => props.theme.typography.weight.medium};
+  margin-right: ${(props) => props.theme.spacing.s};
+  color: ${(props) => props.theme.color.text.default};
 `;
 export const FieldDescription = styled.p `
-    color: ${(props) => props.theme.text.default};
-    margin: 0;
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-size: ${(props) => props.theme.typography.size.base};
+  color: ${(props) => props.theme.color.text.default};
+  margin: 0;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
 `;
 export const FieldHelp = styled.p `
-    color: ${(props) => props.theme.text.default};
-    margin: 0;
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-size: ${(props) => props.theme.typography.size.small};
+  color: ${(props) => props.theme.color.text.default};
+  margin: 0;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
 `;
 /*
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.

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

@@ -2,22 +2,22 @@ import styled from "styled-components";
 import * as formik from "formik";
 import { commonCheckboxStyles, commonRadioStyles, commonButtonStyles, commonInputStyles, commonSelectStyles, } from "../styles/common";
 export const Form = styled(formik.Form) `
-    ${commonCheckboxStyles}
+  ${commonCheckboxStyles}
 
-    ${commonRadioStyles}
+  ${commonRadioStyles}
 
-    color: ${(props) => props.theme.text.default};
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    color: ${(props) => props.theme.color.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
 
-    ${commonButtonStyles}
+  ${commonButtonStyles}
 
-    ${commonInputStyles}
+  ${commonInputStyles}
 
     ${commonSelectStyles}
 
     :focus {
-        ${(props) => props.theme.focus.default};
-    }
+    ${(props) => props.theme.focus.default};
+  }
 `;
 export const FormButtonWrapper = styled.div ``;
 export const FormButton = styled.button `

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

@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 import { commonCheckboxStyles } from "../../styles/common";
 export const BooleanFieldWrapper = styled.div `
   align-items: center;
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   cursor: pointer;
   display: flex;
   font-family: ${(props) => props.theme.typography.fontFamily.base};

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

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { readableColor } from "polished";
 export const FileUploadFieldFileUploadButton = styled.button `
-  background-color: ${(props) => props.theme.intent.none};
-  color: ${(props) => readableColor(props.theme.intent.none)};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  color: ${(props) => readableColor(props.theme.color.intent.default.none)};
   padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xl}`};
   border: none;
   border-radius: ${(props) => props.theme.borderRadius.none};
@@ -17,14 +17,14 @@ export const FileUploadFieldProgressBarContainer = styled.div `
   width: 7.5rem;
   height: ${(props) => props.theme.spacing.xl};
   border-radius: ${(props) => props.theme.strokeWidth.thick};
-  background-color: ${(props) => props.theme.background.input};
+  background-color: ${(props) => props.theme.color.background.input};
   position: relative;
   margin-left: ${(props) => props.theme.spacing.s};
 `;
 export const FileUploadFieldProgressBar = styled.div `
   width: ${(props) => props.$progress}%;
   height: 100%;
-  background-color: ${(props) => props.theme.neutral[500]};
+  background-color: ${(props) => props.theme.color.palette.neutral[500]};
   border-radius: ${(props) => props.theme.strokeWidth.thick};
   transition: width 0.2s ease;
 `;
@@ -33,7 +33,7 @@ export const FileUploadFieldProgressText = styled.span `
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: ${(props) => props.theme.neutral[200]};
+  color: ${(props) => props.theme.color.palette.neutral[200]};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-weight: ${(props) => props.theme.typography.weight.bold};
 `;
@@ -52,6 +52,6 @@ export const FileUploadFieldFileInfoText = styled.span `
   margin-left: ${(props) => props.theme.spacing.s};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
 `;
 export const FileUploadFieldContainer = styled.div ``;

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

@@ -1,11 +1,11 @@
 import { styled } from "styled-components";
 export const ObjectFieldList = styled.ul `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   list-style-type: none;
   padding: 0;
 `;
 export const ObjectFieldItem = styled.li `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   display: flex;
 `;
 export const ObjectFieldItemButtons = styled.div `
@@ -13,9 +13,9 @@ export const ObjectFieldItemButtons = styled.div `
   margin: ${(props) => props.theme.spacing.s};
 `;
 export const ObjectFieldButton = styled.a `
-  background-color: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
-  color: ${(props) => props.theme.neutral[900]};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  color: ${(props) => props.theme.color.palette.neutral[900]};
   cursor: pointer;
   display: inline-block;
   font-weight: ${(props) => props.theme.typography.weight.bold};

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

@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 import { FieldInput } from "../../components/FieldInput";
 import { commonRadioStyles } from "../../styles/common";
 export const RadioFieldContainer = styled.div `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   display: flex;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.l};

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

@@ -22,8 +22,8 @@ export const SearchableMultiTagSelectFieldBadgeContainer = styled.div `
   gap: ${(props) => props.theme.strokeWidth.thin};
 `;
 export const SearchableMultiTagSelectFieldBadge = styled.span `
-  color: ${(props) => props.theme.background.input};
-  background: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.background.input};
+  background: ${(props) => props.theme.color.text.default};
   padding: ${(props) => `0 ${props.theme.spacing.xs} 0 ${props.theme.spacing.s}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
   display: flex;
@@ -32,7 +32,7 @@ export const SearchableMultiTagSelectFieldBadge = styled.span `
 export const SearchableMultiTagSelectFieldBadgeCloseElement = styled.span `
   cursor: pointer;
   margin-left: ${(props) => props.theme.spacing.s};
-  font-size: ${(props) => props.theme.typography.size.s};
+  font-size: ${(props) => props.theme.typography.size.small};
   align-self: baseline;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
@@ -40,10 +40,10 @@ export const SearchableMultiTagSelectFieldOptionList = styled.ul `
   width: 100%;
   padding: unset;
   margin: unset;
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.s};
   position: absolute;
-  background: ${(props) => props.theme.background.default};
+  background: ${(props) => props.theme.color.background.default};
   top: 100%;
   z-index: 1000;
 `;
@@ -53,12 +53,12 @@ export const SearchableMultiTagSelectFieldOptionListItem = styled.li `
   padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
   height: ${(props) => props.theme.spacing.xl};
   &:hover {
-    background: ${(props) => props.theme.background.input};
+    background: ${(props) => props.theme.color.background.input};
   }
 `;
 export const SearchableMultiTagSelectFieldOptionListWithoutItem = styled.li `
   cursor: default;
-  color: ${(props) => props.theme.background.default};
+  color: ${(props) => props.theme.color.background.default};
   list-style-type: none;
   padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
   height: ${(props) => props.theme.spacing.xl};

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

@@ -35,7 +35,7 @@ export const SearchableSelectFieldClearButton = styled.span `
   bottom: 0;
   top: 0;
   margin: auto;
-  background-color: ${(props) => props.theme.neutral[500]};
+  background-color: ${(props) => props.theme.color.palette.neutral[500]};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   line-height: 1rem;
   min-width: 1rem;

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

@@ -1,10 +1,10 @@
 import styled from "styled-components";
 import { FieldInput } from "../../components/FieldInput";
 export const TextAreaFieldInput = styled(FieldInput) `
-  background-color: ${(props) => props.theme.background.input};
+  background-color: ${(props) => props.theme.color.background.input};
   width: 100%;
   min-height: 5rem;
-  color: ${(props) => props.theme.text.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};

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

@@ -7,8 +7,8 @@ export const ToggleFieldToggle = 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};
@@ -18,7 +18,7 @@ export const ToggleFieldToggle = 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};
@@ -37,7 +37,7 @@ export const ToggleFieldInputElement = styled(FieldInput) `
   height: 0;
 
   &:checked + ${ToggleFieldToggle} {
-    //background: ${(props) => props.theme.background.input};
+    //background: ${(props) => props.theme.color.background.input};
   }
 
   &:focus + ${ToggleFieldToggle} {

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

@@ -2,12 +2,12 @@ import { css } from "styled-components";
 import { darken, readableColor } from "polished";
 export const commonButtonStyles = 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) => darken(0.1, props.theme.intent.none)};
-      color: ${(props) => readableColor(darken(0.1, props.theme.intent.none))};
+      background: ${(props) => darken(0.1, props.theme.color.intent.default.none)};
+      color: ${(props) => readableColor(darken(0.1, props.theme.color.intent.default.none))};
     }
     padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
 
@@ -18,17 +18,17 @@ export const commonButtonStyles = css `
 `;
 export const commonInputStyles = 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 {
@@ -41,11 +41,11 @@ export const commonCheckboxStyles = 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) => readableColor(props.theme.background.input)};
+      ${(props) => props.theme.color.border.default};
+    color: ${(props) => readableColor(props.theme.color.background.input)};
     cursor: pointer;
     display: grid;
     font: inherit;
@@ -133,7 +133,7 @@ export const commonCheckboxStyles = css `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -145,11 +145,11 @@ export const commonRadioStyles = 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) => readableColor(props.theme.background.input)};
+      ${(props) => props.theme.color.border.default};
+    color: ${(props) => readableColor(props.theme.color.background.input)};
     cursor: pointer;
     display: grid;
     font: inherit;
@@ -174,7 +174,7 @@ export const commonRadioStyles = css `
     }
 
     &:checked {
-      background-color: ${(props) => props.theme.intent.none};
+      background-color: ${(props) => props.theme.color.intent.default.none};
 
       &:before {
         transform: scale(1);
@@ -184,14 +184,14 @@ export const commonRadioStyles = css `
 `;
 export const commonSelectStyles = css `
   select {
-    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};
-    font-weight: ${(props) => props.theme.typography.weight.base};
+    font-weight: ${(props) => props.theme.typography.weight.normal};
     padding: ${(props) => `${props.theme.spacing.s}`};
 
     &:focus {
@@ -200,9 +200,10 @@ export const commonSelectStyles = css `
   }
 `;
 export const datePickerIconStyles = 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/esm/Form/templates/ObjectFieldTemplate/styledComponents.js

@@ -1,7 +1,7 @@
 import { styled } from "styled-components";
 import { commonInputStyles, commonSelectStyles } from "../../styles/common";
 export const ObjectFieldTemplateWrapper = 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};
@@ -9,7 +9,7 @@ export const ObjectFieldTemplateWrapper = styled.fieldset `
   ${commonSelectStyles}
 `;
 export const ObjectFieldTemplateTitle = styled.legend `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
 export const ObjectFieldTemplateDescription = undefined;

package/dist/esm/FormView/components/Field.js

@@ -5,6 +5,6 @@ export const FieldTitle = styled.label `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-weight: ${(props) => props.theme.typography.weight.medium};
   margin-right: ${(props) => props.theme.spacing.s};
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
 `;
 export const FieldDescription = styled.div ``;

package/dist/esm/FormView/components/old_styledComponents.js

@@ -26,8 +26,8 @@ const Selected = styled.div `
   align-items: center;
 `;
 const SelectedBox = styled.span `
-  color: ${(props) => props.theme.background.default};
-  background: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
   padding: ${(props) => `0 ${props.theme.spacing.xs}`};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
@@ -36,8 +36,8 @@ const SelectedBox = styled.span `
   align-items: center;
 `;
 const NotSelectedCircle = styled.span `
-  color: ${(props) => props.theme.background.default};
-  background: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
   padding: ${(props) => props.theme.spacing.xxs};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};

package/dist/esm/styles/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types/styles/types.d.ts

@@ -0,0 +1,215 @@
+export type ThemeType = {
+    color: {
+        palette: {
+            primary: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            secondary: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            success: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            warning: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            danger: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+            neutral: {
+                900: string;
+                800: string;
+                700: string;
+                600: string;
+                500: string;
+                400: string;
+                300: string;
+                200: string;
+                100: string;
+            };
+        };
+        background: {
+            default: string;
+            input: string;
+        };
+        border: {
+            default: string;
+            muted: string;
+        };
+        text: {
+            muted: string;
+            default: string;
+            dark: string;
+            secondary: string;
+            selected: string;
+            success: string;
+            info: string;
+            warning: string;
+            danger: string;
+        };
+        intent: {
+            default: {
+                none: string;
+                primary: string;
+                link: string;
+                info: string;
+                secondary: string;
+                tertiary: string;
+                success: string;
+                warning: string;
+                danger: string;
+            };
+            raised: {
+                none: string;
+                primary: string;
+                link: string;
+                info: string;
+                secondary: string;
+                tertiary: string;
+                success: string;
+                warning: string;
+                danger: string;
+            };
+            overlay: {
+                none: string;
+                primary: string;
+                link: string;
+                info: string;
+                secondary: string;
+                tertiary: string;
+                success: string;
+                warning: string;
+                danger: string;
+            };
+            sunken: {
+                none: string;
+                primary: string;
+                link: string;
+                info: string;
+                secondary: string;
+                tertiary: string;
+                success: string;
+                warning: string;
+                danger: string;
+            };
+        };
+        overlay: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+        };
+    };
+    elevation: {
+        default: string;
+        raised: string;
+        overlay: string;
+        sunken: string;
+    };
+    focus: {
+        default: string;
+        danger: string;
+    };
+    spacing: {
+        none: string;
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        xxxxxl: string;
+    };
+    borderRadius: {
+        none: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        circle: string;
+    };
+    strokeWidth: {
+        thin: string;
+        thick: string;
+        thicker: string;
+        thickest: string;
+    };
+    typography: {
+        fontFamily: {
+            base: string;
+            monospace: string;
+        };
+        weight: {
+            normal: string;
+            medium: string;
+            bold: string;
+            extrabold: string;
+        };
+        size: {
+            small: string;
+            base: string;
+            large: string;
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+        };
+        lineHeight: {
+            small: string;
+            base: string;
+            large: string;
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+        };
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -68,7 +68,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@nolwenture/component-library": "^1.0.3",
+    "@nolwenture/component-library": "^1.0.6",
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addon-interactions": "^8.0.5",
     "@storybook/addon-links": "^8.0.5",
@@ -91,6 +91,9 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^7.0.1",
+    "react-router-dom": "^7.0.1",
     "rimraf": "^6.0.1",
     "storybook": "^8.0.5",
     "styled-components": "^6.1.8",