@salutejs/plasma-new-hope 0.117.0-canary.1344.10270215610.0 → 0.117.0-dev.0

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/Accordion/Accordion.tokens.js

@@ -23,7 +23,6 @@ export var tokens = {
   accordionItemFocus: '--plasma-accordion-item-focus',
   accordionItemBorder: '--plasma-accordion-item-border',
   accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
-  accordionItemIconColor: '--plasma-accordion-item-color-icon',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -33,10 +33,10 @@ export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-8"
-})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
+})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemTextColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemTextColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
 export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
 })(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);

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.template-doc.mdx

@@ -0,0 +1,96 @@
+---
+id: breadcrumbs
+title: Breadcrumbs
+---
+
+import { PropsTable } from '@site/src/components';
+
+# Breadcrumbs
+<PropsTable name="Breadcrumbs" />
+
+# Обычное использование
+
+```tsx live
+import React from 'react';
+import { Breadcrumbs } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = [
+        { title: 'Home', href: '/' },
+        { title: 'About as', href: '/' },
+        { renderItem: () => <span>Custom Item</span> },
+        { title: 'Contacts' },
+    ];
+
+    return (
+        <div>
+            <Breadcrumbs items={items} />
+        </div>
+    );
+}
+```
+# Использование с shorter
+```tsx live
+import React from 'react';
+import { Breadcrumbs } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = [
+        { title: 'Home', href: '/' },
+        { title: 'About as', href: '/' },
+        { renderItem: () => <span>Custom Item</span> },
+        { title: 'Contacts' },
+    ];
+
+    return (
+        <div style=\{{"flexDirection": 'column'}}>
+            <div>
+                <Breadcrumbs items={items} showItems={2} />
+            </div>
+            <div>
+                 <Breadcrumbs items={items} showItems={3} />
+            </div>
+        </div>
+    );
+}
+```
+
+# Использование с кастомным элементом
+```tsx live
+import React from 'react';
+import { Breadcrumbs, Dropdown } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = [
+        { title: 'Home', href: '/' },
+        { title: 'About as', href: '/' },
+        {
+            renderItem: () => {
+                const itemsDropdown = [
+                    {
+                        value: 'Custom Item 1',
+                        label: 'Custom Item 1',
+                    },
+                    {
+                        value: 'Custom Item 2',
+                        label: 'Custom Item 2',
+                    },
+                ];
+                return (
+                    <Dropdown variant="tight" placement="bottom" items={itemsDropdown} trigger="hover">
+                        <span>...</span>
+                    </Dropdown>
+                );
+            },
+        },
+        { title: 'Contacts' },
+    ];
+
+
+    return (
+        <div style=\{{height: '200px'}}>
+            <Breadcrumbs items={items} />
+        </div>
+    );
+}
+```

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/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,43 @@
+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) {
+  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: Boolean(item.href)
+    }, item.title);
+  }), renderSeparator, showItems);
+  return renderItems;
+};
+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/Accordion/Accordion.config.js

@@ -7,8 +7,8 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
-      clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
+      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
+      clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
     },
     size: {
       l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),

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/Accordion/Accordion.config.js

@@ -7,8 +7,8 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
-      clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
+      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
+      clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
     },
     size: {
       l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),

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';

package/types/components/Accordion/Accordion.tokens.d.ts

@@ -23,7 +23,6 @@ export declare const tokens: {
     accordionItemFocus: string;
     accordionItemBorder: string;
     accordionItemBorderBottom: string;
-    accordionItemIconColor: string;
     accordionItemTitleColor: string;
     accordionItemTitleFontFamily: string;
     accordionItemTitleFontSize: string;

package/types/components/Accordion/Accordion.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgClB,CAAC"}
+{"version":3,"file":"Accordion.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BlB,CAAC"}

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { RootProps } from '../../engines';
+import type { BreadcrumbsProps } from './Breadcrumbs.types';
+export declare const breadcrumbsRoot: (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    view?: string | undefined;
+    size?: string | undefined;
+    separator?: React.ReactNode;
+    items: import("./Breadcrumbs.types").BreadcrumbsItem[];
+    showItems?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const breadcrumbsConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        view?: string | undefined;
+        size?: string | undefined;
+        separator?: React.ReactNode;
+        items: import("./Breadcrumbs.types").BreadcrumbsItem[];
+        showItems?: number | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+    };
+};
+//# sourceMappingURL=Breadcrumbs.d.ts.map

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

@@ -0,0 +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,MAAM,qBAAqB,CAAC;AAM5D,eAAO,MAAM,eAAe,SAAU,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;wCAa5E,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAfQ,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;CAgChF,CAAC"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledLink: import("@linaria/react").StyledComponent<{
+    isHref: boolean;
+} & import("../../engines/types").PropsType<import("../../engines/types").Variants> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("../Link/Link").LinkCustomProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const Separator: import("@linaria/react").StyledMeta & import("react").FC<import("../_Icon/IconRoot").IconProps>;
+//# sourceMappingURL=Breadcrumbs.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,UAAU;YAA0B,OAAO;0OASvD,CAAC;AAEF,eAAO,MAAM,IAAI,0CAahB,CAAC;AAEF,eAAO,MAAM,SAAS,iGAGrB,CAAC"}