@itcase/ui 1.8.13 → 1.8.16

package/dist/cjs/components/DatePicker.js

@@ -1,19 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-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_Bb9svkwu.js');
-var Icon = require('../../Icon_cjs_BaWMPaAR.js');
-var Input = require('../../Input_cjs_BAVggtkk.js');
-var Label = require('../../Label_cjs_CbcENlSZ.js');
-var Text = require('../../Text_cjs_D4xG0cKD.js');
-var _default = require('@itcase/icons/default');
+var DatePicker = require('../../DatePicker_cjs_44YPU94X.js');
+require('../../tslib.es6_cjs_CCZ3TN_7.js');
+require('react/jsx-runtime');
+require('react');
+require('clsx');
+require('date-fns/locale');
+require('react-datepicker');
+require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -24,192 +18,21 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
+require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Link_cjs_yht44xJv.js');
-require('../../Loader_cjs_D753D3li.js');
+require('../../Button_cjs_Czh0zo65.js');
+require('../../Tooltip_cjs_BGBe4m0s.js');
+require('../../Text_cjs_iL1l_7V1.js');
 require('react-inlinesvg');
-require('../../Tooltip_cjs_CY4HOzhz.js');
-require('../../Title_cjs_ByPcFb15.js');
-
-var datePickerSize = {
-    sizeS: {
-        daySize: 'xs',
-        dayTextSize: 'm',
-        iconFillSize: 24,
-        iconLeft: _default.icon14.ChevronLeft,
-        iconRight: _default.icon14.ChevronRight,
-    },
-    sizeM: {
-        daySize: 'xxl',
-        dayTextSize: 'm',
-        iconFillSize: 24,
-        daySize: 'xs',
-        dayTextSize: 'm',
-        iconSize: 14,
-        monthTextSize: 'm',
-        yearTextSize: 'm',
-        iconLeft: _default.icon14.ChevronLeft,
-        iconRight: _default.icon14.ChevronRight,
-    },
-    sizeL: {
-        daySize: 'xs',
-        dayTextSize: 'm',
-        iconFillSize: 24,
-        iconLeft: _default.icon14.ChevronLeft,
-        iconRight: _default.icon14.ChevronRight,
-    },
-};
-
-var datePickerStyle = {
-    solid: {
-        datePickerProps: {},
-        inputProps: {
-            borderWidth: '0',
-        },
-    },
-    outlined: {
-        datePickerProps: {},
-        inputProps: {
-            fill: 'none',
-        },
-    },
-    ghost: {
-        datePickerProps: {},
-        inputProps: {
-            fill: 'none',
-            borderWidth: '0',
-        },
-    },
-    full: {
-        datePickerProps: {},
-        inputProps: {},
-    },
-};
-
-var datePickerAppearanceSurface = {
-    surfacePrimary: {
-        dayTextColor: 'surfaceTextPrimary',
-        dayTextShape: 'rounded',
-        iconFillHover: 'surfaceSecondary',
-        iconItemFill: 'surfaceItemPrimary',
-        iconShape: 'circular',
-        iconItemFill: 'surfaceItemPrimary',
-        iconLeft: _default.icon14.ChevronLeft,
-        iconRight: _default.icon14.ChevronRight,
-        monthTextColor: 'surfaceTextPrimary',
-        monthTextWeight: 400,
-        placeholderTextColor: 'surfaceTextPrimary',
-        yearTextColor: 'surfaceTextPrimary',
-        yearTextWeight: 400,
-    },
-};
+require('../../Link_cjs_yht44xJv.js');
+require('../../Loader_cjs_DZbIy6Ko.js');
+require('../../Input_cjs_BAVggtkk.js');
+require('../../Label_cjs_B7v_dYKf.js');
+require('@itcase/icons/default');
 
-var datePickerAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, datePickerAppearanceSurface), datePickerSize), datePickerStyle);
 
