@salutejs/plasma-new-hope 0.237.1-dev.0 → 0.238.0-canary.1657.12529257851.0

package/emotion/cjs/examples/plasma_b2c/components/Flow/Flow.stories.tsx

@@ -0,0 +1,135 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import styled from 'styled-components';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Flow } from './Flow';
+
+const orientations = ['vertical', 'horizontal'];
+const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
+const alignments = ['start', 'center', 'end'];
+
+const widths = [100, 32, 171, 74, 179, 55];
+const heights = [10, 50, 45, 33, 14, 55];
+
+const FlowCustom = styled(Flow)`
+    background: var(--surface-transparent-primary);
+    border-radius: 0.5rem;
+`;
+
+const Item = styled.div`
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    background: #aab1e9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+const meta: Meta<typeof Flow> = {
+    title: 'b2c/Layout/Flow',
+    component: Flow,
+    decorators: [WithTheme],
+    argTypes: {
+        itemsCount: {
+            control: {
+                type: 'number',
+            },
+        },
+        containerWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        containerHeight: {
+            control: {
+                type: 'text',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'select',
+            },
+        },
+        arrangement: {
+            options: arrangements,
+            control: {
+                type: 'select',
+            },
+        },
+        alignment: {
+            options: alignments,
+            control: {
+                type: 'select',
+            },
+        },
+        mainAxisGap: {
+            control: {
+                type: 'text',
+            },
+        },
+        crossAxisGap: {
+            control: {
+                type: 'text',
+            },
+        },
+        itemsPerLine: {
+            control: {
+                type: 'text',
+            },
+        },
+        minColWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        ...disableProps(['minColWidth']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Flow>;
+
+export const Default: Story = {
+    args: {
+        containerWidth: '450px',
+        containerHeight: '200px',
+        orientation: 'horizontal',
+        arrangement: 'start',
+        alignment: 'start',
+        mainAxisGap: '10',
+        crossAxisGap: '10',
+        itemsPerLine: '',
+        itemsCount: 6,
+    },
+    render: ({ itemsCount, containerWidth, containerHeight, ...args }: ComponentProps<typeof Flow>) => {
+        const hasLines = Boolean(args.itemsPerLine);
+
+        return (
+            <FlowCustom {...args} style={{ width: containerWidth, height: containerHeight }}>
+                {new Array(itemsCount).fill(null).map((width, index) => (
+                    <Item
+                        key={index}
+                        style={
+                            hasLines
+                                ? {
+                                      minWidth: widths[index % widths.length],
+                                      minHeight: heights[index % heights.length],
+                                  }
+                                : {
+                                      width: widths[index % widths.length],
+                                      height: heights[index % heights.length],
+                                  }
+                        }
+                    >
+                        {index + 1}
+                    </Item>
+                ))}
+            </FlowCustom>
+        );
+    },
+};

package/emotion/cjs/examples/plasma_web/components/Flow/Flow.config.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var config = exports.config = {
+  defaults: {},
+  variations: {}
+};

package/emotion/cjs/examples/plasma_web/components/Flow/Flow.js

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

package/emotion/cjs/examples/plasma_web/components/Flow/Flow.stories.tsx

@@ -0,0 +1,135 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import styled from 'styled-components';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Flow } from './Flow';
+
+const orientations = ['vertical', 'horizontal'];
+const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
+const alignments = ['start', 'center', 'end'];
+
+const widths = [100, 32, 171, 74, 179, 55];
+const heights = [10, 50, 45, 33, 14, 55];
+
+const FlowCustom = styled(Flow)`
+    background: var(--surface-transparent-primary);
+    border-radius: 0.5rem;
+`;
+
+const Item = styled.div`
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    background: #aab1e9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+const meta: Meta<typeof Flow> = {
+    title: 'web/Layout/Flow',
+    component: Flow,
+    decorators: [WithTheme],
+    argTypes: {
+        itemsCount: {
+            control: {
+                type: 'number',
+            },
+        },
+        containerWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        containerHeight: {
+            control: {
+                type: 'text',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'select',
+            },
+        },
+        arrangement: {
+            options: arrangements,
+            control: {
+                type: 'select',
+            },
+        },
+        alignment: {
+            options: alignments,
+            control: {
+                type: 'select',
+            },
+        },
+        mainAxisGap: {
+            control: {
+                type: 'text',
+            },
+        },
+        crossAxisGap: {
+            control: {
+                type: 'text',
+            },
+        },
+        itemsPerLine: {
+            control: {
+                type: 'text',
+            },
+        },
+        minColWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        ...disableProps(['minColWidth']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Flow>;
+
+export const Default: Story = {
+    args: {
+        containerWidth: '450px',
+        containerHeight: '200px',
+        orientation: 'horizontal',
+        arrangement: 'start',
+        alignment: 'start',
+        mainAxisGap: '10',
+        crossAxisGap: '10',
+        itemsPerLine: '',
+        itemsCount: 6,
+    },
+    render: ({ itemsCount, containerWidth, containerHeight, ...args }: ComponentProps<typeof Flow>) => {
+        const hasLines = Boolean(args.itemsPerLine);
+
+        return (
+            <FlowCustom {...args} style={{ width: containerWidth, height: containerHeight }}>
+                {new Array(itemsCount).fill(null).map((width, index) => (
+                    <Item
+                        key={index}
+                        style={
+                            hasLines
+                                ? {
+                                      minWidth: widths[index % widths.length],
+                                      minHeight: heights[index % heights.length],
+                                  }
+                                : {
+                                      width: widths[index % widths.length],
+                                      height: heights[index % heights.length],
+                                  }
+                        }
+                    >
+                        {index + 1}
+                    </Item>
+                ))}
+            </FlowCustom>
+        );
+    },
+};

package/emotion/cjs/index.js

@@ -135,6 +135,17 @@ Object.keys(_Cell).forEach(function (key) {
     }
   });
 });
