@itcase/ui 1.2.34 → 1.3.0

package/dist/Label-HKRKV3mn.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+var Text = require('./Text-Beslj4Ns.js');
+var Tooltip = require('./Tooltip-CNua1g76.js');
+
+var labelAppearance = {
+    dev: {
+        fill: 'surfaceSecondary',
+        label: 'Label',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'm',
+        shape: 'rounded',
+        size: 'l',
+    },
+    accent: {
+        fill: 'accentPrimary',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+    },
+    accentTertiary: {
+        fill: 'accentTertiary',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        labelTextColor: 'primaryTextPrimary',
+        labelTextColorHover: 'primaryTextPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        labelTextColor: 'secondaryTextPrimary',
+        labelTextColorHover: 'secondaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        labelTextColor: 'surfaceTextInverse',
+        labelTextColorHover: 'surfaceTextInverse',
+    },
+    gradientPrimary: {
+        fill: 'gradientPrimary',
+        labelTextColor: 'surfaceTextInverse',
+        labelTextColorHover: 'surfaceTextInverse',
+        labelTextWeight: 600,
+    },
+};
+
+var labelConfig = {
+    appearance: labelAppearance,
+    setAppearance: function (newComponent) {
+        labelConfig.appearance = newComponent;
+    },
+};
+function Label(props) {
+    var children = props.children, cursor = props.cursor, after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTour = props.dataTour, _a = props.label, label = _a === void 0 ? 'Label' : _a, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, mode = props.mode, set = props.set, showTooltip = props.showTooltip, tooltipAlignment = props.tooltipAlignment, tooltipAppearance = props.tooltipAppearance, tooltipArrowPosition = props.tooltipArrowPosition, tooltipContent = props.tooltipContent, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, type = props.type, onClick = props.onClick;
+    var tooltipRef = React.useRef(null);
+    var onMouseEnterLabel = React.useCallback(function () {
+        var _a;
+        (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.openTooltip();
+    }, []);
+    var onMouseLeaveLabel = React.useCallback(function () {
+        var _a;
+        (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.closeTooltip();
+    }, []);
+    // @ts-expect-error
+    var appearanceConfig = labelConfig.appearance && labelConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
+    // @ts-expect-error
+    var labelStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'label', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "label_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "label_size_".concat(sizeClass), wrapClass && "'word-wrap_".concat(wrapClass), widthClass && "label_width_".concat(widthClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), type && "label_type_".concat(type), set && "label_set_".concat(set), mode && "label_mode_".concat(mode), onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, jsxRuntime.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "label__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWeight: labelTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextWeight), textWrap: labelTextWrap, children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })) : (jsxRuntime.jsx("div", { className: "label__label", children: label })), children, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: "label__tooltip", ref: tooltipRef, alignment: tooltipAlignment, appearance: tooltipAppearance, arrowPosition: tooltipArrowPosition, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize, children: tooltipContent }))] }), after] }));
+}
+
+exports.Label = Label;
+exports.labelAppearance = labelAppearance;
+exports.labelConfig = labelConfig;

package/dist/Link-DGj-cNje.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+
+var linkConfig = {
+    LinkComponent: 'a',
+    setLinkComponent: function (newComponent) {
+        linkConfig.LinkComponent = 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);
+    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;
+    return (jsxRuntime.jsxs(LinkWrapper, { className: clsx(className, 'link', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), directionClass && "link_direction_".concat(directionClass), sizeClass && "text_size_".concat(sizeClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), underline && "link_underline_".concat(underline), 'text', (textColorClass ||
+            textColorHoverClass ||
+            textGradientClass ||
+            textStyleClass ||
+            textWeightClass) &&
+            'text', textColorClass && "text-color_".concat(textColorClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), textGradientClass && "text-gradient_".concat(textGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), fillClass && "fill_".concat(fillClass)), Component: LinkComponent, href: href || link, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, children: [before, children || text, after] }));
+}
+// Wrapper with "Link" by condition
+function LinkWrapper(props) {
+    var children = props.children, Component = props.Component, DefaultComponent = props.DefaultComponent, href = props.href, rel = props.rel, target = props.target, otherProps = tslib_es6.__rest(props, ["children", "Component", "DefaultComponent", "href", "rel", "target"]);
+    if (href) {
+        // If href passed, make link-wrapper
+        var LinkComponent = Component || linkConfig.LinkComponent;
+        if (LinkComponent) {
+            return (jsxRuntime.jsx(LinkComponent, tslib_es6.__assign({ href: href, rel: rel, target: target }, otherProps, { children: children })));
+        }
+    }
+    else if (DefaultComponent) {
+        // If has default "Component" - render it
+        return jsxRuntime.jsx(DefaultComponent, tslib_es6.__assign({}, otherProps, { children: children }));
+    }
+    // Return children and pass current props to
+    return React.Children.toArray(children)
+        .filter(Boolean)
+        .map(function (child) {
+        return React.isValidElement(child) ? React.cloneElement(child, otherProps) : child;
+    });
+}
+
+exports.Link = Link;
+exports.LinkWrapper = LinkWrapper;
+exports.linkConfig = linkConfig;

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

@@ -2,7 +2,7 @@ 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';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from './hooks/useStyles.js';
 
 var linkConfig = {
@@ -13,62 +13,16 @@ var linkConfig = {
 };
 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 directionClass = useDeviceTargetClass(props, {
-        prefix: 'link_direction_',
-        propsKey: 'direction',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'text_size_',
-        propsKey: 'size',
-    });
-    var textColorClass = useDeviceTargetClass(props, {
-        prefix: 'text-color_',
-        propsKey: 'textColor',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var svgFillClass = useDeviceTargetClass(props, {
-        prefix: 'svg_fill_',
-        propsKey: 'svgFill',
-    });
-    var svgFillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'svg_fill_hover_',
-        propsKey: 'svgFillHover',
-    });
-    var weightClass = useDeviceTargetClass(props, {
-        prefix: 'text-weight_',
-        propsKey: 'textWeight',
-    });
-    var textColorHoverClass = useDeviceTargetClass(props, {
-        prefix: 'text-color_hover_',
-        propsKey: 'textColorHover',
-    });
-    var textStyleClass = useDeviceTargetClass(props, {
-        prefix: 'text-style_',
-        propsKey: 'textColorHover',
-    });
-    var textGradientClass = useDeviceTargetClass(props, {
-        prefix: 'text-gradient_',
-        propsKey: 'textGradient',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    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;
-    return (jsxs(LinkWrapper, { className: clsx(className, 'link', widthClass, heightClass, directionClass, sizeClass, svgFillClass, svgFillHoverClass, underline && "link_underline_".concat(underline), 'text', (textColorClass ||
+    return (jsxs(LinkWrapper, { className: clsx(className, 'link', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), directionClass && "link_direction_".concat(directionClass), sizeClass && "text_size_".concat(sizeClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), underline && "link_underline_".concat(underline), 'text', (textColorClass ||
             textColorHoverClass ||
             textGradientClass ||
             textStyleClass ||
-            weightClass) &&
-            'text', textColorClass, textColorHoverClass, textGradientClass, textStyleClass, weightClass, fillClass), Component: LinkComponent, href: href || link, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, children: [before, children || text, after] }));
+            textWeightClass) &&
+            'text', textColorClass && "text-color_".concat(textColorClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), textGradientClass && "text-gradient_".concat(textGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), fillClass && "fill_".concat(fillClass)), Component: LinkComponent, href: href || link, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, children: [before, children || text, after] }));
 }
 // Wrapper with "Link" by condition
 function LinkWrapper(props) {

package/dist/Loader-Dn036JwE.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+var Text = require('./Text-Beslj4Ns.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 children = props.children, appearance = props.appearance, className = props.className, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize;
+    // @ts-expect-error
+    var appearanceConfig = loaderConfig.appearance && loaderConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var fillClass = classGenerator.fillClass, heightClass = classGenerator.heightClass, itemFillClass = classGenerator.itemFillClass, positionClass = classGenerator.positionClass, widthClass = classGenerator.widthClass;
+    // @ts-expect-error
+    var loader = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { className: clsx('loader', positionClass && "position_".concat(positionClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), 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 && "fill_".concat(itemFillClass)) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) })] })), 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.loaderAppearance = loaderAppearance;
+exports.loaderConfig = loaderConfig;

