@itcase/ui 1.2.34 → 1.3.0

package/dist/Group-B9L2NTgM.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from './hooks/useStyles.js';
+
+var groupAppearance = {
+    dev: {
+        borderWidth: 1,
+        borderColor: 'surfaceBorderPrimary',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
+};
+
+var groupConfig = {
+    appearance: groupAppearance,
+    setAppearance: function (newComponent) {
+        groupConfig.appearance = newComponent;
+    },
+};
+var Group = React.forwardRef(function Group(props, ref) {
+    var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, columnsClass = classGenerator.columnsClass, contentAlignClass = classGenerator.contentAlignClass, directionClass = classGenerator.directionClass, elevationClass = classGenerator.elevationClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, flexGrowClass = classGenerator.flexGrowClass, heightClass = classGenerator.heightClass, iconFillHoverClass = classGenerator.iconFillHoverClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, stackingClass = classGenerator.stackingClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
+    // @ts-expect-error
+    var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
+    return (jsx(Tag, { className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass && "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+});
+
+export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/Group-D6CXN4hS.js

@@ -0,0 +1,38 @@
+'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 groupAppearance = {
+    dev: {
+        borderWidth: 1,
+        borderColor: 'surfaceBorderPrimary',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
+};
+
+var groupConfig = {
+    appearance: groupAppearance,
+    setAppearance: function (newComponent) {
+        groupConfig.appearance = newComponent;
+    },
+};
+var Group = React.forwardRef(function Group(props, ref) {
+    var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, columnsClass = classGenerator.columnsClass, contentAlignClass = classGenerator.contentAlignClass, directionClass = classGenerator.directionClass, elevationClass = classGenerator.elevationClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, flexGrowClass = classGenerator.flexGrowClass, heightClass = classGenerator.heightClass, iconFillHoverClass = classGenerator.iconFillHoverClass, justifyContentClass = classGenerator.justifyContentClass, shapeClass = classGenerator.shapeClass, stackingClass = classGenerator.stackingClass, textColorActiveClass = classGenerator.textColorActiveClass, textColorClass = classGenerator.textColorClass, textColorHoverClass = classGenerator.textColorHoverClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
+    // @ts-expect-error
+    var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
+    return (jsxRuntime.jsx(Tag, { className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass && "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+});
+
+exports.Group = Group;
+exports.groupAppearance = groupAppearance;
+exports.groupConfig = groupConfig;

package/dist/Icon-CZrDqG76.js

@@ -0,0 +1,61 @@
+import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+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 { T as Tooltip } from './Tooltip-1Jbub0K6.js';
+
+var iconAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        fillSize: 40,
+        iconFill: 'accentItemPrimary',
+        iconSize: 24,
+        imageSrc: 'img/filter.svg',
+    },
+};
+
+var iconConfig = {
+    appearance: iconAppearance,
+    setAppearance: function (newComponent) {
+        iconConfig.appearance = newComponent;
+    },
+};
+var Icon = React.forwardRef(function Icon(props, ref) {
+    // TODO: Tooltip doesn't work that anymore
+    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
+    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
+    var ImageComponent = useMemo(function () {
+        if (SvgImage) {
+            var sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return jsx(SvgImage, __assign({}, sizes));
+        }
+        if (imageSrc) {
+            if (imageSrc.endsWith('.svg')) {
+                return jsx(SVG, { preProcessor: removeFillStroke, src: imageSrc });
+            }
+            return jsx("img", { src: imageSrc });
+        }
+        return null;
+    }, [SvgImage, width, height, imageSrc]);
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var alignmentClass = classGenerator.alignmentClass, borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, cursorClass = classGenerator.cursorClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, fillSizeClass = classGenerator.fillSizeClass, iconFillClass = classGenerator.iconFillClass, iconFillDisabledClass = classGenerator.iconFillDisabledClass, iconFillHoverClass = classGenerator.iconFillHoverClass, iconSizeClass = classGenerator.iconSizeClass, shapeClass = classGenerator.shapeClass;
+    // @ts-expect-error
+    var iconStyles = useStyles(props).styles;
+    return (jsxs("div", { className: clsx(className, 'icon', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), iconFillClass && "icon_fill_".concat(iconFillClass), iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass), iconFillDisabledClass && "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), Badge && 'icon_type_with-badge', onClick && cursorClass && "cursor_".concat(cursorClass)), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
+});
+var removeFillStroke = function (code) {
+    return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
+};
+
+export { Icon as I, iconAppearance as a, iconConfig as i };

package/dist/Icon-hqYZoh4h.js

@@ -0,0 +1,65 @@
+'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 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 Tooltip = require('./Tooltip-CNua1g76.js');
+
+var iconAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        fillSize: 40,
+        iconFill: 'accentItemPrimary',
+        iconSize: 24,
+        imageSrc: 'img/filter.svg',
+    },
+};
+
+var iconConfig = {
+    appearance: iconAppearance,
+    setAppearance: function (newComponent) {
+        iconConfig.appearance = newComponent;
+    },
+};
+var Icon = React.forwardRef(function Icon(props, ref) {
+    // TODO: Tooltip doesn't work that anymore
+    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
+    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
+    var ImageComponent = React.useMemo(function () {
+        if (SvgImage) {
+            var sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return jsxRuntime.jsx(SvgImage, tslib_es6.__assign({}, sizes));
+        }
+        if (imageSrc) {
+            if (imageSrc.endsWith('.svg')) {
+                return jsxRuntime.jsx(SVG, { preProcessor: removeFillStroke, src: imageSrc });
+            }
+            return jsxRuntime.jsx("img", { src: imageSrc });
+        }
+        return null;
+    }, [SvgImage, width, height, imageSrc]);
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var alignmentClass = classGenerator.alignmentClass, borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, cursorClass = classGenerator.cursorClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, fillSizeClass = classGenerator.fillSizeClass, iconFillClass = classGenerator.iconFillClass, iconFillDisabledClass = classGenerator.iconFillDisabledClass, iconFillHoverClass = classGenerator.iconFillHoverClass, iconSizeClass = classGenerator.iconSizeClass, shapeClass = classGenerator.shapeClass;
+    // @ts-expect-error
+    var iconStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'icon', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), iconFillClass && "icon_fill_".concat(iconFillClass), iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass), iconFillDisabledClass && "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), Badge && 'icon_type_with-badge', onClick && cursorClass && "cursor_".concat(cursorClass)), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
+});
+var removeFillStroke = function (code) {
+    return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
+};
+
+exports.Icon = Icon;
+exports.iconAppearance = iconAppearance;
+exports.iconConfig = iconConfig;

package/dist/Image-6dFSePnG.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 Image(props) {
+    var children = props.children, after = props.after, alt = props.alt, before = props.before, caption = props.caption, className = props.className, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, src = props.src, title = props.title, type = props.type, onClick = props.onClick, onError = props.onError;
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, borderColorImageClass = classGenerator.borderColorImageClass, cursorClass = classGenerator.cursorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, heightClass = classGenerator.heightClass, horizontalAlignClass = classGenerator.horizontalAlignClass, imageHeightClass = classGenerator.imageHeightClass, imageWidthClass = classGenerator.imageWidthClass, resizeModeClass = classGenerator.resizeModeClass, shapeClass = classGenerator.shapeClass, verticalContentAlignClass = classGenerator.verticalContentAlignClass, widthClass = classGenerator.widthClass;
+    // @ts-expect-error
+    var _a = useStyles.useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass && "image_horizontal-align_".concat(horizontalAlignClass), verticalContentAlignClass && "image_vertical-align_".concat(verticalContentAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass)), style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass && "border-color-image_".concat(borderColorImageClass)), alt: alt, src: src, style: imageStyles, title: title, onError: onError }), overlay, caption, children] }), after] }));
+}
+
+exports.Image = Image;

