@salutejs/plasma-new-hope 0.114.1-canary.1333.10216082008.0 → 0.115.0-canary.1310.10239897326.0

package/es/components/Breadcrumbs/Breadcrumbs.styles.js

@@ -0,0 +1,40 @@
+import './Breadcrumbs.styles_1troyzr.css';
+import { styled } from '@linaria/react';
+import { linkConfig } from '../Link/Link.js';
+import '@linaria/core';
+import { component, mergeConfig } from '../../engines/common.js';
+import 'react';
+import { IconDisclosureRight } from '../_Icon/Icons/IconDisclosureRight.js';
+import { tokens } from './Breadcrumbs.tokens.js';
+
+var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
+var Link = /*#__PURE__*/component(mergedLinkConfig);
+var _exp = function _exp() {
+  return Link;
+};
+var _exp2 = function _exp2() {
+  return function (_ref) {
+    var isHref = _ref.isHref;
+    return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
+  };
+};
+var StyledLink = /*#__PURE__*/styled(_exp())({
+  name: "StyledLink",
+  "class": "shehk3i",
+  propsAsIs: true,
+  vars: {
+    "shehk3i-0": [/*#__PURE__*/_exp2()]
+  }
+});
+var base = "bkgt5xr";
+var _exp12 = function _exp12() {
+  return IconDisclosureRight;
+};
+var Separator = /*#__PURE__*/styled(_exp12())({
+  name: "Separator",
+  "class": "sajtslk",
+  propsAsIs: true
+});
+
+export { Separator, StyledLink, base };
+//# sourceMappingURL=Breadcrumbs.styles.js.map

