@itcase/ui 1.8.11 → 1.8.12

package/dist/{Button_cjs_BKQLT7oE.js → Button_cjs_Bb9svkwu.js}

@@ -266,6 +266,7 @@ var Button = React.forwardRef(function Button(props, ref) {
     var shapeStrengthClass = propsGenerator.getClassName('shapeStrength', {
         replace: [/\./, '-'],
     });
+    // const a = propsGenerator.
     // @ts-expect-error
     var _d = useStyles.useStyles(props), labelStyles = _d.label, buttonStyles = _d.styles;
     var buttonTypeClass = after ||

package/dist/{Button_es_H15aBFcg.js → Button_es_Cd4sw9Q5.js}

@@ -264,6 +264,7 @@ var Button = React.forwardRef(function Button(props, ref) {
     var shapeStrengthClass = propsGenerator.getClassName('shapeStrength', {
         replace: [/\./, '-'],
     });
+    // const a = propsGenerator.
     // @ts-expect-error
     var _d = useStyles(props), labelStyles = _d.label, buttonStyles = _d.styles;
     var buttonTypeClass = after ||

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button_cjs_BKQLT7oE.js');
+var Button = require('../../Button_cjs_Bb9svkwu.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');

package/dist/cjs/components/CookiesWarning.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Button = require('../../Button_cjs_BKQLT7oE.js');
+var Button = require('../../Button_cjs_Bb9svkwu.js');
 var Group = require('../../Group_cjs_DFmNT5Mq.js');
 var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');

package/dist/cjs/components/DatePicker.js

@@ -8,7 +8,7 @@ var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_BKQLT7oE.js');
+var Button = require('../../Button_cjs_Bb9svkwu.js');
 var Icon = require('../../Icon_cjs_BaWMPaAR.js');
 var Input = require('../../Input_cjs_BAVggtkk.js');
 var Label = require('../../Label_cjs_CbcENlSZ.js');
@@ -115,9 +115,9 @@ var datePickerConfig = {
 };
 function DatePickerInput(props) {
     var _a;
-    var className = props.className, endValue = props.endValue, _b = props.inputProps, inputProps = _b === void 0 ? {} : _b, _c = props.datePickerProps, datePickerProps = _c === void 0 ? {} : _c, value = props.value, onChange = props.onChange;
+    var className = props.className, _b = props.datePickerProps, datePickerProps = _b === void 0 ? {} : _b, endValue = props.endValue, _c = props.inputProps, inputProps = _c === void 0 ? {} : _c, value = props.value, onChange = props.onChange;
     var datepickerRef = React.useRef(null);
-    var monthsShown = datePickerProps.monthsShown, customTimeInput = datePickerProps.customTimeInput, disablePastDays = datePickerProps.disablePastDays, selectsRange = datePickerProps.selectsRange;
+    var customTimeInput = datePickerProps.customTimeInput, disablePastDays = datePickerProps.disablePastDays, monthsShown = datePickerProps.monthsShown, selectsRange = datePickerProps.selectsRange;
     var appearanceConfig = (_a = datePickerProps.appearance) === null || _a === void 0 ? void 0 : _a.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = datePickerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
@@ -181,7 +181,6 @@ function DatePickerInput(props) {
         setEndDate(end);
     }, [end]);
     var datePickerStyles = useStyles.useStyles(props).styles;
-    console.log(inputProps);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? endDate : undefined, locale: locale.ru, popperClassName: popper && "react-datepicker-popper-".concat(popper), ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));

package/dist/cjs/components/Response.js

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_BKQLT7oE.js');
+var Button = require('../../Button_cjs_Bb9svkwu.js');
 var Group = require('../../Group_cjs_DFmNT5Mq.js');
 var Text = require('../../Text_cjs_D4xG0cKD.js');
 require('lodash/camelCase');

package/dist/cjs/components/Segmented.js

@@ -46,6 +46,16 @@ var segmentedAppearanceSurface = {
         indicatorFill: 'accentPrimary',
         shape: 'rounded',
     },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        indicatorFill: 'accentPrimary',
+        shape: 'rounded',
+    },
 };
 
 var segmentedAppearance = tslib_es6.__assign(tslib_es6.__assign({}, segmentedAppearanceSurface), segmentedAppearanceSize);

package/dist/cjs/components/Tab.js