-var datePickerConfig = {
-    appearance: datePickerAppearance,
-    setAppearance: function (appearanceConfig) {
-        datePickerConfig.appearance = appearanceConfig;
-    },
-};
-function DatePickerInput(props) {
-    var _a;
-    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 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]));
-    }, {});
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(datePickerProps, appearanceConfig);
-    var daySize = propsGenerator.daySize, dayTextColor = propsGenerator.dayTextColor, dayTextShape = propsGenerator.dayTextShape, dayTextSize = propsGenerator.dayTextSize, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconLeft = propsGenerator.iconLeft, iconRight = propsGenerator.iconRight, iconShape = propsGenerator.iconShape, monthTextColor = propsGenerator.monthTextColor, monthTextSize = propsGenerator.monthTextSize, monthTextWeight = propsGenerator.monthTextWeight, popper = propsGenerator.popper, widthClass = propsGenerator.widthClass, yearTextColor = propsGenerator.yearTextColor, yearTextSize = propsGenerator.yearTextSize, yearTextWeight = propsGenerator.yearTextWeight, isClearable = propsGenerator.isClearable;
-    var start = React.useMemo(function () {
-        if (value) {
-            if (typeof value === 'string') {
-                return new Date(value);
-            }
-            return value;
-        }
-        if (datePickerProps.isStartDefaultNull) {
-            return undefined;
-        }
-        return new Date();
-    }, [value, datePickerProps.isStartDefaultNull]);
-    var end = React.useMemo(function () {
-        if (!endValue) {
-            return undefined;
-        }
-        if (typeof endValue === 'string') {
-            return new Date(endValue);
-        }
-        return endValue;
-    }, [endValue]);
-    var _d = React.useState(start), startDate = _d[0], setStartDate = _d[1];
-    var _e = React.useState(end), endDate = _e[0], setEndDate = _e[1];
-    var handleChange = React.useCallback(function (_a) {
-        var newStartDate = _a[0], newEndDate = _a[1];
-        onChange && onChange(newStartDate, newEndDate);
-        setStartDate(newStartDate);
-        setEndDate(newEndDate);
-    }, [onChange]);
-    var renderDayContents = React.useCallback(function (day, date) {
-        return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
-    }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
-    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: [iconLeft && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconLeft, onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.Text, { className: "react-datepicker__month", size: monthTextSize, textColor: monthTextColor, textWeight: monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(Text.Text, { className: "react-datepicker__year", size: yearTextSize, textColor: yearTextColor, textWeight: yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), iconRight && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconRight, onClick: increaseMonth }))] }));
-    }, [
-        iconFill,
-        iconFillHover,
-        iconFillSize,
-        iconItemFill,
-        iconLeft,
-        iconRight,
-        iconShape,
-        monthTextColor,
-        monthTextSize,
-        monthTextWeight,
-        yearTextColor,
-        yearTextSize,
-        yearTextWeight,
-    ]);
-    React.useEffect(function () {
-        setStartDate(start);
-    }, [start]);
-    React.useEffect(function () {
-        setEndDate(end);
-    }, [end]);
-    var datePickerStyles = useStyles.useStyles(props).styles;
-    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 })) }));
-}
-var DatePickerCustomInput = React.forwardRef(function (props, ref) {
-    var inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value, isClearable = props.isClearable;
-    var multipleValue = React.useMemo(function () {
-        if (value) {
-            var twoDates = value.split(' - ');
-            return twoDates[0] === twoDates[1] ? twoDates[0] : value;
-        }
-        return '';
-    }, [value]);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, props, inputProps, { className: "datepicker__input", autocomplete: "off", ref: ref, value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, inputProps)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, inputProps))] }));
-});
-function DatePickerClearButton(props) {
-    var 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, datepickerRef = props.datepickerRef;
-    var onClick = React.useCallback(function (event) {
-        var _a, _b;
-        (_a = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _a === void 0 ? void 0 : _a.onClearClick(event);
-        (_b = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _b === void 0 ? void 0 : _b.handleFocus(event);
-    }, []);
-    return (jsxRuntime.jsx(React.Fragment, { children: clearLabel ? (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })) : ((clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
-}
-function DatePickerInputIcon(props) {
-    var inputIcon = props.inputIcon, inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize, inputIconItemFill = props.inputIconItemFill, inputIconShape = props.inputIconShape, inputIconSize = props.inputIconSize, inputIconSrc = props.inputIconSrc, onClick = props.onClick;
-    return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: function () { return onClick && onClick(); } }));
-}
 
-exports.DatePickerInput = DatePickerInput;
-exports.datePickerAppearance = datePickerAppearance;
-exports.datePickerConfig = datePickerConfig;
+exports.DatePickerInput = DatePicker.DatePickerInput;
+exports.datePickerAppearance = DatePicker.datePickerAppearance;
+exports.datePickerConfig = DatePicker.datePickerConfig;

package/dist/cjs/components/Divider.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Divider = require('../../Divider_cjs_DakITdTv.js');
+var Divider = require('../../Divider_cjs_DzFVtGkF.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('clsx');

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem_cjs_TdJHpFgg.js');
+var DropdownItem = require('../../DropdownItem_cjs_DW0UXopm.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -19,8 +19,8 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Divider_cjs_DakITdTv.js');
-require('../../Text_cjs_D4xG0cKD.js');
+require('../../Divider_cjs_DzFVtGkF.js');
+require('../../Text_cjs_iL1l_7V1.js');
 
 
 

package/dist/cjs/components/HeroTitle.js

@@ -19,12 +19,35 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 
-var heroTitleAppearance = {
-    dev: {
-        textColor: 'surfaceTextPrimary',
+var heroTitleAppearanceSize = {
+    sizeH1: {
+        size: 'h1',
+        labelTextSize: 'h1',
+    },
+    sizeH2: {
+        size: 'h2',
+        labelTextSize: 'h2',
+    },
+    sizeH3: {
+        size: 'h3',
+        labelTextSize: 'h3',
+    },
+    sizeH4: {
+        size: 'h4',
+        labelTextSize: 'h4',
+    },
+    sizeH5: {
+        size: 'h5',
+        labelTextSize: 'h5',
+    },
+    sizeH6: {
+        size: 'h6',
+        labelTextSize: 'h6',
     },
 };
 
+var heroTitleAppearance = tslib_es6.__assign({}, heroTitleAppearanceSize);
+
 var heroTitleConfig = {
     appearance: heroTitleAppearance,
     setAppearance: function (appearanceConfig) {

package/dist/cjs/components/Icon.js

@@ -1,11 +1,10 @@
 'use strict';
 
-var Icon = require('../../Icon_cjs_BaWMPaAR.js');
+var Tooltip = require('../../Tooltip_cjs_BGBe4m0s.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('react-inlinesvg');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -20,13 +19,12 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
+require('../../Text_cjs_iL1l_7V1.js');
+require('react-inlinesvg');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CY4HOzhz.js');
-require('../../Text_cjs_D4xG0cKD.js');
-require('../../Title_cjs_ByPcFb15.js');
 
 
 
-exports.Icon = Icon.Icon;
-exports.iconAppearance = Icon.iconAppearance;
-exports.iconConfig = Icon.iconConfig;
+exports.Icon = Tooltip.Icon;
+exports.iconAppearance = Tooltip.iconAppearance;
+exports.iconConfig = Tooltip.iconConfig;

package/dist/cjs/components/InputPassword.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Icon = require('../../Icon_cjs_BaWMPaAR.js');
+var Tooltip = require('../../Tooltip_cjs_BGBe4m0s.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -16,14 +16,12 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('react-inlinesvg');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
+require('../../Text_cjs_iL1l_7V1.js');
+require('react-inlinesvg');
 require('../../Link_cjs_yht44xJv.js');
-require('../../Tooltip_cjs_CY4HOzhz.js');
-require('../../Text_cjs_D4xG0cKD.js');
-require('../../Title_cjs_ByPcFb15.js');
 
 var InputPasswordAppearance = {
     dev: {
@@ -112,7 +110,7 @@ function InputPassword(props) {
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, _b = propsGenerator.sizeClass, sizeClass = _b === void 0 ? 'm' : _b, widthClass = propsGenerator.widthClass;
     return (jsxRuntime.jsxs("div", { className: "input-password", children: [jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), shapeClass && "input-password__input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), borderWidthClass && "border-width_".concat(borderWidthClass), sizeClass && "input-password__input_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), placeholderTextColorClass &&
-                    "placeholder-text-color_".concat(placeholderTextColorClass), textColorClass && "text-color_".concat(textColorClass)), type: inputType, disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), isRevealable && (jsxRuntime.jsx(Icon.Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: revealeHandler }))] }));
+                    "placeholder-text-color_".concat(placeholderTextColorClass), textColorClass && "text-color_".concat(textColorClass)), type: inputType, disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), isRevealable && (jsxRuntime.jsx(Tooltip.Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: revealeHandler }))] }));
 }
 
 exports.InputPassword = InputPassword;

