@itcase/ui 1.8.37 → 1.8.39

package/dist/{Avatar_cjs_nMPCDjk8.js → Avatar_cjs_mqB6k6yB.js}

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
-var Image = require('./Image_cjs_CCWqbNn4.js');
+var Tooltip = require('./Tooltip_cjs_CiY50iRK.js');
+var Image = require('./Image_cjs_2zEjohYE.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 var avatarAppearanceDefault = {

package/dist/{Avatar_es_B73a6TzA.js → Avatar_es_DKL6hUIM.js}

@@ -3,8 +3,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon, B as Badge } from './Tooltip_es_ltCY-w4M.js';
-import { I as Image } from './Image_es_DZUVp0FS.js';
+import { I as Icon, B as Badge } from './Tooltip_es_Cc2orRUE.js';
+import { I as Image } from './Image_es_ChF-63wh.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 var avatarAppearanceDefault = {

package/dist/{Button_cjs_plv5-qcj.js → Button_cjs_CwduBuCx.js}

@@ -4,7 +4,7 @@ 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 Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('./Tooltip_cjs_CiY50iRK.js');
 var Link = require('./Link_cjs_DbRGq2Yk.js');
 var Loader = require('./Loader_cjs_Ca4i0sER.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');

package/dist/{Button_es_BigB2Wz6.js → Button_es_CBUUZuP3.js}

@@ -2,7 +2,7 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { I as Icon } from './Tooltip_es_ltCY-w4M.js';
+import { I as Icon } from './Tooltip_es_Cc2orRUE.js';
 import { a as LinkWrapper } from './Link_es_DxtZLeKY.js';
 import { L as Loader } from './Loader_es_GYOr0UTX.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';

package/dist/{ChipsGroup_cjs_DrOhD-Fc.js → ChipsGroup_cjs_Dq-QQCR_.js}

@@ -6,7 +6,7 @@ var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 var React = require('react');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('./Tooltip_cjs_CiY50iRK.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 var chipsAppearanceAccent = {

package/dist/{ChipsGroup_es_B9m4l0wN.js → ChipsGroup_es_DdU5NMpc.js}

@@ -4,7 +4,7 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { useMemo } from 'react';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, B as Badge } from './Tooltip_es_ltCY-w4M.js';
+import { I as Icon, B as Badge } from './Tooltip_es_Cc2orRUE.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 var chipsAppearanceAccent = {

package/dist/{DatePicker_cjs_CmqgSNw7.js → DatePicker_cjs_0MnhwJnY.js}

@@ -8,10 +8,10 @@ var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Button = require('./Button_cjs_plv5-qcj.js');
-var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
+var Button = require('./Button_cjs_CwduBuCx.js');
+var Tooltip = require('./Tooltip_cjs_CiY50iRK.js');
 var Input = require('./Input_cjs_CPmXkQGd.js');
-var Label = require('./Label_cjs_BGJfyrOL.js');
+var Label = require('./Label_cjs_CKR9noZi.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 var _default = require('@itcase/icons/default');
 
@@ -100,35 +100,35 @@ function DatePickerInput(props) {
     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, popperPlacement = propsGenerator.popperPlacement, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, yearTextColor = propsGenerator.yearTextColor, yearTextSize = propsGenerator.yearTextSize, yearTextWeight = propsGenerator.yearTextWeight, isClearable = propsGenerator.isClearable;
     var _d = React.useMemo(function () {
-        var startDate;
+        var dateStart;
         if (value) {
             if (typeof value === 'string') {
-                startDate = new Date(value);
+                dateStart = new Date(value);
             }
             else {
-                startDate = value;
+                dateStart = value;
             }
         }
         else {
-            startDate = undefined;
+            dateStart = undefined;
         }
-        var endDate;
+        var dateEnd;
         if (endValue) {
             if (typeof endValue === 'string') {
-                endDate = new Date(endValue);
+                dateEnd = new Date(endValue);
             }
             else {
-                endDate = endValue;
+                dateEnd = endValue;
             }
         }
         else {
-            endDate = undefined;
+            dateEnd = undefined;
         }
-        return [startDate, endDate];
-    }, [value, endValue]), startDate = _d[0], endDate = _d[1];
-    var handleChange = React.useCallback(function (_a) {
-        var newStartDate = _a[0], newEndDate = _a[1];
-        onChange(newStartDate, newEndDate);
+        return [dateStart, dateEnd];
+    }, [value, endValue]), dateStart = _d[0], dateEnd = _d[1];
+    var handleChange = React.useCallback(function (valuesList) {
+        var newDateStart = valuesList[0], newDateEnd = valuesList[1];
+        onChange(newDateStart, newDateEnd);
     }, [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 }));
@@ -152,7 +152,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     var datePickerStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && "datepicker_size_".concat(sizeClass), 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), popperPlacement: popperPlacement, ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && "datepicker_size_".concat(sizeClass), 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 ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && "react-datepicker-popper-".concat(popper), popperPlacement: popperPlacement, ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));
 }

