@salutejs/plasma-new-hope 0.335.0-canary.2194.17367251959.0 → 0.335.0-canary.2195.17430179093.0

package/emotion/es/components/Popup/Popup.js

@@ -101,15 +101,13 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { forwardRef, useRef } from "react";
 import { useForkRef } from "@salutejs/plasma-core";
-import Draggable from "react-draggable";
-import { Resizable } from "re-resizable";
 import { canUseDOM, cx, safeUseId } from "../../utils";
 import { Portal } from "../Portal";
-import { getRatioBasedOnPlacement, getResizeDirections, getHandleStyles } from "./utils";
+import { Draggable, Resizable } from "./ui";
 import { PopupRoot } from "./PopupRoot";
 import { usePopup } from "./hooks";
 import { classes } from "./Popup.tokens";
-import { StyledPortalContainer, base, IconResizeDiagonalStyled } from "./Popup.styles";
+import { StyledPortalContainer, base } from "./Popup.styles";
 export var handlePosition = function(placement, offset) {
     var x = '0rem';
     var y = '0rem';
@@ -190,12 +188,7 @@ export var handlePosition = function(placement, offset) {
             "draggable",
             "resizable"
         ]);
-        var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
-        var nodeRef = useRef(null);
         var innerIsOpen = isOpen || opened;
-        var resizable = typeof outerResizable === 'boolean' ? {
-            disabled: !outerResizable
-        } : outerResizable;
         var uniqId = safeUseId();
         var innerId = id || uniqId;
         var _usePopup = usePopup({
@@ -206,22 +199,11 @@ export var handlePosition = function(placement, offset) {
         }), isVisible = _usePopup.isVisible, animationInfo = _usePopup.animationInfo, setVisible = _usePopup.setVisible, rootId = _usePopup.rootId;
         var portalRef = useRef(null);
         var contentRef = useRef(null);
-        var resizableContainer = useRef(null);
         var innerRef = useForkRef(contentRef, outerRootRef);
         if (!isVisible && !innerIsOpen) {
             return null;
         }
         var cls = cx(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? classes.endTransition : '');
-        var handleResizeStart = function() {
-            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
-                resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
-            }
-        };
-        var handleResizeStop = function() {
-            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
-                resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
-            }
-        };
         var rootNode = /*#__PURE__*/ React.createElement(Root, {
             className: cls
         }, overlay, /*#__PURE__*/ React.createElement(PopupRoot, _object_spread({
@@ -233,50 +215,11 @@ export var handlePosition = function(placement, offset) {
             animationInfo: animationInfo,
             setVisible: setVisible
         }, rest), /*#__PURE__*/ React.createElement(Draggable, {
-            nodeRef: nodeRef,
-            defaultClassName: draggable ? classes.draggablePopupWrapper : undefined,
-            defaultClassNameDragging: draggable ? classes.draggingPopupWrapper : undefined,
-            disabled: !draggable,
-            cancel: ".".concat(classes.resizableHandleWrapper)
-        }, /*#__PURE__*/ React.createElement("div", {
-            ref: nodeRef
+            draggable: draggable
         }, /*#__PURE__*/ React.createElement(Resizable, {
-            ref: resizableContainer,
-            enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
-            resizeRatio: getRatioBasedOnPlacement(placement),
-            defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
-            minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
-            minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
-            maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
-            maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
-            onResizeStart: handleResizeStart,
-            onResizeStop: handleResizeStop,
-            handleComponent: {
-                topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
-                    className: classes.resizableTopRightIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                })),
-                bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
-                    className: classes.resizableBottomRightIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                })),
-                bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
-                    className: classes.resizableBottomLeftIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                })),
-                topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
-                    className: classes.resizableTopLeftIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                }))
-            },
-            className: classes.resizableContainer,
-            handleStyles: getHandleStyles(),
-            handleWrapperClass: classes.resizableHandleWrapper
-        }, children)))));
+            resizable: outerResizable,
+            placement: placement
+        }, children))));
         if (typeof frame !== 'string' && frame && frame.current && canUseDOM) {
             return /*#__PURE__*/ React.createElement(Portal, {
                 container: frame.current

package/emotion/es/components/Popup/ui/Draggable/Draggable.js

@@ -0,0 +1,19 @@
+import React, { useRef } from "react";
+import ReactDraggable from "react-draggable";
+import { classes } from "../../Popup.tokens";
+export var Draggable = function(param) {
+    var children = param.children, draggable = param.draggable;
+    var nodeRef = useRef(null);
+    if (!draggable) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+    }
+    return /*#__PURE__*/ React.createElement(ReactDraggable, {
+        nodeRef: nodeRef,
+        defaultClassName: draggable ? classes.draggablePopupWrapper : undefined,
+        defaultClassNameDragging: draggable ? classes.draggingPopupWrapper : undefined,
+        disabled: !draggable,
+        cancel: ".".concat(classes.resizableHandleWrapper)
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: nodeRef
+    }, children));
+};

package/emotion/es/components/Popup/ui/Resizable/Resizable.js

@@ -0,0 +1,63 @@
+import React, { useRef } from "react";
+import { Resizable as ReResizable } from "re-resizable";
+import { classes } from "../../Popup.tokens";
+import { getHandleStyles, getRatioBasedOnPlacement, getResizeDirections } from "../../utils";
+import { IconResizeDiagonalStyled } from "../../Popup.styles";
+export var Resizable = function(param) {
+    var children = param.children, outerResizable = param.resizable, placement = param.placement;
+    var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
+    var resizableContainer = useRef(null);
+    var resizable = typeof outerResizable === 'boolean' ? {
+        disabled: !outerResizable
+    } : outerResizable;
+    var handleResizeStart = function() {
+        if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+            resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+        }
+    };
+    var handleResizeStop = function() {
+        if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+            resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+        }
+    };
+    if (!resizable || resizable.disabled) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+    }
+    return /*#__PURE__*/ React.createElement(ReResizable, {
+        ref: resizableContainer,
+        enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
+        resizeRatio: getRatioBasedOnPlacement(placement),
+        defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
+        minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
+        minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
+        maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
+        maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
+        onResizeStart: handleResizeStart,
+        onResizeStop: handleResizeStop,
+        handleComponent: {
+            topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableTopRightIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableBottomRightIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableBottomLeftIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableTopLeftIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            }))
+        },
+        className: classes.resizableContainer,
+        handleStyles: getHandleStyles(),
+        handleWrapperClass: classes.resizableHandleWrapper
+    }, children);
+};