+var _Flow = /*#__PURE__*/require("./components/Flow");
+Object.keys(_Flow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Flow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Flow[key];
+    }
+  });
+});
 var _Link = /*#__PURE__*/require("./components/Link");
 Object.keys(_Link).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/emotion/es/components/Flow/Flow.js

@@ -0,0 +1,83 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "className", "style", "orientation", "arrangement", "alignment", "mainAxisGap", "crossAxisGap", "minColWidth", "itemsPerLine"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef } from 'react';
+import cls from 'classnames';
+import chunk from 'lodash.chunk';
+import { base, Line } from './Flow.styles';
+export var flowRoot = function flowRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, ref) {
+    var children = _ref.children,
+      className = _ref.className,
+      style = _ref.style,
+      _ref$orientation = _ref.orientation,
+      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+      arrangement = _ref.arrangement,
+      alignment = _ref.alignment,
+      _ref$mainAxisGap = _ref.mainAxisGap,
+      mainAxisGap = _ref$mainAxisGap === void 0 ? '0' : _ref$mainAxisGap,
+      _ref$crossAxisGap = _ref.crossAxisGap,
+      crossAxisGap = _ref$crossAxisGap === void 0 ? '0' : _ref$crossAxisGap,
+      _ref$minColWidth = _ref.minColWidth,
+      minColWidth = _ref$minColWidth === void 0 ? 'auto' : _ref$minColWidth,
+      itemsPerLine = _ref.itemsPerLine,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var isVertical = orientation === 'vertical';
+    var hasMinWidth = Boolean(minColWidth && minColWidth !== 'auto');
+    var needGrid = Boolean(Number(itemsPerLine) > 0 || hasMinWidth);
+    var innerMainAxisGap = typeof mainAxisGap === 'number' || !Number.isNaN(+mainAxisGap) ? "".concat(mainAxisGap || 0, "px") : mainAxisGap;
+    var innerCrossAxisGap = typeof crossAxisGap === 'number' || !Number.isNaN(+crossAxisGap) ? "".concat(crossAxisGap || 0, "px") : crossAxisGap;
+    if (arrangement === 'spaceBetween' || arrangement === 'spaceAround') {
+      innerMainAxisGap = '0';
+    }
+    var hasChunks = Number(itemsPerLine) > 0;
+    var chunks = hasChunks ? chunk(React.Children.toArray(children), itemsPerLine) : [];
+    var gap = isVertical ? "".concat(innerMainAxisGap, " ").concat(innerCrossAxisGap) : "".concat(innerCrossAxisGap, " ").concat(innerMainAxisGap);
+    var wrapperGap = isVertical ? "0 ".concat(innerCrossAxisGap) : "".concat(innerCrossAxisGap, " 0");
+    var lineGap = isVertical ? "".concat(innerMainAxisGap, " 0") : "0 ".concat(innerMainAxisGap);
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: ref,
+      className: cls(className, {
+        vertical: isVertical,
+        grid: hasMinWidth,
+        elastic: hasMinWidth,
+        hasChunks: hasChunks
+      }),
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        '--plasma-private-gap': hasChunks ? wrapperGap : gap,
+        '--plasma-private-items': String(itemsPerLine),
+        '--plasma-private-min-width': String(minColWidth)
+      }),
+      "data-arrangement": arrangement,
+      "data-alignment": alignment
+    }, rest), hasChunks && chunks.map(function (chunkNode) {
+      return /*#__PURE__*/React.createElement(Line, {
+        className: cls({
+          vertical: isVertical,
+          grid: needGrid,
+          elastic: hasMinWidth
+        }),
+        style: {
+          '--plasma-private-gap': lineGap
+        },
+        "data-arrangement": arrangement,
+        "data-alignment": alignment
+      }, chunkNode);
+    }), !hasChunks && children);
+  });
+};
+export var flowConfig = {
+  name: 'Flow',
+  tag: 'div',
+  layout: flowRoot,
+  base: base,
+  defaults: {},
+  variations: {}
+};