package/dist/Image-Dx4AWHLO.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from './hooks/useStyles.js';
+
+function Image(props) {
+    var children = props.children, after = props.after, alt = props.alt, before = props.before, caption = props.caption, className = props.className, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, src = props.src, title = props.title, type = props.type, onClick = props.onClick, onError = props.onError;
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, borderColorImageClass = classGenerator.borderColorImageClass, cursorClass = classGenerator.cursorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, heightClass = classGenerator.heightClass, horizontalAlignClass = classGenerator.horizontalAlignClass, imageHeightClass = classGenerator.imageHeightClass, imageWidthClass = classGenerator.imageWidthClass, resizeModeClass = classGenerator.resizeModeClass, shapeClass = classGenerator.shapeClass, verticalContentAlignClass = classGenerator.verticalContentAlignClass, widthClass = classGenerator.widthClass;
+    // @ts-expect-error
+    var _a = useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
+    return (jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass && "image_horizontal-align_".concat(horizontalAlignClass), verticalContentAlignClass && "image_vertical-align_".concat(verticalContentAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass)), style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass && "border-color-image_".concat(borderColorImageClass)), alt: alt, src: src, style: imageStyles, title: title, onError: onError }), overlay, caption, children] }), after] }));
+}
+
+export { Image as I };