package/dist/Loader-K_DJmah6.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from './hooks/useStyles.js';
+import { T as Text } from './Text-JayJa3hj.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 children = props.children, appearance = props.appearance, className = props.className, set = props.set, text = props.text, textColor = props.textColor, textSize = props.textSize;
+    // @ts-expect-error
+    var appearanceConfig = loaderConfig.appearance && loaderConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var fillClass = classGenerator.fillClass, heightClass = classGenerator.heightClass, itemFillClass = classGenerator.itemFillClass, positionClass = classGenerator.positionClass, widthClass = classGenerator.widthClass;
+    // @ts-expect-error
+    var loader = useStyles(props).styles;
+    return (jsxs("div", { className: clsx('loader', positionClass && "position_".concat(positionClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), className, set && "loader_set_".concat(set)), style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) })] })), 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, loaderAppearance as a, loaderConfig as l };

package/dist/MenuItem-Dokk3UXj.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { T as Text } from './Text-JayJa3hj.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;
+    // @ts-expect-error
+    var appearanceConfig = menuItemConfig.appearance && menuItemConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillActiveHoverClass = classGenerator.fillActiveHoverClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass;
+    // @ts-expect-error
+    var menuItem = useStyles(props).styles;
+    return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "menu-item_shape_".concat(shapeClass), typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), set && "menu-item_set_".concat(set), justifyContentClass && "menu-item_justify-content_".concat(justifyContentClass)), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('menu-item__label', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(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, menuItemAppearance as a, menuItemConfig as m };

package/dist/MenuItem-LyqjzhjP.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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 Text = require('./Text-Beslj4Ns.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;
+    // @ts-expect-error
+    var appearanceConfig = menuItemConfig.appearance && menuItemConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillActiveHoverClass = classGenerator.fillActiveHoverClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass;
+    // @ts-expect-error
+    var menuItem = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isHover && 'menu-item_state_hover', directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "menu-item_shape_".concat(shapeClass), typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), set && "menu-item_set_".concat(set), justifyContentClass && "menu-item_justify-content_".concat(justifyContentClass)), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('menu-item__label', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(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',
+    LinkComponent: 'a',
+    size: 'm',
+};
+
+exports.MenuItem = MenuItem;
+exports.menuItemAppearance = menuItemAppearance;
+exports.menuItemConfig = menuItemConfig;

package/dist/Overlay-Dy6JQwJn.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from './hooks/useStyles.js';
+
+function Overlay(props) {
+    var isOverlay = props.isOverlay, className = props.className, type = props.type, onClick = props.onClick;
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    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 };

package/dist/Overlay-HlYxCGtp.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+
+function Overlay(props) {
+    var isOverlay = props.isOverlay, className = props.className, type = props.type, onClick = props.onClick;
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, opacityClass = classGenerator.opacityClass;
+    // @ts-expect-error
+    var overlayStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.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" }));
+}
+
+exports.Overlay = Overlay;

package/dist/Text-Beslj4Ns.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+
+var textAppearance = {
+    dev: {
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var textConfig = {
+    appearance: textAppearance,
+    setAppearance: function (newComponent) {
+        textConfig.appearance = newComponent;
+    },
+};
+function Text(props) {
+    var children = props.children, cursor = props.cursor, after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, mode = props.mode, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, type = props.type, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
+    // @ts-expect-error
+    var appearanceConfig = textConfig.appearance && textConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var cursorClass = classGenerator.cursorClass, sizeClass = classGenerator.sizeClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, textColorGradientClass = classGenerator.textColorGradientClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, textWrapClass = classGenerator.textWrapClass, widthClass = classGenerator.widthClass;
+    // @ts-expect-error
+    var textStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'text', sizeClass && "text_size_".concat(sizeClass), textWeightClass && "text-weight_".concat(textWeightClass), textAlignClass && "text-align_".concat(textAlignClass), textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWrapClass && "word-wrap_".concat(textWrapClass), textTruncateClass && "text-truncate_".concat(textTruncateClass), type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass && "width_".concat(widthClass), cursorClass && "cursor_".concat(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] }));
+}
+
+exports.Text = Text;
+exports.textAppearance = textAppearance;
+exports.textConfig = textConfig;

