@itcase/forms 1.1.31 → 1.1.32

package/dist/css/form/Field/Checkbox/FormFieldCheckbox.css

@@ -1,10 +1,8 @@
+
 .form-field {
-  &_type_checkbox {
-    ^&__label {
-      padding: 0 0 0 28px;
-    }
+  &-checkbox {
     ^&__message {
-      padding: 0 0 0 28px;
+      padding: 0 0 0 12px;
     }
   }
-}
+}

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

@@ -1,21 +1,20 @@
-.form-code {
-  position: relative;
-}
-
 .form-field {
-  &_type {
-    &_code {
-      &.form-field_size {
-        @each $size in xxl, xl, l, m, s, xs, xxs {
-          &_$(size) {
-            gap: var(--form-filed-code-size-$(size)-gap);
-          }
+  &-code {
+    ^&__label {
+      text-align: center;
+    }
+    ^&__message {
+      text-align: center;
+    }
+    &^&_size {
+      @each $size in xxl, xl, l, m, s, xs, xxs {
+        &_$(size) {
+          gap: var(--form-filed-code-size-$(size)-gap);
         }
       }
     }
   }
 }
-
 .form-field_type_code {
   @each $state in error, success, require, disabled, focus {
     &.form__item_state_$(state) {
@@ -30,7 +29,6 @@
     }
   }
 }
-
 :root {
   --form-filed-code-size-l-gap: 8px;
 }

package/dist/css/form/Field/Switch/FormFieldSwitch.css

@@ -1,36 +1,16 @@
 .form-field {
-  &_type_switch {
+  &-switch {
     width: 100%;
-  }
-}
-.form-switch {
-  &&_state {
-    @each $state in error, success, require, disabled, focus {
-      &_$(state) {
-        & .input {
-          border: solid 1px var(--form-switch-$(state)-border);
-          &:hover {
-            border: solid 1px var(--form-switch-$(state)-border-hover);
-          }
-        }
-      }
-    }
-  }
-}
-.form-field_type_switch {
-  @each $state in error, success, require, disabled, focus {
-    &.form__item_state_$(state) {
-      & .form-field__label {
-        & .text {
-          color: var(--form-switch-$(state)-label-color);
-        }
-      }
-      & .form-field__message-item_type-$(state) {
-        color: var(--form-switch-$(state)-helptext-color);
-      }
+    flex-direction: row;
+    padding: 12px 0;
+    ^&__label {
+      flex: 1;
+      display: flex;
+      align-items: center;
     }
   }
 }
+
 :root {
   --form-switch-error-border: var(--color-error-border-primary);
   --form-switch-error-border-hover: var(--color-error-border-primary);

package/dist/css/form/Form/Form.css

@@ -20,7 +20,6 @@
 .form {
   &__item {
     display: flex;
-    flex-direction: column;
     &_reset-fill {
       & input,
       & textarea {

package/dist/css/form/Form/css/__item/form__item.css

@@ -1,7 +1,6 @@
 .form {
   &__item {
     display: flex;
-    flex-direction: column;
     &_reset-fill {
       & input,
       & textarea {

package/dist/css/form/FormField/FormField.css

@@ -1,5 +1,6 @@
 .form-field {
   &__content {
+    width: 100%;
     &-inner {
       position: relative;
       display: flex;

package/dist/itcase-forms.cjs.js

@@ -246,6 +246,15 @@ const defaultFieldProps = {
   requiredMessageTextColor: 'warningTextSecondary',
   showMessage: true
 };
+const defaultFieldSizeS = {
+  size: 's',
+  labelTextSize: 's',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  helpTextSize: 's',
+  requiredMessageTextSize: 's',
+  ...defaultFieldProps
+};
 const defaultFieldSizeM = {
   size: 'm',
   labelTextSize: 's',
@@ -255,6 +264,15 @@ const defaultFieldSizeM = {
   requiredMessageTextSize: 's',
   ...defaultFieldProps
 };
+const defaultFieldSizeL = {
+  size: 'l',
+  labelTextSize: 's',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  helpTextSize: 's',
+  requiredMessageTextSize: 's',
+  ...defaultFieldProps
+};
 const defaultFieldSizeXL = {
   size: 'xl',
   labelTextSize: 's',
@@ -942,29 +960,34 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
 
 const defaultGroupProps = {
   width: 'fill',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'h5',
-  labelTextWeight: 500
+  labelTextSize: 's',
+  messageTextColor: 'surfaceTextPrimary',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextSecondary',
+  helpTextSize: 's',
+  requiredMessageTextColor: 'warningTextSecondary',
+  requiredMessageTextSize: 's'
 };
 
 const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(props) {
   const {
+    dataTour,
     className,
     name,
+    title,
+    titleTextColor,
+    titleTextSize,
+    titleTextWeight,
     label,
     labelTextColor,
     labelTextSize,
     labelTextWeight,
     message,
-    column,
-    dataTour,
-    title,
-    titleTextSize,
-    titleTextColor,
-    titleTextWeight,
-    messageTextColor = 'surfaceTextTertiary',
-    messageTextSize = 's',
+    messageTextColor,
+    messageTextSize,
     messageTextWeight,
+    column,
     showGroupMessage,
     before,
     after,
@@ -984,9 +1007,9 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
      * custom React Hook function.
      */
     const {
-      isErrorState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState
     } = useFieldValidationState({
       fieldProps: props,
       // or fieldProps?
@@ -1017,8 +1040,8 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
     }, label)), /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-items"
     }, children), after), showGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-      className: `form__group-message form__group-message_type-${errorKey}`,
       id: `${name}-error`,
+      className: `form__group-message form__group-message_type-${errorKey}`,
       size: updatedProps.messageTextSize,
       textColor: updatedProps.messageTextColor,
       textWeight: updatedProps.messageTextWeight
@@ -1035,13 +1058,13 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
 });
 
 const defaultCheckboxProps = {
-  appearance: 'defaultPrimary sizeM solid',
+  appearance: 'defaultPrimary sizeL solid',
   width: 'fill',
   // useValidationAppearanceInputProps
   // Error
-  errorAppearance: 'errorPrimary sizeM solid rounded',
+  errorAppearance: 'errorPrimary sizeL solid',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'requirePrimary sizeL solid'
 };
 
 const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function FormFieldCheckbox(props) {
@@ -1092,7 +1115,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
+      className: clsx__default.default('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1112,6 +1135,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
       isDisabled: isDisabled,
       autoComplete: "nope",
       checked: input.checked,
+      isActive: input.checked,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -1193,7 +1217,7 @@ function FormFieldChips(props) {
       return emptyOptionsList;
     }, [input.value]);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
+      className: clsx__default.default('form-field_chips', 'form__item_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1300,8 +1324,9 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      className: clsx__default.default('form-field_choice', 'form__item_choice', classNameGroupItem),
       label: label,
+      messageType: messageType,
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1310,7 +1335,6 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
       fieldClassName: "form-choice",
       inputName: input.name,
       inputValue: input.value || [],
-      messageType: messageType,
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
@@ -1377,7 +1401,7 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      className: clsx__default.default('form-field-code', 'form__item_code', classNameGroupItem),
       fieldClassName: 'form-code',
       inputName: input.name,
       inputValue: input.value,
@@ -1444,7 +1468,7 @@ const FormFieldCustom = /*#__PURE__*/React__default.default.memo(function FormFi
       inputProps: props
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
+      className: clsx__default.default('form-field_custom', 'form__item_custom', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: 'form-custom',
@@ -1543,7 +1567,7 @@ function FormFieldDatePicker(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
+      className: clsx__default.default('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1638,7 +1662,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1743,7 +1767,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1842,7 +1866,7 @@ function FormFieldSegmented(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_segmented', 'form__item_type_segmented'),
+      className: clsx__default.default('form-field_segmented', 'form__item_segmented'),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1959,7 +1983,7 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
+      className: clsx__default.default('form-field_select', 'form__item_select', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2040,7 +2064,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
+      className: clsx__default.default('form-field-switch', 'form__item_switch', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2059,7 +2083,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
-      checked: input.checked,
+      isActive: input.checked,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -2114,7 +2138,7 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
+      className: clsx__default.default('form-field_textarea', 'form__item_textarea', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2206,7 +2230,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
+      className: clsx__default.default('form-field_maskedInput', 'form__item_maskedInput', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2391,7 +2415,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
+      className: clsx__default.default('form-field_radio', 'form__item_radio"', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -3146,7 +3170,9 @@ exports.defaultCodeProps = defaultCodeProps;
 exports.defaultDatepickerProps = defaultDatepickerProps;
 exports.defaultDropzoneProps = defaultDropzoneProps;
 exports.defaultFieldProps = defaultFieldProps;
+exports.defaultFieldSizeL = defaultFieldSizeL;
 exports.defaultFieldSizeM = defaultFieldSizeM;
+exports.defaultFieldSizeS = defaultFieldSizeS;
 exports.defaultFieldSizeXL = defaultFieldSizeXL;
 exports.defaultGroupProps = defaultGroupProps;
 exports.defaultInputProps = defaultInputProps;

package/dist/itcase-forms.esm.js

@@ -235,6 +235,15 @@ const defaultFieldProps = {
   requiredMessageTextColor: 'warningTextSecondary',
   showMessage: true
 };
+const defaultFieldSizeS = {
+  size: 's',
+  labelTextSize: 's',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  helpTextSize: 's',
+  requiredMessageTextSize: 's',
+  ...defaultFieldProps
+};
 const defaultFieldSizeM = {
   size: 'm',
   labelTextSize: 's',
@@ -244,6 +253,15 @@ const defaultFieldSizeM = {
   requiredMessageTextSize: 's',
   ...defaultFieldProps
 };
+const defaultFieldSizeL = {
+  size: 'l',
+  labelTextSize: 's',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  helpTextSize: 's',
+  requiredMessageTextSize: 's',
+  ...defaultFieldProps
+};
 const defaultFieldSizeXL = {
   size: 'xl',
   labelTextSize: 's',
@@ -931,29 +949,34 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
 
 const defaultGroupProps = {
   width: 'fill',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'h5',
-  labelTextWeight: 500
+  labelTextSize: 's',
+  messageTextColor: 'surfaceTextPrimary',
+  messageTextSize: 's',
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextSecondary',
+  helpTextSize: 's',
+  requiredMessageTextColor: 'warningTextSecondary',
+  requiredMessageTextSize: 's'
 };
 
 const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
   const {
+    dataTour,
     className,
     name,
+    title,
+    titleTextColor,
+    titleTextSize,
+    titleTextWeight,
     label,
     labelTextColor,
     labelTextSize,
     labelTextWeight,
     message,
-    column,
-    dataTour,
-    title,
-    titleTextSize,
-    titleTextColor,
-    titleTextWeight,
-    messageTextColor = 'surfaceTextTertiary',
-    messageTextSize = 's',
+    messageTextColor,
+    messageTextSize,
     messageTextWeight,
+    column,
     showGroupMessage,
     before,
     after,
@@ -973,9 +996,9 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
      * custom React Hook function.
      */
     const {
-      isErrorState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState
     } = useFieldValidationState({
       fieldProps: props,
       // or fieldProps?
@@ -1006,8 +1029,8 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
     }, label)), /*#__PURE__*/React.createElement("div", {
       className: "form__group-items"
     }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
-      className: `form__group-message form__group-message_type-${errorKey}`,
       id: `${name}-error`,
+      className: `form__group-message form__group-message_type-${errorKey}`,
       size: updatedProps.messageTextSize,
       textColor: updatedProps.messageTextColor,
       textWeight: updatedProps.messageTextWeight
@@ -1024,13 +1047,13 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
 });
 
 const defaultCheckboxProps = {
-  appearance: 'defaultPrimary sizeM solid',
+  appearance: 'defaultPrimary sizeL solid',
   width: 'fill',
   // useValidationAppearanceInputProps
   // Error
-  errorAppearance: 'errorPrimary sizeM solid rounded',
+  errorAppearance: 'errorPrimary sizeL solid',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'requirePrimary sizeL solid'
 };
 
 const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
@@ -1081,7 +1104,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
+      className: clsx('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1101,6 +1124,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
       isDisabled: isDisabled,
       autoComplete: "nope",
       checked: input.checked,
+      isActive: input.checked,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -1182,7 +1206,7 @@ function FormFieldChips(props) {
       return emptyOptionsList;
     }, [input.value]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
+      className: clsx('form-field_chips', 'form__item_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1289,8 +1313,9 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      className: clsx('form-field_choice', 'form__item_choice', classNameGroupItem),
       label: label,
+      messageType: messageType,
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1299,7 +1324,6 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
       fieldClassName: "form-choice",
       inputName: input.name,
       inputValue: input.value || [],
-      messageType: messageType,
       metaActive: meta.active,
       showMessage: showMessage,
       isRequired: isRequired,
@@ -1366,7 +1390,7 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+      className: clsx('form-field-code', 'form__item_code', classNameGroupItem),
       fieldClassName: 'form-code',
       inputName: input.name,
       inputValue: input.value,
@@ -1433,7 +1457,7 @@ const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props)
       inputProps: props
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
+      className: clsx('form-field_custom', 'form__item_custom', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: 'form-custom',
@@ -1532,7 +1556,7 @@ function FormFieldDatePicker(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
+      className: clsx('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1627,7 +1651,7 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1732,7 +1756,7 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1831,7 +1855,7 @@ function FormFieldSegmented(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_segmented', 'form__item_type_segmented'),
+      className: clsx('form-field_segmented', 'form__item_segmented'),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1948,7 +1972,7 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_select', 'form__item_type_select', classNameGroupItem),
+      className: clsx('form-field_select', 'form__item_select', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2029,7 +2053,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
+      className: clsx('form-field-switch', 'form__item_switch', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2048,7 +2072,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
-      checked: input.checked,
+      isActive: input.checked,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -2103,7 +2127,7 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
+      className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2195,7 +2219,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
+      className: clsx('form-field_maskedInput', 'form__item_maskedInput', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -2380,7 +2404,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
+      className: clsx('form-field_radio', 'form__item_radio"', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -3094,4 +3118,4 @@ const getErrorsForFinalForm = error => {
   return formErrors;
 };
 
-export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeM, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeL, defaultFieldSizeM, defaultFieldSizeS, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.31",
+  "version": "1.1.32",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -38,7 +38,7 @@
     "@itcase/storybook-config": "^1.1.77",
     "@itcase/tokens-am": "^1.1.19",
     "@itcase/tokens-baikal": "^1.1.17",
-    "@itcase/ui": "^1.8.85",
+    "@itcase/ui": "^1.8.87",
     "axios": "^1.11.0",
     "clsx": "^2.1.1",
     "final-form": "4.20.10",