package/emotion/es/components/Popup/ui/index.js

@@ -0,0 +1,2 @@
+export { Draggable } from "./Draggable/Draggable";
+export { Resizable } from "./Resizable/Resizable";

package/emotion/es/components/Tabs/hooks/useTabItem.js

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useLayoutEffect } from "react";
+export var useTabItem = function(param) {
+    var refs = param.refs, innerRef = param.innerRef, itemIndex = param.itemIndex, selected = param.selected, orientation = param.orientation, disabled = param.disabled, onIndexChange = param.onIndexChange, onClick = param.onClick;
+    var hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
+    var navigationTabIndex = !disabled && (refs === null || refs === void 0 ? void 0 : refs.current) === itemIndex ? 0 : -1;
+    var onItemFocus = useCallback(function(event) {
+        if (disabled) {
+            return;
+        }
+        if (!hasKeyNavigation && (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
+            if (orientation === ' vertical') {
+                innerRef.current.scrollTo({
+                    top: innerRef.current.offsetTop,
+                    behavior: 'smooth'
+                });
+                return;
+            }
+            innerRef.current.scrollTo({
+                top: 0,
+                left: innerRef.current.offsetLeft,
+                behavior: 'smooth'
+            });
+            return;
+        }
+        if (!refs) {
+            return;
+        }
+        var focusIndex = refs.items.findIndex(function(itemRef) {
+            return itemRef.current === event.target;
+        });
+        if (focusIndex === refs.current) {
+            return;
+        }
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(focusIndex);
+        refs.setCurrent(focusIndex);
+    }, [
+        refs,
+        innerRef,
+        onIndexChange,
+        disabled
+    ]);
+    var handleClick = function(event) {
+        if (!onClick) {
+            return;
+        }
+        onClick(event);
+    };
+    useEffect(function() {
+        if (!refs) {
+            return;
+        }
+        refs.register(innerRef);
+        return function() {
+            return refs.unregister(innerRef);
+        };
+    }, [
+        refs
+    ]);
+    useLayoutEffect(function() {
+        var _innerRef_current_parentElement;
+        if (!selected || !innerRef.current) {
+            return;
+        }
+        var scrollEl = (_innerRef_current_parentElement = innerRef.current.parentElement) === null || _innerRef_current_parentElement === void 0 ? void 0 : _innerRef_current_parentElement.parentElement;
+        if (!scrollEl) {
+            return;
+        }
+        var scrollElStyle = getComputedStyle(scrollEl);
+        if (orientation === ' vertical') {
+            scrollEl.scrollTo({
+                top: innerRef.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10)
+            });
+            return;
+        }
+        scrollEl.scrollTo({
+            left: innerRef.current.offsetLeft - parseInt(scrollElStyle.paddingLeft, 10)
+        });
+    }, [
+        selected,
+        orientation
+    ]);
+    return {
+        hasKeyNavigation: hasKeyNavigation,
+        navigationTabIndex: navigationTabIndex,
+        onItemFocus: onItemFocus,
+        handleClick: handleClick
+    };
+};

