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

package/styled-components/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/styled-components/es/components/Flow/Flow.styles.js

@@ -0,0 +1,8 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from 'styled-components';
+import styled from 'styled-components';
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\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"])));
+export var Line = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1eomci9-0"
+})(["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;}"]);

package/styled-components/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/styled-components/es/components/Flow/Flow.types.js

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

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

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

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

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

package/styled-components/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);

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

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

package/styled-components/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/styled-components/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/styled-components/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/types/components/Flow/Flow.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { RootProps } from '../../engines';
+import { FlowProps } from './Flow.types';
+declare type TempFlowTypes = FlowProps & {
+    /**
+     *  Минимальный размер колонки для эластичной сетки с динамическим количеством растянутых столбцов
+     *  через `repeat(auto-fill, minmax(${minColWidth}, auto))`
+     */
+    minColWidth?: string;
+};
+export declare const flowRoot: (Root: RootProps<HTMLDivElement, TempFlowTypes>) => React.ForwardRefExoticComponent<FlowProps & {
+    /**
+     *  Минимальный размер колонки для эластичной сетки с динамическим количеством растянутых столбцов
+     *  через `repeat(auto-fill, minmax(${minColWidth}, auto))`
+     */
+    minColWidth?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const flowConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, TempFlowTypes>) => React.ForwardRefExoticComponent<FlowProps & {
+        /**
+         *  Минимальный размер колонки для эластичной сетки с динамическим количеством растянутых столбцов
+         *  через `repeat(auto-fill, minmax(${minColWidth}, auto))`
+         */
+        minColWidth?: string | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    defaults: {};
+    variations: {};
+};
+export {};
+//# sourceMappingURL=Flow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["../../../src/components/Flow/Flow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAIzD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,aAAK,aAAa,GAAG,SAAS,GAAG;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,QAAQ,SAAU,UAAU,cAAc,EAAE,aAAa,CAAC;IAPnE;;;OAGG;;wCAiGF,CAAC;AAEN,eAAO,MAAM,UAAU;;;mBA/FQ,UAAU,cAAc,EAAE,aAAa,CAAC;QAPnE;;;WAGG;;;;;;CA0GN,CAAC"}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const Line: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+//# sourceMappingURL=Flow.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Flow/Flow.styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,IAAI,0CA6IhB,CAAC;AAEF,eAAO,MAAM,IAAI,qKAyChB,CAAC"}

package/types/components/Flow/Flow.types.d.ts

@@ -0,0 +1,34 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface FlowProps {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * Ориентация элементов
+     * @default `horizontal`
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Расположение элементов относительно выбранной ориентации
+     */
+    arrangement?: 'start' | 'center' | 'end' | 'spaceBetween' | 'spaceAround';
+    /**
+     * Выравнивание элементов внутри строк по вертикали при горизонтальной ориентации,
+     * или внутри столбцов по горизонтали при вертикальной
+     */
+    alignment?: 'start' | 'center' | 'end';
+    /**
+     *  Фиксированный отступ между элементами по главной оси
+     */
+    mainAxisGap?: number | string;
+    /**
+     *  Фиксированный отступ между элементами по второстепенной оси
+     */
+    crossAxisGap?: number | string;
+    /**
+     *  Количество элементов по главной оси в отображении grid, при itemsPerLine > 0,
+     *  иначе используется flex и flex-wrap
+     */
+    itemsPerLine?: number;
+}
+//# sourceMappingURL=Flow.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.types.d.ts","sourceRoot":"","sources":["../../../src/components/Flow/Flow.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,SAAS;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,aAAa,CAAC;IAC1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/types/components/Flow/index.d.ts

@@ -0,0 +1,3 @@
+export { flowRoot, flowConfig } from './Flow';
+export type { FlowProps } from './Flow.types';
+//# sourceMappingURL=index.d.ts.map

package/types/components/Flow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Flow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/types/examples/plasma_b2c/components/Flow/Flow.config.d.ts

@@ -0,0 +1,5 @@
+export declare const config: {
+    defaults: {};
+    variations: {};
+};
+//# sourceMappingURL=Flow.config.d.ts.map

package/types/examples/plasma_b2c/components/Flow/Flow.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Flow/Flow.config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;CAGlB,CAAC"}

package/types/examples/plasma_b2c/components/Flow/Flow.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Flow: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{}> & import("../../../../components/Flow").FlowProps & {
+    minColWidth?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Flow.d.ts.map

package/types/examples/plasma_b2c/components/Flow/Flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Flow/Flow.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,IAAI;;kDAA0B,CAAC"}