@itcase/ui 1.2.30 → 1.2.32

package/dist/{Link-CzC1kU5C.js → Link-CeQuavin.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.js';
+import { a as __rest, _ as __assign } from './tslib.es6-5FtW-kfi.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';

package/dist/Loader-DHNcD09o.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { T as Text } from './Text-C4Bg2Mv6.js';
+
+var loaderAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        itemFill: 'accentItemPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        itemFill: 'primaryItemPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        itemFill: 'secondaryItemPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        itemFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        itemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        itemFill: 'surfaceItemPrimary',
+    },
+};
+
+// TODO: is better to use context?
+var loaderConfig = {
+    appearance: loaderAppearance,
+    setAppearance: function (newComponent) {
+        loaderConfig.appearance = newComponent;
+    },
+};
+function Loader(props) {
+    var _a, _b, _c;
+    var children = props.children, appearance = props.appearance, className = props.className, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize;
+    var itemFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'itemFill',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var positionClass = useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var loader = useStyles(props).styles;
+    var appearanceConfig = appearance && loaderConfig.appearance && loaderConfig.appearance[appearance];
+    return (jsxs("div", { className: clsx('loader', positionClass, widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), heightClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.height) &&
+                "height_".concat(appearanceConfig.height).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), className, set && "loader_set_".concat(set)), style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', itemFillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
+                                "fill_".concat((_a = appearanceConfig.itemFill) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1')).toLowerCase())) }), jsx("span", { className: clsx('loader__item', itemFillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
+                                "fill_".concat((_b = appearanceConfig.itemFill) === null || _b === void 0 ? void 0 : _b.replace(/([A-Z])/g, '-$1')).toLowerCase())) }), jsx("span", { className: clsx('loader__item', itemFillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
+                                "fill_".concat((_c = appearanceConfig.itemFill) === null || _c === void 0 ? void 0 : _c.replace(/([A-Z])/g, '-$1')).toLowerCase())) })] })), text && (jsx(Text, { className: "loader__text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text }))] }));
+}
+
+export { Loader as L, loaderConfig as l };

package/dist/Loader-DReoCdZ2.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+var Text = require('./Text-R6XNq6Ca.js');
+
+var loaderAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        itemFill: 'accentItemPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        itemFill: 'primaryItemPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        itemFill: 'secondaryItemPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        itemFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        itemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        itemFill: 'surfaceItemPrimary',
+    },
+};
+
+// TODO: is better to use context?
+var loaderConfig = {
+    appearance: loaderAppearance,
+    setAppearance: function (newComponent) {
+        loaderConfig.appearance = newComponent;
+    },
+};
+function Loader(props) {
+    var _a, _b, _c;
+    var children = props.children, appearance = props.appearance, className = props.className, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize;
+    var itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'itemFill',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var loader = useStyles.useStyles(props).styles;
+    var appearanceConfig = appearance && loaderConfig.appearance && loaderConfig.appearance[appearance];
+    return (jsxRuntime.jsxs("div", { className: clsx('loader', positionClass, widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), heightClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.height) &&
+                "height_".concat(appearanceConfig.height).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), className, set && "loader_set_".concat(set)), style: loader, children: [children || (jsxRuntime.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
+                                "fill_".concat((_a = appearanceConfig.itemFill) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1')).toLowerCase())) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
+                                "fill_".concat((_b = appearanceConfig.itemFill) === null || _b === void 0 ? void 0 : _b.replace(/([A-Z])/g, '-$1')).toLowerCase())) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
+                                "fill_".concat((_c = appearanceConfig.itemFill) === null || _c === void 0 ? void 0 : _c.replace(/([A-Z])/g, '-$1')).toLowerCase())) })] })), text && (jsxRuntime.jsx(Text.Text, { className: "loader__text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text }))] }));
+}
+
+exports.Loader = Loader;
+exports.loaderConfig = loaderConfig;

package/dist/{MenuItem-BJ3uGKCH.js → MenuItem-BXogEsbS.js}

@@ -3,14 +3,22 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/MenuItem.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Text = require('./Text-CC0xnhmx.js');
+var Text = require('./Text-R6XNq6Ca.js');
+
+var menuItemAppearance = {
+    any: {
+        fill: 'surfacePrimary',
+        textColor: 'surfaceTextPrimary',
+        textColorActive: 'surfaceTextAccent',
+        textColorHover: 'surfaceTextAccent',
+    },
+};
 
 var menuItemConfig = {
-    appearance: index.menuItemAppearance,
+    appearance: menuItemAppearance,
     setAppearance: function (newComponent) {
         menuItemConfig.appearance = newComponent;
     },
@@ -72,8 +80,19 @@ function MenuItem(props) {
     // @ts-expect-error
     var menuItem = useStyles.useStyles(props).styles;
     var appearanceConfig = appearance && menuItemConfig.appearance && menuItemConfig.appearance[appearance];
-    return (jsxRuntime.jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass, className, sizeClass, fillClass ||
-            (appearance && "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('menu-item__label', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorGradient: textGradient, textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "menu-item__desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
+                "menu-item_direction_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), className, sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "menu-item_size_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "menu-item_shape_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), typeClass, widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('menu-item__label', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorGradient: textGradient, textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "menu-item__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColorHover), textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
 }
 MenuItem.defaultProps = {
     direction: 'horizontal',

package/dist/MenuItem-C7frDyBO.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { L as Link } from './Link-CeQuavin.js';
+import { T as Text } from './Text-C4Bg2Mv6.js';
+
+var menuItemAppearance = {
+    any: {
+        fill: 'surfacePrimary',
+        textColor: 'surfaceTextPrimary',
+        textColorActive: 'surfaceTextAccent',
+        textColorHover: 'surfaceTextAccent',
+    },
+};
+
+var menuItemConfig = {
+    appearance: menuItemAppearance,
+    setAppearance: function (newComponent) {
+        menuItemConfig.appearance = newComponent;
+    },
+};
+function MenuItem(props) {
+    var children = props.children, isActive = props.isActive, isHover = props.isHover, after = props.after, appearance = props.appearance, before = props.before, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, href = props.href, label = props.label, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, target = props.target, textColor = props.textColor, textColorActive = props.textColorActive, textColorHover = props.textColorHover, textGradient = props.textGradient, textSize = props.textSize, textStyle = props.textStyle, textWeight = props.textWeight, textWrap = props.textWrap, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'menu-item_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'menu-item_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'menu-item_shape_',
+        propsKey: 'shape',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'menu-item_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var typeClass = useDeviceTargetClass(props, {
+        prefix: 'menu-item_type_',
+        propsKey: 'type',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var menuItem = useStyles(props).styles;
+    var appearanceConfig = appearance && menuItemConfig.appearance && menuItemConfig.appearance[appearance];
+    return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
+                "menu-item_direction_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), className, sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "menu-item_size_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "menu-item_shape_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), typeClass, widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "menu-item_set_".concat(set), justifyContentClass), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('menu-item__label', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "menu-item__label", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textColorGradient: textGradient, textColorHover: textColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorHover), textStyle: textStyle, textWeight: textWeight, textWrap: textWrap, textColorActive: isActive && (textColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColorActive)), children: label })), desc && (jsx(Text, { className: "menu-item__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColorHover), textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }));
+}
+MenuItem.defaultProps = {
+    direction: 'horizontal',
+    LinkComponent: 'a',
+    size: 'm',
+};
+
+export { MenuItem as M, menuItemConfig as m };

package/dist/{Scrollbar-CrGXCZ_F.js → Scrollbar-Bo7z7ELm.js}

@@ -3,25 +3,22 @@ import clsx from 'clsx';
 import { Scrollbar as Scrollbar$1 } from 'react-scrollbars-custom';
 
 function Scrollbar(props) {
-    var children = props.children, className = props.className, scrollbarWidth = props.scrollbarWidth, scrollHeight = props.scrollHeight, onScroll = props.onScroll, noDefaultStyles = props.noDefaultStyles;
-    return (jsx(Scrollbar$1, { className: clsx('scrollbar', className), onScroll: onScroll, scrollbarWidth: scrollbarWidth, noDefaultStyles: noDefaultStyles, wrapperProps: {
-            className: 'scrollbar__wrapper',
+    var children = props.children, className = props.className, noDefaultStyles = props.noDefaultStyles, scrollbarWidth = props.scrollbarWidth, _a = props.scrollHeight, scrollHeight = _a === void 0 ? '200' : _a, onScroll = props.onScroll;
+    return (jsx(Scrollbar$1, { className: clsx('scrollbar', className), noDefaultStyles: noDefaultStyles, scrollbarWidth: scrollbarWidth, style: { height: scrollHeight + 'px' }, contentProps: {
+            className: 'scrollbar__scroll-content',
         }, scrollerProps: {
             className: 'scrollbar__scroll',
-        }, contentProps: {
-            className: 'scrollbar__scroll-content',
-        }, trackXProps: {
-            className: 'scrollbar__track-x',
-        }, trackYProps: {
-            className: 'scrollbar__track-y',
         }, thumbXProps: {
             className: 'scrollbar__track-x-item',
         }, thumbYProps: {
             className: 'scrollbar__track-y-item',
-        }, style: { height: scrollHeight + 'px' }, children: children }));
+        }, trackXProps: {
+            className: 'scrollbar__track-x',
+        }, trackYProps: {
+            className: 'scrollbar__track-y',
+        }, wrapperProps: {
+            className: 'scrollbar__wrapper',
+        }, onScroll: onScroll, children: children }));
 }
-Scrollbar.defaultProps = {
-    scrollHeight: '200',
-};
 
 export { Scrollbar as S };

package/dist/{Scrollbar-DVlIZzvz.js → Scrollbar-CKbA0jQU.js}

@@ -5,25 +5,22 @@ var clsx = require('clsx');
 var reactScrollbarsCustom = require('react-scrollbars-custom');
 
 function Scrollbar(props) {
-    var children = props.children, className = props.className, scrollbarWidth = props.scrollbarWidth, scrollHeight = props.scrollHeight, onScroll = props.onScroll, noDefaultStyles = props.noDefaultStyles;
-    return (jsxRuntime.jsx(reactScrollbarsCustom.Scrollbar, { className: clsx('scrollbar', className), onScroll: onScroll, scrollbarWidth: scrollbarWidth, noDefaultStyles: noDefaultStyles, wrapperProps: {
-            className: 'scrollbar__wrapper',
+    var children = props.children, className = props.className, noDefaultStyles = props.noDefaultStyles, scrollbarWidth = props.scrollbarWidth, _a = props.scrollHeight, scrollHeight = _a === void 0 ? '200' : _a, onScroll = props.onScroll;
+    return (jsxRuntime.jsx(reactScrollbarsCustom.Scrollbar, { className: clsx('scrollbar', className), noDefaultStyles: noDefaultStyles, scrollbarWidth: scrollbarWidth, style: { height: scrollHeight + 'px' }, contentProps: {
+            className: 'scrollbar__scroll-content',
         }, scrollerProps: {
             className: 'scrollbar__scroll',
-        }, contentProps: {
-            className: 'scrollbar__scroll-content',
-        }, trackXProps: {
-            className: 'scrollbar__track-x',
-        }, trackYProps: {
-            className: 'scrollbar__track-y',
         }, thumbXProps: {
             className: 'scrollbar__track-x-item',
         }, thumbYProps: {
             className: 'scrollbar__track-y-item',
-        }, style: { height: scrollHeight + 'px' }, children: children }));
+        }, trackXProps: {
+            className: 'scrollbar__track-x',
+        }, trackYProps: {
+            className: 'scrollbar__track-y',
+        }, wrapperProps: {
+            className: 'scrollbar__wrapper',
+        }, onScroll: onScroll, children: children }));
 }
-Scrollbar.defaultProps = {
-    scrollHeight: '200',
-};
 
 exports.Scrollbar = Scrollbar;

package/dist/{Text-kxGZButz.js → Text-C4Bg2Mv6.js}

@@ -1,9 +1,15 @@
 import { jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { textAppearance } from './appearance/Text.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 
+var textAppearance = {
+    dev: {
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
 var textConfig = {
     appearance: textAppearance,
     setAppearance: function (newComponent) {
@@ -67,10 +73,9 @@ function Text(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
                 "text_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, textAlignClass, textColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textWrapClass, textTruncateClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textWrapClass, textTruncateClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), cursorClass, onClick && (cursor || 'cursor_type_pointer')), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
 }
-Text.defaultProps = {
-    tag: 'span',
-};
 
 export { Text as T, textConfig as t };

package/dist/{Text-CC0xnhmx.js → Text-R6XNq6Ca.js}

@@ -2,12 +2,18 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Text.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 
+var textAppearance = {
+    dev: {
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
 var textConfig = {
-    appearance: index.textAppearance,
+    appearance: textAppearance,
     setAppearance: function (newComponent) {
         textConfig.appearance = newComponent;
     },
@@ -69,11 +75,10 @@ function Text(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
                 "text_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, textAlignClass, textColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textWrapClass, textTruncateClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textWrapClass, textTruncateClass, type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), cursorClass, onClick && (cursor || 'cursor_type_pointer')), "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: textStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
 }
-Text.defaultProps = {
-    tag: 'span',
-};
 
 exports.Text = Text;
 exports.textConfig = textConfig;

package/dist/{Title-Ze_OL1Co.js → Title-DWIc05TX.js}

@@ -3,20 +3,25 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Title.js');
 var UIContext = require('./cjs/context/UIContext.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
 
+var titleAppearance = {
+    dev: {
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
 var titleConfig = {
-    appearance: index.titleAppearance,
+    appearance: titleAppearance,
     setAppearance: function (newComponent) {
         titleConfig.appearance = newComponent;
     },
 };
 function Title(props) {
-    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, size = props.size, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _a = props.tag, tag = _a === void 0 ? 'span' : _a, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
-    var _b = UIContext.useUserDeviceContext(), isMobile = _b.isMobile, isTablet = _b.isTablet, isDesktop = _b.isDesktop;
+    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === void 0 ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
+    var _c = UIContext.useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
     var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'title_direction_',
         propsKey: 'direction',
@@ -82,7 +87,7 @@ function Title(props) {
         propsKey: 'height',
     });
     // @ts-expect-error
-    var _c = useStyles.useStyles(props), titleStyles = _c.styles, titleWrapperStyles = _c.wrapper;
+    var _d = useStyles.useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
     var appearanceConfig = appearance && titleConfig.appearance && titleConfig.appearance[appearance];
     // Element type (h1, h2, ..., h6)
     var Tag = React.useMemo(function () {
@@ -104,9 +109,6 @@ function Title(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
                 "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }
-Title.defaultProps = {
-    size: 'h3',
-};
 
 exports.Title = Title;
 exports.titleConfig = titleConfig;

package/dist/{Title-CQ_Fr1hO.js → Title-YVzIwk68.js}

@@ -1,11 +1,16 @@
 import { jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
-import { titleAppearance } from './appearance/Title.js';
 import { useUserDeviceContext } from './context/UIContext.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
 
+var titleAppearance = {
+    dev: {
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
 var titleConfig = {
     appearance: titleAppearance,
     setAppearance: function (newComponent) {
@@ -13,8 +18,8 @@ var titleConfig = {
     },
 };
 function Title(props) {
-    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, size = props.size, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _a = props.tag, tag = _a === void 0 ? 'span' : _a, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
-    var _b = useUserDeviceContext(), isMobile = _b.isMobile, isTablet = _b.isTablet, isDesktop = _b.isDesktop;
+    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === void 0 ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
+    var _c = useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
     var directionClass = useDeviceTargetClass(props, {
         prefix: 'title_direction_',
         propsKey: 'direction',
@@ -80,7 +85,7 @@ function Title(props) {
         propsKey: 'height',
     });
     // @ts-expect-error
-    var _c = useStyles(props), titleStyles = _c.styles, titleWrapperStyles = _c.wrapper;
+    var _d = useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
     var appearanceConfig = appearance && titleConfig.appearance && titleConfig.appearance[appearance];
     // Element type (h1, h2, ..., h6)
     var Tag = useMemo(function () {
@@ -102,8 +107,5 @@ function Title(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
                 "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass, directionWrapperClass, 'title__wrapper', textTruncateClass), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
 }
-Title.defaultProps = {
-    size: 'h3',
-};
 
 export { Title as T, titleConfig as t };