package/dist/Input-BrV5_NoV.js

@@ -0,0 +1,95 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+
+var inputAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+        textSize: 'm',
+    },
+};
+var inputState = {
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    disabled: {
+        borderColor: 'surfaceBorderDisabled',
+        borderColorHover: 'surfaceBorderDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    error: {
+        borderColor: 'errorBorderPrimary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    errorFilled: {
+        borderColor: 'errorBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    readonly: {
+        borderColor: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    require: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var inputConfig = {
+    appearance: inputAppearance,
+    setAppearance: function (newComponent) {
+        inputConfig.appearance = newComponent;
+    },
+    state: inputState,
+    // eslint-disable-next-line perfectionist/sort-objects
+    setState: function (newComponent) {
+        inputConfig.state = newComponent;
+    },
+};
+var Input = React.forwardRef(function Input(props, ref) {
+    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, autocomplete = props.autocomplete, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, _a = props.type, type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    // @ts-expect-error
+    var appearanceConfig = inputConfig.appearance && inputConfig.appearance[appearance];
+    // const stateConfig = state && inputConfig.state && inputConfig.state[state]
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var borderColorClass = classGenerator.borderColorClass, borderColorDisabledClass = classGenerator.borderColorDisabledClass, borderWidthClass = classGenerator.borderWidthClass, borderWidthDisabledClass = classGenerator.borderWidthDisabledClass, caretClass = classGenerator.caretClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, placeholderTextColorClass = classGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = classGenerator.placeholderTextColorDisabledClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, textColorClass = classGenerator.textColorClass, textColorDisabledClass = classGenerator.textColorDisabledClass, textSizeClass = classGenerator.textSizeClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass;
+    return (jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), !isDisabled
+            ? fillClass && "fill_".concat(fillClass)
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), !isDisabled
+            ? borderWidthClass && "border-width_".concat(borderWidthClass)
+            : borderWidthDisabledClass && "border-width_disabled_".concat(borderWidthDisabledClass), sizeClass && "input_size_".concat(sizeClass), textColorClass && "text-color_".concat(textColorClass), !isDisabled
+            ? borderColorClass && "border-color_".concat(borderColorClass)
+            : borderColorDisabledClass && "border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
+            ? placeholderTextColorClass && "placeholder-text-color_".concat(placeholderTextColorClass)
+            : placeholderTextColorDisabledClass &&
+                "placeholder-text-color_disabled_".concat(placeholderTextColorDisabledClass), !isDisabled
+            ? textColorClass && "text-color_".concat(textColorClass)
+            : textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), ref: ref, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
+        // @ts-ignore
+        index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+});
+
+export { Input as I, inputAppearance as a, inputState as b, inputConfig as i };

