@itcase/forms 1.1.4 → 1.1.5

package/dist/css/form/Field/Chips/Chips.css

@@ -1,27 +0,0 @@
-.form-chips {
-  &&_state {
-    &_success {
-      & .chips {
-        /* border: solid 1px var(--choice-success-border); */
-      }
-    }
-    &_error {
-      & .chips {
-        /* border: solid 1px var(--choice-error-border); */
-      }
-    }
-    &_focus {
-      /* border: solid 1px var(--choice-focus-border); */
-    }
-  }
-}
-.form-field {
-  &_type_chips {
-  }
-}
-:root {
-  --chips-success-border: var(--color-success-border-primary);
-  --chips-success-border-hover: var(--color-surface-border-quaternary);
-  --chips-error-border: var(--color-error-border-primary);
-  --chips-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/Choice/Choice.css

@@ -1,27 +0,0 @@
-.form-choice {
-  &&_state {
-    &_success {
-      & .choice {
-        /* border: solid 1px var(--choice-success-border); */
-      }
-    }
-    &_error {
-      & .choice {
-        /* border: solid 1px var(--choice-error-border); */
-      }
-    }
-    &_focus {
-      /* border: solid 1px var(--choice-focus-border); */
-    }
-  }
-}
-.form-field {
-  &_type_choice {
-  }
-}
-:root {
-  --choice-success-border: var(--color-success-border-primary);
-  --choice-success-border-hover: var(--color-surface-border-quaternary);
-  --choice-error-border: var(--color-error-border-primary);
-  --choice-focus-border: var(--color-surface-border-quaternary);
-}

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

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

package/dist/css/form/Field/Custom/Custom.css

@@ -1,31 +1,9 @@
-.form-custom {
-  &_state {
-    &_success {
-      & .input {
-        border: solid 1px var(--custom-success-border);
-        &:hover {
-          border: solid 1px var(--custom-success-border-hover);
-        }
-      }
-    }
-    &_error {
-      & .input {
-        border: solid 1px var(--custom-error-border);
-      }
-    }
-    &_focus {
-      & .input {
-        background: var(--custom-focus-background);
-        border: solid 1px var(--custom-focus-border);
-      }
-    }
-  }
-}
 .form-field {
   &_type_custom {
     width: 100%;
   }
 }
+
 :root {
   --custom-success-border: var(--color-success-border-primary);
   --custom-success-border-hover: var(--color-surface-border-quaternary);

package/dist/css/form/Field/Input/Input.css

@@ -1,43 +0,0 @@
-.form-input {
-  position: relative;
-  &&_state {
-    &_success {
-      & .input {
-        border: solid 1px var(--input-success-border, green);
-        &:hover {
-          border: solid 1px var(--input-success-border-hover);
-        }
-      }
-    }
-    &_disabled {
-      & .input {
-        background: var(--input-disabled-background, #ECECEC);
-        border: solid 1px var(--input-disabled-border, #747474);
-        &:hover {
-          background: var(--input-disabled-background, #ECECEC);
-          border: solid 1px var(--input-disabled-border, #747474);
-        }
-      }
-    }
-
-    &_error {
-      & .input {
-        border: solid 1px var(--input-error-border);
-      }
-    }
-    &_focus {
-      & .input {
-        background: var(--input-focus-background);
-        border: solid 1px var(--input-focus-border);
-      }
-    }
-  }
-}
-
-:root {
-  --input-success-border: var(--color-success-border-primary);
-  --input-success-border-hover: var(--color-surface-border-quaternary);
-  --input-error-border: var(--color-error-border-primary);
-  --input-focus-background: var(--color-surface-primary);
-  --input-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/Textarea/Textarea.css

@@ -1,31 +0,0 @@
-.form-textarea {
-  position: relative;
-  &&_state {
-    &_success {
-      & .textarea {
-        border: solid 1px var(--textarea-success-border);
-        &:hover {
-          border: solid 1px var(--textarea-success-border-hover);
-        }
-      }
-    }
-    &_error {
-      & .textarea {
-        border: solid 1px var(--textarea-error-border);
-      }
-    }
-    &_focus {
-      & .textarea {
-        background: var(--textarea-focus-background);
-      }
-    }
-  }
-}
-
-:root {
-  --textarea-success-border: var(--color-success-border-primary);
-  --textarea-success-border-hover: var(--color-surface-border-quaternary);
-  --textarea-error-border: var(--color-error-border-primary);
-  --textarea-focus-background: var(--color-surface-primary);
-  --textarea-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/itcase-forms.cjs.js

@@ -131,20 +131,16 @@ function useYupValidationSchema(schema, language) {
 const defaultFieldProps = {
   width: 'fill',
   direction: 'vertical',
-  dividerFill: 'errorPrimary',
-  errorMessageTextColor: 'errorTextPrimary',
-  // error
+  labelTextColor: 'surfaceTextPrimary',
+  labelTextSize: 'm',
+  errorMessageTextColor: 'errorTextSecondary',
   errorMessageTextSize: 's',
-  fill: 'surfacePrimary',
+  dividerFill: 'errorPrimary',
   helpTextColor: 'surfaceTextQuaternary',
-  // messageTextSize: 's',
-  // messageTextColor: 'surfaceTextSecondary',
   helpTextSize: 's',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'm',
-  requiredMessageTextColor: 'warningTextPrimary',
-  // appearance depending on the type of error
-  // required
+  messageTextColor: 'surfaceTextSecondary',
+  messageTextSize: 's',
+  requiredMessageTextColor: 'warningTextSecondary',
   requiredMessageTextSize: 's',
   showMessage: true
 };
@@ -1482,28 +1478,18 @@ const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
 });
 
 const defaultInputProps = {
+  appearance: 'sizeM defaultSecondary',
   width: 'fill',
-  borderColor: 'surfaceBorderTertiary',
-  caret: 'secondaryItemSecondary',
-  // error
-  errorBorderColor: 'errorBorderPrimary',
-  placeholderTextColor: 'surfaceTextQuaternary',
-  // appearance depending on the type of error
-  // required
-  requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  size: 'm',
-  textColor: 'surfaceTextPrimary',
-  textColorDisabled: 'surfaceTextDisabled',
-  textSize: 'm'
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary',
+  shape: 'rounded'
 };
 
 const InputField = /*#__PURE__*/React__default.default.memo(function InputField(props) {
   const {
+    name,
+    initialValue,
     isDisabled,
-    isPassword,
-    isRequired,
-    isRevealable,
     classNameGroupItem,
     // dataTestId,
     // iconBorder,
@@ -1514,17 +1500,18 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
     clearIconShape,
     clearIconSize,
     fieldProps = {},
-    inputProps = {},
     iconFill,
     iconFillHover,
     iconRevealableHide,
     iconRevealableShow,
     iconShape,
     iconSize,
-    initialValue,
-    name,
+    inputProps = {},
     parse,
     showMessage,
+    isPassword,
+    isRequired,
+    isRevealable,
     onChange,
     onClickClearIcon
   } = props;
@@ -1579,43 +1566,43 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: isRevealable ? 'form-password' : 'form-input',
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
-      metaError: meta.error,
       showMessage: showMessage,
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
       className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      type: inputType,
       name: input.name,
+      isDisabled: isDisabled,
       autoComplete: "nope",
       dataTestId: `${input.name}FieldInput`,
-      type: inputType,
       value: input.value || '',
-      isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
     }, updatedInputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
+      size: iconSize,
       iconFill: iconFill,
       iconFillHover: iconFillHover,
       imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
       shape: iconShape,
-      size: iconSize,
       SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
       onClick: onClickIconReveal
     }), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
+      size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
       imageSrc: clearIcon,
       shape: clearIconShape,
-      size: clearIconSize,
       SvgImage: clearIcon,
       onClick: onClickClearIcon
     }));
@@ -1795,20 +1782,11 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
 });
 
 const defaultSegmentedProps = {
+  appearance: 'sizeM surfacePrimary',
   width: 'fill',
-  // error
   errorLabelTextColor: 'errorTextPrimary',
-  fill: 'surfaceSecondary',
-  fillHover: 'surfacePrimaryHover',
-  indicatorFill: 'accentPrimary',
-  labelTextActiveColor: 'accentTextPrimary',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'm',
-  // appearance depending on the type of error
-  // required
   requiredLabelTextColor: 'warningTextPrimary',
-  shape: 'rounded',
-  size: 'normal'
+  shape: 'rounded'
 };
 
 function SegmentedField(props) {
@@ -2143,19 +2121,11 @@ const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchFiel
 });
 
 const defaultTextareaProps = {
+  appearance: 'sizeM defaultSecondary',
   width: 'fill',
-  borderColor: 'surfaceBorderTertiary',
-  borderHover: 'surfaceBorderQuaternary',
-  caret: 'secondaryItemSecondary',
-  // error
-  errorBorderColor: 'errorBorderPrimary',
-  placeholderTextColor: 'surfaceTextSecondary',
-  // appearance depending on the type of error
-  // required
-  requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  textColor: 'surfaceTextPrimary',
-  textSize: 's'
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary',
+  shape: 'rounded'
 };
 
 const TextareaField = /*#__PURE__*/React__default.default.memo(function TextareaField(props) {
@@ -2322,10 +2292,8 @@ const defaultChipsProps = {
   width: 'fill',
   borderColor: 'surfaceBorderTertiary',
   activeIconItemFill: 'surfaceItemSecondary',
-  appearance: 'surfacePrimary',
-  // error
-  errorBorderColor: 'errorBorderPrimary',
-  fill: 'surfacePrimary',
+  appearance: 'surfacePrimary sizeM',
+  errorBorderColor: 'errorBorderSecondary',
   fillActive: 'accentPrimary',
   fillActiveDisabled: 'surfaceTertiary',
   fillActiveHover: 'errorPrimary',
@@ -2333,16 +2301,15 @@ const defaultChipsProps = {
   iconItemFill: 'surfaceItemPrimary',
   iconSize: 14,
   indicatorFill: 'accentPrimary',
-  labelSize: 's',
-  labelTextActiveColor: 'accentTextPrimary',
-  labelTextActiveColorDisabled: 'surfaceTextDisabled',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextColorDisabled: 'surfaceTextDisabled',
+  // labelSize: 's',
+  // labelTextActiveColor: 'accentTextPrimary',
+  // labelTextActiveColorDisabled: 'surfaceTextDisabled',
+  // labelTextColor: 'surfaceTextPrimary',
+  // labelTextColorDisabled: 'surfaceTextDisabled',
   // appearance depending on the type of error
   // required
-  requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  size: 'm'
+  requiredBorderColor: 'warningBorderSecondary',
+  shape: 'rounded'
 };
 
 function ChipsField(props) {

package/dist/itcase-forms.esm.js

@@ -120,20 +120,16 @@ function useYupValidationSchema(schema, language) {
 const defaultFieldProps = {
   width: 'fill',
   direction: 'vertical',
-  dividerFill: 'errorPrimary',
-  errorMessageTextColor: 'errorTextPrimary',
-  // error
+  labelTextColor: 'surfaceTextPrimary',
+  labelTextSize: 'm',
+  errorMessageTextColor: 'errorTextSecondary',
   errorMessageTextSize: 's',
-  fill: 'surfacePrimary',
+  dividerFill: 'errorPrimary',
   helpTextColor: 'surfaceTextQuaternary',
-  // messageTextSize: 's',
-  // messageTextColor: 'surfaceTextSecondary',
   helpTextSize: 's',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'm',
-  requiredMessageTextColor: 'warningTextPrimary',
-  // appearance depending on the type of error
-  // required
+  messageTextColor: 'surfaceTextSecondary',
+  messageTextSize: 's',
+  requiredMessageTextColor: 'warningTextSecondary',
   requiredMessageTextSize: 's',
   showMessage: true
 };
@@ -1471,28 +1467,18 @@ const Group = /*#__PURE__*/React$1.memo(function Group(props) {
 });
 
 const defaultInputProps = {
+  appearance: 'sizeM defaultSecondary',
   width: 'fill',
-  borderColor: 'surfaceBorderTertiary',
-  caret: 'secondaryItemSecondary',
-  // error
-  errorBorderColor: 'errorBorderPrimary',
-  placeholderTextColor: 'surfaceTextQuaternary',
-  // appearance depending on the type of error
-  // required
-  requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  size: 'm',
-  textColor: 'surfaceTextPrimary',
-  textColorDisabled: 'surfaceTextDisabled',
-  textSize: 'm'
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary',
+  shape: 'rounded'
 };
 
 const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
   const {
+    name,
+    initialValue,
     isDisabled,
-    isPassword,
-    isRequired,
-    isRevealable,
     classNameGroupItem,
     // dataTestId,
     // iconBorder,
@@ -1503,17 +1489,18 @@ const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
     clearIconShape,
     clearIconSize,
     fieldProps = {},
-    inputProps = {},
     iconFill,
     iconFillHover,
     iconRevealableHide,
     iconRevealableShow,
     iconShape,
     iconSize,
-    initialValue,
-    name,
+    inputProps = {},
     parse,
     showMessage,
+    isPassword,
+    isRequired,
+    isRevealable,
     onChange,
     onClickClearIcon
   } = props;
@@ -1568,43 +1555,43 @@ const InputField = /*#__PURE__*/React$1.memo(function InputField(props) {
       className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: isRevealable ? 'form-password' : 'form-input',
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
-      metaError: meta.error,
       showMessage: showMessage,
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React$1.createElement(Input, Object.assign({
       className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      type: inputType,
       name: input.name,
+      isDisabled: isDisabled,
       autoComplete: "nope",
       dataTestId: `${input.name}FieldInput`,
-      type: inputType,
       value: input.value || '',
-      isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
     }, updatedInputProps)), isRevealable && /*#__PURE__*/React$1.createElement(Icon, {
       className: "form-field__icon",
+      size: iconSize,
       iconFill: iconFill,
       iconFillHover: iconFillHover,
       imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
       shape: iconShape,
-      size: iconSize,
       SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
       onClick: onClickIconReveal
     }), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
       className: "form-field__icon",
+      size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
       imageSrc: clearIcon,
       shape: clearIconShape,
-      size: clearIconSize,
       SvgImage: clearIcon,
       onClick: onClickClearIcon
     }));
@@ -1784,20 +1771,11 @@ const RadioGroup = /*#__PURE__*/React$1.memo(function RadioGroup(props) {
 });
 
 const defaultSegmentedProps = {
+  appearance: 'sizeM surfacePrimary',
   width: 'fill',
-  // error
   errorLabelTextColor: 'errorTextPrimary',
-  fill: 'surfaceSecondary',
-  fillHover: 'surfacePrimaryHover',
-  indicatorFill: 'accentPrimary',
-  labelTextActiveColor: 'accentTextPrimary',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextSize: 'm',
-  // appearance depending on the type of error
-  // required
   requiredLabelTextColor: 'warningTextPrimary',
-  shape: 'rounded',
-  size: 'normal'
+  shape: 'rounded'
 };
 
 function SegmentedField(props) {
@@ -2132,19 +2110,11 @@ const SwitchField = /*#__PURE__*/React$1.memo(function SwitchField(props) {
 });
 
 const defaultTextareaProps = {
+  appearance: 'sizeM defaultSecondary',
   width: 'fill',
-  borderColor: 'surfaceBorderTertiary',
-  borderHover: 'surfaceBorderQuaternary',
-  caret: 'secondaryItemSecondary',
-  // error
-  errorBorderColor: 'errorBorderPrimary',
-  placeholderTextColor: 'surfaceTextSecondary',
-  // appearance depending on the type of error
-  // required
-  requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  textColor: 'surfaceTextPrimary',
-  textSize: 's'
+  errorBorderColor: 'errorBorderSecondary',
+  requiredBorderColor: 'warningBorderSecondary',
+  shape: 'rounded'
 };
 
 const TextareaField = /*#__PURE__*/React$1.memo(function TextareaField(props) {
@@ -2311,10 +2281,8 @@ const defaultChipsProps = {
   width: 'fill',
   borderColor: 'surfaceBorderTertiary',
   activeIconItemFill: 'surfaceItemSecondary',
-  appearance: 'surfacePrimary',
-  // error
-  errorBorderColor: 'errorBorderPrimary',
-  fill: 'surfacePrimary',
+  appearance: 'surfacePrimary sizeM',
+  errorBorderColor: 'errorBorderSecondary',
   fillActive: 'accentPrimary',
   fillActiveDisabled: 'surfaceTertiary',
   fillActiveHover: 'errorPrimary',
@@ -2322,16 +2290,15 @@ const defaultChipsProps = {
   iconItemFill: 'surfaceItemPrimary',
   iconSize: 14,
   indicatorFill: 'accentPrimary',
-  labelSize: 's',
-  labelTextActiveColor: 'accentTextPrimary',
-  labelTextActiveColorDisabled: 'surfaceTextDisabled',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextColorDisabled: 'surfaceTextDisabled',
+  // labelSize: 's',
+  // labelTextActiveColor: 'accentTextPrimary',
+  // labelTextActiveColorDisabled: 'surfaceTextDisabled',
+  // labelTextColor: 'surfaceTextPrimary',
+  // labelTextColorDisabled: 'surfaceTextDisabled',
   // appearance depending on the type of error
   // required
-  requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  size: 'm'
+  requiredBorderColor: 'warningBorderSecondary',
+  shape: 'rounded'
 };
 
 function ChipsField(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",