package/dist/{DatePicker_es_mk9wFTe9.js → DatePicker_es_D4P4DT8L.js}

@@ -6,10 +6,10 @@ 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_BigB2Wz6.js';
-import { I as Icon } from './Tooltip_es_ltCY-w4M.js';
+import { B as Button } from './Button_es_CBUUZuP3.js';
+import { I as Icon } from './Tooltip_es_Cc2orRUE.js';
 import { I as Input } from './Input_es_D9Y1Rj5Y.js';
-import { L as Label } from './Label_es_C4Px7b-N.js';
+import { L as Label } from './Label_es_Cz9OKQAr.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 import { icons14 } from '@itcase/icons/default';
 
@@ -98,35 +98,35 @@ function DatePickerInput(props) {
     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, popperPlacement = propsGenerator.popperPlacement, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, yearTextColor = propsGenerator.yearTextColor, yearTextSize = propsGenerator.yearTextSize, yearTextWeight = propsGenerator.yearTextWeight, isClearable = propsGenerator.isClearable;
     var _d = useMemo(function () {
-        var startDate;
+        var dateStart;
         if (value) {
             if (typeof value === 'string') {
-                startDate = new Date(value);
+                dateStart = new Date(value);
             }
             else {
-                startDate = value;
+                dateStart = value;
             }
         }
         else {
-            startDate = undefined;
+            dateStart = undefined;
         }
-        var endDate;
+        var dateEnd;
         if (endValue) {
             if (typeof endValue === 'string') {
-                endDate = new Date(endValue);
+                dateEnd = new Date(endValue);
             }
             else {
-                endDate = endValue;
+                dateEnd = endValue;
             }
         }
         else {
-            endDate = undefined;
+            dateEnd = undefined;
         }
-        return [startDate, endDate];
-    }, [value, endValue]), startDate = _d[0], endDate = _d[1];
-    var handleChange = useCallback(function (_a) {
-        var newStartDate = _a[0], newEndDate = _a[1];
-        onChange(newStartDate, newEndDate);
+        return [dateStart, dateEnd];
+    }, [value, endValue]), dateStart = _d[0], dateEnd = _d[1];
+    var handleChange = useCallback(function (valuesList) {
+        var newDateStart = valuesList[0], newDateEnd = valuesList[1];
+        onChange(newDateStart, newDateEnd);
     }, [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 }));
@@ -150,7 +150,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     var datePickerStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && "datepicker_size_".concat(sizeClass), 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), popperPlacement: popperPlacement, ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
+    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && "datepicker_size_".concat(sizeClass), 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 ? dateEnd : undefined, locale: ru, popperClassName: popper && "react-datepicker-popper-".concat(popper), popperPlacement: popperPlacement, ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));
 }

package/dist/{DropdownItem_cjs_DQvByLbN.js → DropdownItem_cjs_BuT4hQS1.js}

@@ -7,7 +7,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 var Divider = require('./Divider_cjs_BmCJj3TN.js');
-var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('./Tooltip_cjs_CiY50iRK.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 function Dropdown(props) {

package/dist/{DropdownItem_es_KppIfto7.js → DropdownItem_es_CrwvBzq_.js}

@@ -5,7 +5,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { D as Divider } from './Divider_es_kY-30pft.js';
-import { I as Icon } from './Tooltip_es_ltCY-w4M.js';
+import { I as Icon } from './Tooltip_es_Cc2orRUE.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 function Dropdown(props) {

package/dist/{Image_cjs_CCWqbNn4.js → Image_cjs_2zEjohYE.js}

@@ -3,11 +3,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
-function Image(props) {
-    var className = props.className, type = props.type, src = props.src, title = props.title, onError = props.onError, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+var Image = urlWithAssetPrefix.urlWithAssetPrefix(function Image(props) {
+    var className = props.className, type = props.type, src = props.src, title = props.title, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onError = props.onError, children = props.children;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
     var _a = useStyles.useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
@@ -21,7 +22,7 @@ function Image(props) {
     }, [onError, placeholderUrl]);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass &&
             "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass &&
-                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, onError: onErrorImage, alt: alt || title, style: imageStyles }), overlay, caption, children] }), after] }));
-}
+                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
+});
 
 exports.Image = Image;

