@itcase/forms 1.0.24 → 1.0.26

package/dist/css/form/Field/Code/Code.css

@@ -0,0 +1,3 @@
+.form-code {
+  position: relative;
+}

package/dist/css/form/Field/FileInput/FileInput.css

@@ -1,4 +1,5 @@
 .form-dropzone {
+  flex-direction: column;
   &__dropzone {
     width: 100%;
     box-shadow: none;
@@ -6,10 +7,9 @@
     outline: 0;
     @mixin easing easeOutQuart, all, 0.2s;
     &-wrapper {
-      display: flex;
-      gap: 20px;
-      justify-content: space-between;
-      flex-flow: row wrap;
+      display: grid;
+      gap: 16px;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
     }
     &_size {
       @each $size in normal, compact {
@@ -29,6 +29,7 @@
       align-content: center;
       align-items: center;
       cursor: pointer;
+      grid-column: span 3;
       &-title {
         padding: 0 0 8px 0;
         margin: 0;
@@ -48,13 +49,20 @@
     }
   }
   &__thumb {
-    flex: 30%;
     display: grid;
     column-gap: 8px;
     grid-template-columns: min-content 1fr;
     grid-template-rows: auto 1fr;
-    margin: 0 0 16px 0;
     padding: 8px 16px 8px 8px;
+    position: relative;
+    &-loader {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+    }
     &-image {
       width: 160px;
       height: 160px;

package/dist/itcase-forms.cjs.js

@@ -12,12 +12,14 @@ var Text = require('@itcase/ui/components/Text');
 var useDeviceTargetClass = require('@itcase/ui/hooks/useDeviceTargetClass');
 var useStyles = require('@itcase/ui/hooks/useStyles');
 var Choice = require('@itcase/ui/components/Choice');
+var Code = require('@itcase/ui/components/Code');
 var DatePicker = require('@itcase/ui/components/DatePicker');
 var axios = require('axios');
 var reactDropzone = require('react-dropzone');
 var fileSelector = require('file-selector');
 var castArray = require('lodash/castArray');
 var common = require('@itcase/common');
+var Loader = require('@itcase/ui/components/Loader');
 var Title = require('@itcase/ui/components/Title');
 var Input = require('@itcase/ui/components/Input');
 var Icon = require('@itcase/ui/components/Icon');
@@ -28,7 +30,6 @@ var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
 var Button = require('@itcase/ui/components/Button');
 var Group$1 = require('@itcase/ui/components/Group');
-var Loader = require('@itcase/ui/components/Loader');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
 
@@ -814,6 +815,22 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
+    var activeOption = React.useMemo(function () {
+      var emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    var setActiveSegment = React.useCallback(function (option) {
+      change(name, option.value);
+    }, [change]);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       inputName: input.name,
@@ -836,7 +853,8 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
       isMultiple: isMultiple,
       isRequired: isRequired,
       placeholder: placeholder,
-      onChange: change
+      active: activeOption,
+      setActiveSegment: setActiveSegment
     }, inputProps)));
   });
 });
@@ -894,6 +912,53 @@ CustomField.propTypes = {
   inputProps: PropTypes__default.default.object
 };
 
+var CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(props) {
+  var isRequired = props.isRequired,
+    name = props.name,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    classNameGroupItem = props.classNameGroupItem,
+    hideMessage = props.hideMessage;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name
+  }, function (_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      fieldClassName: 'form-code',
+      inputName: input.name,
+      inputValue: input.value,
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Code.Code, Object.assign({
+      autoComplete: "nope",
+      name: input.name,
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, inputProps)));
+  });
+});
+CodeField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+CodeField.propTypes = {
+  name: PropTypes__default.default.string.isRequired,
+  isRequired: PropTypes__default.default.bool,
+  fieldProps: PropTypes__default.default.object,
+  inputProps: PropTypes__default.default.object
+};
+
 function DatePickerField(props) {
   var isRequired = props.isRequired,
     fieldProps = props.fieldProps,
@@ -1139,6 +1204,9 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     hintDescriptionTextColor = props.hintDescriptionTextColor,
     hintDescriptionTextWrap = props.hintDescriptionTextWrap,
     hintDescriptionTextWeight = props.hintDescriptionTextWeight,
+    errorMessageTextSize = props.errorMessageTextSize,
+    errorMessageTextWeight = props.errorMessageTextWeight,
+    errorMessageTextColor = props.errorMessageTextColor,
     inputValue = props.inputValue,
     removeThumbText = props.removeThumbText,
     hintTitle = props.hintTitle,
@@ -1306,20 +1374,6 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     };
   }, []); // eslint-disable-line
 