package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.styles.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nimport { linkConfig } from '../Link';\nimport { component, mergeConfig } from '../../engines';\nimport { IconDisclosureRight } from '../_Icon';\nimport { addFocus } from '../../mixins';\n\nimport { tokens } from './Breadcrumbs.tokens';\n\nconst mergedLinkConfig = mergeConfig(linkConfig);\nconst Link = component(mergedLinkConfig);\n\nexport const StyledLink = styled(Link)<{ isHref: boolean }>`\n    opacity: ${({ isHref }) => (isHref ? 1 : `var(${tokens.breadcrumbsOpacity})`)};\n\n    ${addFocus({\n        outlineOffset: '0rem',\n        outlineSize: '0.125rem',\n        outlineRadius: '0rem',\n        outlineColor: `var(${tokens.breadcrumbsFocusOutlineColor})`,\n    })}\n`;\n\nexport const base = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(${tokens.breadcrumbsGap});\n\n    color: var(${tokens.breadcrumbsColor});\n    font-family: var(${tokens.breadcrumbsFontFamily});\n    font-size: var(${tokens.breadcrumbsFontSize});\n    font-weight: var(${tokens.breadcrumbsFontWeight});\n    font-style: var(${tokens.breadcrumbsFontStyle});\n    letter-spacing: var(${tokens.breadcrumbsLetterSpacing});\n    line-height: var(${tokens.breadcrumbsLineHeight});\n`;\n\nexport const Separator = styled(IconDisclosureRight)`\n    color: var(${tokens.breadcrumbsColor});\n    opacity: var(${tokens.breadcrumbsOpacity});\n`;\n"],"names":["mergedLinkConfig","mergeConfig","linkConfig","Link","component","_exp","_exp2","_ref","isHref","concat","tokens","breadcrumbsOpacity","StyledLink","styled","name","class","propsAsIs","vars","base","_exp12","IconDisclosureRight","Separator"],"mappings":";;;;;;;;AAUA,IAAMA,gBAAgB,gBAAGC,WAAW,CAACC,UAAU,CAAC,CAAA;AAChD,IAAMC,IAAI,gBAAGC,SAAS,CAACJ,gBAAgB,CAAC,CAAA;AAAC,IAAAK,IAAA,GAVvBA,SAUuBA,IAAAA,GAAA;AAAA,EAAA,OAERF,IAAI,CAAA;AAAA,CAAA,CAAA;AAAA,IAAAG,KAAA,GAZnBA,SAYmBA,KAAAA,GAAA;AAAA,EAAA,OACtB,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,MAAAA,GAAAA,IAAAA,CAAAA,MAAAA,CAAAA;IAAAA,OAAcA,MAAM,GAAG,CAAC,GAAA,MAAA,CAAAC,MAAA,CAAUC,MAAM,CAACC,kBAAmB,EAAG,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAD1E,IAAMC,UAAU,gBAAGC,MAAM,CAAAR,IAAA,EAAA,CAAA,CAAA;AAAAS,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cACjBX,KAAkE,EAAA,CAAA;AAAA,GAAA;AAAA,CAQhF,EAAA;AAEM,IAAMY,IAAI,GAahB,UAAA;AAAC,IAAAC,MAAA,GApCgBA,SAoChBA,MAAAA,GAAA;AAAA,EAAA,OAE8BC,mBAAmB,CAAA;AAAA,CAAA,CAAA;AAA5C,IAAMC,SAAS,gBAAGR,MAAM,CAAAM,MAAA,EAAA,CAAA,CAAA;AAAAL,EAAAA,IAAA,EAAA,WAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAG9B;;;;"}

package/es/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css

@@ -0,0 +1,3 @@
+.shehk3i{opacity:var(--shehk3i-0);position:relative;}.shehk3i::before{content:'';position:absolute;top:0rem;left:0rem;right:0rem;bottom:0rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:0rem;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.shehk3i.focus-visible:focus::before,.shehk3i[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-breadcrumbs-focus-outline-color);}
+.bkgt5xr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--plasma-breadcrumbs-gap);color:var(--plasma-breadcrumbs-color);font-family:var(--plasma-breadcrumbs-font-family);font-size:var(--plasma-breadcrumbs-font-size);font-weight:var(--plasma-breadcrumbs-font-weight);font-style:var(--plasma-breadcrumbs-font-style);-webkit-letter-spacing:var(--plasma-breadcrumbs-letter-spacing);-moz-letter-spacing:var(--plasma-breadcrumbs-letter-spacing);-ms-letter-spacing:var(--plasma-breadcrumbs-letter-spacing);letter-spacing:var(--plasma-breadcrumbs-letter-spacing);line-height:var(--plasma-breadcrumbs-line-height);}
+.sajtslk{color:var(--plasma-breadcrumbs-color);opacity:var(--plasma-breadcrumbs-opacity);}

package/es/components/Breadcrumbs/Breadcrumbs.tokens.js

@@ -0,0 +1,18 @@
+var classes = {
+  breadcrumbsRoot: 'breadcrumbs-root'
+};
+var tokens = {
+  breadcrumbsGap: '--plasma-breadcrumbs-gap',
+  breadcrumbsOpacity: '--plasma-breadcrumbs-opacity',
+  breadcrumbsFocusOutlineColor: '--plasma-breadcrumbs-focus-outline-color',
+  breadcrumbsColor: '--plasma-breadcrumbs-color',
+  breadcrumbsFontFamily: '--plasma-breadcrumbs-font-family',
+  breadcrumbsFontSize: '--plasma-breadcrumbs-font-size',
+  breadcrumbsFontStyle: '--plasma-breadcrumbs-font-style',
+  breadcrumbsFontWeight: '--plasma-breadcrumbs-font-weight',
+  breadcrumbsLetterSpacing: '--plasma-breadcrumbs-letter-spacing',
+  breadcrumbsLineHeight: '--plasma-breadcrumbs-line-height'
+};
+
+export { classes, tokens };
+//# sourceMappingURL=Breadcrumbs.tokens.js.map

package/es/components/Breadcrumbs/Breadcrumbs.tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.tokens.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tokens.ts"],"sourcesContent":["export const classes = {\n    breadcrumbsRoot: 'breadcrumbs-root',\n};\n\nexport const tokens = {\n    breadcrumbsGap: '--plasma-breadcrumbs-gap',\n    breadcrumbsOpacity: '--plasma-breadcrumbs-opacity',\n    breadcrumbsFocusOutlineColor: '--plasma-breadcrumbs-focus-outline-color',\n\n    breadcrumbsColor: '--plasma-breadcrumbs-color',\n    breadcrumbsFontFamily: '--plasma-breadcrumbs-font-family',\n    breadcrumbsFontSize: '--plasma-breadcrumbs-font-size',\n    breadcrumbsFontStyle: '--plasma-breadcrumbs-font-style',\n    breadcrumbsFontWeight: '--plasma-breadcrumbs-font-weight',\n    breadcrumbsLetterSpacing: '--plasma-breadcrumbs-letter-spacing',\n    breadcrumbsLineHeight: '--plasma-breadcrumbs-line-height',\n};\n"],"names":["classes","breadcrumbsRoot","tokens","breadcrumbsGap","breadcrumbsOpacity","breadcrumbsFocusOutlineColor","breadcrumbsColor","breadcrumbsFontFamily","breadcrumbsFontSize","breadcrumbsFontStyle","breadcrumbsFontWeight","breadcrumbsLetterSpacing","breadcrumbsLineHeight"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,eAAe,EAAE,kBAAA;AACrB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,cAAc,EAAE,0BAA0B;AAC1CC,EAAAA,kBAAkB,EAAE,8BAA8B;AAClDC,EAAAA,4BAA4B,EAAE,0CAA0C;AAExEC,EAAAA,gBAAgB,EAAE,4BAA4B;AAC9CC,EAAAA,qBAAqB,EAAE,kCAAkC;AACzDC,EAAAA,mBAAmB,EAAE,gCAAgC;AACrDC,EAAAA,oBAAoB,EAAE,iCAAiC;AACvDC,EAAAA,qBAAqB,EAAE,kCAAkC;AACzDC,EAAAA,wBAAwB,EAAE,qCAAqC;AAC/DC,EAAAA,qBAAqB,EAAE,kCAAA;AAC3B;;;;"}

package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js

@@ -0,0 +1,32 @@
+import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useState } from 'react';
+import { addSeparator } from '../../utils/index.js';
+import { StyledRoot, StyledShorter, StyledHidden } from './BreadcrumbShorter.styles.js';
+
+var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
+  var children = _ref.children,
+    separator = _ref.separator;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openShorter = _useState2[0],
+    setOpenShorter = _useState2[1];
+  var renderItems = addSeparator(children, separator);
+  var onKeyPress = function onKeyPress(event) {
+    event.persist();
+    if (event.keyCode === 13) {
+      setOpenShorter(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledRoot, null, !openShorter && /*#__PURE__*/React.createElement(StyledShorter, {
+    tabIndex: 0,
+    onClick: function onClick() {
+      return setOpenShorter(true);
+    },
+    onKeyDown: onKeyPress
+  }, "..."), openShorter && /*#__PURE__*/React.createElement(StyledHidden, null, renderItems.map(function (item) {
+    return item;
+  })));
+};
+
+export { BreadcrumbShorter };
+//# sourceMappingURL=BreadcrumbShorter.js.map

package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbShorter.js","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, useState, KeyboardEvent } from 'react';\n\nimport { addSeparator } from '../../utils';\n\nimport { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';\nimport { BreadcrumbShorterProps } from './BreadcrumbShorter.types';\n\nexport const BreadcrumbShorter: React.FC<HTMLAttributes<HTMLDivElement> & BreadcrumbShorterProps> = ({\n    children,\n    separator,\n}) => {\n    const [openShorter, setOpenShorter] = useState(false);\n\n    const renderItems: ReactNode[] = addSeparator(children, separator);\n\n    const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n        event.persist();\n\n        if (event.keyCode === 13) {\n            setOpenShorter(true);\n        }\n    };\n\n    return (\n        <StyledRoot>\n            {!openShorter && (\n                <StyledShorter tabIndex={0} onClick={() => setOpenShorter(true)} onKeyDown={onKeyPress}>\n                    ...\n                </StyledShorter>\n            )}\n            {openShorter && (\n                <StyledHidden>\n                    {renderItems.map((item) => {\n                        return item;\n                    })}\n                </StyledHidden>\n            )}\n        </StyledRoot>\n    );\n};\n"],"names":["BreadcrumbShorter","_ref","children","separator","_useState","useState","_useState2","_slicedToArray","openShorter","setOpenShorter","renderItems","addSeparator","onKeyPress","event","persist","keyCode","React","createElement","StyledRoot","StyledShorter","tabIndex","onClick","onKeyDown","StyledHidden","map","item"],"mappings":";;;;;IAOaA,iBAAoF,GAAG,SAAvFA,iBAAoFA,CAAAC,IAAA,EAG3F;AAAA,EAAA,IAFFC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAET,EAAA,IAAAC,SAAA,GAAsCC,QAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA9CI,IAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAElC,EAAA,IAAMI,WAAwB,GAAGC,YAAY,CAACT,QAAQ,EAAEC,SAAS,CAAC,CAAA;AAElE,EAAA,IAAMS,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAoC,EAAK;IACzDA,KAAK,CAACC,OAAO,EAAE,CAAA;AAEf,IAAA,IAAID,KAAK,CAACE,OAAO,KAAK,EAAE,EAAE;MACtBN,cAAc,CAAC,IAAI,CAAC,CAAA;AACxB,KAAA;GACH,CAAA;AAED,EAAA,oBACIO,KAAA,CAAAC,aAAA,CAACC,UAAU,EAAA,IAAA,EACN,CAACV,WAAW,iBACTQ,KAAA,CAAAC,aAAA,CAACE,aAAa,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAAE;IAACC,OAAO,EAAE,SAAAA,OAAA,GAAA;MAAA,OAAMZ,cAAc,CAAC,IAAI,CAAC,CAAA;KAAC;AAACa,IAAAA,SAAS,EAAEV,UAAAA;AAAW,GAAA,EAAC,KAEzE,CAClB,EACAJ,WAAW,iBACRQ,KAAA,CAAAC,aAAA,CAACM,YAAY,QACRb,WAAW,CAACc,GAAG,CAAC,UAACC,IAAI,EAAK;AACvB,IAAA,OAAOA,IAAI,CAAA;GACd,CACS,CAEV,CAAC,CAAA;AAErB;;;;"}

package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { addFocus } from '../../../../mixins/addFocus.js';
+import { tokens } from '../../Breadcrumbs.tokens.js';
+
+var StyledRoot = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1ufgggn-0"
+})([""]);
+var StyledShorter = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1ufgggn-1"
+})(["cursor:pointer;", ""], /*#__PURE__*/addFocus({
+  outlineOffset: '0.125rem',
+  outlineSize: '0.125rem',
+  outlineRadius: '0',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
+}));
+var StyledHidden = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1ufgggn-2"
+})(["display:flex;align-items:center;gap:var(", ");"], tokens.breadcrumbsGap);
+
+export { StyledHidden, StyledRoot, StyledShorter };
+//# sourceMappingURL=BreadcrumbShorter.styles.js.map

package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbShorter.styles.js","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { addFocus } from '../../../../mixins';\nimport { tokens } from '../../Breadcrumbs.tokens';\n\nexport const StyledRoot = styled.div``;\nexport const StyledShorter = styled.div`\n    cursor: pointer;\n    ${addFocus({\n        outlineOffset: '0.125rem',\n        outlineSize: '0.125rem',\n        outlineRadius: '0',\n        outlineColor: `var(${tokens.breadcrumbsFocusOutlineColor})`,\n    })}\n`;\nexport const StyledHidden = styled.div`\n    display: flex;\n    align-items: center;\n    gap: var(${tokens.breadcrumbsGap});\n`;\n"],"names":["StyledRoot","styled","div","withConfig","componentId","StyledShorter","addFocus","outlineOffset","outlineSize","outlineRadius","outlineColor","concat","tokens","breadcrumbsFocusOutlineColor","StyledHidden","breadcrumbsGap"],"mappings":";;;;IAKaA,UAAU,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;IACzBC,aAAa,gBAAGJ,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;AAAA,CAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,EAAA,CAAA,eAEjCE,QAAQ,CAAC;AACPC,EAAAA,aAAa,EAAE,UAAU;AACzBC,EAAAA,WAAW,EAAE,UAAU;AACvBC,EAAAA,aAAa,EAAE,GAAG;AAClBC,EAAAA,YAAY,eAAAC,MAAAA,CAAAA,MAAA,CAASC,MAAM,CAACC,4BAA4B,EAAA,GAAA,CAAA;AAC5D,CAAC,CAAC,EACL;IACYC,YAAY,gBAAGb,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;AAAA,CAGvBQ,CAAAA,CAAAA,CAAAA,0CAAAA,EAAAA,IAAAA,CAAAA,EAAAA,MAAM,CAACG,cAAc;;;;"}

package/es/components/Breadcrumbs/utils/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter.js';
+import { StyledLink } from '../Breadcrumbs.styles.js';
+
+var shortItems = function shortItems(items, renderSeparator, showItems) {
+  if (!showItems || showItems < 2 || items.length <= showItems) {
+    return items;
+  }
+  var leftSlice = Math.floor(showItems / 2);
+  var rightSlice = items.length - leftSlice - showItems % 2;
+  var renderItems = items.slice(leftSlice, rightSlice);
+  var shorter = /*#__PURE__*/React.createElement(BreadcrumbShorter, {
+    separator: renderSeparator
+  }, renderItems);
+  items.splice(leftSlice, rightSlice - leftSlice, shorter);
+  return items;
+};
+var convertIconSize = function convertIconSize(size) {
+  switch (size) {
+    case 's':
+    case 'xs':
+      return 'xs';
+    default:
+      return 's';
+  }
+};
+var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
+  return shortItems(items.map(function (item) {
+    if ('renderItem' in item) {
+      return item.renderItem();
+    }
+    return /*#__PURE__*/React.createElement(StyledLink, {
+      tabIndex: 0,
+      href: item.href,
+      isHref: Boolean(item.href)
+    }, item.title);
+  }), renderSeparator, showItems);
+};
+var addSeparator = function addSeparator(items, renderSeparator) {
+  return items.flatMap(function (item, idx) {
+    return idx < items.length - 1 ? [item, renderSeparator] : [item];
+  });
+};
+
+export { addSeparator, convertIconSize, getRenderItems, shortItems };
+//# sourceMappingURL=index.js.map

package/es/components/Breadcrumbs/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Breadcrumbs/utils/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';\nimport { StyledLink } from '../Breadcrumbs.styles';\nimport { BreadcrumbsItem } from '../Breadcrumbs.types';\n\nexport const shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n    if (!showItems || showItems < 2 || items.length <= showItems) {\n        return items;\n    }\n\n    const leftSlice = Math.floor(showItems / 2);\n    const rightSlice = items.length - leftSlice - (showItems % 2);\n\n    const renderItems: ReactNode[] = items.slice(leftSlice, rightSlice);\n    const shorter = <BreadcrumbShorter separator={renderSeparator}>{renderItems}</BreadcrumbShorter>;\n    items.splice(leftSlice, rightSlice - leftSlice, shorter);\n    return items;\n};\n\nexport const convertIconSize = (size?: 'xs' | 's' | 'm' | 'l') => {\n    switch (size) {\n        case 's':\n        case 'xs':\n            return 'xs';\n        default:\n            return 's';\n    }\n};\n\nexport const getRenderItems = (items: BreadcrumbsItem[], renderSeparator: ReactNode, showItems?: number) => {\n    return shortItems(\n        items.map((item: BreadcrumbsItem) => {\n            if ('renderItem' in item) {\n                return item.renderItem();\n            }\n            return (\n                <StyledLink tabIndex={0} href={item.href} isHref={Boolean(item.href)}>\n                    {item.title}\n                </StyledLink>\n            );\n        }),\n        renderSeparator,\n        showItems,\n    );\n};\n\nexport const addSeparator = (items: ReactNode[], renderSeparator: ReactNode) => {\n    return items.flatMap((item, idx) => (idx < items.length - 1 ? [item, renderSeparator] : [item]));\n};\n"],"names":["shortItems","items","renderSeparator","showItems","length","leftSlice","Math","floor","rightSlice","renderItems","slice","shorter","React","createElement","BreadcrumbShorter","separator","splice","convertIconSize","size","getRenderItems","map","item","renderItem","StyledLink","tabIndex","href","isHref","Boolean","title","addSeparator","flatMap","idx"],"mappings":";;;;AAMO,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAkB,EAAEC,eAA0B,EAAEC,SAAkB,EAAK;AAC9F,EAAA,IAAI,CAACA,SAAS,IAAIA,SAAS,GAAG,CAAC,IAAIF,KAAK,CAACG,MAAM,IAAID,SAAS,EAAE;AAC1D,IAAA,OAAOF,KAAK,CAAA;AAChB,GAAA;EAEA,IAAMI,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACJ,SAAS,GAAG,CAAC,CAAC,CAAA;EAC3C,IAAMK,UAAU,GAAGP,KAAK,CAACG,MAAM,GAAGC,SAAS,GAAIF,SAAS,GAAG,CAAE,CAAA;EAE7D,IAAMM,WAAwB,GAAGR,KAAK,CAACS,KAAK,CAACL,SAAS,EAAEG,UAAU,CAAC,CAAA;AACnE,EAAA,IAAMG,OAAO,gBAAGC,KAAA,CAAAC,aAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEb,eAAAA;AAAgB,GAAA,EAAEO,WAA+B,CAAC,CAAA;EAChGR,KAAK,CAACe,MAAM,CAACX,SAAS,EAAEG,UAAU,GAAGH,SAAS,EAAEM,OAAO,CAAC,CAAA;AACxD,EAAA,OAAOV,KAAK,CAAA;AAChB,EAAC;IAEYgB,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAA6B,EAAK;AAC9D,EAAA,QAAQA,IAAI;AACR,IAAA,KAAK,GAAG,CAAA;AACR,IAAA,KAAK,IAAI;AACL,MAAA,OAAO,IAAI,CAAA;AACf,IAAA;AACI,MAAA,OAAO,GAAG,CAAA;AAClB,GAAA;AACJ,EAAC;AAEM,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAIlB,KAAwB,EAAEC,eAA0B,EAAEC,SAAkB,EAAK;EACxG,OAAOH,UAAU,CACbC,KAAK,CAACmB,GAAG,CAAC,UAACC,IAAqB,EAAK;IACjC,IAAI,YAAY,IAAIA,IAAI,EAAE;AACtB,MAAA,OAAOA,IAAI,CAACC,UAAU,EAAE,CAAA;AAC5B,KAAA;AACA,IAAA,oBACIV,KAAA,CAAAC,aAAA,CAACU,UAAU,EAAA;AAACC,MAAAA,QAAQ,EAAE,CAAE;MAACC,IAAI,EAAEJ,IAAI,CAACI,IAAK;AAACC,MAAAA,MAAM,EAAEC,OAAO,CAACN,IAAI,CAACI,IAAI,CAAA;KAC9DJ,EAAAA,IAAI,CAACO,KACE,CAAC,CAAA;AAErB,GAAC,CAAC,EACF1B,eAAe,EACfC,SACJ,CAAC,CAAA;AACL,EAAC;AAEM,IAAM0B,YAAY,GAAG,SAAfA,YAAYA,CAAI5B,KAAkB,EAAEC,eAA0B,EAAK;AAC5E,EAAA,OAAOD,KAAK,CAAC6B,OAAO,CAAC,UAACT,IAAI,EAAEU,GAAG,EAAA;AAAA,IAAA,OAAMA,GAAG,GAAG9B,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAACiB,IAAI,EAAEnB,eAAe,CAAC,GAAG,CAACmB,IAAI,CAAC,CAAA;AAAA,GAAC,CAAC,CAAA;AACpG;;;;"}

package/es/components/Breadcrumbs/variations/_size/base.js

@@ -0,0 +1,5 @@
+import './base_x642ct.css';
+var base = "b1js38v0";
+
+export { base };
+//# sourceMappingURL=base.js.map

package/es/components/Breadcrumbs/variations/_size/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../../src/components/Breadcrumbs/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":"AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/es/components/Breadcrumbs/variations/_size/base_x642ct.css

@@ -0,0 +1 @@
+

package/es/components/Breadcrumbs/variations/_view/base.js

@@ -0,0 +1,5 @@
+import './base_x642ct.css';
+var base = "b1m0s7h0";
+
+export { base };
+//# sourceMappingURL=base.js.map

package/es/components/Breadcrumbs/variations/_view/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../../src/components/Breadcrumbs/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":"AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/es/components/Breadcrumbs/variations/_view/base_x642ct.css

@@ -0,0 +1 @@
+

package/es/components/Tabs/tokens.js

@@ -9,9 +9,7 @@ var classes = {
   tabRightContent: 'tab-item-right-content',
   tabLeftContent: 'tab-item-left-content',
   tabsHasLeftArrow: 'tabs-has-left-arrow',
-  tabsHasRightArrow: 'tabs-has-right-arrow',
-  tabsClipScroll: 'tabs-clip-scroll',
-  tabsClipShowAll: 'tabs-clip-show-all'
+  tabsHasRightArrow: 'tabs-has-right-arrow'
 };
 var tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',
@@ -28,7 +26,7 @@ var tokens = {
   outlineFocusColor: '--plasma-tabs-outline-focus-color',
   arrowColor: '--plasma-tabs-arrow-color',
   tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',
-  tabsBackgroundColor: '--plasma-tabs-background-color',
+  tabsBackgroundColor: '--plasma-tabs-backgorund-color',
   tabsBorderRadius: '--plasma-tabs-border-radius',
   tabsWidth: '--plasma-tabs-width',
   tabsHeight: '--plasma-tabs-height',
@@ -52,7 +50,6 @@ var tokens = {
   itemColor: '--plasma-tab-item-color',
   itemBackgroundColor: '--plasma-tab-item-background-color',
   itemColorHover: '--plasma-tab-item-color-hover',
-  itemColorActive: '--plasma-tab-item-color-active',
   itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',
   itemSelectedColor: '--plasma-tab-item-selected-color',
   itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/components/Tabs/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedTabsItem: 'selected-tabs-item',\n    tabsPilled: 'tabs-pilled',\n    tabsGroupFilledBackground: 'tabs-group-filled-background',\n    tabsStretch: 'tabs-stretched',\n    tabItemDivider: 'tab-item-divider',\n    tabItemAnimated: 'tab-item-animated',\n    tabContent: 'tab-item-content',\n    tabRightContent: 'tab-item-right-content',\n    tabLeftContent: 'tab-item-left-content',\n    tabsHasLeftArrow: 'tabs-has-left-arrow',\n    tabsHasRightArrow: 'tabs-has-right-arrow',\n    tabsClipScroll: 'tabs-clip-scroll',\n    tabsClipShowAll: 'tabs-clip-show-all',\n};\n\nexport const tokens = {\n    disabledOpacity: '--plasma-tabs-disabled-opacity',\n    containerWidth: '--plasma-tabs-container-width',\n    cursor: '--plasma-tabs-cursor',\n    color: '--plasma-tabs-color',\n    colorHover: '--plasma-tabs-color-hover',\n\n    tabsDividerHeight: '--plasma-tabs-divider-height',\n    tabsDividerColor: '--plasma-tabs-divider-color',\n    tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',\n\n    itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',\n    itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',\n    itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',\n\n    outlineFocusColor: '--plasma-tabs-outline-focus-color',\n    arrowColor: '--plasma-tabs-arrow-color',\n    tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',\n\n    tabsBackgroundColor: '--plasma-tabs-background-color',\n    tabsBorderRadius: '--plasma-tabs-border-radius',\n    tabsWidth: '--plasma-tabs-width',\n    tabsHeight: '--plasma-tabs-height',\n    tabsPadding: '--plasma-tabs-padding',\n    tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',\n\n    itemBorderRadius: '--plasma-tab-item-border-radius',\n    itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',\n    itemWidth: '--plasma-tab-item-width',\n    itemHeight: '--plasma-tab-item-height',\n    itemPadding: '--plasma-tab-item-padding',\n    itemPaddingClear: '--plasma-tab-item-padding-clear',\n    itemPaddingPilled: '--plasma-tab-item-padding-pilled',\n    itemMarginLeft: '--plasma-tab-item-margin-left',\n    itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',\n    itemContentGap: '--plasma-tab-item-content-gap',\n\n    itemContentPadding: '--plasma-tab-item-content-padding',\n    itemContentPaddingClear: '--plasma-tab-item-content-padding-clear',\n\n    arrowInnerPadding: '--plasma-tab-arrow-inner-padding',\n    arrowOuterPadding: '--plasma-tab-arrow-outer-padding',\n    arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',\n\n    itemColor: '--plasma-tab-item-color',\n    itemBackgroundColor: '--plasma-tab-item-background-color',\n    itemColorHover: '--plasma-tab-item-color-hover',\n    itemColorActive: '--plasma-tab-item-color-active',\n    itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',\n\n    itemSelectedColor: '--plasma-tab-item-selected-color',\n    itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',\n\n    itemBackgroundTransition: '--plasma-tab-item-background-transition',\n\n    additionalContentColor: '--plasma-tab-item-additional-content-color',\n    additionalContentHoverColor: '--plasma-tab-item-hover-additional-content-color',\n    additionalContentSelectedColor: '--plasma-tab-item-selected-additional-content-color',\n    additionalContentSelectedHoverColor: '--plasma-tab-item-selected-hover-additional-content-color',\n\n    fontFamily: '--plasma-tab-item-font-family',\n    fontSize: '--plasma-tab-item-font-size',\n    fontStyle: '--plasma-tab-item-font-style',\n    fontWeight: '--plasma-tab-item-font-weight',\n    letterSpacing: '--plasma-tab-item-letter-spacing',\n    lineHeight: '--plasma-tab-item-lineheight',\n};\n"],"names":["classes","selectedTabsItem","tabsPilled","tabsGroupFilledBackground","tabsStretch","tabItemDivider","tabItemAnimated","tabContent","tabRightContent","tabLeftContent","tabsHasLeftArrow","tabsHasRightArrow","tabsClipScroll","tabsClipShowAll","tokens","disabledOpacity","containerWidth","cursor","color","colorHover","tabsDividerHeight","tabsDividerColor","tabsDividerBorderRadius","itemSelectedDividerHeight","itemSelectedDividerColor","itemSelectedDividerColorHover","outlineFocusColor","arrowColor","tabsFilledBackgroundColor","tabsBackgroundColor","tabsBorderRadius","tabsWidth","tabsHeight","tabsPadding","tabsPilledBorderRadius","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPaddingClear","itemPaddingPilled","itemMarginLeft","itemMarginLeftFilled","itemContentGap","itemContentPadding","itemContentPaddingClear","arrowInnerPadding","arrowOuterPadding","arrowViewOuterPadding","itemColor","itemBackgroundColor","itemColorHover","itemColorActive","itemBackgroundColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","itemBackgroundTransition","additionalContentColor","additionalContentHoverColor","additionalContentSelectedColor","additionalContentSelectedHoverColor","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight"],"mappings":"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"}
+{"version":3,"file":"tokens.js","sources":["../../../src/components/Tabs/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedTabsItem: 'selected-tabs-item',\n    tabsPilled: 'tabs-pilled',\n    tabsGroupFilledBackground: 'tabs-group-filled-background',\n    tabsStretch: 'tabs-stretched',\n    tabItemDivider: 'tab-item-divider',\n    tabItemAnimated: 'tab-item-animated',\n    tabContent: 'tab-item-content',\n    tabRightContent: 'tab-item-right-content',\n    tabLeftContent: 'tab-item-left-content',\n    tabsHasLeftArrow: 'tabs-has-left-arrow',\n    tabsHasRightArrow: 'tabs-has-right-arrow',\n};\n\nexport const tokens = {\n    disabledOpacity: '--plasma-tabs-disabled-opacity',\n    containerWidth: '--plasma-tabs-container-width',\n    cursor: '--plasma-tabs-cursor',\n    color: '--plasma-tabs-color',\n    colorHover: '--plasma-tabs-color-hover',\n\n    tabsDividerHeight: '--plasma-tabs-divider-height',\n    tabsDividerColor: '--plasma-tabs-divider-color',\n    tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',\n\n    itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',\n    itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',\n    itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',\n\n    outlineFocusColor: '--plasma-tabs-outline-focus-color',\n    arrowColor: '--plasma-tabs-arrow-color',\n    tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',\n\n    tabsBackgroundColor: '--plasma-tabs-backgorund-color',\n    tabsBorderRadius: '--plasma-tabs-border-radius',\n    tabsWidth: '--plasma-tabs-width',\n    tabsHeight: '--plasma-tabs-height',\n    tabsPadding: '--plasma-tabs-padding',\n    tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',\n\n    itemBorderRadius: '--plasma-tab-item-border-radius',\n    itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',\n    itemWidth: '--plasma-tab-item-width',\n    itemHeight: '--plasma-tab-item-height',\n    itemPadding: '--plasma-tab-item-padding',\n    itemPaddingClear: '--plasma-tab-item-padding-clear',\n    itemPaddingPilled: '--plasma-tab-item-padding-pilled',\n    itemMarginLeft: '--plasma-tab-item-margin-left',\n    itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',\n    itemContentGap: '--plasma-tab-item-content-gap',\n\n    itemContentPadding: '--plasma-tab-item-content-padding',\n    itemContentPaddingClear: '--plasma-tab-item-content-padding-clear',\n\n    arrowInnerPadding: '--plasma-tab-arrow-inner-padding',\n    arrowOuterPadding: '--plasma-tab-arrow-outer-padding',\n    arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',\n\n    itemColor: '--plasma-tab-item-color',\n    itemBackgroundColor: '--plasma-tab-item-background-color',\n    itemColorHover: '--plasma-tab-item-color-hover',\n    itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',\n\n    itemSelectedColor: '--plasma-tab-item-selected-color',\n    itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',\n\n    itemBackgroundTransition: '--plasma-tab-item-background-transition',\n\n    additionalContentColor: '--plasma-tab-item-additional-content-color',\n    additionalContentHoverColor: '--plasma-tab-item-hover-additional-content-color',\n    additionalContentSelectedColor: '--plasma-tab-item-selected-additional-content-color',\n    additionalContentSelectedHoverColor: '--plasma-tab-item-selected-hover-additional-content-color',\n\n    fontFamily: '--plasma-tab-item-font-family',\n    fontSize: '--plasma-tab-item-font-size',\n    fontStyle: '--plasma-tab-item-font-style',\n    fontWeight: '--plasma-tab-item-font-weight',\n    letterSpacing: '--plasma-tab-item-letter-spacing',\n    lineHeight: '--plasma-tab-item-lineheight',\n};\n"],"names":["classes","selectedTabsItem","tabsPilled","tabsGroupFilledBackground","tabsStretch","tabItemDivider","tabItemAnimated","tabContent","tabRightContent","tabLeftContent","tabsHasLeftArrow","tabsHasRightArrow","tokens","disabledOpacity","containerWidth","cursor","color","colorHover","tabsDividerHeight","tabsDividerColor","tabsDividerBorderRadius","itemSelectedDividerHeight","itemSelectedDividerColor","itemSelectedDividerColorHover","outlineFocusColor","arrowColor","tabsFilledBackgroundColor","tabsBackgroundColor","tabsBorderRadius","tabsWidth","tabsHeight","tabsPadding","tabsPilledBorderRadius","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPaddingClear","itemPaddingPilled","itemMarginLeft","itemMarginLeftFilled","itemContentGap","itemContentPadding","itemContentPaddingClear","arrowInnerPadding","arrowOuterPadding","arrowViewOuterPadding","itemColor","itemBackgroundColor","itemColorHover","itemBackgroundColorHover","itemSelectedColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedBackgroundColorHover","itemBackgroundTransition","additionalContentColor","additionalContentHoverColor","additionalContentSelectedColor","additionalContentSelectedHoverColor","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight"],"mappings":"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"}

package/es/components/Tabs/ui/TabItem/TabItem.css

@@ -1,4 +1,4 @@
-.base_7pcxtm_b5uyjxl__b67ab7ce{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_7pcxtm_b5uyjxl__b67ab7ce:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_7pcxtm_b5uyjxl__b67ab7ce:hover .base_7pcxtm_r265xop__b67ab7ce{color:var(--plasma-tab-item-hover-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce:active{color:var(--plasma-tab-item-color-active);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_tabItemAnimated__b67ab7ce{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce .base_7pcxtm_r265xop__b67ab7ce{color:var(--plasma-tab-item-selected-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce .base_7pcxtm_r265xop__b67ab7ce:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.base_7pcxtm_b5uyjxl__b67ab7ce.base_7pcxtm_selectedTabsItem__b67ab7ce::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}
+.base_q8xs21_b5uyjxl__66eab5c4{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.base_q8xs21_b5uyjxl__66eab5c4:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.base_q8xs21_b5uyjxl__66eab5c4:hover .base_q8xs21_r265xop__66eab5c4{color:var(--plasma-tab-item-hover-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_tabItemAnimated__66eab5c4{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4 .base_q8xs21_r265xop__66eab5c4{color:var(--plasma-tab-item-selected-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4 .base_q8xs21_r265xop__66eab5c4:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.base_q8xs21_b5uyjxl__66eab5c4.base_q8xs21_selectedTabsItem__66eab5c4::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}
 
 .base_1d7e3fp_bvmpqz9__8fd7c45d{font-family:var(--plasma-tab-item-font-family);font-size:var(--plasma-tab-item-font-size);font-style:var(--plasma-tab-item-font-style);font-weight:var(--plasma-tab-item-font-weight);-webkit-letter-spacing:var(--plasma-tab-item-letter-spacing);-moz-letter-spacing:var(--plasma-tab-item-letter-spacing);-ms-letter-spacing:var(--plasma-tab-item-letter-spacing);letter-spacing:var(--plasma-tab-item-letter-spacing);line-height:var(--plasma-tab-item-lineheight);--plasma_private-outline-radius:var(--plasma-tab-item-border-radius);border-radius:var(--plasma-tab-item-border-radius);width:var(--plasma-tab-item-width);height:var(--plasma-tab-item-height);}
 

package/es/components/Tabs/ui/TabItem/TabItem.js

@@ -10,7 +10,7 @@ import { base as base$4 } from './variations/_pilled/base.js';
 import { base as base$3 } from './variations/_disabled/base.js';
 import { LeftContent, StyledContent, RightContent, base } from './TabItem.styles.js';
 
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className"];
 var tabItemRoot = function tabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var size = props.size,
@@ -30,7 +30,6 @@ var tabItemRoot = function tabItemRoot(Root) {
       itemIndex = props.itemIndex,
       tabIndex = props.tabIndex,
       className = props.className,
-      onClick = props.onClick,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
@@ -72,10 +71,6 @@ var tabItemRoot = function tabItemRoot(Root) {
       onIndexChange === null || onIndexChange === void 0 || onIndexChange(focusIndex);
       refs.setCurrent(focusIndex);
     }, [refs, innerRef, onIndexChange, disabled]);
-    var handleClick = useCallback(function (event) {
-      event.currentTarget.scrollIntoView();
-      onClick && onClick(event);
-    }, [onClick]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
@@ -85,8 +80,7 @@ var tabItemRoot = function tabItemRoot(Root) {
       size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(pilledClass, selectedClass, animatedClass, className),
-      onClick: handleClick
+      className: cx(pilledClass, selectedClass, animatedClass, className)
     }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {

package/es/components/Tabs/ui/TabItem/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.js","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { ComponentConfig, RootProps } from '../../../../engines';\nimport { classes } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabsContext } from '../../TabsContext';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { TabItemProps } from './TabItem.types';\nimport { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';\n\nexport const tabItemRoot = (Root: RootProps<HTMLDivElement, TabItemProps>) =>\n    forwardRef<HTMLDivElement, TabItemProps>((props, outerRef) => {\n        const {\n            size,\n            view,\n            isActive,\n            selected,\n            disabled = false,\n            pilled = false,\n            children,\n            contentLeft,\n            contentRight,\n            animated = true,\n            onIndexChange,\n            itemIndex,\n            tabIndex,\n            className,\n            onClick,\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLDivElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n        const refs = useContext(TabsContext);\n\n        const role = 'tab';\n\n        const pilledAttr = view !== 'clear' && pilled;\n        const animatedClass = animated ? classes.tabItemAnimated : undefined;\n        const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n        const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n        const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n        const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n        useEffect(() => {\n            if (!refs) {\n                return;\n            }\n\n            refs.register(innerRef);\n\n            return () => refs.unregister(innerRef);\n        }, [refs]);\n\n        const onItemFocus = useCallback<React.FocusEventHandler>(\n            (event) => {\n                if (!hasKeyNavigation && innerRef?.current) {\n                    innerRef.current.scrollTo({\n                        top: 0,\n                        left: innerRef.current.offsetLeft,\n                        behavior: 'smooth',\n                    });\n\n                    return;\n                }\n\n                if (disabled || !refs) {\n                    return;\n                }\n\n                const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n                if (focusIndex === refs.current) {\n                    return;\n                }\n\n                onIndexChange?.(focusIndex);\n                refs.setCurrent(focusIndex);\n            },\n            [refs, innerRef, onIndexChange, disabled],\n        );\n\n        const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n            (event) => {\n                event.currentTarget.scrollIntoView();\n                onClick && onClick(event);\n            },\n            [onClick],\n        );\n\n        return (\n            <Root\n                ref={ref}\n                disabled={disabled}\n                pilled={pilled}\n                role={role}\n                view={view}\n                size={size}\n                onFocus={onItemFocus}\n                tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n                className={cx(pilledClass, selectedClass, animatedClass, className)}\n                onClick={handleClick}\n                {...rest}\n            >\n                <>\n                    {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n                    <StyledContent className={classes.tabContent}>{children}</StyledContent>\n                    {contentRight && <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>}\n                </>\n            </Root>\n        );\n    });\n\nexport const tabItemConfig: ComponentConfig = {\n    name: 'TabItem',\n    tag: 'button',\n    layout: tabItemRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        pilled: {\n            css: pilledCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n    },\n};\n"],"names":["tabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","onClick","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","currentTarget","scrollIntoView","React","createElement","_extends","onFocus","cx","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","RightContent","tabRightContent","tabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"TabItem.js","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { ComponentConfig, RootProps } from '../../../../engines';\nimport { classes } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabsContext } from '../../TabsContext';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { TabItemProps } from './TabItem.types';\nimport { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';\n\nexport const tabItemRoot = (Root: RootProps<HTMLDivElement, TabItemProps>) =>\n    forwardRef<HTMLDivElement, TabItemProps>((props, outerRef) => {\n        const {\n            size,\n            view,\n            isActive,\n            selected,\n            disabled = false,\n            pilled = false,\n            children,\n            contentLeft,\n            contentRight,\n            animated = true,\n            onIndexChange,\n            itemIndex,\n            tabIndex,\n            className,\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLDivElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n        const refs = useContext(TabsContext);\n\n        const role = 'tab';\n\n        const pilledAttr = view !== 'clear' && pilled;\n        const animatedClass = animated ? classes.tabItemAnimated : undefined;\n        const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n        const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n        const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n        const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n        useEffect(() => {\n            if (!refs) {\n                return;\n            }\n\n            refs.register(innerRef);\n\n            return () => refs.unregister(innerRef);\n        }, [refs]);\n\n        const onItemFocus = useCallback<React.FocusEventHandler>(\n            (event) => {\n                if (!hasKeyNavigation && innerRef?.current) {\n                    innerRef.current.scrollTo({\n                        top: 0,\n                        left: innerRef.current.offsetLeft,\n                        behavior: 'smooth',\n                    });\n\n                    return;\n                }\n\n                if (disabled || !refs) {\n                    return;\n                }\n\n                const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n                if (focusIndex === refs.current) {\n                    return;\n                }\n\n                onIndexChange?.(focusIndex);\n                refs.setCurrent(focusIndex);\n            },\n            [refs, innerRef, onIndexChange, disabled],\n        );\n\n        return (\n            <Root\n                ref={ref}\n                disabled={disabled}\n                pilled={pilled}\n                role={role}\n                view={view}\n                size={size}\n                onFocus={onItemFocus}\n                tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n                className={cx(pilledClass, selectedClass, animatedClass, className)}\n                {...rest}\n            >\n                <>\n                    {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n                    <StyledContent className={classes.tabContent}>{children}</StyledContent>\n                    {contentRight && <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>}\n                </>\n            </Root>\n        );\n    });\n\nexport const tabItemConfig: ComponentConfig = {\n    name: 'TabItem',\n    tag: 'button',\n    layout: tabItemRoot,\n    base,\n    variations: {\n        size: {\n            css: sizeCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        pilled: {\n            css: pilledCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n    },\n};\n"],"names":["tabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","React","createElement","_extends","onFocus","cx","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","RightContent","tabRightContent","tabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}

package/es/components/Tabs/ui/TabItem/variations/_view/base.js

@@ -1,4 +1,4 @@
-import './base_7pcxtm.css';
+import './base_q8xs21.css';
 var base = "b5uyjxl";
 
 export { base };

package/es/components/Tabs/ui/TabItem/variations/_view/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Tabs/ui/TabItem/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\nimport { RightContent } from '../../TabItem.styles';\n\nexport const base = css`\n    color: var(${tokens.itemColor});\n    background-color: var(${tokens.itemBackgroundColor});\n\n    margin-left: var(${tokens.itemMarginLeftFilled}, var(${tokens.itemMarginLeft}));\n\n    &:hover {\n        color: var(${tokens.itemColorHover});\n        background-color: var(${tokens.itemBackgroundColorHover});\n\n        ${RightContent} {\n            color: var(${tokens.additionalContentHoverColor});\n        }\n    }\n\n    &:active {\n        color: var(${tokens.itemColorActive});\n    }\n\n    &.${String(classes.tabItemAnimated)} {\n        transition: var(${tokens.itemBackgroundTransition});\n    }\n\n    &.${String(classes.selectedTabsItem)} {\n        color: var(${tokens.itemSelectedColor});\n        background-color: var(${tokens.itemSelectedBackgroundColor});\n\n        &:hover {\n            color: var(${tokens.itemSelectedColorHover});\n            background-color: var(${tokens.itemSelectedBackgroundColorHover});\n\n            &::after {\n                background: var(${tokens.itemSelectedDividerColorHover});\n            }\n        }\n\n        ${RightContent} {\n            color: var(${tokens.additionalContentSelectedColor});\n\n            &:hover {\n                color: var(${tokens.additionalContentSelectedHoverColor});\n            }\n        }\n\n        &::after {\n            content: '';\n            position: absolute;\n            bottom: 0px;\n            left: 0;\n            right: 0;\n            background: var(${tokens.itemSelectedDividerColor});\n            height: var(${tokens.itemSelectedDividerHeight});\n            border-radius: 1px;\n        }\n    }\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GAuDhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/Tabs/ui/TabItem/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../../../tokens';\nimport { RightContent } from '../../TabItem.styles';\n\nexport const base = css`\n    color: var(${tokens.itemColor});\n    background-color: var(${tokens.itemBackgroundColor});\n\n    margin-left: var(${tokens.itemMarginLeftFilled}, var(${tokens.itemMarginLeft}));\n\n    &:hover {\n        color: var(${tokens.itemColorHover});\n        background-color: var(${tokens.itemBackgroundColorHover});\n\n        ${RightContent} {\n            color: var(${tokens.additionalContentHoverColor});\n        }\n    }\n\n    &.${String(classes.tabItemAnimated)} {\n        transition: var(${tokens.itemBackgroundTransition});\n    }\n\n    &.${String(classes.selectedTabsItem)} {\n        color: var(${tokens.itemSelectedColor});\n        background-color: var(${tokens.itemSelectedBackgroundColor});\n\n        &:hover {\n            color: var(${tokens.itemSelectedColorHover});\n            background-color: var(${tokens.itemSelectedBackgroundColorHover});\n\n            &::after {\n                background: var(${tokens.itemSelectedDividerColorHover});\n            }\n        }\n\n        ${RightContent} {\n            color: var(${tokens.additionalContentSelectedColor});\n\n            &:hover {\n                color: var(${tokens.additionalContentSelectedHoverColor});\n            }\n        }\n\n        &::after {\n            content: '';\n            position: absolute;\n            bottom: 0px;\n            left: 0;\n            right: 0;\n            background: var(${tokens.itemSelectedDividerColor});\n            height: var(${tokens.itemSelectedDividerHeight});\n            border-radius: 1px;\n        }\n    }\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GAmDhB;;;;"}

