@itcase/ui 1.3.2 → 1.3.3

package/dist/cjs/components/Modal.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var ReactDOM = require('react-dom');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Overlay = require('../../Overlay-HlYxCGtp.js');
+var Overlay = require('../../Overlay-CCx7yAPc.js');
 var Loader = require('../../Loader-Dn036JwE.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');

package/dist/cjs/components/Overlay.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Overlay = require('../../Overlay-HlYxCGtp.js');
+var Overlay = require('../../Overlay-CCx7yAPc.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClassGenerator.js');
@@ -19,3 +19,5 @@ require('../hooks/styleAttributes.js');
 
 
 exports.Overlay = Overlay.Overlay;
+exports.overlayAppearance = Overlay.overlayAppearance;
+exports.overlayConfig = Overlay.overlayConfig;

package/dist/cjs/components/Pagination.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var DropdownItem = require('../../DropdownItem-DaN20LFe.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var DropdownItem = require('../../DropdownItem-DXz1l415.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
@@ -20,7 +20,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Divider-Goh6mpPK.js');
-require('../../Link-DGj-cNje.js');
+require('../../Link-C2dn5VUy.js');
 require('react-inlinesvg');
 require('../../Tooltip-CNua1g76.js');
 require('../../Title-DBaHcpvB.js');

package/dist/cjs/components/Response.js

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-P0c3lMg1.js');
+var Button = require('../../Button-DHQeSUSA.js');
 var Group = require('../../Group-D6CXN4hS.js');
 var Text = require('../../Text-Beslj4Ns.js');
 var Title = require('../../Title-DBaHcpvB.js');
@@ -19,8 +19,8 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-hqYZoh4h.js');
-require('../../Link-DGj-cNje.js');
+require('../../Icon-3VtRLW-J.js');
+require('../../Link-C2dn5VUy.js');
 require('../../Tooltip-CNua1g76.js');
 require('../../Loader-Dn036JwE.js');
 

package/dist/cjs/components/Search.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 var Text = require('../../Text-Beslj4Ns.js');
 var Scrollbar = require('../../Scrollbar-CKbA0jQU.js');
 require('../../tslib.es6-CCZ3TN_7.js');
@@ -18,7 +18,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('react-inlinesvg');
-require('../../Link-DGj-cNje.js');
+require('../../Link-C2dn5VUy.js');
 require('../../Tooltip-CNua1g76.js');
 require('../../Title-DBaHcpvB.js');
 require('react-scrollbars-custom');

package/dist/cjs/components/Select.js

@@ -3,7 +3,7 @@
 var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Select = require('react-select');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
@@ -21,7 +21,7 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/styleAttributes.js');
-require('../../Link-DGj-cNje.js');
+require('../../Link-C2dn5VUy.js');
 require('../../Tooltip-CNua1g76.js');
 require('../../Title-DBaHcpvB.js');
 require('lodash/castArray');

package/dist/cjs/components/SiteMenu.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var UIContext = require('../context/UIContext.js');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 var Text = require('../../Text-Beslj4Ns.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
@@ -17,7 +17,7 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-DGj-cNje.js');
+require('../../Link-C2dn5VUy.js');
 require('../../Tooltip-CNua1g76.js');
 require('../../Title-DBaHcpvB.js');
 

package/dist/cjs/components/Tab.js

@@ -7,7 +7,7 @@ var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenera
 var useStyles = require('../hooks/useStyles.js');
 var Badge = require('../../Badge-B9tt2YPa.js');
 var Divider = require('../../Divider-Goh6mpPK.js');
-var Link = require('../../Link-DGj-cNje.js');
+var Link = require('../../Link-C2dn5VUy.js');
 var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');

package/dist/components/Accordion.js

@@ -7,7 +7,7 @@ import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGene
 import { useStyles } from '../hooks/useStyles.js';
 import { icon16 } from '@itcase/icons/default';
 import { D as Divider } from '../Divider-DBvDCUqP.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -17,12 +17,25 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';
 
+var accordionAppearance = {
+    dev: {},
+};
+var accordionItemAppearance = {
+    dev: {},
+};
+
+var accordionItemConfig = {
+    appearance: accordionItemAppearance,
+    setAppearance: function (newComponent) {
+        accordionItemConfig.appearance = newComponent;
+    },
+};
 function AccordionItem(props) {
-    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
+    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, appearance = props.appearance, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
     var onClickTitle = useCallback(function () {
         // "!isExpanded" - is next state of expanded
         var thisItemData = {
@@ -33,7 +46,9 @@ function AccordionItem(props) {
         };
         onClick && onClick(thisItemData);
     }, [id, title, content, isExpanded, onClick]);
-    var classGenerator = useDeviceTargetClassGenerator(props);
+    // @ts-expect-error
+    var appearanceConfig = accordionItemConfig.appearance && accordionItemConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var borderColorClass = classGenerator.borderColorClass, contentBorderColorClass = classGenerator.contentBorderColorClass, contentFillClass = classGenerator.contentFillClass, contentFillHoverClass = classGenerator.contentFillHoverClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, titleBorderColorClass = classGenerator.titleBorderColorClass, titleFillClass = classGenerator.titleFillClass, titleFillHoverClass = classGenerator.titleFillHoverClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;
@@ -41,8 +56,14 @@ function AccordionItem(props) {
                     (content && (jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
 }
 
+var accordionConfig = {
+    appearance: accordionAppearance,
+    setAppearance: function (newComponent) {
+        accordionConfig.appearance = newComponent;
+    },
+};
 function Accordion(props) {
-    var children = props.children, isMultiple = props.isMultiple, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, onClickItem = props.onClickItem;
+    var children = props.children, isMultiple = props.isMultiple, appearance = props.appearance, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, onClickItem = props.onClickItem;
     var _b = useState(function () { return castArray(initial); }), expandedItems = _b[0], setExpandedItems = _b[1];
     var onClickAccordionItem = useCallback(function (targetItem) {
         setExpandedItems(function (prevState) {
@@ -88,7 +109,9 @@ function Accordion(props) {
         }
         return [];
     }, [children, items, expandedItems, onClickAccordionItem]);
-    var classGenerator = useDeviceTargetClassGenerator(props);
+    // @ts-expect-error
+    var appearanceConfig = accordionConfig.appearance && accordionConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var borderColorClass = classGenerator.borderColorClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     /*
      * paddingHorizontalWrapper="16px"
@@ -100,4 +123,4 @@ function Accordion(props) {
     return (jsx("div", { className: clsx(className, 'accordion', borderColorClass && "border-color_".concat(borderColorClass), directionClass && "accordion_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), shapeClass && "accordion_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass)), style: accordionStyles, children: jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
 }
 
-export { Accordion, AccordionItem };
+export { Accordion, AccordionItem, accordionAppearance, accordionConfig, accordionItemAppearance, accordionItemConfig };

package/dist/components/Avatar.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import { I as Image } from '../Image-Dx4AWHLO.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import '../tslib.es6-5FtW-kfi.js';
@@ -16,7 +16,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';
 

package/dist/components/Breadcrumbs.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import camelCase from 'lodash/camelCase';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
-import { a as LinkWrapper } from '../Link-_A9ZfNln.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
+import { a as LinkWrapper } from '../Link-CPzqprR1.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import 'lodash/castArray';
 import '../context/UIContext.js';

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button-CX3x7Z6Q.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button-BVQet4JC.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -13,9 +13,9 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-CZrDqG76.js';
+import '../Icon-C9FlOMr9.js';
 import 'react-inlinesvg';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Text-JayJa3hj.js';
 import '../Title-CHgrIarR.js';

package/dist/components/Cell.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import { L as Label } from '../Label-DQyB2ThM.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import '../tslib.es6-5FtW-kfi.js';
@@ -16,17 +16,29 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'react-inlinesvg';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';
 
+var cellAppearance = {
+    dev: {},
+};
+
+var cellConfig = {
+    appearance: cellAppearance,
+    setAppearance: function (newComponent) {
+        cellConfig.appearance = newComponent;
+    },
+};
 function Cell(props) {
-    var isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, after = props.after, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, titleLabelTextSize = props.titleLabelTextSize, titleTag = props.titleTag, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, valueLabelTextSize = props.valueLabelTextSize, valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, valueTextSize = props.valueTextSize, valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    var classGenerator = useDeviceTargetClassGenerator(props);
+    var isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, after = props.after, appearance = props.appearance, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, titleLabelTextSize = props.titleLabelTextSize, titleTag = props.titleTag, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, valueLabelTextSize = props.valueLabelTextSize, valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, valueTextSize = props.valueTextSize, valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    // @ts-expect-error
+    var appearanceConfig = cellConfig.appearance && cellConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var bgFillActiveClass = classGenerator.bgFillActiveClass, bgFillClass = classGenerator.bgFillClass, bgFillDisabledClass = classGenerator.bgFillDisabledClass, bgFillHoverClass = classGenerator.bgFillHoverClass, bgShapeClass = classGenerator.bgShapeClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var cellStyles = useStyles(props).styles;
     return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && "width_".concat(widthClass), gapClass && "gap_".concat(gapClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
 }
 
-export { Cell };
+export { Cell, cellAppearance, cellConfig };

package/dist/components/Choice.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import { L as Loader } from '../Loader-K_DJmah6.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import '../tslib.es6-5FtW-kfi.js';
@@ -16,7 +16,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';
 

package/dist/components/CookiesWarning.js

@@ -3,7 +3,7 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { B as Button } from '../Button-CX3x7Z6Q.js';
+import { B as Button } from '../Button-BVQet4JC.js';
 import { G as Group } from '../Group-B9L2NTgM.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import '../tslib.es6-5FtW-kfi.js';
@@ -16,9 +16,9 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-CZrDqG76.js';
+import '../Icon-C9FlOMr9.js';
 import 'react-inlinesvg';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';
 import '../Loader-K_DJmah6.js';

package/dist/components/DatePicker.js

@@ -6,8 +6,8 @@ import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-CX3x7Z6Q.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { B as Button } from '../Button-BVQet4JC.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import { I as Input } from '../Input-BrV5_NoV.js';
 import { L as Label } from '../Label-DQyB2ThM.js';
 import { T as Text } from '../Text-JayJa3hj.js';
@@ -19,7 +19,7 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Loader-K_DJmah6.js';
 import 'react-inlinesvg';
 import '../Tooltip-1Jbub0K6.js';

package/dist/components/Drawer.js

@@ -1,12 +1,33 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import ReactDrawer from 'react-modern-drawer';
+import '../tslib.es6-5FtW-kfi.js';
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
 
+var drawerAppearance = {
+    dev: {},
+};
+
+var drawerConfig = {
+    appearance: drawerAppearance,
+    setAppearance: function (newComponent) {
+        drawerConfig.appearance = newComponent;
+    },
+};
 function Drawer(props) {
-    var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, closeModal = props.closeModal, dataTour = props.dataTour, enableOverlay = props.enableOverlay, size = props.size, type = props.type;
+    var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeModal = props.closeModal, dataTour = props.dataTour, enableOverlay = props.enableOverlay, size = props.size, type = props.type;
+    // @ts-expect-error
+    var appearanceConfig = drawerConfig.appearance && drawerConfig.appearance[appearance];
+    useDeviceTargetClassGenerator(props, appearanceConfig);
     return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), direction: direction || 'right', enableOverlay: enableOverlay, lockBackgroundScroll: false, 
         // @ts-expect-error
         open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, onClose: closeModal, children: [before && jsx("div", { className: "drawer__before", children: before }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
-export { Drawer };
+export { Drawer, drawerAppearance, drawerConfig };

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-BuMJdUAk.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-DxGxdjUr.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -14,5 +14,5 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Divider-DBvDCUqP.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Text-JayJa3hj.js';

package/dist/components/Icon.js

@@ -1,4 +1,4 @@
-export { I as Icon, a as iconAppearance, i as iconConfig } from '../Icon-CZrDqG76.js';
+export { I as Icon, a as iconAppearance, i as iconConfig } from '../Icon-C9FlOMr9.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -14,7 +14,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Text-JayJa3hj.js';
 import '../Title-CHgrIarR.js';

package/dist/components/InputPassword.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,7 +14,7 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Text-JayJa3hj.js';
 import '../Title-CHgrIarR.js';

package/dist/components/Link.js

@@ -1,4 +1,4 @@
-export { L as Link, a as LinkWrapper, l as linkConfig } from '../Link-_A9ZfNln.js';
+export { L as Link, a as LinkWrapper, l as linkConfig } from '../Link-CPzqprR1.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -13,3 +13,9 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+var linkAppearance = {
+    dev: {},
+};
+
+export { linkAppearance };

package/dist/components/List.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { L as Link } from '../Link-_A9ZfNln.js';
+import { L as Link } from '../Link-CPzqprR1.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';

package/dist/components/Logo.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { a as LinkWrapper } from '../Link-_A9ZfNln.js';
+import { a as LinkWrapper } from '../Link-CPzqprR1.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';

package/dist/components/Menu.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { M as MenuItem } from '../MenuItem-Dokk3UXj.js';
+import { M as MenuItem } from '../MenuItem-Cw2Lry6S.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
@@ -13,12 +13,24 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Text-JayJa3hj.js';
 
+var menuAppearance = {
+    dev: {},
+};
+
+var menuConfig = {
+    appearance: menuAppearance,
+    setAppearance: function (newComponent) {
+        menuConfig.appearance = newComponent;
+    },
+};
 function Menu(props) {
-    var children = props.children, after = props.after, before = props.before, className = props.className, items = props.items, type = props.type, onClickItem = props.onClickItem;
-    var classGenerator = useDeviceTargetClassGenerator(props);
+    var children = props.children, after = props.after, appearance = props.appearance, before = props.before, className = props.className, items = props.items, type = props.type, onClickItem = props.onClickItem;
+    // @ts-expect-error
+    var appearanceConfig = menuConfig.appearance && menuConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var columnsClass = classGenerator.columnsClass, directionClass = classGenerator.directionClass, flexGrowClass = classGenerator.flexGrowClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var menuStyles = useStyles(props).styles;
@@ -29,4 +41,4 @@ Menu.defaultProps = {
     direction: 'horizontal',
 };
 
-export { Menu };
+export { Menu, menuAppearance, menuConfig };

package/dist/components/MenuItem.js

@@ -1,4 +1,4 @@
-export { M as MenuItem, a as menuItemAppearance, m as menuItemConfig } from '../MenuItem-Dokk3UXj.js';
+export { M as MenuItem, a as menuItemAppearance, m as menuItemConfig } from '../MenuItem-Cw2Lry6S.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -13,5 +13,5 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import '../Text-JayJa3hj.js';

package/dist/components/Modal.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import ReactDOM from 'react-dom';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { O as Overlay } from '../Overlay-Dy6JQwJn.js';
+import { O as Overlay } from '../Overlay-DcGWchjp.js';
 import { L as Loader } from '../Loader-K_DJmah6.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';

package/dist/components/Overlay.js

@@ -1,4 +1,4 @@
-export { O as Overlay } from '../Overlay-Dy6JQwJn.js';
+export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay-DcGWchjp.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';

package/dist/components/Pagination.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-BuMJdUAk.js';
-import { I as Icon } from '../Icon-CZrDqG76.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-DxGxdjUr.js';
+import { I as Icon } from '../Icon-C9FlOMr9.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
@@ -18,7 +18,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Divider-DBvDCUqP.js';
-import '../Link-_A9ZfNln.js';
+import '../Link-CPzqprR1.js';
 import 'react-inlinesvg';
 import '../Tooltip-1Jbub0K6.js';
 import '../Title-CHgrIarR.js';

package/dist/components/Response.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-CX3x7Z6Q.js';
+import { B as Button } from '../Button-BVQet4JC.js';
 import { G as Group } from '../Group-B9L2NTgM.js';
 import { T as Text } from '../Text-JayJa3hj.js';
 import { T as Title } from '../Title-CHgrIarR.js';
@@ -17,8 +17,8 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-CZrDqG76.js';
-import '../Link-_A9ZfNln.js';
+import '../Icon-C9FlOMr9.js';
+import '../Link-CPzqprR1.js';
 import '../Tooltip-1Jbub0K6.js';
 import '../Loader-K_DJmah6.js';