@salutejs/plasma-new-hope 0.112.0-canary.1322.10108588887.0 → 0.113.0-canary.1310.10143188146.0

package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Breadcrumbs = /*#__PURE__*/require("../../../../components/Breadcrumbs");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsColor, _Breadcrumbs.breadcrumbsTokens.breadcrumbsOpacity, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFocusOutlineColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Breadcrumbs = void 0;
+var _Breadcrumbs = /*#__PURE__*/require("../../../../components/Breadcrumbs");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Breadcrumbs2 = /*#__PURE__*/require("./Breadcrumbs.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Breadcrumbs.breadcrumbsConfig, _Breadcrumbs2.config);
+var Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { accordionConfig } from '../../../../components/Accordion';
+
+import { config } from './Breadcrumbs.config';
+import { Breadcrumbs } from './Breadcrumbs';
+
+type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
+
+const meta: Meta<BreadcrumbsProps> = {
+    title: 'plasma_b2c/Breadcrumbs',
+    decorators: [WithTheme],
+    component: Breadcrumbs,
+    args: {
+        view: 'default',
+        size: 'm',
+        showItems: 2,
+        items: [
+            { title: 'Home', href: '/' },
+            { title: 'About as', href: '/' },
+            { renderItem: () => <span>Custom Item</span> },
+            { title: 'Contacts' },
+        ],
+    },
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(accordionConfig, config)),
+        ...disableProps(['separator']),
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<BreadcrumbsProps> = {
+    render: (props: BreadcrumbsProps) => {
+        return <Breadcrumbs {...props} />;
+    },
+};

package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Breadcrumbs = /*#__PURE__*/require("../../../../components/Breadcrumbs");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsColor, _Breadcrumbs.breadcrumbsTokens.breadcrumbsOpacity, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFocusOutlineColor)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Breadcrumbs = void 0;
+var _Breadcrumbs = /*#__PURE__*/require("../../../../components/Breadcrumbs");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Breadcrumbs2 = /*#__PURE__*/require("./Breadcrumbs.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Breadcrumbs.breadcrumbsConfig, _Breadcrumbs2.config);
+var Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { accordionConfig } from '../../../../components/Accordion';
+
+import { config } from './Breadcrumbs.config';
+import { Breadcrumbs } from './Breadcrumbs';
+
+type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
+
+const meta: Meta<BreadcrumbsProps> = {
+    title: 'plasma_web/Breadcrumbs',
+    decorators: [WithTheme],
+    component: Breadcrumbs,
+    args: {
+        view: 'default',
+        size: 'm',
+        showItems: 2,
+        items: [
+            { title: 'Home', href: '/' },
+            { title: 'About as', href: '/' },
+            { renderItem: () => <span>Custom Item</span> },
+            { title: 'Contacts' },
+        ],
+    },
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(accordionConfig, config)),
+        ...disableProps(['separator']),
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<BreadcrumbsProps> = {
+    render: (props: BreadcrumbsProps) => {
+        return <Breadcrumbs {...props} />;
+    },
+};

package/styled-components/cjs/index.js

@@ -80,6 +80,17 @@ Object.keys(_ButtonGroup).forEach(function (key) {
     }
   });
 });