package/es/components/Tabs/ui/TabItem/variations/_view/base_q8xs21.css

@@ -0,0 +1 @@
+.b5uyjxl{color:var(--plasma-tab-item-color);background-color:var(--plasma-tab-item-background-color);margin-left:var(--plasma-tab-item-margin-left-filled,var(--plasma-tab-item-margin-left));}.b5uyjxl:hover{color:var(--plasma-tab-item-color-hover);background-color:var(--plasma-tab-item-background-color-hover);}.b5uyjxl:hover .r265xop{color:var(--plasma-tab-item-hover-additional-content-color);}.b5uyjxl.tab-item-animated{-webkit-transition:var(--plasma-tab-item-background-transition);transition:var(--plasma-tab-item-background-transition);}.b5uyjxl.selected-tabs-item{color:var(--plasma-tab-item-selected-color);background-color:var(--plasma-tab-item-selected-background-color);}.b5uyjxl.selected-tabs-item:hover{color:var(--plasma-tab-item-selected-color-hover);background-color:var(--plasma-tab-item-selected-background-color-hover);}.b5uyjxl.selected-tabs-item:hover::after{background:var(--plasma-tab-item-selected-hover-divider-color);}.b5uyjxl.selected-tabs-item .r265xop{color:var(--plasma-tab-item-selected-additional-content-color);}.b5uyjxl.selected-tabs-item .r265xop:hover{color:var(--plasma-tab-item-selected-hover-additional-content-color);}.b5uyjxl.selected-tabs-item::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(--plasma-tab-item-selected-divider-color);height:var(--plasma-tab-item-selected-divider-height);border-radius:1px;}

