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

package/emotion/es/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/es/examples/plasma_web/components/Flow/Flow.config.js

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

package/emotion/es/examples/plasma_web/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);

package/emotion/es/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/es/index.js

@@ -12,6 +12,7 @@ export * from './components/Breadcrumbs';
 export * from './components/Chip';
 export * from './components/ChipGroup';
 export * from './components/Cell';
+export * from './components/Flow';
 export * from './components/Link';
 export * from './components/Spinner';
 export * from './components/Checkbox';
@@ -44,6 +45,7 @@ export * from './components/SSRProvider';
 export * from './components/Combobox';
 export * from './components/Indicator';
 export * from './components/ButtonBase';
+export * from './components/Flow';
 export * from './components/Grid';
 export * from './components/Progress';
 export * from './components/Select';

package/es/components/Flow/Flow.css

@@ -0,0 +1,2 @@
+.Flow_styles_q8k0on_b1iyfec1__5db9d70e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--plasma-private-gap);}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e{display:grid;grid-template-columns:repeat(var(--plasma-private-items),auto);grid-auto-flow:row;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_elastic__5db9d70e{grid-template-columns:repeat(auto-fill,minmax(var(--plasma-private-min-width),auto));grid-auto-flow:row;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='start']{justify-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='center']{justify-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='end']{justify-items:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e{grid-template-columns:auto;grid-template-rows:repeat(var(--plasma-private-items),auto);grid-auto-flow:column;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='spaceBetween']{-webkit-align-content:space-between;-ms-flex-line-pack:space-between;align-content:space-between;-webkit-align-items:normal;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='spaceAround']{-webkit-align-content:space-around;-ms-flex-line-pack:space-around;align-content:space-around;-webkit-align-items:normal;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-alignment='start']{justify-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-alignment='center']{justify-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-alignment='end']{justify-items:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e){-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='start']{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='center']{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='end']{-webkit-box-pack:end;-webkit-justify-content:end;-ms-flex-pack:end;justify-content:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
+.Flow_styles_q8k0on_lxs138i__5db9d70e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-private-gap);}.Flow_styles_q8k0on_lxs138i__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='start']{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='center']{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='end']{-webkit-box-pack:end;-webkit-justify-content:end;-ms-flex-pack:end;justify-content:end;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}

package/es/components/Flow/Flow.js

@@ -0,0 +1,79 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef } from 'react';
+import cls from 'classnames';
+import chunk from 'lodash.chunk';
+import { Line, base } from './Flow.styles.js';
+
+var _excluded = ["children", "className", "style", "orientation", "arrangement", "alignment", "mainAxisGap", "crossAxisGap", "minColWidth", "itemsPerLine"];
+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: _objectSpread2(_objectSpread2({}, 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);
+  });
+};
+var flowConfig = {
+  name: 'Flow',
+  tag: 'div',
+  layout: flowRoot,
+  base: base,
+  defaults: {},
+  variations: {}
+};
+
+export { flowConfig, flowRoot };
+//# sourceMappingURL=Flow.js.map