-  // prettier-ignore
-  /*
-  const itemClass = useMemo(
-    () => clsx(
-      'form__item',
-      'form__item_type_dropzone',
-      // itemClassName,
-      // metaError || fileError && 'form__item_state_error',
-      files.length && 'form__item_state_success'
-    ),
-    [files.length]
-  )
-  */
-
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -1374,7 +1428,9 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     return /*#__PURE__*/React__default.default.createElement("aside", {
       className: clsx__default.default('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
-    }, isPreviews && /*#__PURE__*/React__default.default.createElement("div", {
+    }, /*#__PURE__*/React__default.default.createElement("div", {
+      className: "form-dropzone__thumb-loading"
+    }, fileIsLoading && (loadingText || 'Loading...')), isPreviews && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form-dropzone__thumb-image"
     }, /*#__PURE__*/React__default.default.createElement("img", {
       className: "form-dropzone__thumb-image-inner",
@@ -1392,8 +1448,14 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
       textWeight: thumbNameTextWeight,
       className: "form-dropzone__thumb-name-inner"
     }, file.name)), fileIsLoading && /*#__PURE__*/React__default.default.createElement("div", {
-      className: "form-dropzone__thumb-loading"
-    }, loadingText || 'Loading...'), /*#__PURE__*/React__default.default.createElement("div", {
+      className: "form-dropzone__thumb-loader"
+    }, /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
+      fill: "surfacePrimary",
+      height: "fill",
+      itemFill: "surfaceItemAccent",
+      set: "simple",
+      width: "fill"
+    })), /*#__PURE__*/React__default.default.createElement("div", {
       className: "form-dropzone__thumb-remove",
       onClick: function onClick(event) {
         return removeFile(event, i);
@@ -1434,8 +1496,13 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     textWeight: hintDescriptionTextWeight,
     className: "form-dropzone__hint-text"
   }, hintDescription)))), fileError && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form__item-message form__item-message_type-error"
-  }, fileError));
+    className: "form-field__message"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-field__message-item form-field__message-item_type_message",
+    size: errorMessageTextSize,
+    textWeight: errorMessageTextWeight,
+    textColor: errorMessageTextColor
+  }, fileError)));
 });
 FileInputDropzone.propTypes = {
   dropzoneProps: PropTypes__default.default.object,
@@ -1480,6 +1547,9 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     removeThumbTextColor = props.removeThumbTextColor,
     removeThumbTextWeight = props.removeThumbTextWeight,
     hintTitle = props.hintTitle,
+    errorMessageTextSize = props.errorMessageTextSize,
+    errorMessageTextWeight = props.errorMessageTextWeight,
+    errorMessageTextColor = props.errorMessageTextColor,
     fieldProps = props.fieldProps,
     hintTitleTextSize = props.hintTitleTextSize,
     hintTitleTextColor = props.hintTitleTextColor,
@@ -1553,6 +1623,9 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
       hintDescriptionTextColor: hintDescriptionTextColor,
       hintDescriptionTextWrap: hintDescriptionTextWrap,
       hintDescriptionTextWeight: hintDescriptionTextWeight,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
+      errorMessageTextColor: errorMessageTextColor,
       isPreviews: isPreviews,
       shape: shape,
       isShowFilename: isShowFilename,
@@ -1564,6 +1637,10 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     }));
   });
 });
