@itcase/ui 1.2.34 → 1.3.0

package/dist/DropdownItem-B8IMNQww.js

@@ -1,182 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-import { D as Divider } from './Divider-DHIuQUsH.js';
-import { L as Link } from './Link-CeQuavin.js';
-import { T as Text } from './Text-C4Bg2Mv6.js';
-
-function Dropdown(props) {
-    var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
-    var dropdownRef = useRef(null);
-    // const [isOpen, setIsOpen] = useState(false)
-    var _d = useState({
-        className: '',
-    }), animationState = _d[0], setAnimationState = _d[1];
-    var onAnimationEnd = useCallback(function () {
-        // When component is change his visibility(display) in DOM,
-        // animation of close can run unnecessary on showing element.
-        // const dropdownElement = dropdownRef.current
-        setAnimationState(function (prevState) { return ({
-            className: isOpen ? prevState.className : '',
-        }); });
-    }, [isOpen]);
-    useEffect(function () {
-        if (animationOpen && animationClose) {
-            setAnimationState(function () { return ({
-                className: isOpen ? animationOpen : animationClose,
-            }); });
-        }
-    }, [isOpen]);
-    // Close dropdown by click outside
-    useEffect(function () {
-        // Add a handler to keep track of the click target.
-        function onClickWindow(event) {
-            var dropdownElement = dropdownRef.current;
-            if (dropdownElement && animationOpen) {
-                // Is event target inside of dropdown element
-                var isContainsTarget = dropdownElement.contains(event.target);
-                // Is dropdown element has "open" class
-                var hasOpenClass = dropdownElement.classList.contains(animationOpen);
-                if (!isContainsTarget && hasOpenClass) {
-                    // Trigger close event with animation
-                    // dropdownElement.click() - trigger "onClickWindow" again
-                    setIsOpen(false);
-                }
-            }
-        }
-        // Add event listener for current dropdown on first render
-        window.addEventListener('click', onClickWindow);
-        return function () {
-            // Remove event listener for current dropdown on unmount
-            window.removeEventListener('click', onClickWindow);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown_shape_',
-        propsKey: 'shape',
-    });
-    var elevationClass = useDeviceTargetClass(props, {
-        prefix: 'elevation_',
-        propsKey: 'elevation',
-    });
-    var alignmentClass = useDeviceTargetClass(props, {
-        prefix: 'alignment_',
-        propsKey: 'alignment',
-    });
-    // @ts-expect-error
-    var styles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass, set && "dropdown_set_".concat(set), shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsx("div", { className: clsx('dropdown__wrapper', fillClass, fillHoverClass), 
-                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: children })), after] }));
-}
-
-var dropdownItemAppearance = {
-    dev: {},
-};
-
-var dropdownItemConfig = {
-    appearance: dropdownItemAppearance,
-    setAppearance: function (newComponent) {
-        dropdownItemConfig.appearance = newComponent;
-    },
-};
-function DropdownItem(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, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, showDivider = props.showDivider, target = props.target, 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: 'dropdown__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',
-    });
-    useDeviceTargetClass(props, {
-        propsKey: 'linkFill',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_shape_',
-        propsKey: 'shape',
-    });
-    var justifyContentClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var typeClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_type_',
-        propsKey: 'type',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_width_',
-        propsKey: 'width',
-    });
-    // @ts-expect-error
-    var dropdownItem = useStyles(props).styles;
-    var appearanceConfig = appearance && dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance];
-    return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
-                "dropdown__item_direction_".concat(appearanceConfig.direction)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), className, fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
-                "dropdown__item_size_".concat(appearanceConfig.size)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), shapeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "dropdown__item_shape_".concat(appearanceConfig.shape)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), typeClass, widthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
-                "dropdown__item_width_".concat(appearanceConfig.width)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsx(Link, { className: clsx('dropdown__item-link', 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: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsx(Text, { className: "dropdown__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, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsx(Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize }))] }));
-}
-DropdownItem.defaultProps = {
-    width: 'fixed',
-    LinkComponent: 'a',
-    size: 'l',
-};
-
-export { Dropdown as D, DropdownItem as a, dropdownItemConfig as d };

package/dist/DropdownItem-E9HkOU63.js

@@ -1,186 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
-var useStyles = require('./cjs/hooks/useStyles.js');
-var Divider = require('./Divider-BoB-f9Gr.js');
-var Link = require('./Link-CqWzwh8V.js');
-var Text = require('./Text-R6XNq6Ca.js');
-
-function Dropdown(props) {
-    var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
-    var dropdownRef = React.useRef(null);
-    // const [isOpen, setIsOpen] = useState(false)
-    var _d = React.useState({
-        className: '',
-    }), animationState = _d[0], setAnimationState = _d[1];
-    var onAnimationEnd = React.useCallback(function () {
-        // When component is change his visibility(display) in DOM,
-        // animation of close can run unnecessary on showing element.
-        // const dropdownElement = dropdownRef.current
-        setAnimationState(function (prevState) { return ({
-            className: isOpen ? prevState.className : '',
-        }); });
-    }, [isOpen]);
-    React.useEffect(function () {
-        if (animationOpen && animationClose) {
-            setAnimationState(function () { return ({
-                className: isOpen ? animationOpen : animationClose,
-            }); });
-        }
-    }, [isOpen]);
-    // Close dropdown by click outside
-    React.useEffect(function () {
-        // Add a handler to keep track of the click target.
-        function onClickWindow(event) {
-            var dropdownElement = dropdownRef.current;
-            if (dropdownElement && animationOpen) {
-                // Is event target inside of dropdown element
-                var isContainsTarget = dropdownElement.contains(event.target);
-                // Is dropdown element has "open" class
-                var hasOpenClass = dropdownElement.classList.contains(animationOpen);
-                if (!isContainsTarget && hasOpenClass) {
-                    // Trigger close event with animation
-                    // dropdownElement.click() - trigger "onClickWindow" again
-                    setIsOpen(false);
-                }
-            }
-        }
-        // Add event listener for current dropdown on first render
-        window.addEventListener('click', onClickWindow);
-        return function () {
-            // Remove event listener for current dropdown on unmount
-            window.removeEventListener('click', onClickWindow);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dropdown_shape_',
-        propsKey: 'shape',
-    });
-    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'elevation_',
-        propsKey: 'elevation',
-    });
-    var alignmentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'alignment_',
-        propsKey: 'alignment',
-    });
-    // @ts-expect-error
-    var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass, set && "dropdown_set_".concat(set), shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsxRuntime.jsx("div", { className: clsx('dropdown__wrapper', fillClass, fillHoverClass), 
-                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: children })), after] }));
-}
-
-var dropdownItemAppearance = {
-    dev: {},
-};
-
-var dropdownItemConfig = {
-    appearance: dropdownItemAppearance,
-    setAppearance: function (newComponent) {
-        dropdownItemConfig.appearance = newComponent;
-    },
-};
-function DropdownItem(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, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, showDivider = props.showDivider, target = props.target, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_direction_',
-        propsKey: 'direction',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_active_hover_',
-        propsKey: 'fillActiveHover',
-    });
-    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    useDeviceTargetClass.useDeviceTargetClass(props, {
-        propsKey: 'linkFill',
-    });
-    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_size_',
-        propsKey: 'size',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_shape_',
-        propsKey: 'shape',
-    });
-    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_type_',
-        propsKey: 'type',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'dropdown__item_width_',
-        propsKey: 'width',
-    });
-    // @ts-expect-error
-    var dropdownItem = useStyles.useStyles(props).styles;
-    var appearanceConfig = appearance && dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance];
-    return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
-                "dropdown__item_direction_".concat(appearanceConfig.direction)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), className, fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
-                "dropdown__item_size_".concat(appearanceConfig.size)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), shapeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "dropdown__item_shape_".concat(appearanceConfig.shape)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), typeClass, widthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
-                "dropdown__item_width_".concat(appearanceConfig.width)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsx(Link.Link, { className: clsx('dropdown__item-link', 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: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__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, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize }))] }));
-}
-DropdownItem.defaultProps = {
-    width: 'fixed',
-    LinkComponent: 'a',
-    size: 'l',
-};
-
-exports.Dropdown = Dropdown;
-exports.DropdownItem = DropdownItem;
-exports.dropdownItemConfig = dropdownItemConfig;

