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

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: {}
+};

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

@@ -0,0 +1,16 @@
+"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.base = exports.Line = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
+var _templateObject;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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"])));
+var Line = exports.Line = /*#__PURE__*/_styledComponents["default"].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/cjs/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/cjs/components/Flow/Flow.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "flowConfig", {
+  enumerable: true,
+  get: function get() {
+    return _Flow.flowConfig;
+  }
+});
+Object.defineProperty(exports, "flowRoot", {
+  enumerable: true,
+  get: function get() {
+    return _Flow.flowRoot;
+  }
+});
+var _Flow = /*#__PURE__*/require("./Flow");

package/styled-components/cjs/examples/plasma_b2c/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/styled-components/cjs/examples/plasma_b2c/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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;