+var _Breadcrumbs = /*#__PURE__*/require("./components/Breadcrumbs");
+Object.keys(_Breadcrumbs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Breadcrumbs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Breadcrumbs[key];
+    }
+  });
+});
 var _Chip = /*#__PURE__*/require("./components/Chip");
 Object.keys(_Chip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,50 @@
+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 { 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,
+      _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 = getRenderItems(items, renderSeparator, showItems);
+    var itemsWithSeparator = addSeparator(renderItems, renderSeparator);
+    return /*#__PURE__*/React.createElement(Root, {
+      ref: outerRootRef,
+      size: size,
+      view: view,
+      className: cx(className),
+      items: items
+    }, itemsWithSeparator.map(function (item) {
+      return item;
+    }));
+  });
+};
+export var breadcrumbsConfig = {
+  name: 'Breadcrumbs',
+  tag: 'div',
+  layout: breadcrumbsRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+import { linkConfig } from '../Link';
+import { component, mergeConfig } from '../../engines';
+import { IconDisclosureRight } from '../_Icon';
+import { addFocus } from '../../mixins';
+import { tokens } from './Breadcrumbs.tokens';
+var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
+var Link = /*#__PURE__*/component(mergedLinkConfig);
+export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
+  componentId: "plasma-new-hope__sc-4bjoev-0"
+})(["opacity:", ";", ""], function (_ref) {
+  var isHref = _ref.isHref;
+  return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
+}, /*#__PURE__*/addFocus({
+  outlineOffset: '0rem',
+  outlineSize: '0.125rem',
+  outlineRadius: '0rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
+}));
+export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;align-items:center;gap:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.breadcrumbsGap, tokens.breadcrumbsColor, tokens.breadcrumbsFontFamily, tokens.breadcrumbsFontSize, tokens.breadcrumbsFontWeight, tokens.breadcrumbsFontStyle, tokens.breadcrumbsLetterSpacing, tokens.breadcrumbsLineHeight);
+export var Separator = /*#__PURE__*/styled(IconDisclosureRight).withConfig({
+  componentId: "plasma-new-hope__sc-4bjoev-1"
+})(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);

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

@@ -0,0 +1,15 @@
+export var classes = {
+  breadcrumbsRoot: 'breadcrumbs-root'
+};
+export 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'
+};

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

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/Breadcrumbs/README.md

@@ -0,0 +1,78 @@
+Структура файлов:
+
+-   Breadcrumbs.types.ts
+-   Breadcrumbs.tokens.ts
+-   Breadcrumbs.tsx
+-   index.ts
+-   variants:
+-   -   \_size:
+-   -   -   base.ts
+-   -   -   tokens.json
+-   ui:
+-   -   BreadcrumbItem:
+-   -   -   BreadcrumbItem.tsx
+-   -   BreadcrumbShorter:
+-   -   -   BreadcrumbShorter.tsx
+-   -   BreadcrumbSeparator:
+-   -   -   BreadcrumbSeparator.tsx
+
+Логика работы:
+
+1. На вход идет 1 обязательный параметр: items
+
+```jsx
+<Breadcrumbs items={[{ title: 'Главная', href: '/' }]}></Breadcreumbs>
+```
+
+2. Затем генерируется массив элементов хлебных крошек, между ними сепаратор ( если указан пропс, то используется элемент из параметра, иначе стандартный из BreadcrumbSeparator )
+
+```jsx
+<Breadcrumbs items={[{ title: 'Главная', href: '/' }]} separator=">"></Breadcreumbs>
+```
+
+2.1. При генерации BreadcrumbItem, смотрит на href. Если он есть, то добавляется тег a, с указанной ссылкой, иначе ссылка не кликабельна
+
+```jsx
+<Breadcrumbs
+    items={[
+        { title: 'Главная', href: '/' },
+        { title: 'Контакты' }, // Без ссылки
+    ]}
+    separator=">"
+></Breadcreumbs>
+```
+
+3. Можно указать в item, вместо title и href - renderItem. Эта функция, которая возвращает любое, что придумал разработчик. кастомный шортер, определенный функционал для него ( например кнопку )
+
+```jsx
+const renderItem = () => {
+    return <Button>Контакты</Button>
+}
+<Breadcrumbs
+    items={[
+        {title: 'Главная', href: '/'},
+        {renderItem: renderItem}
+        {title: 'Адрес'}
+    ]}
+    separator=">">
+</Breadcreumbs>
+```
+
+ТАКЖЕ: Можно указать кол-во видимых элементов через параметр showItems. ShowItems: если указано четное число, например 2 - то распределяется равномерно по 1 с каждой стороны. Если нечетное, например 3 - то две будет справа и 1 слева. Все оставльное сокращается шортером
+
+```jsx
+const renderItem = () => {
+    return <Button>Контакты</Button>
+}
+<Breadcrumbs
+    items={[
+        {title: 'Главная', href: '/'},
+        {renderItem: renderItem}
+        {title: 'Адрес'}
+    ]}
+    showItems={2}
+    separator=">">
+</Breadcreumbs>
+```
+
+4. Затем все элементы рендерятся и показываются пользователю

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

