@itcase/ui 1.2.28 → 1.2.29

package/dist/cjs/components/Badge.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var Badge = require('../../Badge-2JkquAEb.js');
+var Badge = require('../../Badge-TyPbVqR_.js');
 require('react/jsx-runtime');
 require('clsx');
+require('../appearance/Badge.js');
 require('../hooks/useDeviceTargetClass.js');
 require('react');
 require('lodash/castArray');
@@ -15,7 +16,8 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-_YhyTsQ1.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
 
 
 

package/dist/cjs/components/Breadcrumbs.js

@@ -7,9 +7,9 @@ var clsx = require('clsx');
 var camelCase = require('lodash/camelCase');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-CkynFJm4.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
 var Link = require('../../Link-CqWzwh8V.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('prop-types');
@@ -19,8 +19,12 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../appearance/Icon.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../appearance/Text.js');
 
 function BreadcrumbsItem(props) {
     var children = props.children, className = props.className, cursor = props.cursor, _a = props.set, set = _a === void 0 ? 'default' : _a, text = props.text, textSize = props.textSize, textColor = props.textColor, textColorHover = props.textColorHover, href = props.href, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick;

package/dist/cjs/components/Button.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Button = require('../../Button-COsywjkv.js');
+var Button = require('../../Button-BcOsYgoT.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../appearance/Button.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -15,14 +16,19 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-CkynFJm4.js');
+require('../../Icon-B2BwTQnP.js');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Text-_YhyTsQ1.js');
-require('../../Title-B-N0qkn3.js');
-require('../../Loader-fA11tUEJ.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../../Loader-Ck59IXGG.js');
+require('../appearance/Loader.js');
 
 
 

package/dist/cjs/components/Card.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Image = require('../../Image-DrUlRMHa.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -16,6 +16,7 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../appearance/Text.js');
 
 function Card(props) {
     var children = props.children, className = props.className, size = props.size, src = props.src, text = props.text, textSize = props.textSize, textColor = props.textColor, textTag = props.textTag, title = props.title, titleSize = props.titleSize, titleTag = props.titleTag, titleColor = props.titleColor, image = props.image, imageShape = props.imageShape, type = props.type, onClick = props.onClick;

package/dist/cjs/components/Cell.js

@@ -4,9 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-CkynFJm4.js');
-var Label = require('../../Label-BPP0om7_.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
+var Label = require('../../Label-fp2Bus_T.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -18,10 +18,15 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../appearance/Label.js');
+require('../appearance/Text.js');
 
 function Cell(props) {
     var isActive = props.isActive, isDisabled = props.isDisabled, isEqual = props.isEqual, after = props.after, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, titleLabelTextSize = props.titleLabelTextSize, titleTag = props.titleTag, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, valueLabelTextSize = props.valueLabelTextSize, valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, valueTextSize = props.valueTextSize, valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;

package/dist/cjs/components/Checkbox.js

@@ -2,8 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var index = require('../appearance/Checkbox.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -11,24 +12,25 @@ require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../appearance/Text.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
 var checkboxConfig = {
-    appearance: undefined,
+    appearance: index.checkboxAppearance,
     setAppearance: function (newComponent) {
         checkboxConfig.appearance = newComponent;
     },
-    state: undefined,
+    state: index.checkboxState,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         checkboxConfig.state = newComponent;
     },
 };
 function Checkbox(props) {
-    var id = props.id, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -69,13 +71,12 @@ function Checkbox(props) {
         prefix: 'width_',
         propsKey: 'width',
     });
-    // prettier-ignore
-    var appearanceConfig = (appearance && checkboxConfig.appearance && checkboxConfig.appearance[appearance]);
+    var appearanceConfig = appearance && checkboxConfig.appearance && checkboxConfig.appearance[appearance];
     return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass, shapeClass, widthClass), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass ||
                     ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.stateCheckmarkFill) &&
                         "checkbox_checkmark_fill_".concat(appearanceConfig.stateCheckmarkFill)
                             .replace(/([A-Z])/g, '-$1')
-                            .toLowerCase())), children: [jsxRuntime.jsx("input", { checked: checked, className: "checkbox__input", disabled: disabled, 
+                            .toLowerCase())), children: [jsxRuntime.jsx("input", { className: "checkbox__input", checked: checked, disabled: disabled, 
                         // @ts-expect-error
                         id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
                             ? stateBorderColorDisabledClass

package/dist/cjs/components/Chips.js

@@ -2,9 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var index = require('../appearance/Chips.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -15,9 +16,10 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../appearance/Text.js');
 
 var chipsConfig = {
-    appearance: undefined,
+    appearance: index.chipsAppearance,
     setAppearance: function (newComponent) {
         chipsConfig.appearance = newComponent;
     },
@@ -66,8 +68,7 @@ function Chips(props) {
     });
     // @ts-expect-error
     var chipsStyles = useStyles.useStyles(props).styles;
-    // prettier-ignore
-    var appearanceConfig = (appearance && chipsConfig.appearance && chipsConfig.appearance[appearance]);
+    var appearanceConfig = appearance && chipsConfig.appearance && chipsConfig.appearance[appearance];
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', isActive
             ? fillActiveClass ||
                 ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&

package/dist/cjs/components/Choice.js

@@ -3,10 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var index = require('../appearance/Choice.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Icon = require('../../Icon-CkynFJm4.js');
-var Loader = require('../../Loader-fA11tUEJ.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
+var Loader = require('../../Loader-Ck59IXGG.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -14,17 +15,22 @@ require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../appearance/Loader.js');
+require('../appearance/Text.js');
 
 var choiceConfig = {
-    appearance: {},
+    appearance: index.choiceAppearance,
     setAppearance: function (newComponent) {
         choiceConfig.appearance = newComponent;
     },
@@ -89,8 +95,7 @@ var Choice = React.forwardRef(function Choice(props, ref) {
         prefix: 'column-gap_',
         propsKey: 'columnGap',
     });
-    // prettier-ignore
-    var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
+    var appearanceConfig = appearance && choiceConfig.appearance && choiceConfig.appearance[appearance];
     return (jsxRuntime.jsx("div", { className: clsx(className, 'choice', shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
                 "choice_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass ||

package/dist/cjs/components/Code.js

@@ -78,7 +78,7 @@ function Code(props) {
     });
     // NOTE: too many dependencies for "useCallback" and possible too many checks
     var renderInput = function (otpInputProps) {
-        return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { autoComplete: "one-time-code", className: clsx('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass), onBlur: function (event) {
+        return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { className: clsx('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass), autoComplete: "one-time-code", onBlur: function (event) {
                 onBlur && onBlur(event);
                 otpInputProps.onBlur(event);
             }, onFocus: function (event) {

package/dist/cjs/components/ContextMenu.js

@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
-var Icon = require('../../Icon-CkynFJm4.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -18,10 +18,14 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../appearance/Text.js');
 
 function ContextMenu(props) {
     var id = props.id, children = props.children, className = props.className, set = props.set, onClick = props.onClick;

package/dist/cjs/components/CookiesWarning.js

@@ -5,26 +5,33 @@ var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Button = require('../../Button-COsywjkv.js');
-var Group = require('../../Group-B2oTJg0t.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Button = require('../../Button-BcOsYgoT.js');
+var Group = require('../../Group-BiN0haVp.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../appearance/Button.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-CkynFJm4.js');
+require('../../Icon-B2BwTQnP.js');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
-require('../../Loader-fA11tUEJ.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../../Loader-Ck59IXGG.js');
+require('../appearance/Loader.js');
+require('../appearance/Group.js');
+require('../appearance/Text.js');
 
 function CookiesWarning(props) {
     var _a = props.message, message = _a === void 0 ? 'The site uses cookies to collect technical information, to optimize the design and improvement of the website, and to provide certain functions. By using the website, you agree to the use of «cookies».' : _a, className = props.className, buttonFill = props.buttonFill, buttonFillHover = props.buttonFillHover, _b = props.buttonLabel, buttonLabel = _b === void 0 ? 'I agree' : _b, buttonLabelSize = props.buttonLabelSize, buttonLabelTextColor = props.buttonLabelTextColor, buttonShape = props.buttonShape, buttonSize = props.buttonSize, textSize = props.textSize, textColor = props.textColor, buttonWidth = props.buttonWidth, _c = props.isHideOnScroll, isHideOnScroll = _c === void 0 ? false : _c;

package/dist/cjs/components/DadataHintField.js

@@ -5,7 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactDadata = require('react-dadata');
-var Input = require('../../Input-BSpFMsrf.js');
+var Input = require('../../Input-BaicBuyd.js');
+require('../appearance/Input.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');

package/dist/cjs/components/DatePicker.js

@@ -5,13 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var DatePicker = require('react-datepicker');
+var index = require('../appearance/DatePicker.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-COsywjkv.js');
-var Icon = require('../../Icon-CkynFJm4.js');
-var Input = require('../../Input-BSpFMsrf.js');
-var Label = require('../../Label-BPP0om7_.js');
-var Text = require('../../Text-_YhyTsQ1.js');
+var Button = require('../../Button-BcOsYgoT.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
+var Input = require('../../Input-BaicBuyd.js');
+var Label = require('../../Label-fp2Bus_T.js');
+var Text = require('../../Text-CC0xnhmx.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -21,11 +22,19 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../appearance/Button.js');
 require('../../Link-CqWzwh8V.js');
-require('../../Loader-fA11tUEJ.js');
+require('../../Loader-Ck59IXGG.js');
+require('../appearance/Loader.js');
 require('react-inlinesvg');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Title-B-N0qkn3.js');
+require('../appearance/Icon.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
+require('../appearance/Input.js');
+require('../appearance/Label.js');
+require('../appearance/Text.js');
 
 function buildFormatLongFn(args) {
   return (options = {}) => {
@@ -1070,8 +1079,16 @@ const ru = {
   },
 };
 
+var datePickerConfig = {
+    appearance: index.datePickerAppearance,
+    setAppearance: function (newComponent) {
+        datePickerConfig.appearance = newComponent;
+    },
+};
 function DatePickerInput(props) {
-    var className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, _a = props.datePickerProps, datePickerProps = _a === void 0 ? {} : _a, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
+    var _a;
+    var appearance = props.appearance, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, _b = props.datePickerProps, datePickerProps = _b === void 0 ? {} : _b, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
+    var appearanceConfig = appearance && datePickerConfig.appearance && datePickerConfig.appearance[appearance];
     var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'datepicker_width_',
         propsKey: 'width',
@@ -1098,8 +1115,8 @@ function DatePickerInput(props) {
         }
         return endValue;
     }, [endValue]);
-    var _b = React.useState(start), startDate = _b[0], setStartDate = _b[1];
-    var _c = React.useState(end), endDate = _c[0], setEndDate = _c[1];
+    var _c = React.useState(start), startDate = _c[0], setStartDate = _c[1];
+    var _d = React.useState(end), endDate = _d[0], setEndDate = _d[1];
     var handleChange = React.useCallback(function (_a) {
         var newStartDate = _a[0], newEndDate = _a[1];
         onChange && onChange(newStartDate, newEndDate);
@@ -1107,7 +1124,7 @@ function DatePickerInput(props) {
         setEndDate(newEndDate);
     }, [onChange]);
     var renderDayContents = React.useCallback(function (day, date) {
-        return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, label: date.getDate().toString(), shape: datePickerProps.dayTextShape, size: datePickerProps.daySize }));
+        return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextColor), labelTextSize: datePickerProps.dayTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextSize), label: date.getDate().toString(), shape: datePickerProps.dayTextShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextShape), size: datePickerProps.daySize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.daySize) }));
     }, [
         datePickerProps.daySize,
         datePickerProps.dayTextColor,
@@ -1116,7 +1133,7 @@ function DatePickerInput(props) {
     ]);
     var renderCustomHeader = React.useCallback(function (_a) {
         var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
-        return (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, size: datePickerProps.iconSize, SvgImage: datePickerProps.iconLeft, onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize, textColor: datePickerProps.monthTextColor, textWeight: datePickerProps.monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(Text.Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize, textColor: datePickerProps.yearTextColor, textWeight: datePickerProps.yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, size: datePickerProps.iconSize, SvgImage: datePickerProps.iconRight, onClick: increaseMonth }))] }));
+        return (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFill), fillHover: datePickerProps.iconFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillHover), fillSize: datePickerProps.iconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillSize), iconFill: datePickerProps.iconItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconItemFill), shape: datePickerProps.iconShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconShape), size: datePickerProps.iconSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconSize), SvgImage: datePickerProps.iconLeft || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconLeft), onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextSize), textColor: datePickerProps.monthTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextColor), textWeight: datePickerProps.monthTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextWeight), children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(Text.Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextSize), textColor: datePickerProps.yearTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextColor), textWeight: datePickerProps.yearTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextWeight), children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFill), fillHover: datePickerProps.iconFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillHover), fillSize: datePickerProps.iconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillSize), iconFill: datePickerProps.iconItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconItemFill), shape: datePickerProps.iconShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconShape), size: datePickerProps.iconSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconSize), SvgImage: datePickerProps.iconRight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconRight), onClick: increaseMonth }))] }));
     }, [
         datePickerProps.iconFill,
         datePickerProps.iconFillHover,
@@ -1141,12 +1158,15 @@ function DatePickerInput(props) {
     }, [end]);
     // @ts-expect-error
     var datePickerStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsxRuntime.jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.width) &&