package/es/components/Tabs/ui/Tabs/Tabs.css

@@ -2,15 +2,15 @@
 
 .base_iw773q_b12fajph__34b9af5a{width:var(--plasma-tabs-width);height:var(--plasma-tabs-height);--plasma_private-outline-radius:var(--plasma-tabs-border-radius);border-radius:var(--plasma-tabs-border-radius);}
 
-.base_aij3sf_b1mh5p08__d6b8b2c3{background-color:var(--plasma-tabs-background-color);}.base_aij3sf_b1mh5p08__d6b8b2c3::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_aij3sf_b1mh5p08__d6b8b2c3.base_aij3sf_tabsHasLeftArrow__d6b8b2c3::after{left:1.5rem;}.base_aij3sf_b1mh5p08__d6b8b2c3.base_aij3sf_tabsHasRightArrow__d6b8b2c3::after{right:1.5rem;}
+.base_4xkt26_b1mh5p08__45365c21{background-color:var(--plasma-tabs-backgorund-color);}.base_4xkt26_b1mh5p08__45365c21::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(--plasma-tabs-divider-color);height:var(--plasma-tabs-divider-height);border-radius:var(--plasma-tabs-divider-border-radius);}.base_4xkt26_b1mh5p08__45365c21.base_4xkt26_tabsHasLeftArrow__45365c21::after{left:1.5rem;}.base_4xkt26_b1mh5p08__45365c21.base_4xkt26_tabsHasRightArrow__45365c21::after{right:1.5rem;}
 
 .base_1i8tr9c_b1lwejhw__63d2542b{opacity:var(--plasma-tabs-disabled-opacity);}
 
 .base_1ujjl52_b1aa8x3y__dbe55f93.base_1ujjl52_tabsPilled__dbe55f93{--plasma_private-outline-radius:var(--plasma-tabs-pilled-border-radius);border-radius:var(--plasma-tabs-pilled-border-radius);}
 
