@itcase/ui 1.2.28 → 1.2.29

package/dist/components/Choice.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
+import { choiceAppearance } from '../appearance/Choice.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-CliIEdbp.js';
-import { L as Loader } from '../Loader-CJ8ZCdwy.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
+import { L as Loader } from '../Loader-CU_5Ydmy.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -12,17 +13,22 @@ import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'react-inlinesvg';
+import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../appearance/Loader.js';
+import '../appearance/Text.js';
 
 var choiceConfig = {
-    appearance: {},
+    appearance: choiceAppearance,
     setAppearance: function (newComponent) {
         choiceConfig.appearance = newComponent;
     },
@@ -87,8 +93,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 (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/components/Code.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { a as __assign } from '../tslib.es6-w7hdJ3oZ.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import clsx from 'clsx';
@@ -76,7 +76,7 @@ function Code(props) {
     });
     // NOTE: too many dependencies for "useCallback" and possible too many checks
     var renderInput = function (otpInputProps) {
-        return (jsx("input", __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 (jsx("input", __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/components/ContextMenu.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
-import { I as Icon } from '../Icon-CliIEdbp.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -16,10 +16,14 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../appearance/Icon.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../appearance/Text.js';
 
 function ContextMenu(props) {
     var id = props.id, children = props.children, className = props.className, set = props.set, onClick = props.onClick;

package/dist/components/CookiesWarning.js

@@ -3,26 +3,33 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { B as Button } from '../Button-C0M-Ap20.js';
-import { G as Group } from '../Group-CVUfaHaS.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { B as Button } from '../Button-avhviao1.js';
+import { G as Group } from '../Group-Dc70Z4_7.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../appearance/Button.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-CliIEdbp.js';
+import '../Icon-ClsRaxDk.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
-import '../Loader-CJ8ZCdwy.js';
+import '../appearance/Icon.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../Loader-CU_5Ydmy.js';
+import '../appearance/Loader.js';
+import '../appearance/Group.js';
+import '../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/components/DadataHintField.js

@@ -1,9 +1,10 @@
-import { _ as __assign, a as __rest } from '../tslib.es6-5FtW-kfi.js';
+import { a as __assign, _ as __rest } from '../tslib.es6-w7hdJ3oZ.js';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { PartySuggestions } from 'react-dadata';
-import { I as Input } from '../Input-UkM-ag48.js';
+import { I as Input } from '../Input-DbzsXvEf.js';
+import '../appearance/Input.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';

package/dist/components/DatePicker.js

@@ -1,15 +1,16 @@
-import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { a as __assign } from '../tslib.es6-w7hdJ3oZ.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import clsx from 'clsx';
 import DatePicker from 'react-datepicker';
+import { datePickerAppearance } from '../appearance/DatePicker.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-C0M-Ap20.js';
-import { I as Icon } from '../Icon-CliIEdbp.js';
-import { I as Input } from '../Input-UkM-ag48.js';
-import { L as Label } from '../Label-ukXod6pv.js';
-import { T as Text } from '../Text-CG3xPG27.js';
+import { B as Button } from '../Button-avhviao1.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
+import { I as Input } from '../Input-DbzsXvEf.js';
+import { L as Label } from '../Label-BfotYOmD.js';
+import { T as Text } from '../Text-kxGZButz.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -19,11 +20,19 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../Loader-CJ8ZCdwy.js';
+import '../appearance/Button.js';
+import '../Link-CzC1kU5C.js';
+import '../Loader-CU_5Ydmy.js';
+import '../appearance/Loader.js';
 import 'react-inlinesvg';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../appearance/Icon.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
+import '../appearance/Input.js';
+import '../appearance/Label.js';
+import '../appearance/Text.js';
 
 function buildFormatLongFn(args) {
   return (options = {}) => {
@@ -1068,8 +1077,16 @@ const ru = {
   },
 };
 
+var datePickerConfig = {
+    appearance: 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(props, {
         prefix: 'datepicker_width_',
         propsKey: 'width',
@@ -1096,8 +1113,8 @@ function DatePickerInput(props) {
         }
         return endValue;
     }, [endValue]);
-    var _b = useState(start), startDate = _b[0], setStartDate = _b[1];
-    var _c = useState(end), endDate = _c[0], setEndDate = _c[1];
+    var _c = useState(start), startDate = _c[0], setStartDate = _c[1];
+    var _d = useState(end), endDate = _d[0], setEndDate = _d[1];
     var handleChange = useCallback(function (_a) {
         var newStartDate = _a[0], newEndDate = _a[1];
         onChange && onChange(newStartDate, newEndDate);
@@ -1105,7 +1122,7 @@ function DatePickerInput(props) {
         setEndDate(newEndDate);
     }, [onChange]);
     var renderDayContents = useCallback(function (day, date) {
-        return (jsx(Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, label: date.getDate().toString(), shape: datePickerProps.dayTextShape, size: datePickerProps.daySize }));
+        return (jsx(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,
@@ -1114,7 +1131,7 @@ function DatePickerInput(props) {
     ]);
     var renderCustomHeader = useCallback(function (_a) {
         var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
-        return (jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsx(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 })), jsxs("div", { className: "react-datepicker__data", children: [jsx(Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize, textColor: datePickerProps.monthTextColor, textWeight: datePickerProps.monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsx(Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize, textColor: datePickerProps.yearTextColor, textWeight: datePickerProps.yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsx(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 (jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsx(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 })), jsxs("div", { className: "react-datepicker__data", children: [jsx(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' }) }), jsx(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 && (jsx(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,
@@ -1139,12 +1156,15 @@ function DatePickerInput(props) {
     }, [end]);
     // @ts-expect-error
     var datePickerStyles = useStyles(props).styles;
-    return (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: jsx(DatePicker, __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: 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 (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: jsx(DatePicker, __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: 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 = useMemo(function () {
         if (value) {
             var twoDates = value.split(' - ');
@@ -1152,7 +1172,8 @@ var DatePickerCustomInput = React.forwardRef(function (props, ref) {
         }
         return '';
     }, [value]);
-    return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, props)), isClearable && jsx(DatePickerClearButton, __assign({}, props))] }));
+    var inputAppearanceProps = (_a = datePickerConfig.appearance[datePickerAppearance]) === null || _a === void 0 ? void 0 : _a.input;
+    return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, inputAppearanceProps, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, props)), isClearable && jsx(DatePickerClearButton, __assign({}, props))] }));
 });
 DatePickerCustomInput.displayName = 'DatePickerCustomInput';
 function DatePickerClearButton(props) {
@@ -1171,4 +1192,4 @@ function DatePickerInputIcon(props) {
 }
 DatePickerInputIcon.displayName = 'DatePickerInputIcon';
 
-export { DatePickerInput };
+export { DatePickerInput, datePickerConfig };

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem } from '../DropdownItem-D0dOP4NL.js';
+export { D as Dropdown, a as DropdownItem } from '../DropdownItem-CFkRx8LX.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -14,6 +14,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Divider-U5UdY-ef.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Text-CG3xPG27.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';

package/dist/components/Group.js

@@ -1,7 +1,8 @@
-export { G as Group, g as groupConfig } from '../Group-CVUfaHaS.js';
+export { G as Group, g as groupConfig } from '../Group-Dc70Z4_7.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../appearance/Group.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';

package/dist/components/Icon.js

@@ -1,8 +1,9 @@
-export { I as Icon, i as iconConfig } from '../Icon-CliIEdbp.js';
+export { I as Icon, i as iconConfig } from '../Icon-ClsRaxDk.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import 'react-inlinesvg';
+import '../appearance/Icon.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -14,8 +15,11 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Text-CG3xPG27.js';
-import '../Title-CqwqEtm7.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';

package/dist/components/Input.js

@@ -1,7 +1,8 @@
-export { I as Input, i as inputConfig } from '../Input-UkM-ag48.js';
+export { I as Input, i as inputConfig } from '../Input-DbzsXvEf.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../appearance/Input.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';

package/dist/components/InputPassword.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
+import { InputPasswordAppearance, InputPasswordState } from '../appearance/InputPassword.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-CliIEdbp.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -10,25 +11,30 @@ import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'react-inlinesvg';
+import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Text-CG3xPG27.js';
-import '../Title-CqwqEtm7.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
 
 var inputPasswordConfig = {
-    appearance: undefined,
+    appearance: InputPasswordAppearance,
     setAppearance: function (newComponent) {
         inputPasswordConfig.appearance = newComponent;
     },
+    state: InputPasswordState,
+    // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputPasswordConfig.state = newComponent;
     },
-    state: undefined,
 };
 function InputPassword(props) {
     var id = props.id, isRevealable = props.isRevealable, appearance = props.appearance, className = props.className, disabled = props.disabled, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconRevealableHide = props.iconRevealableHide, iconRevealableShow = props.iconRevealableShow, iconShape = props.iconShape, iconSize = props.iconSize, imageRevealableHide = props.imageRevealableHide, imageRevealableShow = props.imageRevealableShow, placeholder = props.placeholder, state = props.state, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;

package/dist/components/Label.js

@@ -1,7 +1,8 @@
-export { L as Label, l as labelConfig } from '../Label-ukXod6pv.js';
+export { L as Label, l as labelConfig } from '../Label-BfotYOmD.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../appearance/Label.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -13,6 +14,9 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-CG3xPG27.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Title-CqwqEtm7.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';

package/dist/components/LanguageSelector.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon-CliIEdbp.js';
+import { I as Icon } from '../Icon-ClsRaxDk.js';
 import 'react';
 import 'react-inlinesvg';
+import '../appearance/Icon.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -14,11 +15,14 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Tooltip-B2vv4OAX.js';
-import '../Text-CG3xPG27.js';
-import '../Title-CqwqEtm7.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Tooltip-ccRCMYQM.js';
+import '../appearance/Tooltip.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';
+import '../Title-CQ_Fr1hO.js';
+import '../appearance/Title.js';
 
 function LanguageSelectorItem(props) {
     var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;

package/dist/components/Link.js

@@ -1,5 +1,5 @@
-export { L as Link, a as LinkWrapper, l as linkConfig } from '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
+export { L as Link, a as LinkWrapper, l as linkConfig } from '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/List.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useStyles } from '../hooks/useStyles.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { L as Link } from '../Link-CeQuavin.js';
+import { L as Link } from '../Link-CzC1kU5C.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
@@ -13,7 +13,7 @@ import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
 import 'lodash/castArray';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-w7hdJ3oZ.js';
 
 function List(props) {
     var children = props.children, className = props.className, style = props.style, type = props.type;

package/dist/components/Loader.js

@@ -1,6 +1,7 @@
-export { L as Loader, l as loaderConfig } from '../Loader-CJ8ZCdwy.js';
+export { L as Loader, l as loaderConfig } from '../Loader-CU_5Ydmy.js';
 import 'react/jsx-runtime';
 import 'clsx';
+import '../appearance/Loader.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
 import 'lodash/castArray';
@@ -13,4 +14,5 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-CG3xPG27.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';

package/dist/components/Logo.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { a as LinkWrapper } from '../Link-CeQuavin.js';
+import { a as LinkWrapper } from '../Link-CzC1kU5C.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -13,7 +13,7 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-w7hdJ3oZ.js';
 
 var logoConfig = {
     appearance: undefined,

package/dist/components/Menu.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { M as MenuItem } from '../MenuItem-BL6WBNjL.js';
+import { M as MenuItem } from '../MenuItem-BEYVY0Vf.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -13,9 +13,11 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Text-CG3xPG27.js';
+import '../appearance/MenuItem.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';
 
 function Menu(props) {
     var after = props.after, before = props.before, children = props.children, className = props.className, items = props.items, type = props.type, onClickItem = props.onClickItem;

package/dist/components/MenuItem.js

@@ -1,7 +1,8 @@
-export { M as MenuItem, m as menuItemConfig } from '../MenuItem-BL6WBNjL.js';
+export { M as MenuItem, m as menuItemConfig } from '../MenuItem-BEYVY0Vf.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../appearance/MenuItem.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -13,6 +14,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Text-CG3xPG27.js';
+import '../Link-CzC1kU5C.js';
+import '../tslib.es6-w7hdJ3oZ.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';

package/dist/components/Modal.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { O as Overlay } from '../Overlay-DO5dnSRE.js';
-import { L as Loader } from '../Loader-CJ8ZCdwy.js';
+import { L as Loader } from '../Loader-CU_5Ydmy.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -15,7 +15,9 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-CG3xPG27.js';
+import '../appearance/Loader.js';
+import '../Text-kxGZButz.js';
+import '../appearance/Text.js';
 
 var getOrCreateModalElement = function (modalQuerySelector, className) {
     var _a;