+                ((_a = "datepicker_width_".concat(appearanceConfig.datePicker.width)) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1').toLowerCase()))), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datePickerAppearance: appearance, labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));
 }
 var DatePickerCustomInput = React.forwardRef(function (props, ref) {
-    var isClearable = props.isClearable, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value;
+    var _a;
+    var isClearable = props.isClearable, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value, datePickerAppearance = props.datePickerAppearance;
     var multipleValue = React.useMemo(function () {
         if (value) {
             var twoDates = value.split(' - ');
@@ -1154,7 +1174,8 @@ var DatePickerCustomInput = React.forwardRef(function (props, ref) {
         }
         return '';
     }, [value]);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
+    var inputAppearanceProps = (_a = datePickerConfig.appearance[datePickerAppearance]) === null || _a === void 0 ? void 0 : _a.input;
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, inputAppearanceProps, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
 });
 DatePickerCustomInput.displayName = 'DatePickerCustomInput';
 function DatePickerClearButton(props) {
@@ -1174,3 +1195,4 @@ function DatePickerInputIcon(props) {
 DatePickerInputIcon.displayName = 'DatePickerInputIcon';
 
 exports.DatePickerInput = DatePickerInput;
+exports.datePickerConfig = datePickerConfig;

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem-D52wxY6I.js');
+var DropdownItem = require('../../DropdownItem-toApJyeB.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -18,7 +18,8 @@ require('../hooks/styleAttributes.js');
 require('../../Divider-BjB5MD6u.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Text-_YhyTsQ1.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
 
 
 

package/dist/cjs/components/Group.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Group = require('../../Group-B2oTJg0t.js');
+var Group = require('../../Group-BiN0haVp.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../appearance/Group.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');

package/dist/cjs/components/Icon.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var Icon = require('../../Icon-CkynFJm4.js');
+var Icon = require('../../Icon-B2BwTQnP.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('react-inlinesvg');
+require('../appearance/Icon.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -18,9 +19,12 @@ require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-DsTCGS6h.js');
-require('../../Text-_YhyTsQ1.js');
-require('../../Title-B-N0qkn3.js');
+require('../../Tooltip-PrwacZFC.js');
+require('../appearance/Tooltip.js');
+require('../../Text-CC0xnhmx.js');
+require('../appearance/Text.js');
+require('../../Title-Ze_OL1Co.js');
+require('../appearance/Title.js');
 
 
 

package/dist/cjs/components/Input.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var Input = require('../../Input-BSpFMsrf.js');
+var Input = require('../../Input-BaicBuyd.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
+require('../appearance/Input.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');