-.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea{width:100%;}.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_sh5e38r__a2a07cea,.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_s8qwlso__a2a07cea,.base_1c7lnrm_be36ynn__a2a07cea.base_1c7lnrm_tabsStretched__a2a07cea .base_1c7lnrm_s8qwlso__a2a07cea > button{width:100%;margin-left:0;}
+.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac{width:100%;}.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_sh5e38r__f15737ac,.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_s8qwlso__f15737ac,.base_176tz0n_be36ynn__f15737ac.base_176tz0n_tabsStretched__f15737ac .base_176tz0n_s8qwlso__f15737ac > button{width:100%;}
 
-.Tabs_styles_z4dnzh_bu8v92r__3f447f56{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0.125rem;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
-.Tabs_styles_z4dnzh_s8qwlso__3f447f56{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.Tabs_styles_z4dnzh_sh5e38r__3f447f56{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipScroll__3f447f56{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipScroll__3f447f56::-webkit-scrollbar{display:none;}.Tabs_styles_z4dnzh_sh5e38r__3f447f56.Tabs_styles_z4dnzh_tabsClipShowAll__3f447f56{overflow:visible;}
-.Tabs_styles_z4dnzh_s1ekwj92__3f447f56{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1ekwj92-0);padding-right:var(--s1ekwj92-1);padding-left:var(--s1ekwj92-2);}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56.Tabs_styles_z4dnzh_focusVisible__3f447f56:focus::before,.Tabs_styles_z4dnzh_s1ekwj92__3f447f56[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.Tabs_styles_z4dnzh_s1ekwj92__3f447f56[disabled]{cursor:not-allowed;}
+.Tabs_styles_1b8qt33_bu8v92r__719988cb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}
+.Tabs_styles_1b8qt33_s8qwlso__719988cb{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.Tabs_styles_1b8qt33_sh5e38r__719988cb{margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;overscroll-behavior:contain;}.Tabs_styles_1b8qt33_sh5e38r__719988cb::-webkit-scrollbar{display:none;}
+.Tabs_styles_1b8qt33_s1ekwj92__719988cb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;position:relative;--plasma_private-outer-padding:var(--s1ekwj92-0);padding-right:var(--s1ekwj92-1);padding-left:var(--s1ekwj92-2);}.Tabs_styles_1b8qt33_s1ekwj92__719988cb::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Tabs_styles_1b8qt33_s1ekwj92__719988cb.Tabs_styles_1b8qt33_focusVisible__719988cb:focus::before,.Tabs_styles_1b8qt33_s1ekwj92__719988cb[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-tabs-outline-focus-color);}.Tabs_styles_1b8qt33_s1ekwj92__719988cb[disabled]{cursor:not-allowed;}

package/es/components/Tabs/ui/Tabs/Tabs.js

@@ -1,6 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef, useState, useMemo, useRef, useCallback, useEffect } from 'react';
-import { safeUseId } from '@salutejs/plasma-core';
+import { safeUseId, animatedScrollToX } from '@salutejs/plasma-core';
 import { IconDisclosureLeft } from '../../../_Icon/Icons/IconDisclosureLeft.js';
 import { IconDisclosureRight } from '../../../_Icon/Icons/IconDisclosureRight.js';
 import '@linaria/react';
@@ -14,7 +14,7 @@ import { base as base$5 } from './variations/_pilled/base.js';
 import { base as base$4 } from './variations/_stretch/base.js';
 import { StyledArrow, StyledContentWrapper, StyledContent, base } from './Tabs.styles.js';
 
-var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
+var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index", "className"];
 var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["end"] = 35] = "end";
   Keys[Keys["home"] = 36] = "home";
