@itcase/ui 1.8.13 → 1.8.17

package/dist/components/DatePicker.js

@@ -1,17 +1,11 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
-import clsx from 'clsx';
-import { ru } from 'date-fns/locale';
-import DatePicker from 'react-datepicker';
-import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_Cd4sw9Q5.js';
-import { I as Icon } from '../Icon_es_B0sySEUu.js';
-import { I as Input } from '../Input_es_CNduH28G.js';
-import { L as Label } from '../Label_es_BCpDqP3q.js';
-import { T as Text } from '../Text_es_FJGduy7Z.js';
-import { icon14 } from '@itcase/icons/default';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_DCuzMD0T.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import 'date-fns/locale';
+import 'react-datepicker';
+import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -22,190 +16,15 @@ import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
+import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Link_es_DkW06IM-.js';
-import '../Loader_es_BE4nyzXi.js';
+import '../Button_es_CHDT0-8K.js';
+import '../Tooltip_es_C7zstTA2.js';
+import '../Text_es_D012qJ8s.js';
 import 'react-inlinesvg';
-import '../Tooltip_es_B9hN4Zlm.js';
-import '../Title_es_eejUqSJf.js';
-
-var datePickerSize = {
-    sizeS: {
-        daySize: 'xs',
-        dayTextSize: 'm',
-        iconFillSize: 24,
-        iconLeft: icon14.ChevronLeft,
-        iconRight: icon14.ChevronRight,
-    },
-    sizeM: {
-        daySize: 'xxl',
-        dayTextSize: 'm',
-        iconFillSize: 24,
-        daySize: 'xs',
-        dayTextSize: 'm',
-        iconSize: 14,
-        monthTextSize: 'm',
-        yearTextSize: 'm',
-        iconLeft: icon14.ChevronLeft,
-        iconRight: icon14.ChevronRight,
-    },
-    sizeL: {
-        daySize: 'xs',
-        dayTextSize: 'm',
-        iconFillSize: 24,
-        iconLeft: icon14.ChevronLeft,
-        iconRight: 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: icon14.ChevronLeft,
-        iconRight: icon14.ChevronRight,
-        monthTextColor: 'surfaceTextPrimary',
-        monthTextWeight: 400,
-        placeholderTextColor: 'surfaceTextPrimary',
-        yearTextColor: 'surfaceTextPrimary',
-        yearTextWeight: 400,
-    },
-};
-
-var datePickerAppearance = __assign(__assign(__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 = 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 (__assign(__assign({}, resultConfig), (_a = datePickerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
-    var propsGenerator = 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 = 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 = useMemo(function () {
-        if (!endValue) {
-            return undefined;
-        }
-        if (typeof endValue === 'string') {
-            return new Date(endValue);
-        }
-        return endValue;
-    }, [endValue]);
-    var _d = useState(start), startDate = _d[0], setStartDate = _d[1];
-    var _e = useState(end), endDate = _e[0], setEndDate = _e[1];
-    var handleChange = useCallback(function (_a) {
-        var newStartDate = _a[0], newEndDate = _a[1];
-        onChange && onChange(newStartDate, newEndDate);
-        setStartDate(newStartDate);
-        setEndDate(newEndDate);
-    }, [onChange]);
-    var renderDayContents = useCallback(function (day, date) {
-        return (jsx(Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
-    }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
-    var renderCustomHeader = useCallback(function (_a) {
-        var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
-        return (jsxs("div", { className: "react-datepicker__header--div", children: [iconLeft && (jsx(Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconLeft, onClick: decreaseMonth })), jsxs("div", { className: "react-datepicker__data", children: [jsx(Text, { className: "react-datepicker__month", size: monthTextSize, textColor: monthTextColor, textWeight: monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsx(Text, { className: "react-datepicker__year", size: yearTextSize, textColor: yearTextColor, textWeight: yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), iconRight && (jsx(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,
-    ]);
-    useEffect(function () {
-        setStartDate(start);
-    }, [start]);
-    useEffect(function () {
-        setEndDate(end);
-    }, [end]);
-    var datePickerStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsx(DatePicker, __assign({ minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? endDate : undefined, locale: ru, popperClassName: popper && "react-datepicker-popper-".concat(popper), ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
-            // Important for use custom clear button
-            isClearable: false })) }));
-}
-var DatePickerCustomInput = React.forwardRef(function (props, ref) {
-    var inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value, isClearable = props.isClearable;
-    var multipleValue = useMemo(function () {
-        if (value) {
-            var twoDates = value.split(' - ');
-            return twoDates[0] === twoDates[1] ? twoDates[0] : value;
-        }
-        return '';
-    }, [value]);
-    return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, props, inputProps, { className: "datepicker__input", autocomplete: "off", ref: ref, value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, inputProps)), isClearable && jsx(DatePickerClearButton, __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 = 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 (jsx(React.Fragment, { children: clearLabel ? (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })) : ((clearIcon || clearIconSrc) && (jsx(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 (jsx(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(); } }));
-}
-
-export { DatePickerInput, datePickerAppearance, datePickerConfig };
+import '../Link_es_DkW06IM-.js';
+import '../Loader_es_SHdP0IkA.js';
+import '../Input_es_CNduH28G.js';
+import '../Label_es_CiPEDFcR.js';
+import '@itcase/icons/default';

package/dist/components/Divider.js

@@ -1,4 +1,4 @@
-export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider_es_CWsDM2Rm.js';
+export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider_es_BdU9qjKa.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'clsx';

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_CdYP5BQN.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_vuNthDPa.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -17,5 +17,5 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Divider_es_CWsDM2Rm.js';
-import '../Text_es_FJGduy7Z.js';
+import '../Divider_es_BdU9qjKa.js';
+import '../Text_es_D012qJ8s.js';

package/dist/components/HeroTitle.js

@@ -17,12 +17,35 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../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 = __assign({}, heroTitleAppearanceSize);
+
 var heroTitleConfig = {
     appearance: heroTitleAppearance,
     setAppearance: function (appearanceConfig) {

package/dist/components/Icon.js

@@ -1,9 +1,8 @@
-export { I as Icon, a as iconAppearance, i as iconConfig } from '../Icon_es_B0sySEUu.js';
+export { I as Icon, e as iconAppearance, i as iconConfig } from '../Tooltip_es_C7zstTA2.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import 'react-inlinesvg';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -18,7 +17,6 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
+import '../Text_es_D012qJ8s.js';
+import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_B9hN4Zlm.js';
-import '../Text_es_FJGduy7Z.js';
-import '../Title_es_eejUqSJf.js';

package/dist/components/InputPassword.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon } from '../Icon_es_B0sySEUu.js';
+import { I as Icon } from '../Tooltip_es_C7zstTA2.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -14,14 +14,12 @@ import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import 'react-inlinesvg';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
+import '../Text_es_D012qJ8s.js';
+import 'react-inlinesvg';
 import '../Link_es_DkW06IM-.js';
-import '../Tooltip_es_B9hN4Zlm.js';
-import '../Text_es_FJGduy7Z.js';
-import '../Title_es_eejUqSJf.js';
 
 var InputPasswordAppearance = {
     dev: {

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_BCpDqP3q.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_CiPEDFcR.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -17,6 +17,7 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_FJGduy7Z.js';
-import '../Tooltip_es_B9hN4Zlm.js';
-import '../Title_es_eejUqSJf.js';
+import '../Text_es_D012qJ8s.js';
+import '../Tooltip_es_C7zstTA2.js';
+import 'react-inlinesvg';
+import '../Link_es_DkW06IM-.js';

package/dist/components/List.js

@@ -1,9 +1,9 @@
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { L as Link } from '../Link_es_DkW06IM-.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -18,9 +18,215 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../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 = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__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(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 (__assign(__assign({}, resultConfig), (_a = listConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = 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(props).styles;

package/dist/components/Loader.js

@@ -1,4 +1,4 @@
-export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_BE4nyzXi.js';
+export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_SHdP0IkA.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'clsx';
@@ -17,4 +17,4 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_FJGduy7Z.js';
+import '../Text_es_D012qJ8s.js';