package/emotion/es/components/Tabs/index.js

@@ -1,7 +1,9 @@
 export { horizontalTabsRoot, horizontalTabsConfig } from "./ui/horizontal/HorizontalTabs/HorizontalTabs";
 export { horizontalTabItemRoot, horizontalTabItemConfig } from "./ui/horizontal/HorizontalTabItem/HorizontalTabItem";
+export { horizontalIconTabItemRoot, horizontalIconTabItemConfig } from "./ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem";
 export { verticalTabsRoot, verticalTabsConfig } from "./ui/vertical/VerticalTabs/VerticalTabs";
 export { verticalTabItemRoot, verticalTabItemConfig } from "./ui/vertical/VerticalTabItem/VerticalTabItem";
+export { verticalIconTabItemRoot, verticalIconTabItemConfig } from "./ui/vertical/VerticalIconTabItem/VerticalIconTabItem";
 export { tokens as tabsTokens } from "./tokens";
 export { TabItemRefs, TabsContext } from "./TabsContext";
 export { createTabsController } from "./createTabsController";

package/emotion/es/components/Tabs/tokens.js

@@ -87,5 +87,6 @@ export var tokens = {
     valueFontStyle: '--plasma-tab-item-value-font-style',
     valueFontWeight: '--plasma-tab-item-value-font-weight',
     valueLetterSpacing: '--plasma-tab-item-value-letter-spacing',
-    valueLineHeight: '--plasma-tab-item-value-lineheight'
+    valueLineHeight: '--plasma-tab-item-value-lineheight',
+    actionContentMarginLeft: '--plasma-tab-item-action-content-margin-left'
 };

package/emotion/es/components/Tabs/ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem.js