@@ -29,13 +29,10 @@ var tabsRoot = function tabsRoot(Root) {
       stretch = _props$stretch === void 0 ? false : _props$stretch,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$clip = props.clip,
-      clip = _props$clip === void 0 ? 'scroll' : _props$clip,
       size = props.size,
       view = props.view,
       children = props.children,
-      _props$pilled = props.pilled,
-      pilled = _props$pilled === void 0 ? false : _props$pilled,
+      pilled = props.pilled,
       index = props.index,
       className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
@@ -58,41 +55,14 @@ var tabsRoot = function tabsRoot(Root) {
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;
-    var clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;
-    var clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;
     var scrollRef = useRef(null);
     var trackRef = useRef(null);
-    var leftArrowRef = useRef(null);
     var onPrev = useCallback(function () {
-      var _firstOverflowingTab$;
-      if (disabled || !scrollRef.current) {
-        return;
-      }
-      var scrollLeft = Math.round(scrollRef.current.scrollLeft);
-      var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabStartX = item.current.offsetLeft;
-        return tabStartX < scrollLeft;
-      });
-      firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView();
-    }, [disabled, scrollRef, refs]);
+      !disabled && scrollRef.current && animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft - scrollRef.current.offsetWidth / 2);
+    }, [disabled, scrollRef]);
     var onNext = useCallback(function () {
-      var _lastOverflowingTab$c;
-      if (disabled || !scrollRef.current) {
-        return;
-      }
-      var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
-      var lastOverflowingTab = refs.items.find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
-        return tabEndX > scrollRight;
-      });
-      lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView();
-    }, [disabled, scrollRef, refs]);
+      !disabled && scrollRef.current && animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft + scrollRef.current.offsetWidth / 2);
+    }, [disabled, scrollRef]);
     var PreviousButton = useMemo(function () {
       return /*#__PURE__*/React.createElement(StyledArrow, {
         type: "button",
@@ -101,7 +71,6 @@ var tabsRoot = function tabsRoot(Root) {
         tabIndex: disabled ? -1 : 0,
         disabled: disabled,
         isFilled: isFilled,
-        ref: leftArrowRef,
         isLeftArrow: true
       }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
         color: "var(".concat(tokens.arrowColor, ")")
@@ -122,9 +91,8 @@ var tabsRoot = function tabsRoot(Root) {
     var handleScroll = useCallback(function (event) {
       event.stopPropagation();
       var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
-      var scrollLeft = Math.round(event.currentTarget.scrollLeft);
-      setFirstItemVisible(scrollLeft <= 0);
-      setLastItemVisible(scrollLeft >= maxScrollLeft);
+      setFirstItemVisible(event.currentTarget.scrollLeft <= 0);
+      setLastItemVisible(event.currentTarget.scrollLeft >= maxScrollLeft);
     }, [setFirstItemVisible, setLastItemVisible]);
     var onKeyDown = useCallback(function (event) {
       if (index === undefined) {
@@ -164,16 +132,6 @@ var tabsRoot = function tabsRoot(Root) {
       var _scrollRef$current, _scrollRef$current2;
       setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
     }, []);
-
-    // Этот хук компенсирует появление левой стрелки при прокрутке
-    useEffect(function () {
-      if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
-        return;
-      }
-      scrollRef.current.scrollTo({
-        left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
-      });
-    }, [firstItemVisible, scrollRef, leftArrowRef]);
     return /*#__PURE__*/React.createElement(TabsContext.Provider, {
       value: refs
     }, /*#__PURE__*/React.createElement(Root, _extends({
@@ -187,7 +145,6 @@ var tabsRoot = function tabsRoot(Root) {
       className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
-      className: cx(clipScrollClass, clipShowAllClass),
       ref: scrollRef,
       onScroll: handleScroll
     }, /*#__PURE__*/React.createElement(StyledContent, {