package/dist/Text-JayJa3hj.js

@@ -0,0 +1,30 @@
+import { jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from './hooks/useStyles.js';
+
+var textAppearance = {
+    dev: {
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var textConfig = {
+    appearance: textAppearance,
+    setAppearance: function (newComponent) {
+        textConfig.appearance = newComponent;
+    },
+};
+function Text(props) {
+    var children = props.children, cursor = props.cursor, after = props.after, appearance = props.appearance, before = props.before, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, mode = props.mode, _a = props.tag, Tag = _a === void 0 ? 'span' : _a, type = props.type, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
+    // @ts-expect-error
+    var appearanceConfig = textConfig.appearance && textConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var cursorClass = classGenerator.cursorClass, sizeClass = classGenerator.sizeClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, textColorGradientClass = classGenerator.textColorGradientClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, textWrapClass = classGenerator.textWrapClass, widthClass = classGenerator.widthClass;
+    // @ts-expect-error
+    var textStyles = useStyles(props).styles;
+    return (jsxs(Tag, { className: clsx(className, 'text', sizeClass && "text_size_".concat(sizeClass), textWeightClass && "text-weight_".concat(textWeightClass), textAlignClass && "text-align_".concat(textAlignClass), textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWrapClass && "word-wrap_".concat(textWrapClass), textTruncateClass && "text-truncate_".concat(textTruncateClass), type && "text_type_".concat(type), mode && "text_mode_".concat(mode), widthClass && "width_".concat(widthClass), cursorClass && "cursor_".concat(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] }));
+}
+
+export { Text as T, textAppearance as a, textConfig as t };

package/dist/Title-CHgrIarR.js

@@ -0,0 +1,48 @@
+import { jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useUserDeviceContext } from './context/UIContext.js';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from './hooks/useStyles.js';
+
+var titleAppearance = {
+    dev: {
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var titleConfig = {
+    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, _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;
+    // @ts-expect-error
+    var appearanceConfig = titleConfig.appearance && titleConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, heightClass = classGenerator.heightClass, svgFillClass = classGenerator.svgFillClass, svgFillHoverClass = classGenerator.svgFillHoverClass, textAlignClass = classGenerator.textAlignClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorGradientClass = classGenerator.textColorGradientClass, textColorHoverClass = classGenerator.textColorHoverClass, textStyleClass = classGenerator.textStyleClass, textTruncateClass = classGenerator.textTruncateClass, textWeightClass = classGenerator.textWeightClass, typeClass = classGenerator.typeClass, widthClass = classGenerator.widthClass, wrapperDirectionClass = classGenerator.wrapperDirectionClass;
+    // @ts-expect-error
+    var _d = useStyles(props), titleStyles = _d.styles, titleWrapperStyles = _d.wrapper;
+    // Element type (h1, h2, ..., h6)
+    var Tag = useMemo(function () {
+        if (tag) {
+            return tag;
+        }
+        if (isMobile && sizeMobile) {
+            return sizeMobile;
+        }
+        if (isTablet && sizeTablet) {
+            return sizeTablet;
+        }
+        if (isDesktop && sizeDesktop) {
+            return sizeDesktop;
+        }
+        return size ? size : 'span';
+    }, [isMobile, isTablet, isDesktop]);
+    return (jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), mode && "title_mode_".concat(mode), directionClass && "title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title-direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+}
+
+export { Title as T, titleAppearance as a, titleConfig as t };