package/emotion/es/components/Flow/Flow.styles.js

@@ -0,0 +1,24 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { css } from '@emotion/react';
+export var base = process.env.NODE_ENV === "production" ? {
+  name: "gv4nrl-plasma-new-hope__base",
+  styles: "display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--plasma-private-gap);&.hasChunks{flex-wrap:nowrap;flex-direction:column;&.vertical{flex-direction:row;}}&.vertical{flex-direction:column;}&.grid{display:grid;grid-template-columns:repeat(var(--plasma-private-items), auto);grid-auto-flow:row;&.elastic{grid-template-columns:repeat(auto-fill, minmax(var(--plasma-private-min-width), auto));grid-auto-flow:row;}&:not(.vertical){&[data-arrangement='start']{justify-items:start;}&[data-arrangement='center']{justify-items:center;}&[data-arrangement='end']{justify-items:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}}&.vertical{grid-template-columns:auto;grid-template-rows:repeat(var(--plasma-private-items), auto);grid-auto-flow:column;&[data-arrangement='start']{align-items:start;}&[data-arrangement='center']{align-items:center;}&[data-arrangement='end']{align-items:end;}&[data-arrangement='spaceBetween']{align-content:space-between;align-items:normal;}&[data-arrangement='spaceAround']{align-content:space-around;align-items:normal;}&[data-alignment='start']{justify-items:start;}&[data-alignment='center']{justify-items:center;}&[data-alignment='end']{justify-items:end;}}}&:not(&.grid):not(&.hasChunks){align-content:start;&[data-arrangement='start']{justify-content:start;}&[data-arrangement='center']{justify-content:center;}&[data-arrangement='end']{justify-content:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}};label:plasma-new-hope__base;"
+} : {
+  name: "gv4nrl-plasma-new-hope__base",
+  styles: "display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--plasma-private-gap);&.hasChunks{flex-wrap:nowrap;flex-direction:column;&.vertical{flex-direction:row;}}&.vertical{flex-direction:column;}&.grid{display:grid;grid-template-columns:repeat(var(--plasma-private-items), auto);grid-auto-flow:row;&.elastic{grid-template-columns:repeat(auto-fill, minmax(var(--plasma-private-min-width), auto));grid-auto-flow:row;}&:not(.vertical){&[data-arrangement='start']{justify-items:start;}&[data-arrangement='center']{justify-items:center;}&[data-arrangement='end']{justify-items:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}}&.vertical{grid-template-columns:auto;grid-template-rows:repeat(var(--plasma-private-items), auto);grid-auto-flow:column;&[data-arrangement='start']{align-items:start;}&[data-arrangement='center']{align-items:center;}&[data-arrangement='end']{align-items:end;}&[data-arrangement='spaceBetween']{align-content:space-between;align-items:normal;}&[data-arrangement='spaceAround']{align-content:space-around;align-items:normal;}&[data-alignment='start']{justify-items:start;}&[data-alignment='center']{justify-items:center;}&[data-alignment='end']{justify-items:end;}}}&:not(&.grid):not(&.hasChunks){align-content:start;&[data-arrangement='start']{justify-content:start;}&[data-arrangement='center']{justify-content:center;}&[data-arrangement='end']{justify-content:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}};label:plasma-new-hope__base;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRmxvdy9GbG93LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9GbG93L0Zsb3cuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gICAgZmxleC13cmFwOiB3cmFwO1xuXG4gICAgZ2FwOiB2YXIoLS1wbGFzbWEtcHJpdmF0ZS1nYXApO1xuXG4gICAgJi5oYXNDaHVua3Mge1xuICAgICAgICBmbGV4LXdyYXA6IG5vd3JhcDtcbiAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblxuICAgICAgICAmLnZlcnRpY2FsIHtcbiAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmLnZlcnRpY2FsIHtcbiAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICB9XG5cbiAgICAmLmdyaWQge1xuICAgICAgICBkaXNwbGF5OiBncmlkO1xuXG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KHZhcigtLXBsYXNtYS1wcml2YXRlLWl0ZW1zKSwgYXV0byk7XG4gICAgICAgIGdyaWQtYXV0by1mbG93OiByb3c7XG5cbiAgICAgICAgJi5lbGFzdGljIHtcbiAgICAgICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KGF1dG8tZmlsbCwgbWlubWF4KHZhcigtLXBsYXNtYS1wcml2YXRlLW1pbi13aWR0aCksIGF1dG8pKTtcbiAgICAgICAgICAgIGdyaWQtYXV0by1mbG93OiByb3c7XG4gICAgICAgIH1cblxuICAgICAgICAmOm5vdCgudmVydGljYWwpIHtcbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3RhcnQnXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1pdGVtczogc3RhcnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nY2VudGVyJ10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktaXRlbXM6IGNlbnRlcjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdlbmQnXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1pdGVtczogZW5kO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQmV0d2VlbiddIHtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3BhY2VBcm91bmQnXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJltkYXRhLWFsaWdubWVudD0nY2VudGVyJ10ge1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J2VuZCddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogZW5kO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJi52ZXJ0aWNhbCB7XG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG87XG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLXJvd3M6IHJlcGVhdCh2YXIoLS1wbGFzbWEtcHJpdmF0ZS1pdGVtcyksIGF1dG8pO1xuICAgICAgICAgICAgZ3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcblxuICAgICAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdzdGFydCddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nY2VudGVyJ10ge1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nZW5kJ10ge1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBlbmQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3BhY2VCZXR3ZWVuJ10ge1xuICAgICAgICAgICAgICAgIGFsaWduLWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICAgICAgYWxpZ24taXRlbXM6IG5vcm1hbDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdzcGFjZUFyb3VuZCddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1jb250ZW50OiBzcGFjZS1hcm91bmQ7XG4gICAgICAgICAgICAgICAgYWxpZ24taXRlbXM6IG5vcm1hbDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJltkYXRhLWFsaWdubWVudD0nc3RhcnQnXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1pdGVtczogc3RhcnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J2VuZCddIHtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWl0ZW1zOiBlbmQ7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAmOm5vdCgmLmdyaWQpOm5vdCgmLmhhc0NodW5rcykge1xuICAgICAgICBhbGlnbi1jb250ZW50OiBzdGFydDtcblxuICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzdGFydDtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nY2VudGVyJ10ge1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICAgIH1cblxuICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2VuZCddIHtcbiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogZW5kO1xuICAgICAgICB9XG5cbiAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdzcGFjZUJldHdlZW4nXSB7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgIH1cblxuICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQXJvdW5kJ10ge1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7XG4gICAgICAgIH1cblxuICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdzdGFydCddIHtcbiAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBzdGFydDtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgIH1cblxuICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdlbmQnXSB7XG4gICAgICAgICAgICBhbGlnbi1pdGVtczogZW5kO1xuICAgICAgICB9XG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IExpbmUgPSBzdHlsZWQuZGl2YFxuICAgIGRpc3BsYXk6IGZsZXg7XG5cbiAgICBnYXA6IHZhcigtLXBsYXNtYS1wcml2YXRlLWdhcCk7XG5cbiAgICAmLnZlcnRpY2FsIHtcbiAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgIH1cblxuICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3RhcnQnXSB7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgfVxuXG4gICAgJltkYXRhLWFycmFuZ2VtZW50PSdjZW50ZXInXSB7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIH1cblxuICAgICZbZGF0YS1hcnJhbmdlbWVudD0nZW5kJ10ge1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGVuZDtcbiAgICB9XG5cbiAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQmV0d2VlbiddIHtcbiAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgIH1cblxuICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3BhY2VBcm91bmQnXSB7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgIH1cblxuICAgICZbZGF0YS1hbGlnbm1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gICAgfVxuXG4gICAgJltkYXRhLWFsaWdubWVudD0nY2VudGVyJ10ge1xuICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIH1cblxuICAgICZbZGF0YS1hbGlnbm1lbnQ9J2VuZCddIHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGVuZDtcbiAgICB9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var Line = /*#__PURE__*/_styled("div", {
+  target: "ebyd3vf0",
+  label: "plasma-new-hope__Line"
+})(process.env.NODE_ENV === "production" ? {
+  name: "132lcva",
+  styles: "display:flex;gap:var(--plasma-private-gap);&.vertical{flex-direction:column;height:100%;}&[data-arrangement='start']{justify-content:start;}&[data-arrangement='center']{justify-content:center;}&[data-arrangement='end']{justify-content:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}"
+} : {
+  name: "132lcva",
+  styles: "display:flex;gap:var(--plasma-private-gap);&.vertical{flex-direction:column;height:100%;}&[data-arrangement='start']{justify-content:start;}&[data-arrangement='center']{justify-content:center;}&[data-arrangement='end']{justify-content:end;}&[data-arrangement='spaceBetween']{justify-content:space-between;}&[data-arrangement='spaceAround']{justify-content:space-around;}&[data-alignment='start']{align-items:start;}&[data-alignment='center']{align-items:center;}&[data-alignment='end']{align-items:end;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRmxvdy9GbG93LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrSjhCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRmxvdy9GbG93LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGZsZXgtd3JhcDogd3JhcDtcblxuICAgIGdhcDogdmFyKC0tcGxhc21hLXByaXZhdGUtZ2FwKTtcblxuICAgICYuaGFzQ2h1bmtzIHtcbiAgICAgICAgZmxleC13cmFwOiBub3dyYXA7XG4gICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG5cbiAgICAgICAgJi52ZXJ0aWNhbCB7XG4gICAgICAgICAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgJi52ZXJ0aWNhbCB7XG4gICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgfVxuXG4gICAgJi5ncmlkIHtcbiAgICAgICAgZGlzcGxheTogZ3JpZDtcblxuICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCh2YXIoLS1wbGFzbWEtcHJpdmF0ZS1pdGVtcyksIGF1dG8pO1xuICAgICAgICBncmlkLWF1dG8tZmxvdzogcm93O1xuXG4gICAgICAgICYuZWxhc3RpYyB7XG4gICAgICAgICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpbGwsIG1pbm1heCh2YXIoLS1wbGFzbWEtcHJpdmF0ZS1taW4td2lkdGgpLCBhdXRvKSk7XG4gICAgICAgICAgICBncmlkLWF1dG8tZmxvdzogcm93O1xuICAgICAgICB9XG5cbiAgICAgICAgJjpub3QoLnZlcnRpY2FsKSB7XG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktaXRlbXM6IHN0YXJ0O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nZW5kJ10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktaXRlbXM6IGVuZDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdzcGFjZUJldHdlZW4nXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQXJvdW5kJ10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdzdGFydCddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdlbmQnXSB7XG4gICAgICAgICAgICAgICAgYWxpZ24taXRlbXM6IGVuZDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgICYudmVydGljYWwge1xuICAgICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuICAgICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQodmFyKC0tcGxhc21hLXByaXZhdGUtaXRlbXMpLCBhdXRvKTtcbiAgICAgICAgICAgIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3RhcnQnXSB7XG4gICAgICAgICAgICAgICAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2VuZCddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogZW5kO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQmV0d2VlbiddIHtcbiAgICAgICAgICAgICAgICBhbGlnbi1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBub3JtYWw7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3BhY2VBcm91bmQnXSB7XG4gICAgICAgICAgICAgICAgYWxpZ24tY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBub3JtYWw7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICZbZGF0YS1hbGlnbm1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICAgICAgICAgIGp1c3RpZnktaXRlbXM6IHN0YXJ0O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdjZW50ZXInXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdlbmQnXSB7XG4gICAgICAgICAgICAgICAganVzdGlmeS1pdGVtczogZW5kO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgJjpub3QoJi5ncmlkKTpub3QoJi5oYXNDaHVua3MpIHtcbiAgICAgICAgYWxpZ24tY29udGVudDogc3RhcnQ7XG5cbiAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdzdGFydCddIHtcbiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3RhcnQ7XG4gICAgICAgIH1cblxuICAgICAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgICB9XG5cbiAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdlbmQnXSB7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGVuZDtcbiAgICAgICAgfVxuXG4gICAgICAgICZbZGF0YS1hcnJhbmdlbWVudD0nc3BhY2VCZXR3ZWVuJ10ge1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICB9XG5cbiAgICAgICAgJltkYXRhLWFycmFuZ2VtZW50PSdzcGFjZUFyb3VuZCddIHtcbiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kO1xuICAgICAgICB9XG5cbiAgICAgICAgJltkYXRhLWFsaWdubWVudD0nc3RhcnQnXSB7XG4gICAgICAgICAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gICAgICAgIH1cblxuICAgICAgICAmW2RhdGEtYWxpZ25tZW50PSdjZW50ZXInXSB7XG4gICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICB9XG5cbiAgICAgICAgJltkYXRhLWFsaWdubWVudD0nZW5kJ10ge1xuICAgICAgICAgICAgYWxpZ24taXRlbXM6IGVuZDtcbiAgICAgICAgfVxuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBMaW5lID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuXG4gICAgZ2FwOiB2YXIoLS1wbGFzbWEtcHJpdmF0ZS1nYXApO1xuXG4gICAgJi52ZXJ0aWNhbCB7XG4gICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICB9XG5cbiAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3N0YXJ0J10ge1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuICAgIH1cblxuICAgICZbZGF0YS1hcnJhbmdlbWVudD0nY2VudGVyJ10ge1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG5cbiAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J2VuZCddIHtcbiAgICAgICAganVzdGlmeS1jb250ZW50OiBlbmQ7XG4gICAgfVxuXG4gICAgJltkYXRhLWFycmFuZ2VtZW50PSdzcGFjZUJldHdlZW4nXSB7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICB9XG5cbiAgICAmW2RhdGEtYXJyYW5nZW1lbnQ9J3NwYWNlQXJvdW5kJ10ge1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDtcbiAgICB9XG5cbiAgICAmW2RhdGEtYWxpZ25tZW50PSdzdGFydCddIHtcbiAgICAgICAgYWxpZ24taXRlbXM6IHN0YXJ0O1xuICAgIH1cblxuICAgICZbZGF0YS1hbGlnbm1lbnQ9J2NlbnRlciddIHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB9XG5cbiAgICAmW2RhdGEtYWxpZ25tZW50PSdlbmQnXSB7XG4gICAgICAgIGFsaWduLWl0ZW1zOiBlbmQ7XG4gICAgfVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/emotion/es/components/Flow/Flow.template-doc.mdx

@@ -0,0 +1,127 @@
+---
+id: flow
+title: Flow
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Flow
+Универсальный контейнер для упорядоченного размещения вложенных компонентов (например, медиафайлы, карточки или блоки текста).
+
+
+## Flow
+<Description name="Flow" />
+<PropsTable name="Flow" exclude={['css', 'focused', 'minColWidth']} />
+
+## Использование
+По умолчанию компонент `Flow` отображается на основе `display: flex; flex-wrap: wrap`,
+при указании `itemsPerLine` компонент переходит на `display: flex; flex-wrap: nowrap` с превентивным разбиением на колонки/столбцы.
+
+
+## Примеры
+
+### Горизонтальное отображение с переполнением
+
+```tsx live
+import React from 'react';
+import { Flow } from '@salutejs/{{ package }}';
+
+export function App() {
+    const numbers = ['one', 'two', 'three', 'four', 'five', 'six'];
+
+    const style = (index) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: `${2 + numbers[index].length}ch`,
+        height: '25px',
+        backgroundColor: '#999',
+        borderRadius: '10px',
+    });
+
+    return (
+        <div>
+            <Flow mainAxisGap="0.5ch" crossAxisGap="1ch" style={{ width: '15ch' }} >
+                {Array(6)
+                    .fill(0)
+                    .map((_, i) => (<div key={i} style={style(i)}>{numbers[i]}</div>))}
+            </Flow>
+        </div>
+    );
+}
+```
+
+### Вертикальное отображение с переполнением
+
+```tsx live
+import React from 'react';
+import { Flow } from '@salutejs/{{ package }}';
+
+export function App() {
+    const numbers = ['one', 'two', 'three', 'four', 'five', 'six'];
+
+    const style = (index) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: `${2 + numbers[index].length}ch`,
+        height: '25px',
+        backgroundColor: '#999',
+        borderRadius: '10px',
+    });
+
+    return (
+        <div>
+            <Flow
+                alignment="center"
+                orientation="vertical"
+                mainAxisGap="0.5ch"
+                crossAxisGap="1ch"
+                style={{ height: '90px' }}
+            >
+                {Array(6)
+                    .fill(0)
+                    .map((_, i) => (<div key={i} style={style(i)}>{numbers[i]}</div>))}
+            </Flow>
+        </div>
+    );
+}
+```
+
+### Отображение с разбиением на строки
+С ограничением количества элементов в строке.
+
+```tsx live
+import React from 'react';
+import { Flow } from '@salutejs/{{ package }}';
+
+export function App() {
+    const numbers = ['one', 'two', 'three', 'four', 'five', 'six'];
+
+    const style = (index) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: `${2 + numbers[index].length}ch`,
+        height: '25px',
+        backgroundColor: '#999',
+        borderRadius: '10px',
+    });
+
+    return (
+        <div>
+            <Flow
+                arrangement="end"
+                itemsPerLine={2}
+                mainAxisGap="0.5ch"
+                crossAxisGap="1ch"
+            >
+                {Array(6)
+                    .fill(0)
+                    .map((_, i) => (<div key={i} style={style(i)}>{numbers[i]}</div>))}
+            </Flow>
+        </div>
+    );
+}
+```
+

package/emotion/es/components/Flow/Flow.types.js

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

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

@@ -0,0 +1 @@
+export { flowRoot, flowConfig } from './Flow';

package/emotion/es/examples/plasma_b2c/components/Flow/Flow.config.js

@@ -0,0 +1,4 @@
+export var config = {
+  defaults: {},
+  variations: {}
+};

package/emotion/es/examples/plasma_b2c/components/Flow/Flow.js

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