package/dist/Group-BCvs5UxK.js

@@ -1,136 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.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;
-    var contentAlignClass = useDeviceTargetClass(props, {
-        prefix: 'group_content-align_',
-        propsKey: 'contentAlign',
-    });
-    var alignDirectionClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var justifyContentClass = useDeviceTargetClass(props, {
-        prefix: 'justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var stackingClass = useDeviceTargetClass(props, {
-        prefix: 'group_stacking_',
-        propsKey: 'stacking',
-    });
-    var directionClass = useDeviceTargetClass(props, {
-        prefix: 'group_direction_',
-        propsKey: 'direction',
-    });
-    var wrapClass = useDeviceTargetClass(props, {
-        prefix: 'group_wrap_',
-        propsKey: 'wrap',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'group_shape_',
-        propsKey: 'shape',
-    });
-    var columnsClass = useDeviceTargetClass(props, {
-        prefix: 'group_columns_',
-        propsKey: 'columns',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var growClass = useDeviceTargetClass(props, {
-        prefix: 'flex-grow_',
-        propsKey: 'flexGrow',
-    });
-    var elevationClass = useDeviceTargetClass(props, {
-        prefix: 'elevation_',
-        propsKey: 'elevation',
-    });
-    var textColorClass = useDeviceTargetClass(props, {
-        prefix: 'group_text-color_',
-        propsKey: 'textColor',
-    });
-    var textColorActiveClass = useDeviceTargetClass(props, {
-        prefix: 'group_text-color_active_',
-        propsKey: 'textColorActive',
-    });
-    var textColorHoverClass = useDeviceTargetClass(props, {
-        prefix: 'group_text-color_hover_',
-        propsKey: 'textColorHover',
-    });
-    var iconFillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'group_icon_fill_hover_',
-        propsKey: 'iconFillHover',
-    });
-    // @ts-expect-error
-    var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
-    // prettier-ignore
-    var appearanceConfig = (appearance && groupConfig.appearance && groupConfig.appearance[appearance]);
-    return (jsx(Tag, { className: clsx(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
-                "group_direction_".concat(appearanceConfig.direction)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), alignClass, textColorClass, textColorActiveClass, textColorHoverClass, iconFillHoverClass, fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderWidthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
-                "border-width_".concat(appearanceConfig.borderWidth)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, elevationClass, 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, groupConfig as g };

package/dist/Group-u6YDbMxn.js

@@ -1,139 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.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;
-    var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_content-align_',
-        propsKey: 'contentAlign',
-    });
-    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'alignDirection',
-    });
-    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'align_',
-        propsKey: 'align',
-    });
-    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'justify-content_',
-        propsKey: 'justifyContent',
-    });
-    var stackingClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_stacking_',
-        propsKey: 'stacking',
-    });
-    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_direction_',
-        propsKey: 'direction',
-    });
-    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_wrap_',
-        propsKey: 'wrap',
-    });
-    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_shape_',
-        propsKey: 'shape',
-    });
-    var columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_columns_',
-        propsKey: 'columns',
-    });
-    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'height_',
-        propsKey: 'height',
-    });
-    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'flex-grow_',
-        propsKey: 'flexGrow',
-    });
-    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'elevation_',
-        propsKey: 'elevation',
-    });
-    var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_text-color_',
-        propsKey: 'textColor',
-    });
-    var textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_text-color_active_',
-        propsKey: 'textColorActive',
-    });
-    var textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_text-color_hover_',
-        propsKey: 'textColorHover',
-    });
-    var iconFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'group_icon_fill_hover_',
-        propsKey: 'iconFillHover',
-    });
-    // @ts-expect-error
-    var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
-    // prettier-ignore
-    var appearanceConfig = (appearance && groupConfig.appearance && groupConfig.appearance[appearance]);
-    return (jsxRuntime.jsx(Tag, { className: clsx(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
-                "group_direction_".concat(appearanceConfig.direction)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), alignClass, textColorClass, textColorActiveClass, textColorHoverClass, iconFillHoverClass, fillClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderWidthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
-                "border-width_".concat(appearanceConfig.borderWidth)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, elevationClass, 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.groupConfig = groupConfig;