@@ -0,0 +1,134 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import React, { forwardRef, useRef, useContext } from "react";
+import { useForkRef } from "@salutejs/plasma-core";
+import { cx } from "../../../../../utils";
+import { classes } from "../../../tokens";
+import { TabsContext } from "../../../TabsContext";
+import { useTabItem } from "../../../hooks/useTabItem";
+import { base as viewCSS } from "./variations/_view/base";
+import { base as sizeCSS } from "./variations/_size/base";
+import { base as disabledCSS } from "./variations/_disabled/base";
+import { ActionContent, StyledContent, base } from "./HorizontalIconTabItem.styles";
+export var horizontalIconTabItemRoot = function(Root) {
+    return /*#__PURE__*/ forwardRef(function(props, outerRef) {
+        var size = props.size, view = props.view, children = props.children, selected = props.selected, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, actionContent = props.actionContent, itemIndex = props.itemIndex, tabIndex = props.tabIndex, className = props.className, onIndexChange = props.onIndexChange, onClick = props.onClick, isActive = props.isActive, _props_animated = props.animated, animated = _props_animated === void 0 ? true : _props_animated, rest = _object_without_properties(props, [
+            "size",
+            "view",
+            "children",
+            "selected",
+            "disabled",
+            "actionContent",
+            "itemIndex",
+            "tabIndex",
+            "className",
+            "onIndexChange",
+            "onClick",
+            "isActive",
+            "animated"
+        ]);
+        var innerRef = useRef(null);
+        var ref = useForkRef(outerRef, innerRef);
+        var refs = useContext(TabsContext);
+        var role = 'tab';
+        var animatedClass = animated ? classes.tabItemAnimated : undefined;
+        var selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;
+        var _useTabItem = useTabItem({
+            refs: refs,
+            innerRef: innerRef,
+            itemIndex: itemIndex,
+            selected: selected,
+            disabled: disabled,
+            onIndexChange: onIndexChange,
+            onClick: onClick,
+            orientation: rest.orientation
+        }), hasKeyNavigation = _useTabItem.hasKeyNavigation, navigationTabIndex = _useTabItem.navigationTabIndex, onItemFocus = _useTabItem.onItemFocus, handleClick = _useTabItem.handleClick;
+        return /*#__PURE__*/ React.createElement(Root, _object_spread({
+            ref: ref,
+            className: cx(selectedClass, animatedClass, className),
+            disabled: disabled,
+            role: role,
+            view: view,
+            size: size,
+            tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
+            onFocus: onItemFocus,
+            onClick: handleClick
+        }, rest), /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StyledContent, {
+            className: classes.tabContent
+        }, children), actionContent && /*#__PURE__*/ React.createElement(ActionContent, null, actionContent)));
+    });
+};
+export var horizontalIconTabItemConfig = {
+    name: 'HorizontalIconTabItem',
+    tag: 'button',
+    layout: horizontalIconTabItemRoot,
+    base: base,
+    variations: {
+        size: {
+            css: sizeCSS
+        },
+        view: {
+            css: viewCSS
+        },
+        disabled: {
+            css: disabledCSS,
+            attrs: true
+        }
+    },
+    defaults: {
+        view: 'default'
+    }
+};

