@salutejs/plasma-new-hope 0.112.0-canary.1310.10078865814.0 → 0.112.0-canary.1310.10092346956.0

package/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -3,67 +3,32 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index = require('../../utils/index.js');
+var index$1 = require('../../utils/index.js');
 var base$1 = require('./variations/_size/base.js');
 var base = require('./variations/_view/base.js');
 var Breadcrumbs_styles = require('./Breadcrumbs.styles.js');
-var BreadcrumbShorter = require('./ui/BreadcrumbShorter/BreadcrumbShorter.js');
+var index = require('./utils/index.js');
 
-var shortItems = function shortItems(items, renderSeparator, showItems) {
-  if (!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.BreadcrumbShorter, {
-    separator: renderSeparator
-  }, renderItems);
-  items.splice(leftSlice, rightSlice - leftSlice, shorter);
-  return items;
-};
-var convertIconSize = function convertIconSize(size) {
-  switch (size) {
-    case 's':
-      return 'xs';
-    case 'm':
-      return 's';
-    case 'l':
-      return 's';
-    default:
-      return 's';
-  }
-};
 var breadcrumbsRoot = function breadcrumbsRoot(Root) {
   return /*#__PURE__*/React.forwardRef(function (_ref, outerRootRef) {
     var view = _ref.view,
       size = _ref.size,
       separator = _ref.separator,
       items = _ref.items,
-      showItems = _ref.showItems,
+      _ref$showItems = _ref.showItems,
+      showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
       className = _ref.className;
     var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/React.createElement(Breadcrumbs_styles.Separator, {
       color: "inherit",
-      size: convertIconSize(size)
-    });
-    var renderItems = shortItems(items.map(function (item) {
-      if ('renderItem' in item) {
-        return item.renderItem();
-      }
-      return /*#__PURE__*/React.createElement(Breadcrumbs_styles.StyledLink, {
-        tabIndex: 0,
-        href: item.href,
-        isHref: !!item.href
-      }, item.title);
-    }), renderSeparator, showItems);
-    var itemsWithSeparator = renderItems.flatMap(function (item, idx) {
-      return idx < renderItems.length - 1 ? [item, renderSeparator] : [item];
+      size: index.convertIconSize(size)
     });
+    var renderItems = index.getRenderItems(items, renderSeparator, showItems);
+    var itemsWithSeparator = index.addSeparator(renderItems, renderSeparator);
     return /*#__PURE__*/React.createElement(Root, {
       ref: outerRootRef,
       size: size,
       view: view,
-      className: index.cx(className),
+      className: index$1.cx(className),
       items: items
     }, itemsWithSeparator.map(function (item) {
       return item;

package/cjs/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { BreadcrumbsProps, BreadcrumbsItem } from './Breadcrumbs.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { StyledLink, base, Separator } from './Breadcrumbs.styles';\nimport { BreadcrumbShorter } from './ui/BreadcrumbShorter/BreadcrumbShorter';\n\nconst shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n    if (!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\nconst convertIconSize = (size?: 'xs' | 's' | 'm' | 'l') => {\n    switch (size) {\n        case 's':\n            return 'xs';\n        case 'm':\n            return 's';\n        case 'l':\n            return 's';\n        default:\n            return 's';\n    }\n};\n\nexport const breadcrumbsRoot = (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) =>\n    forwardRef<HTMLDivElement, BreadcrumbsProps>(\n        ({ view, size, separator, items, showItems, className }, outerRootRef) => {\n            const renderSeparator = separator ?? <Separator color=\"inherit\" size={convertIconSize(size)} />;\n            const renderItems: ReactNode[] = 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={!!item.href}>\n                            {item.title}\n                        </StyledLink>\n                    );\n                }),\n                renderSeparator,\n                showItems,\n            );\n\n            const itemsWithSeparator = renderItems.flatMap((item, idx) =>\n                idx < renderItems.length - 1 ? [item, renderSeparator] : [item],\n            );\n\n            return (\n                <Root ref={outerRootRef} size={size} view={view} className={cx(className)} items={items}>\n                    {itemsWithSeparator.map((item) => {\n                        return item;\n                    })}\n                </Root>\n            );\n        },\n    );\n\nexport const breadcrumbsConfig = {\n    name: 'Breadcrumbs',\n    tag: 'div',\n    layout: breadcrumbsRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["shortItems","items","renderSeparator","showItems","leftSlice","Math","floor","rightSlice","length","renderItems","slice","shorter","React","createElement","BreadcrumbShorter","separator","splice","convertIconSize","size","breadcrumbsRoot","Root","forwardRef","_ref","outerRootRef","view","className","Separator","color","map","item","renderItem","StyledLink","tabIndex","href","isHref","title","itemsWithSeparator","flatMap","idx","ref","cx","breadcrumbsConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { BreadcrumbsProps } from './Breadcrumbs.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, Separator } from './Breadcrumbs.styles';\nimport { addSeparator, convertIconSize, getRenderItems } from './utils';\n\nexport const breadcrumbsRoot = (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) =>\n    forwardRef<HTMLDivElement, BreadcrumbsProps>(\n        ({ view, size, separator, items, showItems = items.length, className }, outerRootRef) => {\n            const renderSeparator = separator ?? <Separator color=\"inherit\" size={convertIconSize(size)} />;\n            const renderItems: ReactNode[] = getRenderItems(items, renderSeparator, showItems);\n            const itemsWithSeparator = addSeparator(renderItems, renderSeparator);\n\n            return (\n                <Root ref={outerRootRef} size={size} view={view} className={cx(className)} items={items}>\n                    {itemsWithSeparator.map((item) => {\n                        return item;\n                    })}\n                </Root>\n            );\n        },\n    );\n\nexport const breadcrumbsConfig = {\n    name: 'Breadcrumbs',\n    tag: 'div',\n    layout: breadcrumbsRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["breadcrumbsRoot","Root","forwardRef","_ref","outerRootRef","view","size","separator","items","_ref$showItems","showItems","length","className","renderSeparator","React","createElement","Separator","color","convertIconSize","renderItems","getRenderItems","itemsWithSeparator","addSeparator","ref","cx","map","item","breadcrumbsConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":";;;;;;;;;;;IAWaA,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAiD,EAAA;AAAA,EAAA,oBAC7EC,gBAAU,CACN,UAAAC,IAAA,EAAwEC,YAAY,EAAK;AAAA,IAAA,IAAtFC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;MAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;MAAAC,cAAA,GAAAN,IAAA,CAAEO,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAA,KAAA,CAAA,GAAGD,KAAK,CAACG,MAAM,GAAAF,cAAA;MAAEG,SAAS,GAAAT,IAAA,CAATS,SAAS,CAAA;AAChE,IAAA,IAAMC,eAAe,GAAGN,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,gBAAIO,KAAA,CAAAC,aAAA,CAACC,4BAAS,EAAA;AAACC,MAAAA,KAAK,EAAC,SAAS;MAACX,IAAI,EAAEY,qBAAe,CAACZ,IAAI,CAAA;AAAE,KAAE,CAAC,CAAA;IAC/F,IAAMa,WAAwB,GAAGC,oBAAc,CAACZ,KAAK,EAAEK,eAAe,EAAEH,SAAS,CAAC,CAAA;AAClF,IAAA,IAAMW,kBAAkB,GAAGC,kBAAY,CAACH,WAAW,EAAEN,eAAe,CAAC,CAAA;AAErE,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACd,IAAI,EAAA;AAACsB,MAAAA,GAAG,EAAEnB,YAAa;AAACE,MAAAA,IAAI,EAAEA,IAAK;AAACD,MAAAA,IAAI,EAAEA,IAAK;AAACO,MAAAA,SAAS,EAAEY,UAAE,CAACZ,SAAS,CAAE;AAACJ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EACnFa,kBAAkB,CAACI,GAAG,CAAC,UAACC,IAAI,EAAK;AAC9B,MAAA,OAAOA,IAAI,CAAA;AACf,KAAC,CACC,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMC,iBAAiB,GAAG;AAC7BC,EAAAA,IAAI,EAAE,aAAa;AACnBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE9B,eAAe;AACvB+B,EAAAA,IAAI,EAAJA,uBAAI;AACJC,EAAAA,UAAU,EAAE;AACR3B,IAAAA,IAAI,EAAE;AACF4B,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACD5B,IAAAA,IAAI,EAAE;AACF2B,MAAAA,GAAG,EAAEE,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACN/B,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;;"}

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var index = require('../../utils/index.js');
 var BreadcrumbShorter_styles = require('./BreadcrumbShorter.styles.js');
 
 var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
@@ -13,9 +14,7 @@ var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     openShorter = _useState2[0],
     setOpenShorter = _useState2[1];
-  var renderItems = children.flatMap(function (item, idx) {
-    return idx < children.length - 1 ? [item, separator] : [item];
-  });
+  var renderItems = index.addSeparator(children, separator);
   var onKeyPress = function onKeyPress(event) {
     event.persist();
     if (event.keyCode === 13) {

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

@@ -1 +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 { 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[] = children.flatMap((item, idx) =>\n        idx < children.length - 1 ? [item, separator] : [item],\n    );\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","flatMap","item","idx","length","onKeyPress","event","persist","keyCode","React","createElement","StyledRoot","StyledShorter","tabIndex","onClick","onKeyDown","StyledHidden","map"],"mappings":";;;;;;;;IAKaA,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,cAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA9CI,IAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;EAElC,IAAMI,WAAwB,GAAGR,QAAQ,CAACS,OAAO,CAAC,UAACC,IAAI,EAAEC,GAAG,EAAA;AAAA,IAAA,OACxDA,GAAG,GAAGX,QAAQ,CAACY,MAAM,GAAG,CAAC,GAAG,CAACF,IAAI,EAAET,SAAS,CAAC,GAAG,CAACS,IAAI,CAAC,CAAA;AAAA,GAC1D,CAAC,CAAA;AAED,EAAA,IAAMG,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAoC,EAAK;IACzDA,KAAK,CAACC,OAAO,EAAE,CAAA;AAEf,IAAA,IAAID,KAAK,CAACE,OAAO,KAAK,EAAE,EAAE;MACtBT,cAAc,CAAC,IAAI,CAAC,CAAA;AACxB,KAAA;GACH,CAAA;AAED,EAAA,oBACIU,KAAA,CAAAC,aAAA,CAACC,mCAAU,EAAA,IAAA,EACN,CAACb,WAAW,iBACTW,KAAA,CAAAC,aAAA,CAACE,sCAAa,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAAE;IAACC,OAAO,EAAE,SAAAA,OAAA,GAAA;MAAA,OAAMf,cAAc,CAAC,IAAI,CAAC,CAAA;KAAC;AAACgB,IAAAA,SAAS,EAAEV,UAAAA;AAAW,GAAA,EAAC,KAEzE,CAClB,EACAP,WAAW,iBACRW,KAAA,CAAAC,aAAA,CAACM,qCAAY,QACRhB,WAAW,CAACiB,GAAG,CAAC,UAACf,IAAI,EAAK;AACvB,IAAA,OAAOA,IAAI,CAAA;GACd,CACS,CAEV,CAAC,CAAA;AAErB;;;;"}
+{"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,cAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,uCAAA,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,kBAAY,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,mCAAU,EAAA,IAAA,EACN,CAACV,WAAW,iBACTQ,KAAA,CAAAC,aAAA,CAACE,sCAAa,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,qCAAY,QACRb,WAAW,CAACc,GAAG,CAAC,UAACC,IAAI,EAAK;AACvB,IAAA,OAAOA,IAAI,CAAA;GACd,CACS,CAEV,CAAC,CAAA;AAErB;;;;"}

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

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var BreadcrumbShorter = require('../ui/BreadcrumbShorter/BreadcrumbShorter.js');
+var Breadcrumbs_styles = require('../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.BreadcrumbShorter, {
+    separator: renderSeparator
+  }, renderItems);
+  items.splice(leftSlice, rightSlice - leftSlice, shorter);
+  return items;
+};
+var convertIconSize = function convertIconSize(size) {
+  switch (size) {
+    case 's':
+      return 'xs';
+    case 'm':
+      return 's';
+    case 'l':
+      return 's';
+    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(Breadcrumbs_styles.StyledLink, {
+      tabIndex: 0,
+      href: item.href,
+      isHref: !!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];
+  });
+};
+
+exports.addSeparator = addSeparator;
+exports.convertIconSize = convertIconSize;
+exports.getRenderItems = getRenderItems;
+exports.shortItems = shortItems;
+//# sourceMappingURL=index.js.map

package/cjs/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            return 'xs';\n        case 'm':\n            return 's';\n        case 'l':\n            return 's';\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={!!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","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,mCAAiB,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;AACJ,MAAA,OAAO,IAAI,CAAA;AACf,IAAA,KAAK,GAAG;AACJ,MAAA,OAAO,GAAG,CAAA;AACd,IAAA,KAAK,GAAG;AACJ,MAAA,OAAO,GAAG,CAAA;AACd,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,6BAAU,EAAA;AAACC,MAAAA,QAAQ,EAAE,CAAE;MAACC,IAAI,EAAEJ,IAAI,CAACI,IAAK;AAACC,MAAAA,MAAM,EAAE,CAAC,CAACL,IAAI,CAACI,IAAAA;KACpDJ,EAAAA,IAAI,CAACM,KACE,CAAC,CAAA;AAErB,GAAC,CAAC,EACFzB,eAAe,EACfC,SACJ,CAAC,CAAA;AACL,EAAC;AAEM,IAAMyB,YAAY,GAAG,SAAfA,YAAYA,CAAI3B,KAAkB,EAAEC,eAA0B,EAAK;AAC5E,EAAA,OAAOD,KAAK,CAAC4B,OAAO,CAAC,UAACR,IAAI,EAAES,GAAG,EAAA;AAAA,IAAA,OAAMA,GAAG,GAAG7B,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAACiB,IAAI,EAAEnB,eAAe,CAAC,GAAG,CAACmB,IAAI,CAAC,CAAA;AAAA,GAAC,CAAC,CAAA;AACpG;;;;;;;"}

package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -10,59 +10,24 @@ var _utils = /*#__PURE__*/require("../../utils");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _Breadcrumbs = /*#__PURE__*/require("./Breadcrumbs.styles");
-var _BreadcrumbShorter = /*#__PURE__*/require("./ui/BreadcrumbShorter/BreadcrumbShorter");
+var _utils2 = /*#__PURE__*/require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var shortItems = function shortItems(items, renderSeparator, showItems) {
-  if (!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["default"].createElement(_BreadcrumbShorter.BreadcrumbShorter, {
-    separator: renderSeparator
-  }, renderItems);
-  items.splice(leftSlice, rightSlice - leftSlice, shorter);
-  return items;
-};
-var convertIconSize = function convertIconSize(size) {
-  switch (size) {
-    case 's':
-      return 'xs';
-    case 'm':
-      return 's';
-    case 'l':
-      return 's';
-    default:
-      return 's';
-  }
-};
 var breadcrumbsRoot = exports.breadcrumbsRoot = function breadcrumbsRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
     var view = _ref.view,
       size = _ref.size,
       separator = _ref.separator,
       items = _ref.items,
-      showItems = _ref.showItems,
+      _ref$showItems = _ref.showItems,
+      showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
       className = _ref.className;
     var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.Separator, {
       color: "inherit",
-      size: convertIconSize(size)
-    });
-    var renderItems = shortItems(items.map(function (item) {
-      if ('renderItem' in item) {
-        return item.renderItem();
-      }
-      return /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.StyledLink, {
-        tabIndex: 0,
-        href: item.href,
-        isHref: !!item.href
-      }, item.title);
-    }), renderSeparator, showItems);
-    var itemsWithSeparator = renderItems.flatMap(function (item, idx) {
-      return idx < renderItems.length - 1 ? [item, renderSeparator] : [item];
+      size: (0, _utils2.convertIconSize)(size)
     });
+    var renderItems = (0, _utils2.getRenderItems)(items, renderSeparator, showItems);
+    var itemsWithSeparator = (0, _utils2.addSeparator)(renderItems, renderSeparator);
     return /*#__PURE__*/_react["default"].createElement(Root, {
       ref: outerRootRef,
       size: size,

package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BreadcrumbShorter = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _utils = /*#__PURE__*/require("../../utils");
 var _BreadcrumbShorter = /*#__PURE__*/require("./BreadcrumbShorter.styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -22,9 +23,7 @@ var BreadcrumbShorter = exports.BreadcrumbShorter = function BreadcrumbShorter(_
     _useState2 = _slicedToArray(_useState, 2),
     openShorter = _useState2[0],
     setOpenShorter = _useState2[1];
-  var renderItems = children.flatMap(function (item, idx) {
-    return idx < children.length - 1 ? [item, separator] : [item];
-  });
+  var renderItems = (0, _utils.addSeparator)(children, separator);
   var onKeyPress = function onKeyPress(event) {
     event.persist();
     if (event.keyCode === 13) {

package/emotion/cjs/components/Breadcrumbs/utils/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortItems = exports.getRenderItems = exports.convertIconSize = exports.addSeparator = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _BreadcrumbShorter = /*#__PURE__*/require("../ui/BreadcrumbShorter/BreadcrumbShorter");
+var _Breadcrumbs = /*#__PURE__*/require("../Breadcrumbs.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var shortItems = exports.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["default"].createElement(_BreadcrumbShorter.BreadcrumbShorter, {
+    separator: renderSeparator
+  }, renderItems);
+  items.splice(leftSlice, rightSlice - leftSlice, shorter);
+  return items;
+};
+var convertIconSize = exports.convertIconSize = function convertIconSize(size) {
+  switch (size) {
+    case 's':
+      return 'xs';
+    case 'm':
+      return 's';
+    case 'l':
+      return 's';
+    default:
+      return 's';
+  }
+};
+var getRenderItems = exports.getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
+  return shortItems(items.map(function (item) {
+    if ('renderItem' in item) {
+      return item.renderItem();
+    }
+    return /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.StyledLink, {
+      tabIndex: 0,
+      href: item.href,
+      isHref: !!item.href
+    }, item.title);
+  }), renderSeparator, showItems);
+};
+var addSeparator = exports.addSeparator = function addSeparator(items, renderSeparator) {
+  return items.flatMap(function (item, idx) {
+    return idx < items.length - 1 ? [item, renderSeparator] : [item];
+  });
+};

package/emotion/es/components/Breadcrumbs/Breadcrumbs.js

@@ -2,58 +2,23 @@ import React, { forwardRef } from 'react';
 import { cx } from '../../utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
-import { StyledLink, base, Separator } from './Breadcrumbs.styles';
-import { BreadcrumbShorter } from './ui/BreadcrumbShorter/BreadcrumbShorter';
-var shortItems = function shortItems(items, renderSeparator, showItems) {
-  if (!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':
-      return 'xs';
-    case 'm':
-      return 's';
-    case 'l':
-      return 's';
-    default:
-      return 's';
-  }
-};
+import { base, Separator } from './Breadcrumbs.styles';
+import { addSeparator, convertIconSize, getRenderItems } from './utils';
 export var breadcrumbsRoot = function breadcrumbsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
     var view = _ref.view,
       size = _ref.size,
       separator = _ref.separator,
       items = _ref.items,
-      showItems = _ref.showItems,
+      _ref$showItems = _ref.showItems,
+      showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
       className = _ref.className;
     var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/React.createElement(Separator, {
       color: "inherit",
       size: convertIconSize(size)
     });
-    var renderItems = shortItems(items.map(function (item) {
-      if ('renderItem' in item) {
-        return item.renderItem();
-      }
-      return /*#__PURE__*/React.createElement(StyledLink, {
-        tabIndex: 0,
-        href: item.href,
-        isHref: !!item.href
-      }, item.title);
-    }), renderSeparator, showItems);
-    var itemsWithSeparator = renderItems.flatMap(function (item, idx) {
-      return idx < renderItems.length - 1 ? [item, renderSeparator] : [item];
-    });
+    var renderItems = getRenderItems(items, renderSeparator, showItems);
+    var itemsWithSeparator = addSeparator(renderItems, renderSeparator);
     return /*#__PURE__*/React.createElement(Root, {
       ref: outerRootRef,
       size: size,

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

@@ -5,6 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState } from 'react';
+import { addSeparator } from '../../utils';
 import { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';
 export var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
   var children = _ref.children,
@@ -13,9 +14,7 @@ export var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     openShorter = _useState2[0],
     setOpenShorter = _useState2[1];
-  var renderItems = children.flatMap(function (item, idx) {
-    return idx < children.length - 1 ? [item, separator] : [item];
-  });
+  var renderItems = addSeparator(children, separator);
   var onKeyPress = function onKeyPress(event) {
     event.persist();
     if (event.keyCode === 13) {

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';
+import { StyledLink } from '../Breadcrumbs.styles';
+export 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;
+};
+export var convertIconSize = function convertIconSize(size) {
+  switch (size) {
+    case 's':
+      return 'xs';
+    case 'm':
+      return 's';
+    case 'l':
+      return 's';
+    default:
+      return 's';
+  }
+};
+export 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: !!item.href
+    }, item.title);
+  }), renderSeparator, showItems);
+};
+export var addSeparator = function addSeparator(items, renderSeparator) {
+  return items.flatMap(function (item, idx) {
+    return idx < items.length - 1 ? [item, renderSeparator] : [item];
+  });
+};

package/es/components/Breadcrumbs/Breadcrumbs.js

@@ -2,59 +2,24 @@ import React, { forwardRef } from 'react';
 import { cx } from '../../utils/index.js';
 import { base as base$2 } from './variations/_size/base.js';
 import { base as base$1 } from './variations/_view/base.js';
-import { StyledLink, base, Separator } from './Breadcrumbs.styles.js';
-import { BreadcrumbShorter } from './ui/BreadcrumbShorter/BreadcrumbShorter.js';
+import { base, Separator } from './Breadcrumbs.styles.js';
+import { getRenderItems, addSeparator, convertIconSize } from './utils/index.js';
 
-var shortItems = function shortItems(items, renderSeparator, showItems) {
-  if (!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':
-      return 'xs';
-    case 'm':
-      return 's';
-    case 'l':
-      return 's';
-    default:
-      return 's';
-  }
-};
 var breadcrumbsRoot = function breadcrumbsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
     var view = _ref.view,
       size = _ref.size,
       separator = _ref.separator,
       items = _ref.items,
-      showItems = _ref.showItems,
+      _ref$showItems = _ref.showItems,
+      showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
       className = _ref.className;
     var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/React.createElement(Separator, {
       color: "inherit",
       size: convertIconSize(size)
     });
-    var renderItems = shortItems(items.map(function (item) {
-      if ('renderItem' in item) {
-        return item.renderItem();
-      }
-      return /*#__PURE__*/React.createElement(StyledLink, {
-        tabIndex: 0,
-        href: item.href,
-        isHref: !!item.href
-      }, item.title);
-    }), renderSeparator, showItems);
-    var itemsWithSeparator = renderItems.flatMap(function (item, idx) {
-      return idx < renderItems.length - 1 ? [item, renderSeparator] : [item];
-    });
+    var renderItems = getRenderItems(items, renderSeparator, showItems);
+    var itemsWithSeparator = addSeparator(renderItems, renderSeparator);
     return /*#__PURE__*/React.createElement(Root, {
       ref: outerRootRef,
       size: size,

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { BreadcrumbsProps, BreadcrumbsItem } from './Breadcrumbs.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { StyledLink, base, Separator } from './Breadcrumbs.styles';\nimport { BreadcrumbShorter } from './ui/BreadcrumbShorter/BreadcrumbShorter';\n\nconst shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n    if (!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\nconst convertIconSize = (size?: 'xs' | 's' | 'm' | 'l') => {\n    switch (size) {\n        case 's':\n            return 'xs';\n        case 'm':\n            return 's';\n        case 'l':\n            return 's';\n        default:\n            return 's';\n    }\n};\n\nexport const breadcrumbsRoot = (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) =>\n    forwardRef<HTMLDivElement, BreadcrumbsProps>(\n        ({ view, size, separator, items, showItems, className }, outerRootRef) => {\n            const renderSeparator = separator ?? <Separator color=\"inherit\" size={convertIconSize(size)} />;\n            const renderItems: ReactNode[] = 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={!!item.href}>\n                            {item.title}\n                        </StyledLink>\n                    );\n                }),\n                renderSeparator,\n                showItems,\n            );\n\n            const itemsWithSeparator = renderItems.flatMap((item, idx) =>\n                idx < renderItems.length - 1 ? [item, renderSeparator] : [item],\n            );\n\n            return (\n                <Root ref={outerRootRef} size={size} view={view} className={cx(className)} items={items}>\n                    {itemsWithSeparator.map((item) => {\n                        return item;\n                    })}\n                </Root>\n            );\n        },\n    );\n\nexport const breadcrumbsConfig = {\n    name: 'Breadcrumbs',\n    tag: 'div',\n    layout: breadcrumbsRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["shortItems","items","renderSeparator","showItems","leftSlice","Math","floor","rightSlice","length","renderItems","slice","shorter","React","createElement","BreadcrumbShorter","separator","splice","convertIconSize","size","breadcrumbsRoot","Root","forwardRef","_ref","outerRootRef","view","className","Separator","color","map","item","renderItem","StyledLink","tabIndex","href","isHref","title","itemsWithSeparator","flatMap","idx","ref","cx","breadcrumbsConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { BreadcrumbsProps } from './Breadcrumbs.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, Separator } from './Breadcrumbs.styles';\nimport { addSeparator, convertIconSize, getRenderItems } from './utils';\n\nexport const breadcrumbsRoot = (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) =>\n    forwardRef<HTMLDivElement, BreadcrumbsProps>(\n        ({ view, size, separator, items, showItems = items.length, className }, outerRootRef) => {\n            const renderSeparator = separator ?? <Separator color=\"inherit\" size={convertIconSize(size)} />;\n            const renderItems: ReactNode[] = getRenderItems(items, renderSeparator, showItems);\n            const itemsWithSeparator = addSeparator(renderItems, renderSeparator);\n\n            return (\n                <Root ref={outerRootRef} size={size} view={view} className={cx(className)} items={items}>\n                    {itemsWithSeparator.map((item) => {\n                        return item;\n                    })}\n                </Root>\n            );\n        },\n    );\n\nexport const breadcrumbsConfig = {\n    name: 'Breadcrumbs',\n    tag: 'div',\n    layout: breadcrumbsRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["breadcrumbsRoot","Root","forwardRef","_ref","outerRootRef","view","size","separator","items","_ref$showItems","showItems","length","className","renderSeparator","React","createElement","Separator","color","convertIconSize","renderItems","getRenderItems","itemsWithSeparator","addSeparator","ref","cx","map","item","breadcrumbsConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":";;;;;;;IAWaA,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAiD,EAAA;AAAA,EAAA,oBAC7EC,UAAU,CACN,UAAAC,IAAA,EAAwEC,YAAY,EAAK;AAAA,IAAA,IAAtFC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;MAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;MAAAC,cAAA,GAAAN,IAAA,CAAEO,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAA,KAAA,CAAA,GAAGD,KAAK,CAACG,MAAM,GAAAF,cAAA;MAAEG,SAAS,GAAAT,IAAA,CAATS,SAAS,CAAA;AAChE,IAAA,IAAMC,eAAe,GAAGN,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,gBAAIO,KAAA,CAAAC,aAAA,CAACC,SAAS,EAAA;AAACC,MAAAA,KAAK,EAAC,SAAS;MAACX,IAAI,EAAEY,eAAe,CAACZ,IAAI,CAAA;AAAE,KAAE,CAAC,CAAA;IAC/F,IAAMa,WAAwB,GAAGC,cAAc,CAACZ,KAAK,EAAEK,eAAe,EAAEH,SAAS,CAAC,CAAA;AAClF,IAAA,IAAMW,kBAAkB,GAAGC,YAAY,CAACH,WAAW,EAAEN,eAAe,CAAC,CAAA;AAErE,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACd,IAAI,EAAA;AAACsB,MAAAA,GAAG,EAAEnB,YAAa;AAACE,MAAAA,IAAI,EAAEA,IAAK;AAACD,MAAAA,IAAI,EAAEA,IAAK;AAACO,MAAAA,SAAS,EAAEY,EAAE,CAACZ,SAAS,CAAE;AAACJ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EACnFa,kBAAkB,CAACI,GAAG,CAAC,UAACC,IAAI,EAAK;AAC9B,MAAA,OAAOA,IAAI,CAAA;AACf,KAAC,CACC,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMC,iBAAiB,GAAG;AAC7BC,EAAAA,IAAI,EAAE,aAAa;AACnBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE9B,eAAe;AACvB+B,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACR3B,IAAAA,IAAI,EAAE;AACF4B,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACD5B,IAAAA,IAAI,EAAE;AACF2B,MAAAA,GAAG,EAAEE,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACN/B,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;"}

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

@@ -1,5 +1,6 @@
 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) {
@@ -9,9 +10,7 @@ var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     openShorter = _useState2[0],
     setOpenShorter = _useState2[1];
-  var renderItems = children.flatMap(function (item, idx) {
-    return idx < children.length - 1 ? [item, separator] : [item];
-  });
+  var renderItems = addSeparator(children, separator);
   var onKeyPress = function onKeyPress(event) {
     event.persist();
     if (event.keyCode === 13) {

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

@@ -1 +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 { 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[] = children.flatMap((item, idx) =>\n        idx < children.length - 1 ? [item, separator] : [item],\n    );\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","flatMap","item","idx","length","onKeyPress","event","persist","keyCode","React","createElement","StyledRoot","StyledShorter","tabIndex","onClick","onKeyDown","StyledHidden","map"],"mappings":";;;;IAKaA,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;EAElC,IAAMI,WAAwB,GAAGR,QAAQ,CAACS,OAAO,CAAC,UAACC,IAAI,EAAEC,GAAG,EAAA;AAAA,IAAA,OACxDA,GAAG,GAAGX,QAAQ,CAACY,MAAM,GAAG,CAAC,GAAG,CAACF,IAAI,EAAET,SAAS,CAAC,GAAG,CAACS,IAAI,CAAC,CAAA;AAAA,GAC1D,CAAC,CAAA;AAED,EAAA,IAAMG,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAoC,EAAK;IACzDA,KAAK,CAACC,OAAO,EAAE,CAAA;AAEf,IAAA,IAAID,KAAK,CAACE,OAAO,KAAK,EAAE,EAAE;MACtBT,cAAc,CAAC,IAAI,CAAC,CAAA;AACxB,KAAA;GACH,CAAA;AAED,EAAA,oBACIU,KAAA,CAAAC,aAAA,CAACC,UAAU,EAAA,IAAA,EACN,CAACb,WAAW,iBACTW,KAAA,CAAAC,aAAA,CAACE,aAAa,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAAE;IAACC,OAAO,EAAE,SAAAA,OAAA,GAAA;MAAA,OAAMf,cAAc,CAAC,IAAI,CAAC,CAAA;KAAC;AAACgB,IAAAA,SAAS,EAAEV,UAAAA;AAAW,GAAA,EAAC,KAEzE,CAClB,EACAP,WAAW,iBACRW,KAAA,CAAAC,aAAA,CAACM,YAAY,QACRhB,WAAW,CAACiB,GAAG,CAAC,UAACf,IAAI,EAAK;AACvB,IAAA,OAAOA,IAAI,CAAA;GACd,CACS,CAEV,CAAC,CAAA;AAErB;;;;"}
+{"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/utils/index.js

@@ -0,0 +1,49 @@
+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':
+      return 'xs';
+    case 'm':
+      return 's';
+    case 'l':
+      return 's';
+    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: !!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            return 'xs';\n        case 'm':\n            return 's';\n        case 'l':\n            return 's';\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={!!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","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;AACJ,MAAA,OAAO,IAAI,CAAA;AACf,IAAA,KAAK,GAAG;AACJ,MAAA,OAAO,GAAG,CAAA;AACd,IAAA,KAAK,GAAG;AACJ,MAAA,OAAO,GAAG,CAAA;AACd,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,EAAE,CAAC,CAACL,IAAI,CAACI,IAAAA;KACpDJ,EAAAA,IAAI,CAACM,KACE,CAAC,CAAA;AAErB,GAAC,CAAC,EACFzB,eAAe,EACfC,SACJ,CAAC,CAAA;AACL,EAAC;AAEM,IAAMyB,YAAY,GAAG,SAAfA,YAAYA,CAAI3B,KAAkB,EAAEC,eAA0B,EAAK;AAC5E,EAAA,OAAOD,KAAK,CAAC4B,OAAO,CAAC,UAACR,IAAI,EAAES,GAAG,EAAA;AAAA,IAAA,OAAMA,GAAG,GAAG7B,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAACiB,IAAI,EAAEnB,eAAe,CAAC,GAAG,CAACmB,IAAI,CAAC,CAAA;AAAA,GAAC,CAAC,CAAA;AACpG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.112.0-canary.1310.10078865814.0",
+  "version": "0.112.0-canary.1310.10092346956.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -118,5 +118,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "844f550cbc735000345035791091d9e33abfa59e"
+  "gitHead": "b03f49cf51e2677d7286ddc75f660c3f9845aec4"
 }

package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -10,59 +10,24 @@ var _utils = /*#__PURE__*/require("../../utils");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _Breadcrumbs = /*#__PURE__*/require("./Breadcrumbs.styles");
-var _BreadcrumbShorter = /*#__PURE__*/require("./ui/BreadcrumbShorter/BreadcrumbShorter");
+var _utils2 = /*#__PURE__*/require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var shortItems = function shortItems(items, renderSeparator, showItems) {
-  if (!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["default"].createElement(_BreadcrumbShorter.BreadcrumbShorter, {
-    separator: renderSeparator
-  }, renderItems);
-  items.splice(leftSlice, rightSlice - leftSlice, shorter);
-  return items;
-};
-var convertIconSize = function convertIconSize(size) {
-  switch (size) {
-    case 's':
-      return 'xs';
-    case 'm':
-      return 's';
-    case 'l':
-      return 's';
-    default:
-      return 's';
-  }
-};
 var breadcrumbsRoot = exports.breadcrumbsRoot = function breadcrumbsRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
     var view = _ref.view,
       size = _ref.size,
       separator = _ref.separator,
       items = _ref.items,
-      showItems = _ref.showItems,
+      _ref$showItems = _ref.showItems,
+      showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
       className = _ref.className;
     var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.Separator, {
       color: "inherit",
-      size: convertIconSize(size)
-    });
-    var renderItems = shortItems(items.map(function (item) {
-      if ('renderItem' in item) {
-        return item.renderItem();
-      }
-      return /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.StyledLink, {
-        tabIndex: 0,
-        href: item.href,
-        isHref: !!item.href
-      }, item.title);
-    }), renderSeparator, showItems);
-    var itemsWithSeparator = renderItems.flatMap(function (item, idx) {
-      return idx < renderItems.length - 1 ? [item, renderSeparator] : [item];
+      size: (0, _utils2.convertIconSize)(size)
     });
+    var renderItems = (0, _utils2.getRenderItems)(items, renderSeparator, showItems);
+    var itemsWithSeparator = (0, _utils2.addSeparator)(renderItems, renderSeparator);
     return /*#__PURE__*/_react["default"].createElement(Root, {
       ref: outerRootRef,
       size: size,

package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BreadcrumbShorter = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _utils = /*#__PURE__*/require("../../utils");
 var _BreadcrumbShorter = /*#__PURE__*/require("./BreadcrumbShorter.styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -22,9 +23,7 @@ var BreadcrumbShorter = exports.BreadcrumbShorter = function BreadcrumbShorter(_
     _useState2 = _slicedToArray(_useState, 2),
     openShorter = _useState2[0],
     setOpenShorter = _useState2[1];
-  var renderItems = children.flatMap(function (item, idx) {
-    return idx < children.length - 1 ? [item, separator] : [item];
-  });
+  var renderItems = (0, _utils.addSeparator)(children, separator);
   var onKeyPress = function onKeyPress(event) {
     event.persist();
     if (event.keyCode === 13) {

package/styled-components/cjs/components/Breadcrumbs/utils/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortItems = exports.getRenderItems = exports.convertIconSize = exports.addSeparator = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _BreadcrumbShorter = /*#__PURE__*/require("../ui/BreadcrumbShorter/BreadcrumbShorter");
+var _Breadcrumbs = /*#__PURE__*/require("../Breadcrumbs.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var shortItems = exports.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["default"].createElement(_BreadcrumbShorter.BreadcrumbShorter, {
+    separator: renderSeparator
+  }, renderItems);
+  items.splice(leftSlice, rightSlice - leftSlice, shorter);
+  return items;
+};
+var convertIconSize = exports.convertIconSize = function convertIconSize(size) {
+  switch (size) {
+    case 's':
+      return 'xs';
+    case 'm':
+      return 's';
+    case 'l':
+      return 's';
+    default:
+      return 's';
+  }
+};
+var getRenderItems = exports.getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
+  return shortItems(items.map(function (item) {
+    if ('renderItem' in item) {
+      return item.renderItem();
+    }
+    return /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.StyledLink, {
+      tabIndex: 0,
+      href: item.href,
+      isHref: !!item.href
+    }, item.title);
+  }), renderSeparator, showItems);
+};
+var addSeparator = exports.addSeparator = function addSeparator(items, renderSeparator) {
+  return items.flatMap(function (item, idx) {
+    return idx < items.length - 1 ? [item, renderSeparator] : [item];
+  });
+};

package/styled-components/es/components/Breadcrumbs/Breadcrumbs.js

@@ -2,58 +2,23 @@ import React, { forwardRef } from 'react';
 import { cx } from '../../utils';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
-import { StyledLink, base, Separator } from './Breadcrumbs.styles';
-import { BreadcrumbShorter } from './ui/BreadcrumbShorter/BreadcrumbShorter';
-var shortItems = function shortItems(items, renderSeparator, showItems) {
-  if (!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':
-      return 'xs';
-    case 'm':
-      return 's';
-    case 'l':
-      return 's';
-    default:
-      return 's';
-  }
-};
+import { base, Separator } from './Breadcrumbs.styles';
+import { addSeparator, convertIconSize, getRenderItems } from './utils';
 export var breadcrumbsRoot = function breadcrumbsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
     var view = _ref.view,
       size = _ref.size,
       separator = _ref.separator,
       items = _ref.items,
-      showItems = _ref.showItems,
+      _ref$showItems = _ref.showItems,
+      showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
       className = _ref.className;
     var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/React.createElement(Separator, {
       color: "inherit",
       size: convertIconSize(size)
     });
-    var renderItems = shortItems(items.map(function (item) {
-      if ('renderItem' in item) {
-        return item.renderItem();
-      }
-      return /*#__PURE__*/React.createElement(StyledLink, {
-        tabIndex: 0,
-        href: item.href,
-        isHref: !!item.href
-      }, item.title);
-    }), renderSeparator, showItems);
-    var itemsWithSeparator = renderItems.flatMap(function (item, idx) {
-      return idx < renderItems.length - 1 ? [item, renderSeparator] : [item];
-    });
+    var renderItems = getRenderItems(items, renderSeparator, showItems);
+    var itemsWithSeparator = addSeparator(renderItems, renderSeparator);
     return /*#__PURE__*/React.createElement(Root, {
       ref: outerRootRef,
       size: size,

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

@@ -5,6 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState } from 'react';
+import { addSeparator } from '../../utils';
 import { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';
 export var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
   var children = _ref.children,
@@ -13,9 +14,7 @@ export var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     openShorter = _useState2[0],
     setOpenShorter = _useState2[1];
-  var renderItems = children.flatMap(function (item, idx) {
-    return idx < children.length - 1 ? [item, separator] : [item];
-  });
+  var renderItems = addSeparator(children, separator);
   var onKeyPress = function onKeyPress(event) {
     event.persist();
     if (event.keyCode === 13) {

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';
+import { StyledLink } from '../Breadcrumbs.styles';
+export 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;
+};
+export var convertIconSize = function convertIconSize(size) {
+  switch (size) {
+    case 's':
+      return 'xs';
+    case 'm':
+      return 's';
+    case 'l':
+      return 's';
+    default:
+      return 's';
+  }
+};
+export 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: !!item.href
+    }, item.title);
+  }), renderSeparator, showItems);
+};
+export var addSeparator = function addSeparator(items, renderSeparator) {
+  return items.flatMap(function (item, idx) {
+    return idx < items.length - 1 ? [item, renderSeparator] : [item];
+  });
+};

package/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { RootProps } from '../../engines';
-import type { BreadcrumbsProps, BreadcrumbsItem } from './Breadcrumbs.types';
+import type { BreadcrumbsProps } from './Breadcrumbs.types';
 export declare const breadcrumbsRoot: (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     view?: string | undefined;
     size?: "m" | "s" | "xs" | "l" | undefined;
     separator?: React.ReactNode;
-    items: BreadcrumbsItem[];
+    items: import("./Breadcrumbs.types").BreadcrumbsItem[];
     showItems?: number | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const breadcrumbsConfig: {
@@ -15,7 +15,7 @@ export declare const breadcrumbsConfig: {
         view?: string | undefined;
         size?: "m" | "s" | "xs" | "l" | undefined;
         separator?: React.ReactNode;
-        items: BreadcrumbsItem[];
+        items: import("./Breadcrumbs.types").BreadcrumbsItem[];
         showItems?: number | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
     base: import("@linaria/core").LinariaClassName;

package/types/components/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAiC7E,eAAO,MAAM,eAAe,SAAU,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;wCA+B5E,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAjCQ,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;CAkDhF,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAM5D,eAAO,MAAM,eAAe,SAAU,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;wCAe5E,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAjBQ,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;CAkChF,CAAC"}

package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbShorter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAsC,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,sBAAsB,CAkC/F,CAAC"}
+{"version":3,"file":"BreadcrumbShorter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAsC,MAAM,OAAO,CAAC;AAKlF,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,sBAAsB,CAgC/F,CAAC"}

package/types/components/Breadcrumbs/utils/index.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import { BreadcrumbsItem } from '../Breadcrumbs.types';
+export declare const shortItems: (items: ReactNode[], renderSeparator: ReactNode, showItems?: number | undefined) => React.ReactNode[];
+export declare const convertIconSize: (size?: "m" | "s" | "xs" | "l" | undefined) => "s" | "xs";
+export declare const getRenderItems: (items: BreadcrumbsItem[], renderSeparator: ReactNode, showItems?: number | undefined) => React.ReactNode[];
+export declare const addSeparator: (items: ReactNode[], renderSeparator: ReactNode) => React.ReactNode[];
+//# sourceMappingURL=index.d.ts.map

package/types/components/Breadcrumbs/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,eAAO,MAAM,UAAU,UAAW,SAAS,EAAE,mBAAmB,SAAS,sDAYxE,CAAC;AAEF,eAAO,MAAM,eAAe,2DAW3B,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,eAAe,EAAE,mBAAmB,SAAS,sDAelF,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,SAAS,EAAE,mBAAmB,SAAS,sBAE1E,CAAC"}