@@ -124,7 +124,7 @@ function Tab(props) {
     var tab = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', !isDisabled
             ? fillClass && "fill_".concat(fillClass)
-            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), badgeValue && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover })] })), after] }) }) }));
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), badgeValue && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, zIndex: '1', fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover })] })), after] }) }) }));
 }
 
 function TabGroup(props) {

package/dist/cjs/context/UIContext.js

@@ -13,6 +13,7 @@ var UserDeviceContext = React.createContext({
     isMobile: false,
     isTablet: false,
     isDesktop: false,
+    deviceCurrentMainType: '',
 });
 var UIProvider = React.memo(function UIProvider(props) {
     var _a = props.userDeviceState, userDeviceState = _a === void 0 ? {} : _a, children = props.children;
@@ -24,14 +25,11 @@ var UIProvider = React.memo(function UIProvider(props) {
      * We will need to look at how to change this behavior.
      */
     var allDevicesTypes = useMediaQueries.useMediaQueries(userDeviceState);
-    var isMobile = allDevicesTypes.isMobile, isTablet = allDevicesTypes.isTablet, isDesktop = allDevicesTypes.isDesktop, fullNamedDeviceTypes = tslib_es6.__rest(allDevicesTypes
-    // prettier-ignore
-    , ["isMobile", "isTablet", "isDesktop"]);
-    // prettier-ignore
-    var deviceCurrentMainType = ((isMobile && 'mobile') ||
+    var isMobile = allDevicesTypes.isMobile, isTablet = allDevicesTypes.isTablet, isDesktop = allDevicesTypes.isDesktop, fullNamedDeviceTypes = tslib_es6.__rest(allDevicesTypes, ["isMobile", "isTablet", "isDesktop"]);
+    var deviceCurrentMainType = (isMobile && 'mobile') ||
         (isTablet && 'tablet') ||
-        (isDesktop && 'desktop')
-        || '');
+        (isDesktop && 'desktop') ||
+        '';
     var _b = React.useMemo(function () {
         var deviceTypesList = Object.keys(allDevicesTypes).map(function (key) {
             return camelCase(key.replace('is', ''));

package/dist/cjs/hooks/useStyles/useStyles.js

@@ -44,9 +44,6 @@ function useStyles(props) {
     const resultStylesGroups = {};
     for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
       let value = null;
-      console.log('propKey');
-      console.log(propKey);
-      console.log('propKey=======');
       const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
       const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
 

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_H15aBFcg.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_Cd4sw9Q5.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/CookiesWarning.js

@@ -3,7 +3,7 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { B as Button } from '../Button_es_H15aBFcg.js';
+import { B as Button } from '../Button_es_Cd4sw9Q5.js';
 import { G as Group } from '../Group_es_CRGwi5XI.js';
 import { T as Text } from '../Text_es_FJGduy7Z.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';

package/dist/components/DatePicker.js

@@ -6,7 +6,7 @@ import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_H15aBFcg.js';
+import { B as Button } from '../Button_es_Cd4sw9Q5.js';
 import { I as Icon } from '../Icon_es_B0sySEUu.js';
 import { I as Input } from '../Input_es_CNduH28G.js';
 import { L as Label } from '../Label_es_BCpDqP3q.js';
@@ -113,9 +113,9 @@ var datePickerConfig = {
 };
 function DatePickerInput(props) {
     var _a;
-    var className = props.className, endValue = props.endValue, _b = props.inputProps, inputProps = _b === void 0 ? {} : _b, _c = props.datePickerProps, datePickerProps = _c === void 0 ? {} : _c, value = props.value, onChange = props.onChange;
+    var className = props.className, _b = props.datePickerProps, datePickerProps = _b === void 0 ? {} : _b, endValue = props.endValue, _c = props.inputProps, inputProps = _c === void 0 ? {} : _c, value = props.value, onChange = props.onChange;
     var datepickerRef = useRef(null);
-    var monthsShown = datePickerProps.monthsShown, customTimeInput = datePickerProps.customTimeInput, disablePastDays = datePickerProps.disablePastDays, selectsRange = datePickerProps.selectsRange;
+    var customTimeInput = datePickerProps.customTimeInput, disablePastDays = datePickerProps.disablePastDays, monthsShown = datePickerProps.monthsShown, selectsRange = datePickerProps.selectsRange;
     var appearanceConfig = (_a = datePickerProps.appearance) === null || _a === void 0 ? void 0 : _a.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (__assign(__assign({}, resultConfig), (_a = datePickerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
@@ -179,7 +179,6 @@ function DatePickerInput(props) {
         setEndDate(end);
     }, [end]);
     var datePickerStyles = useStyles(props).styles;
-    console.log(inputProps);
     return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsx(DatePicker, __assign({ minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? endDate : undefined, locale: ru, popperClassName: popper && "react-datepicker-popper-".concat(popper), ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));

package/dist/components/Response.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_H15aBFcg.js';
+import { B as Button } from '../Button_es_Cd4sw9Q5.js';
 import { G as Group } from '../Group_es_CRGwi5XI.js';
 import { T as Text } from '../Text_es_FJGduy7Z.js';
 import 'lodash/camelCase';

package/dist/components/Segmented.js

@@ -44,6 +44,16 @@ var segmentedAppearanceSurface = {
         indicatorFill: 'accentPrimary',
         shape: 'rounded',
     },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        indicatorFill: 'accentPrimary',
+        shape: 'rounded',
+    },
 };
 
 var segmentedAppearance = __assign(__assign({}, segmentedAppearanceSurface), segmentedAppearanceSize);

package/dist/components/Tab.js

@@ -122,7 +122,7 @@ function Tab(props) {
     var tab = useStyles(props).styles;
     return (jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', !isDisabled
             ? fillClass && "fill_".concat(fillClass)
-            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }), jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover })] })), after] }) }) }));
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }), jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, zIndex: '1', fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover })] })), after] }) }) }));
 }
 
 function TabGroup(props) {

package/dist/context/UIContext.js

@@ -11,6 +11,7 @@ var UserDeviceContext = createContext({
     isMobile: false,
     isTablet: false,
     isDesktop: false,
+    deviceCurrentMainType: '',
 });
 var UIProvider = memo(function UIProvider(props) {
     var _a = props.userDeviceState, userDeviceState = _a === void 0 ? {} : _a, children = props.children;
@@ -22,14 +23,11 @@ var UIProvider = memo(function UIProvider(props) {
      * We will need to look at how to change this behavior.
      */
     var allDevicesTypes = useMediaQueries(userDeviceState);
-    var isMobile = allDevicesTypes.isMobile, isTablet = allDevicesTypes.isTablet, isDesktop = allDevicesTypes.isDesktop, fullNamedDeviceTypes = __rest(allDevicesTypes
-    // prettier-ignore
-    , ["isMobile", "isTablet", "isDesktop"]);
-    // prettier-ignore
-    var deviceCurrentMainType = ((isMobile && 'mobile') ||
+    var isMobile = allDevicesTypes.isMobile, isTablet = allDevicesTypes.isTablet, isDesktop = allDevicesTypes.isDesktop, fullNamedDeviceTypes = __rest(allDevicesTypes, ["isMobile", "isTablet", "isDesktop"]);
+    var deviceCurrentMainType = (isMobile && 'mobile') ||
         (isTablet && 'tablet') ||
-        (isDesktop && 'desktop')
-        || '');
+        (isDesktop && 'desktop') ||
+        '';
     var _b = useMemo(function () {
         var deviceTypesList = Object.keys(allDevicesTypes).map(function (key) {
             return camelCase(key.replace('is', ''));

package/dist/css/components/DatePicker/DatePicker.css

@@ -1238,6 +1238,9 @@ h2.react-datepicker__current-month {
     }
   }
 }
+.react-datepicker__week-number--selected  {
+  background: var(--date-picker-week-number-fill-active);
+}
 .datepicker {
   width: 100%;
   border-radius: var(--date-picker-day-border-radius);
@@ -1305,6 +1308,7 @@ h2.react-datepicker__current-month {
   --date-picker-week-text-weight: normal;
 
   --date-picker-week-number-fill-hover: #eee;
+  --date-picker-week-number-fill-active: #eee;
   --date-picker-week-number-text-color: var(--color-surface-text-quaternary);
 
   --date-picker-name-size: 16px;

package/dist/css/components/Notification/Notification.css

@@ -94,7 +94,7 @@
 .notification__item {
   &_status {
     &_success {
-      background: var(--color-success-primary);
+      background: var(--color-success-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-success-text-secondary);
@@ -105,7 +105,7 @@
       }
     }
     &_error {
-      background: var(--color-error-primary);
+      background: var(--color-error-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-error-text-secondary);
@@ -116,7 +116,7 @@
       }
     }
     &_warning {
-      background: var(--color-primary-primary);
+      background: var(--color-primary-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-primary-text-primary);
@@ -127,7 +127,7 @@
       }
     }
     &_info {
-      background: var(--color-info-primary);
+      background: var(--color-info-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-info-text-primary);

package/dist/css/components/Notification/css/__item/notification__item_status.css

@@ -1,7 +1,7 @@
 .notification__item {
   &_status {
     &_success {
-      background: var(--color-success-primary);
+      background: var(--color-success-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-success-text-secondary);
@@ -12,7 +12,7 @@
       }
     }
     &_error {
-      background: var(--color-error-primary);
+      background: var(--color-error-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-error-text-secondary);
@@ -23,7 +23,7 @@
       }
     }
     &_warning {
-      background: var(--color-primary-primary);
+      background: var(--color-primary-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-primary-text-primary);
@@ -34,7 +34,7 @@
       }
     }
     &_info {
-      background: var(--color-info-primary);
+      background: var(--color-info-fill-primary);
       ^^&-wrapper {
         ^^^&-title {
           color: var(--color-info-text-primary);

package/dist/css/styles/height/height.css

@@ -4,6 +4,8 @@
   }
   &_fill {
     height: 100%;
+    &-vh {
+      height: 100vh;
+    }
   }
 }
-

package/dist/hooks/useStyles/useStyles.js

@@ -42,9 +42,6 @@ function useStyles(props) {
     const resultStylesGroups = {};
     for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
       let value = null;
-      console.log('propKey');
-      console.log(propKey);
-      console.log('propKey=======');
       const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
       const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(deviceCurrentType.toLowerCase());
 

package/dist/stories/useDevicePropsGenerator.mdx

@@ -0,0 +1,230 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Hooks / useDevicePropsGenerator" />
+
+# `useDevicePropsGenerator`
+Хук позволяет автоматически получать значения пропсов или appearance, соответствующие viewport пользователя, а также преобразовывать их в CSS‑классы.
+
+## Использование
+
+1. При создании компонента, можно опционально задать componentConfig, который содержит все appearance для данного компонента и позволяет задать новые appearance извне
+
+```js
+const componentConfig: ComponentConfig = {
+  appearance: componentAppearance,
+  setAppearance: (appearanceConfig) => {
+    componentConfig.appearance = appearanceConfig
+  },
+}
+```
+
+2. Для того чтобы передавать несколько appearance в одной строке, например:
+
+```jsx
+<Component appearance='errorPrimary sizeM' />
+```
+
+где `errorPrimary` это
+
+```js
+{
+  fill: 'errorTertiary',
+  borderColor: 'errorBorderQuaternary',
+  borderHover: 'errorBorderQuaternary',
+  textColor: 'surfaceTextPrimary',
+  iconBeforeFill: 'errorItemQuaternary',
+  iconClearFill: 'errorItemPrimary',
+  placeholderTextColor: 'surfaceTextQuaternary',
+}
+```
+
+а `sizeM` это
+
+```js
+{
+  size: 'm',
+  textSize: 'm',
+}
+```
+
+нужен appearanceConfig
+```js
+  const appearanceConfig = appearance?.split(' ').reduce(
+    (resultConfig, appearanceKey) => ({
+      ...resultConfig,
+      ...componentConfig.appearance?.[appearanceKey],
+    }),
+    {},
+  )
+```
+которому передается созданный ранее componentConfig и его результатом будет единный объект со свойствами из разных appearance
+
+```js
+{
+  fill: 'errorTertiary',
+  borderColor: 'errorBorderQuaternary',
+  borderHover: 'errorBorderQuaternary',
+  textColor: 'surfaceTextPrimary',
+  iconBeforeFill: 'errorItemQuaternary',
+  iconClearFill: 'errorItemPrimary',
+  placeholderTextColor: 'surfaceTextQuaternary',
+  size: "m",
+  textSize: "m"
+}
+```
+
+3. Используем useDevicePropsGenerator, который принимает 2 параметра
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Обязательный</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>componentProps</td>
+    <td>Да</td>
+    <td>`[key: string]: number | string`</td>
+    <td>errorTertiary</td>
+    <td>Пропсы компонента</td>
+  </tr>
+  <tr>
+    <td>appearanceConfig</td>
+    <td>Нет</td>
+    <td>`[key: string]: number | string`</td>
+    <td>
+      appearanceConfig[propsKey]
+    </td>
+    <td>Объект из appearance</td>
+  </tr>
+  </tbody>
+</table>
+
+
+Из propsGenerator получаем переменные со строками, которые соответствуют appearance переданными в хук. Если указать просто fill, то получим `errorTertiary`,
+если укажем `fillClass` то получим `error-tertiary`, поэтому везде в приведенном ниже примере указан суффикс `Class`.
+
+```js
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
+    fillClass,
+    borderColorClass,
+    borderHoverClass,
+    borderWidthClass,
+    textColorClass,
+    textSizeClass,
+    textWeightClass,
+    caretClass,
+    placeholderTextColorClass,
+    shapeClass,
+    sizeClass,
+    widthClass,
+  } = propsGenerator
+```
+
+4. Применяем стили к компоненту. Важно учитывать, если в названии класса указывается сначала название компонента, это означает что он ссылается на стили,
+которые определены внутри директории этого компонента
+
+```js
+`border-width_${borderWidthClass}
+```
+
+если в названии класса нет название комопнента, это означает что ссылаемся на глобальный класс, который определен `src/styles`
+
+```js
+`fill_${fillClass}`
+```
+
+``jsx
+<textarea
+  id={id}
+  className={clsx(
+    'textarea__input',
+    (textSizeClass || textColorClass || textWeightClass) && 'text',
+    caretClass && `caret-color_${caretClass}`,
+    fillClass && `fill_${fillClass}`,
+    borderColorClass && `border-color_${borderColorClass}`,
+    borderWidthClass && `border-width_${borderWidthClass}`,
+    borderHoverClass && `border-color_hover_${borderHoverClass}`,
+    placeholderTextColorClass && `placeholder-text-color_${placeholderTextColorClass}`,
+    textSizeClass && `text_size_${textSizeClass}`,
+    textColorClass && `text-color_${textColorClass}`,
+    textWeightClass && `text-weight_${textWeightClass}`,
+    widthClass && `width_${widthClass}`,
+  )}
+/>
+```
+к примеру `fill`, будет отображаться в браузере как `fill_`
+
+Возьмем к примеру fillClass
+
+Возьмем appearance из приведенного ранее примера
+```js
+{
+  fill: 'errorTertiary',
+  borderColor: 'errorBorderQuaternary',
+  borderHover: 'errorBorderQuaternary',
+  textColor: 'surfaceTextPrimary',
+  iconBeforeFill: 'errorItemQuaternary',
+  iconClearFill: 'errorItemPrimary',
+  placeholderTextColor: 'surfaceTextQuaternary',
+  size: "m",
+  textSize: "m"
+}
+```
+
+и возьмем из него свойство `fill_error-tertiary`
+
+5. Cоздаются классы, которые соответствуют структуре определенной в css-файлах, например глобальный класс `fill`
+
+```css
+.fill {
+  &_none {
+    background-color: transparent;
+  }
+  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
+    error, success, warning, info, danger, gradient, disabled, hover, inverse {
+    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
+      hover, inverse {
+      &_$(type) {
+        &-item {
+          &-$(color) {
+            background: var(--color-$(type)-item-$(color));
+          }
+        }
+        &-$(color) {
+          background: var(--color-$(type)-$(color));
+        }
+      }
+    }
+  }
+}
+```
+
+6. Чтобы применить стили в зависимости от viewPort, для этого нужно указать в appearance
+
+```js
+{
+  sizeMobile: 'm',
+  textSizeMobile: 'm',
+}
+```
+или напрямую при использовании компонента
+
+```js
+<Component sizeMobile="m"/>
+```
+
+всего доступны 3 типа размеров
+
+1. Mobile
+2. Tablet
+3. Desktop
+
+подробнее об этом можно узнать в `UIContext.tsx`.

package/dist/stories/useMediaQueries.mdx

@@ -0,0 +1,55 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Hooks / useMediaQueries" />
+
+# `useMediaQueries`
+Предназначен для определения и выполнения кода согласно значению `viewport`, список доступных `viewport` находится в файле `src/hooks/useMediaQueries/mediaQueries.json`
+
+## API
+
+### Параметры
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>userDevice</td>
+    <td>UserDeviceState</td>
+    <td>`{}`</td>
+    <td>Булевые флаги устройства пользователя</td>
+  </tr>
+  </tbody>
+</table>
+
+### Возвращает объект
+
+`deviceTypes` - который является объектом в котором находятся все флаги
+
+- `isMobile` — 
+- `isMobileHuge` —
+- `isTablet` —
+- `isDesktop` — 
+- `isDesktopMega —`
+
+### Использование
+
+```jsx
+const Component = () =>  {
+  const { isMobile, isTablet, isDesktop } = useMediaQueries()
+
+  return (
+    <div>
+      {isMobile && <p>isMobile</p>}
+      {isTablet && <p>isTablet</p>}
+      {isDesktop && <p>isDesktop</p>}
+    </div>
+  )
+}
+```

package/dist/stories/useStyles.mdx

@@ -0,0 +1,102 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Hooks / useStyles" />
+
+# `useStyles`
+
+Хук конвертирует `props` компонента в `inline` стили.
+
+Важно учитывать приоритет при котором будут применяться стили:
+
+1. Сначала используется значение из props, соответствующее текущему устройству (Mobile например)
+2. Если такого нет — используется значение из props без учёта устройства
+3. Если и его нет — берётся значение из appearance-конфига для текущего устройства
+4. И в последнюю очередь — значение из appearance-конфига без учёта устройства
+
+## API
+
+### Параметры
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>props</td>
+    <td>StyleAttributes</td>
+    <td>background</td>
+    <td>Props, могут быть любые inline-стили</td>
+  </tr>
+  </tbody>
+</table>
+
+
+### Использование
+
+Создаем ui компонент и используем хук
+
+```js
+const { dot: dotStyles, styles: badgeStyles } = useStyles(props)
+```
+
+Залогируем данные
+```js
+console.log('dotStyles', dotStyles)
+console.log('badgeStyles', badgeStyles)
+```
+
+Добавим в JSX-разметку компонента стили
+
+```jsx
+<div style={badgeStyles}>
+  {dot && (
+    <div style={dotStyles}>
+      текст
+    </div>
+  )}
+</div>
+```
+
+При использовании прокидываем стили
+
+```jsx
+<Badge
+  marginDotMobile="10px"
+  paddingStylesMobile="10px"
+  dot={true}
+  {...args}
+/>
+```
+
+Почему именно такое название пропсов?
+Пропсы соответствуют такой структуре
+
+<table>
+  <thead>
+  <tr>
+    <th>Во первых (margin)</th>
+    <th>Во вторых (Dot)</th>
+    <th>В третьих (Mobile)</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>Указывается название стиля, которое будет применено (margin например)</td>
+    <td>Название к которому будет применяться стиль, в нашем случае это Dot</td>
+    <td>Для какого размера экрана принимать данные стили</td>
+  </tr>
+  </tbody>
+</table>
+
+И получим на выходе в логах, для мобильного разрешения экрана.
+
+```js
+dotStyles - {margin: '10px'}
+badgeStyles - {padding: '10px'}
+```

package/dist/types/components/DatePicker/DatePicker.appearance.d.ts

@@ -26,8 +26,8 @@ export declare const datePickerAppearance: {
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: any;
-        iconRight: any;
+        iconLeft: string;
+        iconRight: string;
     };
     sizeM: {
         daySize: string;
@@ -36,15 +36,15 @@ export declare const datePickerAppearance: {
         iconSize: number;
         monthTextSize: string;
         yearTextSize: string;
-        iconLeft: any;
-        iconRight: any;
+        iconLeft: string;
+        iconRight: string;
     };
     sizeL: {
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: any;
-        iconRight: any;
+        iconLeft: string;
+        iconRight: string;
     };
     surfacePrimary: {
         dayTextColor: string;
@@ -52,8 +52,8 @@ export declare const datePickerAppearance: {
         iconFillHover: string;
         iconItemFill: string;
         iconShape: string;
-        iconLeft: any;
-        iconRight: any;
+        iconLeft: string;
+        iconRight: string;
         monthTextColor: string;
         monthTextWeight: number;
         placeholderTextColor: string;

package/dist/types/components/DatePicker/appearance/datePickerSize.d.ts

@@ -3,8 +3,8 @@ declare const datePickerSize: {
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: any;
-        iconRight: any;
+        iconLeft: string;
+        iconRight: string;
     };
     sizeM: {
         daySize: string;
@@ -13,15 +13,15 @@ declare const datePickerSize: {
         iconSize: number;
         monthTextSize: string;
         yearTextSize: string;
-        iconLeft: any;
-        iconRight: any;
+        iconLeft: string;
+        iconRight: string;
     };
     sizeL: {
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: any;
-        iconRight: any;
+        iconLeft: string;
+        iconRight: string;
     };
 };
 export { datePickerSize };

package/dist/types/components/DatePicker/appearance/datePickerSurface.d.ts

@@ -5,8 +5,8 @@ declare const datePickerAppearanceSurface: {
         iconFillHover: string;
         iconItemFill: string;
         iconShape: string;
-        iconLeft: any;
-        iconRight: any;
+        iconLeft: string;
+        iconRight: string;
         monthTextColor: string;
         monthTextWeight: number;
         placeholderTextColor: string;

package/dist/types/components/Pagination/appearance/paginationSurface.d.ts

@@ -25,7 +25,7 @@ declare const paginationAppearanceSurface: {
         pageCountDropdownItemSize: string;
         pageCountDropdownItemWidth: string;
         pageCountDropdownShape: string;
-        pageCountInputIcon: any;
+        pageCountInputIcon: string;
         pageCountInputIconColor: string;
         pageCountInputIconFillSize: string;
         pageCountInputTextColor: string;

package/dist/types/components/Search/appearance/searchSize.d.ts

@@ -1,16 +1,16 @@
 declare const searchAppearanceSize: {
     sizeS: {
         size: string;
-        iconBefore: any;
+        iconBefore: string;
         iconBeforeSize: string;
-        iconClear: any;
+        iconClear: string;
         iconClearSize: string;
     };
     sizeXS: {
         size: string;
-        iconBefore: any;
+        iconBefore: string;
         iconBeforeSize: string;
-        iconClear: any;
+        iconClear: string;
         iconClearSize: string;
     };
 };

package/dist/types/components/Segmented/appearance/segmentedSurface.d.ts

@@ -9,5 +9,15 @@ declare const segmentedAppearanceSurface: {
         indicatorFill: string;
         shape: string;
     };
+    surfaceSecondary: {
+        fill: string;
+        fillActive: string;
+        fillActiveHover: string;
+        fillHover: string;
+        labelTextActiveColor: string;
+        labelTextColor: string;
+        indicatorFill: string;
+        shape: string;
+    };
 };
 export { segmentedAppearanceSurface };

package/dist/types/context/UIContext.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
+type DeviceType = '' | 'desktop' | 'mobile' | 'tablet';
 interface iUIProvider {
     children?: ReactNode;
+    deviceCurrentMainType: DeviceType;
     userDeviceState?: {
         isDesktop?: boolean;
         isMobile?: boolean;
@@ -12,5 +14,6 @@ declare function useUserDeviceContext(): {
     isMobile: boolean;
     isTablet: boolean;
     isDesktop: boolean;
+    deviceCurrentMainType: string;
 };
 export { UIProvider, useUserDeviceContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.11",
+  "version": "1.8.12",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -98,8 +98,8 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.23",
     "@itcase/config": "^1.0.47",
-    "@itcase/icons": "^1.1.0",
-    "@itcase/storybook-config": "^1.1.9",
+    "@itcase/icons": "^1.1.1",
+    "@itcase/storybook-config": "^1.1.10",
     "@itcase/tokens-am": "^1.1.7",
     "@itcase/tokens-baikal": "^1.1.7",
     "@itcase/types": "^1.0.3",
@@ -107,14 +107,14 @@
     "date-fns": "^4.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "framer-motion": "^12.12.2",
+    "framer-motion": "^12.14.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "motion": "^12.12.2",
+    "motion": "^12.14.0",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
-    "react-datepicker": "^8.3.0",
+    "react-datepicker": "^8.4.0",
     "react-dom": "^18.3.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha",
     "react-inlinesvg": "^4.2.0",
@@ -168,12 +168,12 @@
     "prettier": "^3.5.3",
     "react-docgen-typescript": "^2.2.2",
     "react-svg": "^16.3.0",
-    "rollup": "^4.41.0",
+    "rollup": "^4.41.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
-    "semantic-release": "^24.2.4",
+    "semantic-release": "^24.2.5",
     "storybook": "^8.6.14",
     "stylelint": "^16.19.1",
     "typescript": "^5.8.3"