package/es/components/Flow/Flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef } from 'react';\nimport cls from 'classnames';\nimport chunk from 'lodash.chunk';\n\nimport { RootProps } from '../../engines';\n\nimport { base, Line } from './Flow.styles';\nimport { FlowProps } from './Flow.types';\n\ntype TempFlowTypes = FlowProps & {\n    /**\n     *  Минимальный размер колонки для эластичной сетки с динамическим количеством растянутых столбцов\n     *  через `repeat(auto-fill, minmax(${minColWidth}, auto))`\n     */\n    minColWidth?: string;\n};\n\nexport const flowRoot = (Root: RootProps<HTMLDivElement, TempFlowTypes>) =>\n    forwardRef<HTMLDivElement, TempFlowTypes>(\n        (\n            {\n                children,\n                className,\n                style,\n                orientation = 'horizontal',\n                arrangement,\n                alignment,\n                mainAxisGap = '0',\n                crossAxisGap = '0',\n                minColWidth = 'auto',\n                itemsPerLine,\n                ...rest\n            },\n            ref,\n        ) => {\n            const isVertical = orientation === 'vertical';\n            const hasMinWidth = Boolean(minColWidth && minColWidth !== 'auto');\n            const needGrid = Boolean(Number(itemsPerLine) > 0 || hasMinWidth);\n\n            let innerMainAxisGap =\n                typeof mainAxisGap === 'number' || !Number.isNaN(+mainAxisGap) ? `${mainAxisGap || 0}px` : mainAxisGap;\n            const innerCrossAxisGap =\n                typeof crossAxisGap === 'number' || !Number.isNaN(+crossAxisGap)\n                    ? `${crossAxisGap || 0}px`\n                    : crossAxisGap;\n\n            if (arrangement === 'spaceBetween' || arrangement === 'spaceAround') {\n                innerMainAxisGap = '0';\n            }\n\n            const hasChunks = Number(itemsPerLine) > 0;\n            const chunks: React.ReactNode[] = hasChunks ? chunk(React.Children.toArray(children), itemsPerLine) : [];\n\n            const gap = isVertical\n                ? `${innerMainAxisGap} ${innerCrossAxisGap}`\n                : `${innerCrossAxisGap} ${innerMainAxisGap}`;\n\n            const wrapperGap = isVertical ? `0 ${innerCrossAxisGap}` : `${innerCrossAxisGap} 0`;\n            const lineGap = isVertical ? `${innerMainAxisGap} 0` : `0 ${innerMainAxisGap}`;\n\n            return (\n                <Root\n                    ref={ref}\n                    className={cls(className, {\n                        vertical: isVertical,\n                        grid: hasMinWidth,\n                        elastic: hasMinWidth,\n                        hasChunks,\n                    })}\n                    style={\n                        {\n                            ...style,\n                            '--plasma-private-gap': hasChunks ? wrapperGap : gap,\n                            '--plasma-private-items': String(itemsPerLine),\n                            '--plasma-private-min-width': String(minColWidth),\n                        } as CSSProperties & {\n                            '--plasma-private-gap': string;\n                            '--plasma-private-items': string;\n                            '--plasma-private-min-width': string;\n                        }\n                    }\n                    data-arrangement={arrangement}\n                    data-alignment={alignment}\n                    {...rest}\n                >\n                    {hasChunks &&\n                        chunks.map((chunkNode) => (\n                            <Line\n                                className={cls({\n                                    vertical: isVertical,\n                                    grid: needGrid,\n                                    elastic: hasMinWidth,\n                                })}\n                                style={\n                                    {\n                                        '--plasma-private-gap': lineGap,\n                                    } as CSSProperties & {\n                                        '--plasma-private-gap': string;\n                                    }\n                                }\n                                data-arrangement={arrangement}\n                                data-alignment={alignment}\n                            >\n                                {chunkNode}\n                            </Line>\n                        ))}\n                    {!hasChunks && children}\n                </Root>\n            );\n        },\n    );\n\nexport const flowConfig = {\n    name: 'Flow',\n    tag: 'div',\n    layout: flowRoot,\n    base,\n    defaults: {},\n    variations: {},\n};\n"],"names":["flowRoot","Root","forwardRef","_ref","ref","children","className","style","_ref$orientation","orientation","arrangement","alignment","_ref$mainAxisGap","mainAxisGap","_ref$crossAxisGap","crossAxisGap","_ref$minColWidth","minColWidth","itemsPerLine","rest","_objectWithoutProperties","_excluded","isVertical","hasMinWidth","Boolean","needGrid","Number","innerMainAxisGap","isNaN","concat","innerCrossAxisGap","hasChunks","chunks","chunk","React","Children","toArray","gap","wrapperGap","lineGap","createElement","_extends","cls","vertical","grid","elastic","_objectSpread","String","map","chunkNode","Line","flowConfig","name","tag","layout","base","defaults","variations"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import './Flow.styles_q8k0on.css';
+import { styled } from '@linaria/react';
+
+var base = "b1iyfec1";
+var Line = /*#__PURE__*/styled('div')({
+  name: "Line",
+  "class": "lxs138i",
+  propsAsIs: false
+});
+
+export { Line, base };
+//# sourceMappingURL=Flow.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.styles.js","sources":["../../../src/components/Flow/Flow.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nexport const base = css`\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    gap: var(--plasma-private-gap);\n\n    &.hasChunks {\n        flex-wrap: nowrap;\n        flex-direction: column;\n\n        &.vertical {\n            flex-direction: row;\n        }\n    }\n\n    &.vertical {\n        flex-direction: column;\n    }\n\n    &.grid {\n        display: grid;\n\n        grid-template-columns: repeat(var(--plasma-private-items), auto);\n        grid-auto-flow: row;\n\n        &.elastic {\n            grid-template-columns: repeat(auto-fill, minmax(var(--plasma-private-min-width), auto));\n            grid-auto-flow: row;\n        }\n\n        &:not(.vertical) {\n            &[data-arrangement='start'] {\n                justify-items: start;\n            }\n\n            &[data-arrangement='center'] {\n                justify-items: center;\n            }\n\n            &[data-arrangement='end'] {\n                justify-items: end;\n            }\n\n            &[data-arrangement='spaceBetween'] {\n                justify-content: space-between;\n            }\n\n            &[data-arrangement='spaceAround'] {\n                justify-content: space-around;\n            }\n\n            &[data-alignment='start'] {\n                align-items: start;\n            }\n\n            &[data-alignment='center'] {\n                align-items: center;\n            }\n\n            &[data-alignment='end'] {\n                align-items: end;\n            }\n        }\n\n        &.vertical {\n            grid-template-columns: auto;\n            grid-template-rows: repeat(var(--plasma-private-items), auto);\n            grid-auto-flow: column;\n\n            &[data-arrangement='start'] {\n                align-items: start;\n            }\n\n            &[data-arrangement='center'] {\n                align-items: center;\n            }\n\n            &[data-arrangement='end'] {\n                align-items: end;\n            }\n\n            &[data-arrangement='spaceBetween'] {\n                align-content: space-between;\n                align-items: normal;\n            }\n\n            &[data-arrangement='spaceAround'] {\n                align-content: space-around;\n                align-items: normal;\n            }\n\n            &[data-alignment='start'] {\n                justify-items: start;\n            }\n\n            &[data-alignment='center'] {\n                justify-items: center;\n            }\n\n            &[data-alignment='end'] {\n                justify-items: end;\n            }\n        }\n    }\n\n    &:not(&.grid):not(&.hasChunks) {\n        align-content: start;\n\n        &[data-arrangement='start'] {\n            justify-content: start;\n        }\n\n        &[data-arrangement='center'] {\n            justify-content: center;\n        }\n\n        &[data-arrangement='end'] {\n            justify-content: end;\n        }\n\n        &[data-arrangement='spaceBetween'] {\n            justify-content: space-between;\n        }\n\n        &[data-arrangement='spaceAround'] {\n            justify-content: space-around;\n        }\n\n        &[data-alignment='start'] {\n            align-items: start;\n        }\n\n        &[data-alignment='center'] {\n            align-items: center;\n        }\n\n        &[data-alignment='end'] {\n            align-items: end;\n        }\n    }\n`;\n\nexport const Line = styled.div`\n    display: flex;\n\n    gap: var(--plasma-private-gap);\n\n    &.vertical {\n        flex-direction: column;\n        height: 100%;\n    }\n\n    &[data-arrangement='start'] {\n        justify-content: start;\n    }\n\n    &[data-arrangement='center'] {\n        justify-content: center;\n    }\n\n    &[data-arrangement='end'] {\n        justify-content: end;\n    }\n\n    &[data-arrangement='spaceBetween'] {\n        justify-content: space-between;\n    }\n\n    &[data-arrangement='spaceAround'] {\n        justify-content: space-around;\n    }\n\n    &[data-alignment='start'] {\n        align-items: start;\n    }\n\n    &[data-alignment='center'] {\n        align-items: center;\n    }\n\n    &[data-alignment='end'] {\n        align-items: end;\n    }\n`;\n"],"names":["base","Line","styled","name","class","propsAsIs"],"mappings":";;AAGO,IAAMA,IAAI,GA6IhB,WAAA;AAEM,IAAMC,IAAI,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,MAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAyCzB;;;;"}

