@itcase/ui 1.3.1 → 1.3.3

package/dist/{Button-CX3x7Z6Q.js → Button-BVQet4JC.js}

@@ -3,8 +3,8 @@ import React from 'react';
 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 { a as LinkWrapper } from './Link-_A9ZfNln.js';
+import { I as Icon } from './Icon-C9FlOMr9.js';
+import { a as LinkWrapper } from './Link-CPzqprR1.js';
 import { L as Loader } from './Loader-K_DJmah6.js';
 import { T as Text } from './Text-JayJa3hj.js';
 

package/dist/{Button-P0c3lMg1.js → Button-DHQeSUSA.js}

@@ -5,8 +5,8 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Icon = require('./Icon-hqYZoh4h.js');
-var Link = require('./Link-DGj-cNje.js');
+var Icon = require('./Icon-3VtRLW-J.js');
+var Link = require('./Link-C2dn5VUy.js');
 var Loader = require('./Loader-Dn036JwE.js');
 var Text = require('./Text-Beslj4Ns.js');
 

package/dist/{DropdownItem-DaN20LFe.js → DropdownItem-DXz1l415.js}

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles.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');
 
 function Dropdown(props) {

package/dist/{DropdownItem-BuMJdUAk.js → DropdownItem-DxGxdjUr.js}

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from './hooks/useStyles.js';
 import { D as Divider } from './Divider-DBvDCUqP.js';
-import { L as Link } from './Link-_A9ZfNln.js';
+import { L as Link } from './Link-CPzqprR1.js';
 import { T as Text } from './Text-JayJa3hj.js';
 
 function Dropdown(props) {

package/dist/{Icon-hqYZoh4h.js → Icon-3VtRLW-J.js}

@@ -7,7 +7,7 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Link = require('./Link-DGj-cNje.js');
+var Link = require('./Link-C2dn5VUy.js');
 var Tooltip = require('./Tooltip-CNua1g76.js');
 
 var iconAppearance = {

package/dist/{Icon-CZrDqG76.js → Icon-C9FlOMr9.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 { a as LinkWrapper } from './Link-_A9ZfNln.js';
+import { a as LinkWrapper } from './Link-CPzqprR1.js';
 import { T as Tooltip } from './Tooltip-1Jbub0K6.js';
 
 var iconAppearance = {

package/dist/{Link-DGj-cNje.js → Link-C2dn5VUy.js}

@@ -13,9 +13,17 @@ var linkConfig = {
         linkConfig.LinkComponent = newComponent;
     },
 };
+// const linkConfig: iLinkConfig = {
+//   appearance: linkAppearance,
+//   setAppearance: (newComponent) => {
+//     linkConfig.appearance = newComponent
+//   },
+// }
 function Link(props) {
     var children = props.children, after = props.after, before = props.before, className = props.className, href = props.href, link = props.link, LinkComponent = props.LinkComponent, rel = props.rel, style = props.style, target = props.target, text = props.text, _a = props.underline, underline = _a === void 0 ? 'underline' : _a, onClick = props.onClick, onMouseDown = props.onMouseDown;
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    // @ts-expect-error
+    var appearanceConfig = linkConfig.appearance && linkConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, heightClass = classGenerator.heightClass, sizeClass = classGenerator.sizeClass, svgFillClass = classGenerator.svgFillClass, svgFillHoverClass = classGenerator.svgFillHoverClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, textGradientClass = classGenerator.textGradientClass, textStyleClass = classGenerator.textStyleClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;

package/dist/{Link-_A9ZfNln.js → Link-CPzqprR1.js}

@@ -11,9 +11,17 @@ var linkConfig = {
         linkConfig.LinkComponent = newComponent;
     },
 };
+// const linkConfig: iLinkConfig = {
+//   appearance: linkAppearance,
+//   setAppearance: (newComponent) => {
+//     linkConfig.appearance = newComponent
+//   },
+// }
 function Link(props) {
     var children = props.children, after = props.after, before = props.before, className = props.className, href = props.href, link = props.link, LinkComponent = props.LinkComponent, rel = props.rel, style = props.style, target = props.target, text = props.text, _a = props.underline, underline = _a === void 0 ? 'underline' : _a, onClick = props.onClick, onMouseDown = props.onMouseDown;
-    var classGenerator = useDeviceTargetClassGenerator(props);
+    // @ts-expect-error
+    var appearanceConfig = linkConfig.appearance && linkConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, heightClass = classGenerator.heightClass, sizeClass = classGenerator.sizeClass, svgFillClass = classGenerator.svgFillClass, svgFillHoverClass = classGenerator.svgFillHoverClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, textGradientClass = classGenerator.textGradientClass, textStyleClass = classGenerator.textStyleClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;

package/dist/{MenuItem-Dokk3UXj.js → MenuItem-Cw2Lry6S.js}

@@ -3,7 +3,7 @@ import React from 'react';
 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 { T as Text } from './Text-JayJa3hj.js';
 
 var menuItemAppearance = {

package/dist/{MenuItem-LyqjzhjP.js → MenuItem-DEzP_HLq.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Link = require('./Link-DGj-cNje.js');
+var Link = require('./Link-C2dn5VUy.js');
 var Text = require('./Text-Beslj4Ns.js');
 
 var menuItemAppearance = {

package/dist/{Overlay-HlYxCGtp.js → Overlay-CCx7yAPc.js}

@@ -5,9 +5,21 @@ var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 
+var overlayAppearance = {
+    dev: {},
+};
+
+var overlayConfig = {
+    appearance: overlayAppearance,
+    setAppearance: function (newComponent) {
+        overlayConfig.appearance = newComponent;
+    },
+};
 function Overlay(props) {
-    var isOverlay = props.isOverlay, className = props.className, type = props.type, onClick = props.onClick;
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var isOverlay = props.isOverlay, appearance = props.appearance, className = props.className, type = props.type, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = overlayConfig.appearance && overlayConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, opacityClass = classGenerator.opacityClass;
     // @ts-expect-error
     var overlayStyles = useStyles.useStyles(props).styles;
@@ -15,3 +27,5 @@ function Overlay(props) {
 }
 
 exports.Overlay = Overlay;
+exports.overlayAppearance = overlayAppearance;
+exports.overlayConfig = overlayConfig;

package/dist/{Overlay-Dy6JQwJn.js → Overlay-DcGWchjp.js}

@@ -3,13 +3,25 @@ import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from './hooks/useStyles.js';
 
+var overlayAppearance = {
+    dev: {},
+};
+
+var overlayConfig = {
+    appearance: overlayAppearance,
+    setAppearance: function (newComponent) {
+        overlayConfig.appearance = newComponent;
+    },
+};
 function Overlay(props) {
-    var isOverlay = props.isOverlay, className = props.className, type = props.type, onClick = props.onClick;
-    var classGenerator = useDeviceTargetClassGenerator(props);
+    var isOverlay = props.isOverlay, appearance = props.appearance, className = props.className, type = props.type, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = overlayConfig.appearance && overlayConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, opacityClass = classGenerator.opacityClass;
     // @ts-expect-error
     var overlayStyles = useStyles(props).styles;
     return (jsx("div", { className: clsx(className, 'overlay', opacityClass && "opacity_".concat(opacityClass), isOverlay && 'overlay_state_visible', type && "".concat(className, "_type_").concat(type), fillClass && "fill_".concat(fillClass), fillGradientClass && "fill-gradient_".concat(fillGradientClass)), style: overlayStyles, onClick: onClick, children: "\u00A0" }));
 }
 
-export { Overlay as O };
+export { Overlay as O, overlayAppearance as a, overlayConfig as o };

package/dist/cjs/components/Accordion.js

@@ -9,7 +9,7 @@ var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenera
 var useStyles = require('../hooks/useStyles.js');
 var _default = require('@itcase/icons/default');
 var Divider = require('../../Divider-Goh6mpPK.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 var Text = require('../../Text-Beslj4Ns.js');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -19,12 +19,25 @@ 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');
 
+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 = React.useCallback(function () {
         // "!isExpanded" - is next state of expanded
         var thisItemData = {
@@ -35,7 +48,9 @@ function AccordionItem(props) {
         };
         onClick && onClick(thisItemData);
     }, [id, title, content, isExpanded, onClick]);
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    // @ts-expect-error
+    var appearanceConfig = accordionItemConfig.appearance && accordionItemConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.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.useStyles(props).styles;
@@ -43,8 +58,14 @@ function AccordionItem(props) {
                     (content && (jsxRuntime.jsx(Text.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 = React.useState(function () { return castArray(initial); }), expandedItems = _b[0], setExpandedItems = _b[1];
     var onClickAccordionItem = React.useCallback(function (targetItem) {
         setExpandedItems(function (prevState) {
@@ -90,7 +111,9 @@ function Accordion(props) {
         }
         return [];
     }, [children, items, expandedItems, onClickAccordionItem]);
-    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    // @ts-expect-error
+    var appearanceConfig = accordionConfig.appearance && accordionConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var borderColorClass = classGenerator.borderColorClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     /*
      * paddingHorizontalWrapper="16px"
@@ -104,3 +127,7 @@ function Accordion(props) {
 
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
+exports.accordionAppearance = accordionAppearance;
+exports.accordionConfig = accordionConfig;
+exports.accordionItemAppearance = accordionItemAppearance;
+exports.accordionItemConfig = accordionItemConfig;

package/dist/cjs/components/Avatar.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 var Image = require('../../Image-6dFSePnG.js');
 var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
@@ -18,7 +18,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/Breadcrumbs.js

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var camelCase = require('lodash/camelCase');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
-var Link = require('../../Link-DGj-cNje.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
+var Link = require('../../Link-C2dn5VUy.js');
 var Text = require('../../Text-Beslj4Ns.js');
 require('lodash/castArray');
 require('../context/UIContext.js');

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button-P0c3lMg1.js');
+var Button = require('../../Button-DHQeSUSA.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -15,9 +15,9 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-hqYZoh4h.js');
+require('../../Icon-3VtRLW-J.js');
 require('react-inlinesvg');
-require('../../Link-DGj-cNje.js');
+require('../../Link-C2dn5VUy.js');
 require('../../Tooltip-CNua1g76.js');
 require('../../Text-Beslj4Ns.js');
 require('../../Title-DBaHcpvB.js');

package/dist/cjs/components/Cell.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 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 Label = require('../../Label-HKRKV3mn.js');
 var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
@@ -18,13 +18,25 @@ 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');
 
+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.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.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.useStyles(props).styles;
@@ -32,3 +44,5 @@ function Cell(props) {
 }
 
 exports.Cell = Cell;
+exports.cellAppearance = cellAppearance;
+exports.cellConfig = cellConfig;

package/dist/cjs/components/Choice.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 var Loader = require('../../Loader-Dn036JwE.js');
 var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
@@ -18,7 +18,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/CookiesWarning.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.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');
 require('../../tslib.es6-CCZ3TN_7.js');
@@ -18,9 +18,9 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-hqYZoh4h.js');
+require('../../Icon-3VtRLW-J.js');
 require('react-inlinesvg');
-require('../../Link-DGj-cNje.js');
+require('../../Link-C2dn5VUy.js');
 require('../../Tooltip-CNua1g76.js');
 require('../../Title-DBaHcpvB.js');
 require('../../Loader-Dn036JwE.js');

package/dist/cjs/components/DatePicker.js

@@ -8,8 +8,8 @@ var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-P0c3lMg1.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Button = require('../../Button-DHQeSUSA.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 var Input = require('../../Input-ffioh1sj.js');
 var Label = require('../../Label-HKRKV3mn.js');
 var Text = require('../../Text-Beslj4Ns.js');
@@ -21,7 +21,7 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-DGj-cNje.js');
+require('../../Link-C2dn5VUy.js');
 require('../../Loader-Dn036JwE.js');
 require('react-inlinesvg');
 require('../../Tooltip-CNua1g76.js');

package/dist/cjs/components/Drawer.js

@@ -2,13 +2,36 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var ReactDrawer = require('react-modern-drawer');
+require('../../tslib.es6-CCZ3TN_7.js');
+require('react');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('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.useDeviceTargetClassGenerator(props, appearanceConfig);
     return (jsxRuntime.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 && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 exports.Drawer = Drawer;
+exports.drawerAppearance = drawerAppearance;
+exports.drawerConfig = drawerConfig;

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem-DaN20LFe.js');
+var DropdownItem = require('../../DropdownItem-DXz1l415.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -16,7 +16,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('../../Text-Beslj4Ns.js');
 
 

package/dist/cjs/components/Icon.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -16,7 +16,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('../../Text-Beslj4Ns.js');
 require('../../Title-DBaHcpvB.js');

package/dist/cjs/components/InputPassword.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Icon = require('../../Icon-hqYZoh4h.js');
+var Icon = require('../../Icon-3VtRLW-J.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -16,7 +16,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('../../Text-Beslj4Ns.js');
 require('../../Title-DBaHcpvB.js');

package/dist/cjs/components/Link.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Link = require('../../Link-DGj-cNje.js');
+var Link = require('../../Link-C2dn5VUy.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -16,8 +16,11 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
-
+var linkAppearance = {
+    dev: {},
+};
 
 exports.Link = Link.Link;
 exports.LinkWrapper = Link.LinkWrapper;
 exports.linkConfig = Link.linkConfig;
+exports.linkAppearance = linkAppearance;

package/dist/cjs/components/List.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Link = require('../../Link-DGj-cNje.js');
+var Link = require('../../Link-C2dn5VUy.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');

package/dist/cjs/components/Logo.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Link = require('../../Link-DGj-cNje.js');
+var Link = require('../../Link-C2dn5VUy.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');

package/dist/cjs/components/Menu.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var MenuItem = require('../../MenuItem-LyqjzhjP.js');
+var MenuItem = require('../../MenuItem-DEzP_HLq.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
@@ -15,12 +15,24 @@ require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-DGj-cNje.js');
+require('../../Link-C2dn5VUy.js');
 require('../../Text-Beslj4Ns.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.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.useDeviceTargetClassGenerator(props, appearanceConfig);
     var columnsClass = classGenerator.columnsClass, directionClass = classGenerator.directionClass, flexGrowClass = classGenerator.flexGrowClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var menuStyles = useStyles.useStyles(props).styles;
@@ -32,3 +44,5 @@ Menu.defaultProps = {
 };
 
 exports.Menu = Menu;
+exports.menuAppearance = menuAppearance;
+exports.menuConfig = menuConfig;

package/dist/cjs/components/MenuItem.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var MenuItem = require('../../MenuItem-LyqjzhjP.js');
+var MenuItem = require('../../MenuItem-DEzP_HLq.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -15,7 +15,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('../../Text-Beslj4Ns.js');