@@ -0,0 +1,2 @@
+export { breadcrumbsRoot, breadcrumbsConfig } from './Breadcrumbs';
+export { tokens as breadcrumbsTokens, classes as breadcrumbsClasses } from './Breadcrumbs.tokens';

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

@@ -0,0 +1,33 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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,
+    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;
+  })));
+};

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+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':
+    case 'xs':
+      return 'xs';
+    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/styled-components/es/components/Breadcrumbs/variations/_size/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

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

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { breadcrumbsTokens } from '../../../../components/Breadcrumbs';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], breadcrumbsTokens.breadcrumbsColor, breadcrumbsTokens.breadcrumbsOpacity, breadcrumbsTokens.breadcrumbsFocusOutlineColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
+      m: /*#__PURE__*/css(["", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
+      s: /*#__PURE__*/css(["", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
+      xs: /*#__PURE__*/css(["", ":0rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { breadcrumbsConfig } from '../../../../components/Breadcrumbs';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Breadcrumbs.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(breadcrumbsConfig, config);
+export var Breadcrumbs = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { accordionConfig } from '../../../../components/Accordion';
+
+import { config } from './Breadcrumbs.config';
+import { Breadcrumbs } from './Breadcrumbs';
+
+type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
+
+const meta: Meta<BreadcrumbsProps> = {
+    title: 'plasma_b2c/Breadcrumbs',
+    decorators: [WithTheme],
+    component: Breadcrumbs,
+    args: {
+        view: 'default',
+        size: 'm',
+        showItems: 2,
+        items: [
+            { title: 'Home', href: '/' },
+            { title: 'About as', href: '/' },
+            { renderItem: () => <span>Custom Item</span> },
+            { title: 'Contacts' },
+        ],
+    },
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(accordionConfig, config)),
+        ...disableProps(['separator']),
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<BreadcrumbsProps> = {
+    render: (props: BreadcrumbsProps) => {
+        return <Breadcrumbs {...props} />;
+    },
+};

package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { breadcrumbsTokens } from '../../../../components/Breadcrumbs';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], breadcrumbsTokens.breadcrumbsColor, breadcrumbsTokens.breadcrumbsOpacity, breadcrumbsTokens.breadcrumbsFocusOutlineColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":0.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
+      m: /*#__PURE__*/css(["", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
+      s: /*#__PURE__*/css(["", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
+      xs: /*#__PURE__*/css(["", ":0rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight)
+    }
+  }
+};

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

@@ -0,0 +1,5 @@
+import { breadcrumbsConfig } from '../../../../components/Breadcrumbs';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Breadcrumbs.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(breadcrumbsConfig, config);
+export var Breadcrumbs = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { accordionConfig } from '../../../../components/Accordion';
+
+import { config } from './Breadcrumbs.config';
+import { Breadcrumbs } from './Breadcrumbs';
+
+type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
+
+const meta: Meta<BreadcrumbsProps> = {
+    title: 'plasma_web/Breadcrumbs',
+    decorators: [WithTheme],
+    component: Breadcrumbs,
+    args: {
+        view: 'default',
+        size: 'm',
+        showItems: 2,
+        items: [
+            { title: 'Home', href: '/' },
+            { title: 'About as', href: '/' },
+            { renderItem: () => <span>Custom Item</span> },
+            { title: 'Contacts' },
+        ],
+    },
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(accordionConfig, config)),
+        ...disableProps(['separator']),
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<BreadcrumbsProps> = {
+    render: (props: BreadcrumbsProps) => {
+        return <Breadcrumbs {...props} />;
+    },
+};

package/styled-components/es/index.js

@@ -7,6 +7,7 @@ export * from './utils';
 export * from './components/Button';
 export * from './components/IconButton';
 export * from './components/ButtonGroup';
+export * from './components/Breadcrumbs';
 export * from './components/Chip';
 export * from './components/Cell';
 export * from './components/Link';