package/emotion/es/components/Tabs/ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { addFocus } from "../../../../../mixins";
+import { tokens } from "../../../tokens";
+export var StyledContent = /*#__PURE__*/ styled("div", {
+    target: "e5hw17h0",
+    label: "StyledContent"
+})("display:inline-block;width:fit-content;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbEljb25UYWJJdGVtL0hvcml6b250YWxJY29uVGFiSXRlbS5zdHlsZXMudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvVGFicy91aS9ob3Jpem9udGFsL0hvcml6b250YWxJY29uVGFiSXRlbS9Ib3Jpem9udGFsSWNvblRhYkl0ZW0uc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGFkZEZvY3VzIH0gZnJvbSAnc3JjL21peGlucyc7XG5cbmltcG9ydCB7IHRva2VucyB9IGZyb20gJy4uLy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjdGlvbkNvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5hY3Rpb25Db250ZW50TWFyZ2luTGVmdH0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGdhcDogdmFyKCR7dG9rZW5zLml0ZW1Db250ZW50R2FwfSk7XG5cbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGN1cnNvcjogdmFyKCR7dG9rZW5zLml0ZW1DdXJzb3JPdmVyTm90U2VsZWN0ZWR9LCB2YXIoJHt0b2tlbnMuaXRlbUN1cnNvcn0pKTtcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgJjpmaXJzdC1jaGlsZCB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIH1cblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJy0wLjEyNXJlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogJ2NhbGModmFyKC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXMpICsgMC4wNjNyZW0pJyxcbiAgICAgICAgY3VzdG9tRm9jdXNSdWxlczogYFxuICAgICAgICAgICAgJi5mb2N1cy12aXNpYmxlOmZvY3VzLFxuICAgICAgICAgICAgJltkYXRhLWZvY3VzLXZpc2libGUtYWRkZWRdIHtcbiAgICAgICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAwLjA2M3JlbSB2YXIoJHt0b2tlbnMub3V0bGluZUZvY3VzQ29sb3J9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgfSl9O1xuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNNkIifQ== */");
+export var ActionContent = /*#__PURE__*/ styled("div", {
+    target: "e5hw17h1",
+    label: "ActionContent"
+})("display:flex;margin-left:var(", tokens.actionContentMarginLeft, ");", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbEljb25UYWJJdGVtL0hvcml6b250YWxJY29uVGFiSXRlbS5zdHlsZXMudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvVGFicy91aS9ob3Jpem9udGFsL0hvcml6b250YWxJY29uVGFiSXRlbS9Ib3Jpem9udGFsSWNvblRhYkl0ZW0uc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGFkZEZvY3VzIH0gZnJvbSAnc3JjL21peGlucyc7XG5cbmltcG9ydCB7IHRva2VucyB9IGZyb20gJy4uLy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjdGlvbkNvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5hY3Rpb25Db250ZW50TWFyZ2luTGVmdH0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGdhcDogdmFyKCR7dG9rZW5zLml0ZW1Db250ZW50R2FwfSk7XG5cbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGN1cnNvcjogdmFyKCR7dG9rZW5zLml0ZW1DdXJzb3JPdmVyTm90U2VsZWN0ZWR9LCB2YXIoJHt0b2tlbnMuaXRlbUN1cnNvcn0pKTtcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgJjpmaXJzdC1jaGlsZCB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIH1cblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJy0wLjEyNXJlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogJ2NhbGModmFyKC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXMpICsgMC4wNjNyZW0pJyxcbiAgICAgICAgY3VzdG9tRm9jdXNSdWxlczogYFxuICAgICAgICAgICAgJi5mb2N1cy12aXNpYmxlOmZvY3VzLFxuICAgICAgICAgICAgJltkYXRhLWZvY3VzLXZpc2libGUtYWRkZWRdIHtcbiAgICAgICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAwLjA2M3JlbSB2YXIoJHt0b2tlbnMub3V0bGluZUZvY3VzQ29sb3J9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgfSl9O1xuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXNkIifQ== */");
+export var base = /*#__PURE__*/ css("position:relative;display:flex;align-items:center;justify-content:center;gap:var(", tokens.itemContentGap, ");appearance:none;border:none;outline:none;cursor:var(", tokens.itemCursorOverNotSelected, ",var(", tokens.itemCursor, "));white-space:nowrap;box-sizing:border-box;-webkit-tap-highlight-color:transparent;&:first-child{margin-left:0;}", addFocus({
+    outlineSize: '0.063rem',
+    outlineOffset: '-0.125rem',
+    outlineColor: "var(".concat(tokens.outlineFocusColor, ")"),
+    outlineRadius: 'calc(var(--plasma_private-outline-radius) + 0.063rem)',
+    customFocusRules: "\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(".concat(tokens.outlineFocusColor, ");\n                }\n            }\n        ")
+}), ";", "base", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbEljb25UYWJJdGVtL0hvcml6b250YWxJY29uVGFiSXRlbS5zdHlsZXMudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvVGFicy91aS9ob3Jpem9udGFsL0hvcml6b250YWxJY29uVGFiSXRlbS9Ib3Jpem9udGFsSWNvblRhYkl0ZW0uc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGFkZEZvY3VzIH0gZnJvbSAnc3JjL21peGlucyc7XG5cbmltcG9ydCB7IHRva2VucyB9IGZyb20gJy4uLy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFjdGlvbkNvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgbWFyZ2luLWxlZnQ6IHZhcigke3Rva2Vucy5hY3Rpb25Db250ZW50TWFyZ2luTGVmdH0pO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGdhcDogdmFyKCR7dG9rZW5zLml0ZW1Db250ZW50R2FwfSk7XG5cbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGN1cnNvcjogdmFyKCR7dG9rZW5zLml0ZW1DdXJzb3JPdmVyTm90U2VsZWN0ZWR9LCB2YXIoJHt0b2tlbnMuaXRlbUN1cnNvcn0pKTtcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgJjpmaXJzdC1jaGlsZCB7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIH1cblxuICAgICR7YWRkRm9jdXMoe1xuICAgICAgICBvdXRsaW5lU2l6ZTogJzAuMDYzcmVtJyxcbiAgICAgICAgb3V0bGluZU9mZnNldDogJy0wLjEyNXJlbScsXG4gICAgICAgIG91dGxpbmVDb2xvcjogYHZhcigke3Rva2Vucy5vdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogJ2NhbGModmFyKC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXMpICsgMC4wNjNyZW0pJyxcbiAgICAgICAgY3VzdG9tRm9jdXNSdWxlczogYFxuICAgICAgICAgICAgJi5mb2N1cy12aXNpYmxlOmZvY3VzLFxuICAgICAgICAgICAgJltkYXRhLWZvY3VzLXZpc2libGUtYWRkZWRdIHtcbiAgICAgICAgICAgICAgICAmOjpiZWZvcmUge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICAgICAgICAgICAgICBib3gtc2hhZG93OiAwIDAgMCAwLjA2M3JlbSB2YXIoJHt0b2tlbnMub3V0bGluZUZvY3VzQ29sb3J9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGAsXG4gICAgfSl9O1xuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQm9CIn0= */");

package/emotion/es/components/Tabs/ui/horizontal/HorizontalIconTabItem/variations/_disabled/base.js

@@ -0,0 +1,3 @@
+import { css } from "@emotion/react";
+import { classes, tokens } from "../../../../../tokens";
+export var base = /*#__PURE__*/ css("&[disabled]{cursor:not-allowed;&:hover{color:var(", tokens.itemColor, ");background-color:var(", tokens.itemBackgroundColor, ");}&.", classes.selectedTabsItem, ":hover{color:var(", tokens.itemSelectedColor, ");background-color:var(", tokens.itemSelectedBackgroundColor, ");}}", "base", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbEljb25UYWJJdGVtL3ZhcmlhdGlvbnMvX2Rpc2FibGVkL2Jhc2UudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvVGFicy91aS9ob3Jpem9udGFsL0hvcml6b250YWxJY29uVGFiSXRlbS92YXJpYXRpb25zL19kaXNhYmxlZC9iYXNlLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY2xhc3NlcywgdG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vLi4vdG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgJltkaXNhYmxlZF0ge1xuICAgICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5pdGVtQ29sb3J9KTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pdGVtQmFja2dyb3VuZENvbG9yfSk7XG4gICAgICAgIH1cblxuICAgICAgICAmLiR7Y2xhc3Nlcy5zZWxlY3RlZFRhYnNJdGVtfTpob3ZlciB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1TZWxlY3RlZENvbG9yfSk7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbVNlbGVjdGVkQmFja2dyb3VuZENvbG9yfSk7XG4gICAgICAgIH1cbiAgICB9XG5gO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvQiJ9 */");

package/emotion/es/components/Tabs/ui/horizontal/HorizontalIconTabItem/variations/_size/base.js

@@ -0,0 +1,3 @@
+import { css } from "@emotion/react";
+import { tokens } from "../../../../../tokens";
+export var base = /*#__PURE__*/ css("--plasma_private-outline-radius:var(", tokens.itemBorderRadius, ");border-radius:var(", tokens.itemBorderRadius, ");padding:var(", tokens.itemPadding, ");", "base", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbEljb25UYWJJdGVtL3ZhcmlhdGlvbnMvX3NpemUvYmFzZS50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbEljb25UYWJJdGVtL3ZhcmlhdGlvbnMvX3NpemUvYmFzZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IHRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIC0tcGxhc21hX3ByaXZhdGUtb3V0bGluZS1yYWRpdXM6IHZhcigke3Rva2Vucy5pdGVtQm9yZGVyUmFkaXVzfSk7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLml0ZW1Cb3JkZXJSYWRpdXN9KTtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMuaXRlbVBhZGRpbmd9KTtcbmA7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSW9CIn0= */");

package/emotion/es/components/Tabs/ui/horizontal/HorizontalIconTabItem/variations/_view/base.js

@@ -0,0 +1,3 @@
+import { css } from "@emotion/react";
+import { classes, tokens } from "../../../../../tokens";
+export var base = /*#__PURE__*/ css("color:var(", tokens.itemColor, ");background-color:var(", tokens.itemBackgroundColor, ");&:hover{color:var(", tokens.itemColorHover, ");background-color:var(", tokens.itemBackgroundColorHover, ");}&:active{color:var(", tokens.itemColorActive, ");}&.", classes.tabItemAnimated, "{transition:var(", tokens.itemBackgroundTransition, ");}&.", classes.selectedTabsItem, "{color:var(", tokens.itemSelectedColor, ");background-color:var(", tokens.itemSelectedBackgroundColor, ");cursor:var(", tokens.itemCursor, ");&:hover{color:var(", tokens.itemSelectedColorHover, ");background-color:var(", tokens.itemSelectedBackgroundColorHover, ");&::after{background-color:var(", tokens.itemSelectedDividerColorHover, ");}}&::after{content:'';position:absolute;bottom:0;left:0;right:0;background-color:var(", tokens.itemSelectedDividerColor, ");height:var(", tokens.itemSelectedDividerHeight, ");border-radius:0.063rem;}}", "base", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbEljb25UYWJJdGVtL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyIsInNvdXJjZXMiOlsic3JjLWVtb3Rpb24vY29tcG9uZW50cy9UYWJzL3VpL2hvcml6b250YWwvSG9yaXpvbnRhbEljb25UYWJJdGVtL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uLy4uL3Rva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBiYXNlID0gY3NzYFxuICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbUNvbG9yfSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1CYWNrZ3JvdW5kQ29sb3J9KTtcblxuICAgICY6aG92ZXIge1xuICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1Db2xvckhvdmVyfSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pdGVtQmFja2dyb3VuZENvbG9ySG92ZXJ9KTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbUNvbG9yQWN0aXZlfSk7XG4gICAgfVxuXG4gICAgJi4ke2NsYXNzZXMudGFiSXRlbUFuaW1hdGVkfSB7XG4gICAgICAgIHRyYW5zaXRpb246IHZhcigke3Rva2Vucy5pdGVtQmFja2dyb3VuZFRyYW5zaXRpb259KTtcbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy5zZWxlY3RlZFRhYnNJdGVtfSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuaXRlbVNlbGVjdGVkQ29sb3J9KTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1TZWxlY3RlZEJhY2tncm91bmRDb2xvcn0pO1xuICAgICAgICBjdXJzb3I6IHZhcigke3Rva2Vucy5pdGVtQ3Vyc29yfSk7XG5cbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1TZWxlY3RlZENvbG9ySG92ZXJ9KTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pdGVtU2VsZWN0ZWRCYWNrZ3JvdW5kQ29sb3JIb3Zlcn0pO1xuXG4gICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLml0ZW1TZWxlY3RlZERpdmlkZXJDb2xvckhvdmVyfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cblxuICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgIGxlZnQ6IDA7XG4gICAgICAgICAgICByaWdodDogMDtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5pdGVtU2VsZWN0ZWREaXZpZGVyQ29sb3J9KTtcbiAgICAgICAgICAgIGhlaWdodDogdmFyKCR7dG9rZW5zLml0ZW1TZWxlY3RlZERpdmlkZXJIZWlnaHR9KTtcbiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDAuMDYzcmVtO1xuICAgICAgICB9XG4gICAgfVxuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJb0IifQ== */");

package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js

@@ -77,19 +77,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import React, { forwardRef, useRef, useContext, useEffect, useCallback, useLayoutEffect } from "react";
+import React, { forwardRef, useRef, useContext } from "react";
 import { useForkRef } from "@salutejs/plasma-core";
 import { classes } from "../../../tokens";
 import { cx } from "../../../../../utils";
 import { TabsContext } from "../../../TabsContext";
+import { useTabItem } from "../../../hooks/useTabItem";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as pilledCSS } from "./variations/_pilled/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
-import { LeftContent, RightContent, StyledContent, TabItemValue, base } from "./HorizontalTabItem.styles";
+import { ActionContent, LeftContent, RightContent, StyledContent, TabItemValue, base } from "./HorizontalTabItem.styles";
 export var horizontalTabItemRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, outerRef) {
-        var size = props.size, view = props.view, isActive = props.isActive, selected = props.selected, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_pilled = props.pilled, pilled = _props_pilled === void 0 ? false : _props_pilled, children = props.children, value = props.value, contentLeft = props.contentLeft, contentRight = props.contentRight, _props_animated = props.animated, animated = _props_animated === void 0 ? true : _props_animated, onIndexChange = props.onIndexChange, itemIndex = props.itemIndex, tabIndex = props.tabIndex, className = props.className, onClick = props.onClick, tmp = props.maxItemWidth, maxWidth = tmp === void 0 ? 'auto' : tmp, rest = _object_without_properties(props, [
+        var size = props.size, view = props.view, isActive = props.isActive, selected = props.selected, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_pilled = props.pilled, pilled = _props_pilled === void 0 ? false : _props_pilled, children = props.children, value = props.value, contentLeft = props.contentLeft, contentRight = props.contentRight, actionContent = props.actionContent, _props_animated = props.animated, animated = _props_animated === void 0 ? true : _props_animated, onIndexChange = props.onIndexChange, itemIndex = props.itemIndex, tabIndex = props.tabIndex, className = props.className, onClick = props.onClick, tmp = props.maxItemWidth, maxWidth = tmp === void 0 ? 'auto' : tmp, rest = _object_without_properties(props, [
             "size",
             "view",
             "isActive",
@@ -100,6 +101,7 @@ export var horizontalTabItemRoot = function(Root) {
             "value",
             "contentLeft",
             "contentRight",
+            "actionContent",
             "animated",
             "onIndexChange",
             "itemIndex",
@@ -117,70 +119,16 @@ export var horizontalTabItemRoot = function(Root) {
         var pilledClass = pilledAttr ? classes.tabsPilled : undefined;
         var selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;
         var truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;
-        var hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
-        var navigationTabIndex = !disabled && (refs === null || refs === void 0 ? void 0 : refs.current) === itemIndex ? 0 : -1;
-        useEffect(function() {
-            if (!refs) {
-                return;
-            }
-            refs.register(innerRef);
-            return function() {
-                return refs.unregister(innerRef);
-            };
-        }, [
-            refs
-        ]);
-        useLayoutEffect(function() {
-            var _innerRef_current_parentElement;
-            if (!selected || !innerRef.current) {
-                return;
-            }
-            var scrollEl = (_innerRef_current_parentElement = innerRef.current.parentElement) === null || _innerRef_current_parentElement === void 0 ? void 0 : _innerRef_current_parentElement.parentElement;
-            if (!scrollEl) {
-                return;
-            }
-            var scrollElStyle = getComputedStyle(scrollEl);
-            scrollEl.scrollTo({
-                left: innerRef.current.offsetLeft - parseInt(scrollElStyle.paddingLeft, 10)
-            });
-        }, [
-            selected
-        ]);
-        var onItemFocus = useCallback(function(event) {
-            if (disabled) {
-                return;
-            }
-            if (!hasKeyNavigation && (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
-                innerRef.current.scrollTo({
-                    top: 0,
-                    left: innerRef.current.offsetLeft,
-                    behavior: 'smooth'
-                });
-                return;
-            }
-            if (!refs) {
-                return;
-            }
-            var focusIndex = refs.items.findIndex(function(itemRef) {
-                return itemRef.current === event.target;
-            });
-            if (focusIndex === refs.current) {
-                return;
-            }
-            onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(focusIndex);
-            refs.setCurrent(focusIndex);
-        }, [
-            refs,
-            innerRef,
-            onIndexChange,
-            disabled
-        ]);
-        var handleClick = function(event) {
-            if (!onClick) {
-                return;
-            }
-            onClick(event);
-        };
+        var _useTabItem = useTabItem({
+            refs: refs,
+            innerRef: innerRef,
+            itemIndex: itemIndex,
+            selected: selected,
+            disabled: disabled,
+            onIndexChange: onIndexChange,
+            onClick: onClick,
+            orientation: rest.orientation
+        }), hasKeyNavigation = _useTabItem.hasKeyNavigation, navigationTabIndex = _useTabItem.navigationTabIndex, onItemFocus = _useTabItem.onItemFocus, handleClick = _useTabItem.handleClick;
         return /*#__PURE__*/ React.createElement(Root, _object_spread_props(_object_spread({
             ref: ref,
             disabled: disabled,
@@ -203,7 +151,7 @@ export var horizontalTabItemRoot = function(Root) {
             className: classes.tabContent
         }, children), !contentRight && value && /*#__PURE__*/ React.createElement(TabItemValue, null, value), !value && contentRight && /*#__PURE__*/ React.createElement(RightContent, {
             className: classes.tabRightContent
-        }, contentRight)));
+        }, contentRight), actionContent && /*#__PURE__*/ React.createElement(ActionContent, null, actionContent)));
     });
 };
 export var horizontalTabItemConfig = {