@itcase/ui 1.1.0 → 1.1.1

package/dist/components/Accordion.js

@@ -36,6 +36,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 

package/dist/components/Avatar.js

@@ -40,6 +40,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Breadcrumbs.js

@@ -37,6 +37,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../constants/componentProps/size.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/underline.js');

package/dist/components/Button.js

@@ -36,6 +36,7 @@ require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/underline.js');

package/dist/components/Cell.js

@@ -35,6 +35,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('lodash/castArray');

package/dist/components/Choice.js

@@ -36,6 +36,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/ContextMenu.js

@@ -38,6 +38,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/direction.js');
 require('../constants/componentProps/width.js');
 

package/dist/components/CookiesWarning.js

@@ -37,6 +37,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('./Loader.js');
 require('../constants/componentProps/width.js');
 require('../constants/componentProps/direction.js');

package/dist/components/DatePicker.js

@@ -35,6 +35,7 @@ require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/borderType.js');
 require('./Loader.js');

package/dist/components/Empty.js

@@ -37,6 +37,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('./Loader.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');

package/dist/components/FormField.js

@@ -10,7 +10,7 @@ var index = require('./Text.js');
 var index$1 = require('./Icon.js');
 var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index$3 = require('./RadioButton.js');
+var index$3 = require('./Radio.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -43,6 +43,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('react-select');
 require('react-dom');
 require('../floating-ui.dom-C34fOuI9.js');
@@ -325,40 +326,40 @@ FormField.__docgenInfo = {
 
 function ChoiceField(props) {
   const {
-    radioButtonId,
-    radioButtonClassName,
-    radioButtonFillCheckmark,
-    radioButtonFillChecked,
-    radioButtonFill,
-    radioButtonFillDisable,
-    radioButtonShape,
-    radioButtonBorder
+    radioId,
+    radioClassName,
+    radioFillCheckmark,
+    radioFillChecked,
+    radioFill,
+    radioFillDisable,
+    radioShape,
+    radioBorder
   } = props;
-  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$3.RadioButton, {
-    id: radioButtonId,
-    className: radioButtonClassName,
-    fillCheckmark: radioButtonFillCheckmark,
-    fillChecked: radioButtonFillChecked,
-    fill: radioButtonFill,
-    fillDisable: radioButtonFillDisable,
-    shape: radioButtonShape,
-    border: radioButtonBorder
+  return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$3.Radio, {
+    id: radioId,
+    className: radioClassName,
+    fillCheckmark: radioFillCheckmark,
+    fillChecked: radioFillChecked,
+    fill: radioFill,
+    fillDisable: radioFillDisable,
+    shape: radioShape,
+    border: radioBorder
   }));
 }
 ChoiceField.propTypes = {
-  radioButtonClassName: PropTypes__default.default.string
+  radioClassName: PropTypes__default.default.string
 };
 ChoiceField.defaultProps = {
-  radioButtonClassName: 'form-field__item-radio-button'
+  radioClassName: 'form-field__item-radio'
 };
 ChoiceField.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "ChoiceField",
   "props": {
-    "radioButtonClassName": {
+    "radioClassName": {
       "defaultValue": {
-        "value": "'form-field__item-radio-button'",
+        "value": "'form-field__item-radio'",
         "computed": false
       },
       "description": "",

package/dist/components/Icon.js

@@ -36,6 +36,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/InputPassword.js

@@ -36,6 +36,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Label.js

@@ -25,6 +25,7 @@ require('../constants/componentProps/wrap.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../constants/componentProps/textSize.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('lodash/maxBy');

package/dist/components/LanguageSelector.js

@@ -37,6 +37,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/{RadioButton.js → Radio.js}

@@ -28,17 +28,17 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-const radioButtonConfig = {
+const radioConfig = {
   state: {},
   setState: newComponent => {
-    radioButtonConfig.state = newComponent;
+    radioConfig.state = newComponent;
   },
   appearance: {},
   setAppearance: newComponent => {
-    radioButtonConfig.appearance = newComponent;
+    radioConfig.appearance = newComponent;
   }
 };
-function RadioButton(props) {
+function Radio(props) {
   const {
     appearance,
     state,
@@ -62,11 +62,11 @@ function RadioButton(props) {
     propsKey: 'fill'
   });
   const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button_shape_',
+    prefix: 'radio_shape_',
     propsKey: 'shape'
   });
   const stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button__state_shape_',
+    prefix: 'radio__state_shape_',
     propsKey: 'stateShape'
   });
   const stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -78,7 +78,7 @@ function RadioButton(props) {
     propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
   });
   const stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button_checkmark_fill_',
+    prefix: 'radio_checkmark_fill_',
     propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
   });
   const stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -99,43 +99,43 @@ function RadioButton(props) {
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     htmlFor: id,
-    className: clsx__default.default(className, 'radio-button', fillClass, shapeClass)
+    className: clsx__default.default(className, 'radio', fillClass, shapeClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__item', stateCheckmarkFillClass || radioButtonConfig.appearance[appearance] && `radio-button_checkmark_fill_${radioButtonConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+    className: clsx__default.default('radio__item', stateCheckmarkFillClass || radioConfig.appearance[appearance] && `radio_checkmark_fill_${radioConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, /*#__PURE__*/React__default.default.createElement("input", {
     checked: checked,
-    className: "radio-button__input",
+    className: "radio__input",
     disabled: disabled,
     id: id,
     type: "radio",
     onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioButtonConfig.appearance[appearance] && `border-color_${radioButtonConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioButtonConfig.appearance[appearance] && `radio-button__state_shape_${radioButtonConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioButtonConfig.appearance[appearance] && `border-width_${radioButtonConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+    className: clsx__default.default('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || radioConfig.appearance[appearance] && `border-color_${radioConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderColorHoverClass, stateShapeClass || radioConfig.appearance[appearance] && `radio__state_shape_${radioConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || radioConfig.appearance[appearance] && `border-width_${radioConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "radio-button__state-checkmark"
+    className: "radio__state-checkmark"
   }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "radio-button__label",
-    size: labelTextSize || radioButtonConfig.appearance[appearance].labelTextSize,
-    textColor: labelTextColor || radioButtonConfig.appearance[appearance].labelTextColor,
+    className: "radio__label",
+    size: labelTextSize || radioConfig.appearance[appearance].labelTextSize,
+    textColor: labelTextColor || radioConfig.appearance[appearance].labelTextColor,
     textWeight: labelTextWidth
   }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "radio-button__desc",
-    size: descTextSize || radioButtonConfig.appearance[appearance].descTextSize,
-    textColor: descTextColor || radioButtonConfig.appearance[appearance].descTextColor,
+    className: "radio__desc",
+    size: descTextSize || radioConfig.appearance[appearance].descTextSize,
+    textColor: descTextColor || radioConfig.appearance[appearance].descTextColor,
     textWeight: descTextWidth
   }, desc));
 }