package/es/components/Flow/Flow.styles_q8k0on.css

@@ -0,0 +1,2 @@
+.b1iyfec1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--plasma-private-gap);}.b1iyfec1.hasChunks{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.b1iyfec1.hasChunks.vertical{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.b1iyfec1.vertical{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.b1iyfec1.grid{display:grid;grid-template-columns:repeat(var(--plasma-private-items),auto);grid-auto-flow:row;}.b1iyfec1.grid.elastic{grid-template-columns:repeat(auto-fill,minmax(var(--plasma-private-min-width),auto));grid-auto-flow:row;}.b1iyfec1.grid:not(.vertical)[data-arrangement='start']{justify-items:start;}.b1iyfec1.grid:not(.vertical)[data-arrangement='center']{justify-items:center;}.b1iyfec1.grid:not(.vertical)[data-arrangement='end']{justify-items:end;}.b1iyfec1.grid:not(.vertical)[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.b1iyfec1.grid:not(.vertical)[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.b1iyfec1.grid:not(.vertical)[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.b1iyfec1.grid:not(.vertical)[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.b1iyfec1.grid:not(.vertical)[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}.b1iyfec1.grid.vertical{grid-template-columns:auto;grid-template-rows:repeat(var(--plasma-private-items),auto);grid-auto-flow:column;}.b1iyfec1.grid.vertical[data-arrangement='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.b1iyfec1.grid.vertical[data-arrangement='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.b1iyfec1.grid.vertical[data-arrangement='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}.b1iyfec1.grid.vertical[data-arrangement='spaceBetween']{-webkit-align-content:space-between;-ms-flex-line-pack:space-between;align-content:space-between;-webkit-align-items:normal;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;}.b1iyfec1.grid.vertical[data-arrangement='spaceAround']{-webkit-align-content:space-around;-ms-flex-line-pack:space-around;align-content:space-around;-webkit-align-items:normal;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;}.b1iyfec1.grid.vertical[data-alignment='start']{justify-items:start;}.b1iyfec1.grid.vertical[data-alignment='center']{justify-items:center;}.b1iyfec1.grid.vertical[data-alignment='end']{justify-items:end;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks){-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks)[data-arrangement='start']{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks)[data-arrangement='center']{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks)[data-arrangement='end']{-webkit-box-pack:end;-webkit-justify-content:end;-ms-flex-pack:end;justify-content:end;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks)[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks)[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks)[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks)[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.b1iyfec1:not(.b1iyfec1.grid):not(.b1iyfec1.hasChunks)[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
+.lxs138i{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-private-gap);}.lxs138i.vertical{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;}.lxs138i[data-arrangement='start']{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}.lxs138i[data-arrangement='center']{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.lxs138i[data-arrangement='end']{-webkit-box-pack:end;-webkit-justify-content:end;-ms-flex-pack:end;justify-content:end;}.lxs138i[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.lxs138i[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.lxs138i[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.lxs138i[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.lxs138i[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}

package/es/index.css

@@ -85,6 +85,9 @@
 
 .CellTextbox_styles_rgpies_cz0uqdu__c842929b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-cell-textbox-gap);}
 
+.Flow_styles_q8k0on_b1iyfec1__5db9d70e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--plasma-private-gap);}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e{display:grid;grid-template-columns:repeat(var(--plasma-private-items),auto);grid-auto-flow:row;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_elastic__5db9d70e{grid-template-columns:repeat(auto-fill,minmax(var(--plasma-private-min-width),auto));grid-auto-flow:row;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='start']{justify-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='center']{justify-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='end']{justify-items:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e:not(.Flow_styles_q8k0on_vertical__5db9d70e)[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e{grid-template-columns:auto;grid-template-rows:repeat(var(--plasma-private-items),auto);grid-auto-flow:column;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='spaceBetween']{-webkit-align-content:space-between;-ms-flex-line-pack:space-between;align-content:space-between;-webkit-align-items:normal;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-arrangement='spaceAround']{-webkit-align-content:space-around;-ms-flex-line-pack:space-around;align-content:space-around;-webkit-align-items:normal;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-alignment='start']{justify-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-alignment='center']{justify-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e[data-alignment='end']{justify-items:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e){-webkit-align-content:start;-ms-flex-line-pack:start;align-content:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='start']{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='center']{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='end']{-webkit-box-pack:end;-webkit-justify-content:end;-ms-flex-pack:end;justify-content:end;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Flow_styles_q8k0on_b1iyfec1__5db9d70e:not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_grid__5db9d70e):not(.Flow_styles_q8k0on_b1iyfec1__5db9d70e.Flow_styles_q8k0on_hasChunks__5db9d70e)[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
+.Flow_styles_q8k0on_lxs138i__5db9d70e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-private-gap);}.Flow_styles_q8k0on_lxs138i__5db9d70e.Flow_styles_q8k0on_vertical__5db9d70e{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='start']{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='center']{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='end']{-webkit-box-pack:end;-webkit-justify-content:end;-ms-flex-pack:end;justify-content:end;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='spaceBetween']{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-arrangement='spaceAround']{-webkit-box-pack:space-around;-webkit-justify-content:space-around;-ms-flex-pack:space-around;justify-content:space-around;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-alignment='start']{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-alignment='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Flow_styles_q8k0on_lxs138i__5db9d70e[data-alignment='end']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
+
 .base_1vy4dme_bcchm3r__d3e4eaba{font-family:var(--plasma-link-font-family);color:var(--plasma-link-color);}.base_1vy4dme_bcchm3r__d3e4eaba::before{border-bottom:var(--plasma-link-underline-border) solid currentColor;}.base_1vy4dme_bcchm3r__d3e4eaba:hover{color:var(--plasma-link-color-hover,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:hover::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:active{color:var(--plasma-link-color-active,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:active::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited{color:var(--plasma-link-color-visited,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited:hover{color:var(--plasma-link-color-visited-hover,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited:hover::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited:active{color:var(--plasma-link-color-visited-active,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited:active::before{opacity:1;}
 
 .base_1w750p8_b1j3f4f__d44baab5[disabled]{opacity:var(--plasma-link-disabled-opacity);cursor:not-allowed;}.base_1w750p8_b1j3f4f__d44baab5[disabled]:hover,.base_1w750p8_b1j3f4f__d44baab5[disabled]:active{color:var(--plasma-link-color);}.base_1w750p8_b1j3f4f__d44baab5[disabled]::before{opacity:1;}

package/es/index.js

@@ -52,6 +52,7 @@ export { CellTextboxSubtitle } from './components/Cell/ui/CellTextboxSubtitle/Ce
 export { cellConfig, cellRoot } from './components/Cell/Cell.js';
 export { classes as cellClasses, tokens as cellTokens } from './components/Cell/Cell.tokens.js';
 export { CellTextbox } from './components/Cell/ui/CellTextbox/CellTextbox.js';
+export { flowConfig, flowRoot } from './components/Flow/Flow.js';
 export { linkConfig, linkRoot } from './components/Link/Link.js';
 export { spinnerConfig, spinnerRoot } from './components/Spinner/Spinner.js';
 export { tokens as spinnerTokens } from './components/Spinner/Spinner.tokens.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.237.1-dev.0",
+  "version": "0.238.0-dev.0",
   "description": "Salute Design System blueprint",
   "main": "./cjs/index.js",
   "module": "./es/index.js",
@@ -106,6 +106,7 @@
     "@storybook/react-vite": "7.6.17",
     "@storybook/theming": "^7.6.17",
     "@types/lodash": "^4.14.191",
+    "@types/lodash.chunk": "4.2.9",
     "@types/lodash.throttle": "4.1.6",
     "@types/node": "15.14.9",
     "@types/react": "18.0.28",
@@ -137,6 +138,7 @@
     "classnames": "2.5.1",
     "dayjs": "1.11.11",
     "focus-visible": "5.2.0",
+    "lodash.chunk": "4.2.0",
     "lodash.throttle": "4.1.1",
     "rc-tree": "5.11.0",
     "react-draggable": "4.4.3",
@@ -146,5 +148,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "7fc78258fe61b50aa631b3bc31dde2c029fbc909"
+  "gitHead": "776b4a8340b8a4ad8c82a83a7484fdac9941cf35"
 }

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

@@ -0,0 +1,92 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flowRoot = exports.flowConfig = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("classnames"));
+var _lodash = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("lodash.chunk"));
+var _Flow = /*#__PURE__*/require("./Flow.styles");
+var _excluded = ["children", "className", "style", "orientation", "arrangement", "alignment", "mainAxisGap", "crossAxisGap", "minColWidth", "itemsPerLine"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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; }
+var flowRoot = exports.flowRoot = function flowRoot(Root) {
+  return /*#__PURE__*/(0, _react.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 ? (0, _lodash["default"])(_react["default"].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["default"].createElement(Root, _extends({
+      ref: ref,
+      className: (0, _classnames["default"])(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["default"].createElement(_Flow.Line, {
+        className: (0, _classnames["default"])({
+          vertical: isVertical,
+          grid: needGrid,
+          elastic: hasMinWidth
+        }),
+        style: {
+          '--plasma-private-gap': lineGap
+        },
+        "data-arrangement": arrangement,
+        "data-alignment": alignment
+      }, chunkNode);
+    }), !hasChunks && children);
+  });
+};
+var flowConfig = exports.flowConfig = {
+  name: 'Flow',
+  tag: 'div',
+  layout: flowRoot,
+  base: _Flow.base,
+  defaults: {},
+  variations: {}
+};