package/dist/Input-ffioh1sj.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClassGenerator = require('./cjs/hooks/useDeviceTargetClassGenerator.js');
+
+var inputAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+        textSize: 'm',
+    },
+};
+var inputState = {
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    disabled: {
+        borderColor: 'surfaceBorderDisabled',
+        borderColorHover: 'surfaceBorderDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    error: {
+        borderColor: 'errorBorderPrimary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    errorFilled: {
+        borderColor: 'errorBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    readonly: {
+        borderColor: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    require: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
+var inputConfig = {
+    appearance: inputAppearance,
+    setAppearance: function (newComponent) {
+        inputConfig.appearance = newComponent;
+    },
+    state: inputState,
+    // eslint-disable-next-line perfectionist/sort-objects
+    setState: function (newComponent) {
+        inputConfig.state = newComponent;
+    },
+};
+var Input = React.forwardRef(function Input(props, ref) {
+    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, autocomplete = props.autocomplete, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, _a = props.type, type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    // @ts-expect-error
+    var appearanceConfig = inputConfig.appearance && inputConfig.appearance[appearance];
+    // const stateConfig = state && inputConfig.state && inputConfig.state[state]
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var borderColorClass = classGenerator.borderColorClass, borderColorDisabledClass = classGenerator.borderColorDisabledClass, borderWidthClass = classGenerator.borderWidthClass, borderWidthDisabledClass = classGenerator.borderWidthDisabledClass, caretClass = classGenerator.caretClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, placeholderTextColorClass = classGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = classGenerator.placeholderTextColorDisabledClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass, textColorClass = classGenerator.textColorClass, textColorDisabledClass = classGenerator.textColorDisabledClass, textSizeClass = classGenerator.textSizeClass, textWeightClass = classGenerator.textWeightClass, widthClass = classGenerator.widthClass;
+    return (jsxRuntime.jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), !isDisabled
+            ? fillClass && "fill_".concat(fillClass)
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), !isDisabled
+            ? borderWidthClass && "border-width_".concat(borderWidthClass)
+            : borderWidthDisabledClass && "border-width_disabled_".concat(borderWidthDisabledClass), sizeClass && "input_size_".concat(sizeClass), textColorClass && "text-color_".concat(textColorClass), !isDisabled
+            ? borderColorClass && "border-color_".concat(borderColorClass)
+            : borderColorDisabledClass && "border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
+            ? placeholderTextColorClass && "placeholder-text-color_".concat(placeholderTextColorClass)
+            : placeholderTextColorDisabledClass &&
+                "placeholder-text-color_disabled_".concat(placeholderTextColorDisabledClass), !isDisabled
+            ? textColorClass && "text-color_".concat(textColorClass)
+            : textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), ref: ref, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
+        // @ts-ignore
+        index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+});
+
+exports.Input = Input;
+exports.inputAppearance = inputAppearance;
+exports.inputConfig = inputConfig;
+exports.inputState = inputState;

package/dist/Label-DQyB2ThM.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from './hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from './hooks/useStyles.js';
+import { T as Text } from './Text-JayJa3hj.js';
+import { T as Tooltip } from './Tooltip-1Jbub0K6.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 = useRef(null);
+    var onMouseEnterLabel = useCallback(function () {
+        var _a;
+        (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.openTooltip();
+    }, []);
+    var onMouseLeaveLabel = 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(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(props).styles;
+    return (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, jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsx(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) })) : (jsx("div", { className: "label__label", children: label })), children, showTooltip && (jsx(Tooltip, { className: "label__tooltip", ref: tooltipRef, alignment: tooltipAlignment, appearance: tooltipAppearance, arrowPosition: tooltipArrowPosition, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize, children: tooltipContent }))] }), after] }));
+}
+
+export { Label as L, labelAppearance as a, labelConfig as l };