package/dist/cjs/components/Label.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Label = require('../../Label_cjs_CbcENlSZ.js');
+var Label = require('../../Label_cjs_B7v_dYKf.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -19,9 +19,10 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Text_cjs_D4xG0cKD.js');
-require('../../Tooltip_cjs_CY4HOzhz.js');
-require('../../Title_cjs_ByPcFb15.js');
+require('../../Text_cjs_iL1l_7V1.js');
+require('../../Tooltip_cjs_BGBe4m0s.js');
+require('react-inlinesvg');
+require('../../Link_cjs_yht44xJv.js');
 
 
 

package/dist/cjs/components/List.js

@@ -1,11 +1,11 @@
 'use strict';
 
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Link = require('../../Link_cjs_yht44xJv.js');
-require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -20,9 +20,215 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 
+var listAppearanceAccent = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+};
+
+var listAppearanceDanger = {
+    danger: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerPrimaryHover',
+    },
+};
+
+var listAppearanceError = {
+    error: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimaryHover',
+        labelTextColor: 'errorTextPrimary',
+        labelTextColorHover: 'errorTextPrimary',
+        loaderFill: 'errorPrimary',
+        loaderItemFill: 'errorItemPrimary',
+    },
+};
+
+var listAppearanceInfo = {
+    info: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    infoSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+};
+
+var listAppearancePrimary = {
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelTextColor: 'primaryTextPrimary',
+    },
+};
+
+var listAppearanceSecondary = {
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelTextColor: 'secondaryTextPrimary',
+    },
+};
+
+var listAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        labelTextSize: 'xxl',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeXL: {
+        size: 'xl',
+        labelTextSize: 'l',
+        iconAfterFillSize: '20',
+        iconAfterSize: '20',
+        iconBeforeFillSize: '20',
+        iconBeforeSize: '20',
+    },
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'l',
+        iconAfterFillSize: '18',
+        iconAfterSize: '18',
+        iconBeforeFillSize: '18',
+        iconBeforeSize: '18',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        iconAfterFillSize: '14',
+        iconAfterSize: '14',
+        iconBeforeFillSize: '14',
+        iconBeforeSize: '14',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xs',
+        iconAfterFillSize: '10',
+        iconAfterSize: '10',
+        iconBeforeFillSize: '10',
+        iconBeforeSize: '10',
+    },
+};
+
+var listAppearanceStyle = {
+    full: {
+        borderColor: '0',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: '0',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderColor: '0',
+    },
+};
+
+var listAppearanceSuccess = {
+    success: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimaryHover',
+        labelTextColor: 'successTextSecondary',
+        labelTextColorHover: 'successTextSecondary',
+        loaderFill: 'successPrimary',
+        loaderItemFill: 'successItemPrimary',
+    },
+};
+
+var listAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+var listAppearanceWarning = {
+    warning: {
+        fill: 'warningPrimary',
+        fillHover: 'warningPrimaryHover',
+        labelTextColor: 'warningTextSecondary',
+        labelTextColorHover: 'warningTextSecondary',
+        loaderFill: 'warningPrimary',
+        loaderItemFill: 'warningItemPrimary',
+    },
+};
+
+var listAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, listAppearanceSize), listAppearanceStyle), listAppearanceAccent), listAppearanceDanger), listAppearanceError), listAppearanceInfo), listAppearancePrimary), listAppearanceSecondary), listAppearanceSuccess), listAppearanceSurface), listAppearanceWarning);
+
+var listConfig = {
+    appearance: listAppearance};
 function List(props) {
-    var className = props.className, type = props.type, style = props.style, children = props.children;
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    var className = props.className, type = props.type, appearance = props.appearance, style = props.style, children = props.children;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = listConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var directionClass = propsGenerator.directionClass, bulletFillClass = propsGenerator.bulletFillClass, bulletSizeClass = propsGenerator.bulletSizeClass, bulletTextColorClass = propsGenerator.bulletTextColorClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error
     var ulStyles = useStyles.useStyles(props).styles;

package/dist/cjs/components/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Loader = require('../../Loader_cjs_D753D3li.js');
+var Loader = require('../../Loader_cjs_DZbIy6Ko.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('clsx');
@@ -19,7 +19,7 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Text_cjs_D4xG0cKD.js');
+require('../../Text_cjs_iL1l_7V1.js');