-RadioButton.propTypes = {
+Radio.propTypes = {
   className: PropTypes__default.default.string
 };
-RadioButton.defaultProps = {
+Radio.defaultProps = {
   shape: 'circular',
   tag: 'label'
 };
-RadioButton.__docgenInfo = {
+Radio.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "RadioButton",
+  "displayName": "Radio",
   "props": {
     "shape": {
       "defaultValue": {
@@ -161,5 +161,5 @@ RadioButton.__docgenInfo = {
   }
 };
 
-exports.RadioButton = RadioButton;
-exports.radioButtonConfig = radioButtonConfig;
+exports.Radio = Radio;
+exports.radioConfig = radioConfig;

package/dist/components/Search.js

@@ -36,6 +36,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('react-scrollbars-custom');

package/dist/components/Select.js

@@ -41,6 +41,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/direction.js');

package/dist/components/SiteMenu.js

@@ -35,6 +35,7 @@ require('./Title.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 

package/dist/components/Tile.js

@@ -40,8 +40,8 @@ require('../constants/componentProps/underline.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Tooltip.js');
-require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/wrap.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Tooltip.js

@@ -6,11 +6,13 @@ var clsx = require('clsx');
 var index$1 = require('./Text.js');
 var index = require('./Title.js');
 var size = require('../constants/componentProps/size.js');
+var textSize = require('../constants/componentProps/textSize.js');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
+var textColor = require('../constants/componentProps/textColor.js');
+var titleSize = require('../constants/componentProps/titleSize.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/textStyle.js');
@@ -25,7 +27,6 @@ require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');
 require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/wrap.js');
 
@@ -56,11 +57,12 @@ const Tooltip = /*#__PURE__*/React__default.default.forwardRef(function Tooltip(
     titleTextColor,
     titleSize,
     textColor,
-    textSize
+    textSize,
+    initialIsVisible
   } = props;
   const tooltipTimeoutHideRef = React.useRef(null);
   const isTooltipCloseAnimationInProgressRef = React.useRef(false);
-  const [isTooltipVisible, setIsTooltipVisible] = React.useState(null);
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(initialIsVisible);
   const openTooltip = React.useCallback(() => {
     if (!isTooltipCloseAnimationInProgressRef.current) {
       clearTimeout(tooltipTimeoutHideRef.current);
@@ -169,27 +171,39 @@ Tooltip.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  /**
+   * внутренний padding и отступ gap между элементами
+   */
   size: PropTypes__default.default.oneOf(size.default),
   sizeDesktop: PropTypes__default.default.oneOf(size.default),
   sizeMobile: PropTypes__default.default.oneOf(size.default),
   sizeTablet: PropTypes__default.default.oneOf(size.default),
   text: PropTypes__default.default.any,
-  textColor: PropTypes__default.default.oneOf(size.default),
-  textSize: PropTypes__default.default.oneOf(size.default),
-  textSizeDesktop: PropTypes__default.default.oneOf(size.default),
-  textSizeMobile: PropTypes__default.default.oneOf(size.default),
-  textSizeTablet: PropTypes__default.default.oneOf(size.default),
+  textColor: PropTypes__default.default.oneOf(textColor.default),
+  textSize: PropTypes__default.default.oneOf(textSize.default),
+  textSizeDesktop: PropTypes__default.default.oneOf(textSize.default),
+  textSizeMobile: PropTypes__default.default.oneOf(textSize.default),
+  textSizeTablet: PropTypes__default.default.oneOf(textSize.default),
   title: PropTypes__default.default.string,
-  titleSize: PropTypes__default.default.string,
-  titleTextColor: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.oneOf(titleSize.default),
+  titleTextColor: PropTypes__default.default.oneOf(textColor.default),
   type: PropTypes__default.default.string
 };
-Tooltip.defaultProps = {};
+Tooltip.defaultProps = {
+  initialIsVisible: null
+};
 Tooltip.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Tooltip",
   "props": {
+    "initialIsVisible": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
     "after": {
       "description": "",
       "type": {
@@ -312,7 +326,7 @@ Tooltip.__docgenInfo = {
       "required": false
     },
     "size": {
-      "description": "",
+      "description": "\u0432\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u0438\u0439 padding \u0438 \u043E\u0442\u0441\u0442\u0443\u043F gap \u043C\u0435\u0436\u0434\u0443 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430\u043C\u0438",
       "type": {
         "name": "enum",
         "computed": true,
@@ -359,7 +373,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textColorProps"
       },
       "required": false
     },
@@ -368,7 +382,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },
@@ -377,7 +391,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },
@@ -386,7 +400,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },
@@ -395,7 +409,7 @@ Tooltip.__docgenInfo = {
       "type": {
         "name": "enum",
         "computed": true,
-        "value": "sizeProps"
+        "value": "textSizeProps"
       },
       "required": false
     },
@@ -409,14 +423,18 @@ Tooltip.__docgenInfo = {
     "titleSize": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "titleSizeProps"
       },
       "required": false
     },
     "titleTextColor": {
       "description": "",
       "type": {
-        "name": "string"
+        "name": "enum",
+        "computed": true,
+        "value": "textColorProps"
       },
       "required": false
     },

package/dist/css/components/Group/Group.css

@@ -75,7 +75,7 @@
 }
 
 .group {
-  ^& .width {
+  & .width {
     &_fixed {
       width: 300px;
     }

package/dist/css/components/{RadioButton/RadioButton.css → Radio/Radio.css}

@@ -1,11 +1,11 @@
-.radio-button {
+.radio {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
   column-gap: 4px;
   &:hover {
     ^&__state {
-      border-color: var(--radio-button-state-border-hover);
+      border-color: var(--radio-state-border-hover);
     }
   }
   &__item {
@@ -32,7 +32,7 @@
       z-index: 3;
       cursor: pointer;
       appearance: none;
-      &:disabled + .radio-button__state {
+      &:disabled + .radio__state {
         border-color: transparent !important;
       }
     }
@@ -42,7 +42,7 @@
       z-index: 1;
       &_shape {
         &_rounded {
-          border-radius: var(--radio-button-shape-rounded, 4px);
+          border-radius: var(--radio-shape-rounded, 4px);
           position: relative;
           overflow: hidden;
         }
@@ -66,11 +66,11 @@
     }
   }
 }
-.radio-button {
+.radio {
   &_shape {
     &_rounded {
       ^^&__item {
-        border-radius: var(--radio-button-item-shape-rounded, 4px);
+        border-radius: var(--radio-item-shape-rounded, 4px);
         position: relative;
         overflow: hidden;
       }
@@ -84,20 +84,21 @@
     }
   }
 }
-.radio-button {
+.radio {
   &_checkmark {
     &_fill {
       @each $type in accent, primary, secondary, tertiary, surface, success, error {
         &_$(type) {
           &-item {
-            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
+              disabled, hover {
               &-$(color) {
                 & ^^^^^&__input {
                   &:checked {
                     & ~ ^^^^^^^&__state {
                       &-checkmark {
-                        display: block;
                         background: var(--color-$(type)-item-$(color));
+                        display: block;
                       }
                     }
                   }
@@ -111,5 +112,5 @@
   }
 }
 :root {
-  --radio-button-state-border-hover: var(--color-surface-border-tertiary);
+  --radio-state-border-hover: var(--color-surface-border-tertiary);
 }

package/dist/css/components/Title/Title.css

@@ -93,3 +93,12 @@
     }
   }
 }
+.title {
+  &.text-style {
+    &_italic {
+      ^^&__wrapper {
+        font-style: italic;
+      }
+    }
+  }
+}

package/dist/stories/{RadioButton.stories.js → Radio.stories.js}

@@ -1,13 +1,13 @@
-import { RadioButton, radioButtonConfig } from '@itcase/ui/components/RadioButton'
-import radioButtonState from 'src/components/RadioButton/state.json'
+import { Radio, radioConfig } from '@itcase/ui/components/Radio'
+import radioState from 'src/components/Radio/state.json'
 
 import { shapeProps, textColorProps, textSizeProps } from '@itcase/ui/constants'
 
-radioButtonConfig.setState(radioButtonState)
+radioConfig.setState(radioState)
 
 export default {
-  title: 'Atoms / RadioButton',
-  component: RadioButton,
+  title: 'Atoms / Radio',
+  component: Radio,
   argTypes: {
     advancedProps: { control: 'boolean' },
     className: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -58,6 +58,7 @@
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.2.0",
     "react-responsive": "^9.0.2",
+    "react-scroll-ondrag": "^3.0.1",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
     "swiper": "^11.0.7",