package/dist/{Image_es_DZUVp0FS.js → Image_es_ChF-63wh.js}

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
+import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 
-function Image(props) {
-    var className = props.className, type = props.type, src = props.src, title = props.title, onError = props.onError, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
+var Image = urlWithAssetPrefix(function Image(props) {
+    var className = props.className, type = props.type, src = props.src, title = props.title, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, placeholderUrl = props.placeholderUrl, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, onError = props.onError, children = props.children;
     var propsGenerator = useDevicePropsGenerator(props);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
     var _a = useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
@@ -19,7 +20,7 @@ function Image(props) {
     }, [onError, placeholderUrl]);
     return (jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass &&
             "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass &&
-                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, onError: onErrorImage, alt: alt || title, style: imageStyles }), overlay, caption, children] }), after] }));
-}
+                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, alt: alt || title, style: imageStyles, onError: onErrorImage }), overlay, caption, children] }), after] }));
+});
 
 export { Image as I };

package/dist/{Label_cjs_BGJfyrOL.js → Label_cjs_CKR9noZi.js}

@@ -6,7 +6,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('./Tooltip_cjs_CiY50iRK.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 var labelAppearanceAccent = {

package/dist/{Label_es_C4Px7b-N.js → Label_es_Cz9OKQAr.js}

@@ -4,7 +4,7 @@ import { useRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from './Tooltip_es_ltCY-w4M.js';
+import { I as Icon, T as Tooltip } from './Tooltip_es_Cc2orRUE.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 var labelAppearanceAccent = {

package/dist/{Tooltip_cjs_DHduWa-v.js → Tooltip_cjs_CiY50iRK.js}

@@ -8,6 +8,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 var SVG = require('react-inlinesvg');
+var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
 var Link = require('./Link_cjs_DbRGq2Yk.js');
 
 var badgeAppearanceAccent = {
@@ -616,7 +617,7 @@ var iconConfig = {
         iconConfig.appearance = appearanceConfig;
     },
 };
-var Icon = React.forwardRef(function Icon(props, ref) {
+var Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
     // TODO: Tooltip doesn't work that anymore
     // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
     var id = props.id, className = props.className, appearance = props.appearance, width = props.width, height = props.height, isDisabled = props.isDisabled, badgeClass = props.badgeClass, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, before = props.before, after = props.after, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
@@ -650,15 +651,17 @@ var Icon = React.forwardRef(function Icon(props, ref) {
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isActive
+            : fillActiveHoverClass &&
+                "fill_active_hover_".concat(fillActiveHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isActive
             ? iconFillClass && "icon_fill_".concat(iconFillClass)
             : iconFillActiveClass && "icon_fill_active_".concat(iconFillActiveClass), !isActive
             ? iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass)
             : iconFillActiveHoverClass &&
                 "icon_fill_active_hover_".concat(iconFillActiveHoverClass), isDisabled &&
             iconFillDisabledClass &&
-            "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && cursorClass && "cursor_".concat(cursorClass), isSkeleton && "icon_skeleton"), "data-tour": dataTour, ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, badgeValue && (jsxRuntime.jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
-});
+            "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
+            "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && cursorClass && "cursor_".concat(cursorClass), isSkeleton && "icon_skeleton"), "data-tour": dataTour, ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, badgeValue && (jsxRuntime.jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+}));
 var removeFillStroke = function (code) {
     return code
         .replace(/fill=".*?"/g, 'fill=""')

package/dist/{Tooltip_es_ltCY-w4M.js → Tooltip_es_Cc2orRUE.js}

@@ -6,6 +6,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 import SVG from 'react-inlinesvg';
+import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
 import { a as LinkWrapper } from './Link_es_DxtZLeKY.js';
 
 var badgeAppearanceAccent = {
@@ -614,7 +615,7 @@ var iconConfig = {
         iconConfig.appearance = appearanceConfig;
     },
 };
-var Icon = React.forwardRef(function Icon(props, ref) {
+var Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
     // TODO: Tooltip doesn't work that anymore
     // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
     var id = props.id, className = props.className, appearance = props.appearance, width = props.width, height = props.height, isDisabled = props.isDisabled, badgeClass = props.badgeClass, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, before = props.before, after = props.after, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
@@ -648,15 +649,17 @@ var Icon = React.forwardRef(function Icon(props, ref) {
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isActive
+            : fillActiveHoverClass &&
+                "fill_active_hover_".concat(fillActiveHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isActive
             ? iconFillClass && "icon_fill_".concat(iconFillClass)
             : iconFillActiveClass && "icon_fill_active_".concat(iconFillActiveClass), !isActive
             ? iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass)
             : iconFillActiveHoverClass &&
                 "icon_fill_active_hover_".concat(iconFillActiveHoverClass), isDisabled &&
             iconFillDisabledClass &&
-            "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && cursorClass && "cursor_".concat(cursorClass), isSkeleton && "icon_skeleton"), "data-tour": dataTour, ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, badgeValue && (jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
-});
+            "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
+            "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && cursorClass && "cursor_".concat(cursorClass), isSkeleton && "icon_skeleton"), "data-tour": dataTour, ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, badgeValue && (jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+}));
 var removeFillStroke = function (code) {
     return code
         .replace(/fill=".*?"/g, 'fill=""')

package/dist/cjs/components/Accordion.js

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var castArray = require('lodash/castArray');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('../../Tooltip_cjs_CiY50iRK.js');
 var Divider = require('../../Divider_cjs_BmCJj3TN.js');
 var Text = require('../../Text_cjs_C9fOm0nd.js');
 var _default = require('@itcase/icons/default');
@@ -23,6 +23,8 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_DbRGq2Yk.js');
 
 var accordionAppearanceSize = {

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_nMPCDjk8.js');
+var Avatar = require('../../Avatar_cjs_mqB6k6yB.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -16,14 +16,16 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('../../Tooltip_cjs_DHduWa-v.js');
+require('../../Tooltip_cjs_CiY50iRK.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_DbRGq2Yk.js');
-require('../../Image_cjs_CCWqbNn4.js');
+require('../../Image_cjs_2zEjohYE.js');
 
 
 

package/dist/cjs/components/AvatarStack.js

@@ -5,7 +5,7 @@ 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 Avatar = require('../../Avatar_cjs_nMPCDjk8.js');
+var Avatar = require('../../Avatar_cjs_mqB6k6yB.js');
 var Group = require('../../Group_cjs_Cwt0gWk4.js');
 var Text = require('../../Text_cjs_C9fOm0nd.js');
 require('react');
@@ -21,10 +21,12 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Tooltip_cjs_DHduWa-v.js');
+require('../../Tooltip_cjs_CiY50iRK.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_DbRGq2Yk.js');
-require('../../Image_cjs_CCWqbNn4.js');
+require('../../Image_cjs_2zEjohYE.js');
 
 var avatarStackAppearanceSize = {
     size16: {

package/dist/cjs/components/Badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('../../Tooltip_cjs_CiY50iRK.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -21,6 +21,8 @@ require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_DbRGq2Yk.js');
 
 

package/dist/cjs/components/Breadcrumbs.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
-var Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('../../Tooltip_cjs_CiY50iRK.js');
 var Link = require('../../Link_cjs_DbRGq2Yk.js');
 var Text = require('../../Text_cjs_C9fOm0nd.js');
 var _default = require('@itcase/icons/default');
@@ -23,6 +23,8 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 
 var breadcrumbsAppearanceAccent = {
     accentPrimary: {

package/dist/cjs/components/Button.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var Button = require('../../Button_cjs_plv5-qcj.js');
+var Button = require('../../Button_cjs_CwduBuCx.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
-require('../../Tooltip_cjs_DHduWa-v.js');
+require('../../Tooltip_cjs_CiY50iRK.js');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -22,6 +22,8 @@ require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_DbRGq2Yk.js');
 require('../../Loader_cjs_Ca4i0sER.js');
 

package/dist/cjs/components/Cell.js

@@ -5,8 +5,8 @@ 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 Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
-var Label = require('../../Label_cjs_BGJfyrOL.js');
+var Tooltip = require('../../Tooltip_cjs_CiY50iRK.js');
+var Label = require('../../Label_cjs_CKR9noZi.js');
 var Text = require('../../Text_cjs_C9fOm0nd.js');
 require('react');
 require('lodash/camelCase');
@@ -22,6 +22,8 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_DbRGq2Yk.js');
 
 var cellAppearanceSize = {

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_DrOhD-Fc.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_Dq-QQCR_.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
@@ -19,9 +19,11 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Tooltip_cjs_DHduWa-v.js');
+require('../../Tooltip_cjs_CiY50iRK.js');
 require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_DbRGq2Yk.js');
 
 

package/dist/cjs/components/Choice.js

@@ -6,7 +6,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Tooltip = require('../../Tooltip_cjs_DHduWa-v.js');
+var Tooltip = require('../../Tooltip_cjs_CiY50iRK.js');
 var Loader = require('../../Loader_cjs_Ca4i0sER.js');
 var Text = require('../../Text_cjs_C9fOm0nd.js');
 require('lodash/camelCase');
@@ -22,6 +22,8 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
 require('../../Link_cjs_DbRGq2Yk.js');
 
 var choiceAppearanceDefault = {