+FileInput.defaultProps = {
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextPrimary'
+};
 FileInput.propTypes = {
   name: PropTypes__default.default.string.isRequired,
   className: PropTypes__default.default.string,
@@ -2348,6 +2425,7 @@ var formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
   choice: 'choice',
+  code: 'code',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
@@ -2373,6 +2451,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.code:
+      {
+        return /*#__PURE__*/React__default.default.createElement(CodeField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes["switch"]:
       {
         return /*#__PURE__*/React__default.default.createElement(SwitchField, Object.assign({
@@ -2718,6 +2802,7 @@ Object.defineProperty(exports, 'useFormState', {
 });
 exports.Checkbox = CheckboxField;
 exports.ChoiceField = ChoiceField;
+exports.CodeField = CodeField;
 exports.CustomField = CustomField;
 exports.DatePickerField = DatePickerField;
 exports.FieldWrapper = FieldWrapper;

package/dist/itcase-forms.esm.js

@@ -11,12 +11,14 @@ import { Text } from '@itcase/ui/components/Text';
 import { useDeviceTargetClass } from '@itcase/ui/hooks/useDeviceTargetClass';
 import { useStyles } from '@itcase/ui/hooks/useStyles';
 import { Choice } from '@itcase/ui/components/Choice';
+import { Code } from '@itcase/ui/components/Code';
 import { DatePickerInput } from '@itcase/ui/components/DatePicker';
 import axios from 'axios';
 import { useDropzone } from 'react-dropzone';
 import { fromEvent } from 'file-selector';
 import castArray from 'lodash/castArray';
 import { createFileFromDataURL } from '@itcase/common';
+import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
 import { Input } from '@itcase/ui/components/Input';
 import { Icon } from '@itcase/ui/components/Icon';
@@ -27,7 +29,6 @@ import { Switch } from '@itcase/ui/components/Switch';
 import { Textarea } from '@itcase/ui/components/Textarea';
 import { Button } from '@itcase/ui/components/Button';
 import { Group as Group$1 } from '@itcase/ui/components/Group';
-import { Loader } from '@itcase/ui/components/Loader';
 import { NotificationItem } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
 
@@ -804,6 +805,22 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
+    var activeOption = useMemo(function () {
+      var emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    var setActiveSegment = useCallback(function (option) {
+      change(name, option.value);
+    }, [change]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       inputName: input.name,
@@ -826,7 +843,8 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
       isMultiple: isMultiple,
       isRequired: isRequired,
       placeholder: placeholder,
-      onChange: change
+      active: activeOption,
+      setActiveSegment: setActiveSegment
     }, inputProps)));
   });
 });
@@ -884,6 +902,53 @@ CustomField.propTypes = {
   inputProps: PropTypes.object
 };
 
+var CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
+  var isRequired = props.isRequired,
+    name = props.name,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    classNameGroupItem = props.classNameGroupItem,
+    hideMessage = props.hideMessage;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, function (_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      fieldClassName: 'form-code',
+      inputName: input.name,
+      inputValue: input.value,
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
+      autoComplete: "nope",
+      name: input.name,
+      value: input.value,
+      onBlur: input.onBlur,
+      onChange: input.onChange,
+      onFocus: input.onFocus
+    }, inputProps)));
+  });
+});
+CodeField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+CodeField.propTypes = {
+  name: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object
+};
+
 function DatePickerField(props) {
   var isRequired = props.isRequired,
     fieldProps = props.fieldProps,
@@ -1129,6 +1194,9 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     hintDescriptionTextColor = props.hintDescriptionTextColor,
     hintDescriptionTextWrap = props.hintDescriptionTextWrap,
     hintDescriptionTextWeight = props.hintDescriptionTextWeight,
+    errorMessageTextSize = props.errorMessageTextSize,
+    errorMessageTextWeight = props.errorMessageTextWeight,
+    errorMessageTextColor = props.errorMessageTextColor,
     inputValue = props.inputValue,
     removeThumbText = props.removeThumbText,
     hintTitle = props.hintTitle,
@@ -1296,20 +1364,6 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     };
   }, []); // eslint-disable-line
 
-  // prettier-ignore
-  /*
-  const itemClass = useMemo(
-    () => clsx(
-      'form__item',
-      'form__item_type_dropzone',
-      // itemClassName,
-      // metaError || fileError && 'form__item_state_error',
-      files.length && 'form__item_state_success'
-    ),
-    [files.length]
-  )
-  */
-
   var fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -1364,7 +1418,9 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     return /*#__PURE__*/React.createElement("aside", {
       className: clsx('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
-    }, isPreviews && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form-dropzone__thumb-loading"
+    }, fileIsLoading && (loadingText || 'Loading...')), isPreviews && /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-image"
     }, /*#__PURE__*/React.createElement("img", {
       className: "form-dropzone__thumb-image-inner",
@@ -1382,8 +1438,14 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
       textWeight: thumbNameTextWeight,
       className: "form-dropzone__thumb-name-inner"
     }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
-      className: "form-dropzone__thumb-loading"
-    }, loadingText || 'Loading...'), /*#__PURE__*/React.createElement("div", {
+      className: "form-dropzone__thumb-loader"
+    }, /*#__PURE__*/React.createElement(Loader, {
+      fill: "surfacePrimary",
+      height: "fill",
+      itemFill: "surfaceItemAccent",
+      set: "simple",
+      width: "fill"
+    })), /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-remove",
       onClick: function onClick(event) {
         return removeFile(event, i);
@@ -1424,8 +1486,13 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     textWeight: hintDescriptionTextWeight,
     className: "form-dropzone__hint-text"
   }, hintDescription)))), fileError && /*#__PURE__*/React.createElement("div", {
-    className: "form__item-message form__item-message_type-error"
-  }, fileError));
+    className: "form-field__message"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-field__message-item form-field__message-item_type_message",
+    size: errorMessageTextSize,
+    textWeight: errorMessageTextWeight,
+    textColor: errorMessageTextColor
+  }, fileError)));
 });
 FileInputDropzone.propTypes = {
   dropzoneProps: PropTypes.object,
@@ -1470,6 +1537,9 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     removeThumbTextColor = props.removeThumbTextColor,
     removeThumbTextWeight = props.removeThumbTextWeight,
     hintTitle = props.hintTitle,
+    errorMessageTextSize = props.errorMessageTextSize,
+    errorMessageTextWeight = props.errorMessageTextWeight,
+    errorMessageTextColor = props.errorMessageTextColor,
     fieldProps = props.fieldProps,
     hintTitleTextSize = props.hintTitleTextSize,
     hintTitleTextColor = props.hintTitleTextColor,
@@ -1543,6 +1613,9 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       hintDescriptionTextColor: hintDescriptionTextColor,
       hintDescriptionTextWrap: hintDescriptionTextWrap,
       hintDescriptionTextWeight: hintDescriptionTextWeight,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
+      errorMessageTextColor: errorMessageTextColor,
       isPreviews: isPreviews,
       shape: shape,
       isShowFilename: isShowFilename,
@@ -1554,6 +1627,10 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     }));
   });
 });
+FileInput.defaultProps = {
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextPrimary'
+};
 FileInput.propTypes = {
   name: PropTypes.string.isRequired,
   className: PropTypes.string,
@@ -2338,6 +2415,7 @@ var formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
   choice: 'choice',
+  code: 'code',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
@@ -2363,6 +2441,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.code:
+      {
+        return /*#__PURE__*/React.createElement(CodeField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes["switch"]:
       {
         return /*#__PURE__*/React.createElement(SwitchField, Object.assign({
@@ -2694,4 +2778,4 @@ FinalForm.defaultProps = {
   disableFieldsAutoComplete: false
 };
 
-export { CheckboxField as Checkbox, ChoiceField, CustomField, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { CheckboxField as Checkbox, ChoiceField, CodeField, CustomField, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@itcase/common": "^1.1.6",
-    "@itcase/ui": "^1.0.46",
+    "@itcase/ui": "^1.0.48",
     "axios": "^1.5.0",
     "clsx": "^2.0.0",
     "date-fns": "2.0.0-alpha.7",