@gravity-ui/page-constructor 6.3.1 → 6.3.2-alpha.10

package/README.md

@@ -14,24 +14,112 @@ For the format of input data and list of available blocks, see the [documentatio
 npm install @gravity-ui/page-constructor
 ```
 
-## Required dependencies
+## Quick start
 
-Please note that to start using the package, your project must also have the following installed: `@diplodoc/transform`, `@gravity-ui/uikit`, `react`. Check out the `peerDependencies` section of `package.json` for accurate information.
+First, we need a React project and some kind of server. For example, you can create a React project using Vite and an Express server, or you can create Next.js application - it will have a client and server side at once.
 
-### Getting started
+Install the required dependencies:
 
-The page constructor is imported as a React component. To make sure it runs properly, wrap it in `PageConstructorProvider`:
+```shell
+npm install @gravity-ui/page-constructor @diplodoc/transform @gravity-ui/uikit
+```
 
-```jsx
+Insert the `Page Constructor` to the page. To work correctly, it must be wrapped in a `PageConstructorProvider`:
+
+```tsx
 import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
+import '@gravity-ui/page-constructor/styles/styles.scss';
+
+const App = () => {
+  const content = {
+    blocks: [
+      {
+        type: 'header-block',
+        title: 'Hello world',
+        background: {color: '#f0f0f0'},
+        description:
+          '**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
+      },
+    ],
+  };
+
+  return (
+    <PageConstructorProvider>
+      <PageConstructor content={content} />
+    </PageConstructorProvider>
+  );
+};
 
-const Page: React.PropsWithChildren<PageProps> = ({content}) => (
-  <PageConstructorProvider>
-    <PageConstructor content={content} />
-  </PageConstructorProvider>
-);
+export default App;
+```
+
+This was the simplest example of a connection. In order for YFM markup to work, you need to process content on the server and receive it on the client.
+
+If your server is a separate application, then you need to install page-constructor:
+
+```shell
+npm install @gravity-ui/page-constructor
+```
+
+To process YFM in all base blocks, call the `contentTransformer` and pass the content and options there:
+
+```ts
+const express = require('express');
+const app = express();
+const {contentTransformer} = require('@gravity-ui/page-constructor/server');
+
+const content = {
+  blocks: [
+    {
+      type: 'header-block',
+      title: 'Hello world',
+      background: {color: '#f0f0f0'},
+      description:
+        '**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
+    },
+  ],
+};
+
+app.get('/content', (req, res) => {
+  res.send({content: contentTransformer({content, options: {lang: 'en'}})});
+});
+
+app.listen(3000);
 ```
 
+On the client, add an endpoint call to receive content:
+
+```tsx
+import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
+import '@gravity-ui/page-constructor/styles/styles.scss';
+import {useEffect, useState} from 'react';
+
+const App = () => {
+  const [content, setContent] = useState();
+
+  useEffect(() => {
+    (async () => {
+      const response = await fetch('http://localhost:3000/content').then((r) => r.json());
+      setContent(response.content);
+    })();
+  }, []);
+
+  return (
+    <PageConstructorProvider>
+      <PageConstructor content={content} />
+    </PageConstructorProvider>
+  );
+};
+
+export default App;
+```
+
+### Ready-made template
+
+To start a new project, you can use the [ready-made template on Next.js ](https://github.com/gravity-ui/page-constructor-website-template) which we have prepared.
+
+## Documentation
+
 ### Parameters
 
 ```typescript
@@ -438,7 +526,7 @@ If you want to release a new version in previous major after commit it to the ma
 7. Check your changes in CHANGELOG.md and approve robot's PR.
 8. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
 
-## Page constructor editor
+## Page Constructor Editor v1
 
 Editor provides user interface for page content management with realtime preview.
 
@@ -458,6 +546,36 @@ export const MyAppEditor = ({initialContent, onChange, transformContent}: MyAppE
 );
 ```
 
+## Page Constructor Editor v2
+
+Editor provides user interface for page content management with realtime preview.
+
+Based on Iframe postMessage communication.
+
+How to use:
+
+```tsx
+import {Editor} from '@gravity-ui/page-constructor/editor-v2';
+
+export const MyAppEditor = ({initialContent, onUpdate, disableUrlField}: MyAppEditorProps) => (
+  <Editor
+    initialUrl={'https://url-to-page-with-page-constructor.com'}
+    content={initialContent}
+    disableUrlField={disableUrlField}
+    onUpdate={onUpdate}
+  />
+);
+```
+
+### How to develop
+
+```shell
+npm run deps:install
+npm run dev:playground
+```
+
+Directory `/playground` contains NextJS service with integrated PC and Editor for development purposes.
+
 ## Tests
 
 Comprehensive documentation is available at the provided [link](./test-utils/docs/README.md).

package/build/cjs/blocks/Banner/Banner.js

@@ -4,12 +4,13 @@ exports.BannerBlock = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock.js"));
+const grid_1 = require("../../grid/index.js");
 const sub_blocks_1 = require("../../sub-blocks/index.js");
 const utils_1 = require("../../utils/index.js");
 const b = (0, utils_1.block)('banner-block');
 const BannerBlock = (props) => {
     const { animated, className, ...bannerProps } = props;
-    return ((0, jsx_runtime_1.jsx)(AnimateBlock_1.default, { className: b(null, className), animate: animated, children: (0, jsx_runtime_1.jsx)(sub_blocks_1.BannerCard, { ...bannerProps }) }));
+    return ((0, jsx_runtime_1.jsx)(AnimateBlock_1.default, { className: b(null, className), animate: animated, children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsx)(sub_blocks_1.BannerCard, { ...bannerProps }) }) }));
 };
 exports.BannerBlock = BannerBlock;
 exports.default = exports.BannerBlock;

package/build/cjs/blocks/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"../../../../src","sources":["blocks/Banner/Banner.tsx"],"names":[],"mappings":";;;;;AAAA,yGAAsE;AAEtE,0DAA4C;AAC5C,gDAAkC;AAIlC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEzB,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACnD,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,WAAW,EAAC,GAAG,KAAK,CAAC;IAEpD,OAAO,CACH,uBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,YAC1D,uBAAC,uBAAU,OAAK,WAAW,GAAI,GACpB,CAClB,CAAC;AACN,CAAC,CAAC;AARW,QAAA,WAAW,eAQtB;AAEF,kBAAe,mBAAW,CAAC","sourcesContent":["import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {BannerBlockProps} from '../../models';\nimport {BannerCard} from '../../sub-blocks';\nimport {block} from '../../utils';\n\nimport './Banner.scss';\n\nconst b = block('banner-block');\n\nexport const BannerBlock = (props: BannerBlockProps) => {\n    const {animated, className, ...bannerProps} = props;\n\n    return (\n        <AnimateBlock className={b(null, className)} animate={animated}>\n            <BannerCard {...bannerProps} />\n        </AnimateBlock>\n    );\n};\n\nexport default BannerBlock;\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"../../../../src","sources":["blocks/Banner/Banner.tsx"],"names":[],"mappings":";;;;;AAAA,yGAAsE;AACtE,8CAAgC;AAEhC,0DAA4C;AAC5C,gDAAkC;AAIlC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEzB,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACnD,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,WAAW,EAAC,GAAG,KAAK,CAAC;IAEpD,OAAO,CACH,uBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,YAC1D,uBAAC,WAAI,cACD,uBAAC,uBAAU,OAAK,WAAW,GAAI,GAC5B,GACI,CAClB,CAAC;AACN,CAAC,CAAC;AAVW,QAAA,WAAW,eAUtB;AAEF,kBAAe,mBAAW,CAAC","sourcesContent":["import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {Grid} from '../../grid';\nimport {BannerBlockProps} from '../../models';\nimport {BannerCard} from '../../sub-blocks';\nimport {block} from '../../utils';\n\nimport './Banner.scss';\n\nconst b = block('banner-block');\n\nexport const BannerBlock = (props: BannerBlockProps) => {\n    const {animated, className, ...bannerProps} = props;\n\n    return (\n        <AnimateBlock className={b(null, className)} animate={animated}>\n            <Grid>\n                <BannerCard {...bannerProps} />\n            </Grid>\n        </AnimateBlock>\n    );\n};\n\nexport default BannerBlock;\n"]}

package/build/cjs/blocks/Banner/index.d.ts

@@ -0,0 +1,3 @@
+import { BlockData } from "../../constructor-items.js";
+declare const BannerBlockConfig: BlockData;
+export default BannerBlockConfig;

package/build/cjs/blocks/Banner/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator.js");
+const Banner_1 = tslib_1.__importDefault(require("./Banner.js"));
+const schema_1 = require("./schema.js");
+const BannerBlockConfig = {
+    component: Banner_1.default,
+    schema: {
+        name: 'Banner Block',
+        group: '@gravity-ui/page-constructor/Blocks',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.BannerCardProps),
+        default: {
+            color: 'rgba(54, 151, 241, 0.4)',
+            title: 'Banner Block',
+            subtitle: 'Some sort of description.',
+            button: {
+                text: 'Read more',
+            },
+        },
+    },
+};
+exports.default = BannerBlockConfig;
+//# sourceMappingURL=index.js.map

package/build/cjs/blocks/Banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["blocks/Banner/index.tsx"],"names":[],"mappings":";;;AAGA,kEAA2D;AAE3D,iEAAmC;AACnC,wCAAyC;AAEzC,MAAM,iBAAiB,GAAc;IACjC,SAAS,EAAE,gBAAW;IACtB,MAAM,EAAE;QACJ,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,IAAA,gCAAe,EAAC,wBAAgD,CAAC;QACzE,OAAO,EAAE;YACL,KAAK,EAAE,yBAAyB;YAChC,KAAK,EAAE,cAAc;YACrB,QAAQ,EAAE,2BAA2B;YACrC,MAAM,EAAE;gBACJ,IAAI,EAAE,WAAW;aACpB;SACJ;KACJ;CACJ,CAAC;AAEF,kBAAe,iBAAiB,CAAC","sourcesContent":["import {JSONSchemaType} from 'ajv';\n\nimport {BlockData} from '../../constructor-items';\nimport {generateFromAJV} from '../../utils/form-generator';\n\nimport BannerBlock from './Banner';\nimport {BannerCardProps} from './schema';\n\nconst BannerBlockConfig: BlockData = {\n    component: BannerBlock,\n    schema: {\n        name: 'Banner Block',\n        group: '@gravity-ui/page-constructor/Blocks',\n        inputs: generateFromAJV(BannerCardProps as unknown as JSONSchemaType<{}>),\n        default: {\n            color: 'rgba(54, 151, 241, 0.4)',\n            title: 'Banner Block',\n            subtitle: 'Some sort of description.',\n            button: {\n                text: 'Read more',\n            },\n        },\n    },\n};\n\nexport default BannerBlockConfig;\n"]}

package/build/cjs/blocks/CardLayout/CardLayout.css

@@ -21,6 +21,7 @@ unpredictable css rules order in build */
   width: 100%;
   height: 100%;
   border-radius: 32px;
+  pointer-events: none;
 }
 .pc-card-layout-block__image img {
   object-fit: cover;

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty.js"));
 const components_1 = require("../../components/index.js");
+const ItemWrap_1 = tslib_1.__importDefault(require("../../components/editor/ItemWrap/ItemWrap.js"));
 const theme_1 = require("../../context/theme/index.js");
 const grid_1 = require("../../grid/index.js");
 const utils_1 = require("../../utils/index.js");
@@ -17,9 +18,9 @@ const b = (0, utils_1.block)('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
     const theme = (0, theme_1.useTheme)();
     const { border, ...backgroundImageProps } = (0, utils_1.getThemedValue)(background || {}, theme);
-    return ((0, jsx_runtime_1.jsxs)(components_1.AnimateBlock, { className: b(null, className), animate: animated, children: [(title || description) && ((0, jsx_runtime_1.jsx)(components_1.Title, { title: title, subtitle: description, className: titleClassName })), (0, jsx_runtime_1.jsxs)("div", { className: b('content', {
-                    'with-background': !(0, isEmpty_1.default)(background),
-                }), children: [(0, jsx_runtime_1.jsx)(components_1.BackgroundImage, { className: b('image', { border }), ...backgroundImageProps }), (0, jsx_runtime_1.jsx)(grid_1.Row, { children: React.Children.map(children, (child, index) => ((0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: colSizes, className: b('item'), children: child }, index))) })] })] }));
+    return ((0, jsx_runtime_1.jsx)(components_1.AnimateBlock, { className: b(null, className), animate: animated, children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { children: [(title || description) && ((0, jsx_runtime_1.jsx)(components_1.Title, { title: title, subtitle: description, className: titleClassName })), (0, jsx_runtime_1.jsxs)("div", { className: b('content', {
+                        'with-background': !(0, isEmpty_1.default)(background),
+                    }), children: [(0, jsx_runtime_1.jsx)(components_1.BackgroundImage, { className: b('image', { border }), ...backgroundImageProps }), (0, jsx_runtime_1.jsx)(grid_1.Row, { children: React.Children.map(children, (child, index) => ((0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: colSizes, className: b('item'), children: (0, jsx_runtime_1.jsx)(ItemWrap_1.default, { index: index, children: child }) }, index))) })] })] }) }));
 };
 exports.default = CardLayout;
 //# sourceMappingURL=CardLayout.js.map

package/build/cjs/blocks/CardLayout/CardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardLayout.js","sourceRoot":"../../../../src","sources":["blocks/CardLayout/CardLayout.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,wEAAqC;AAErC,0DAAsE;AACtE,wDAA6C;AAC7C,8CAAyD;AAEzD,gDAAkD;AAIlD,MAAM,aAAa,GAAwB;IACvC,GAAG,EAAE,EAAE;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AAMF,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,UAAU,GAAmC,CAAC,EAChD,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,aAAa,EACxB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,GACb,EAAE,EAAE;IACD,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,EAAC,MAAM,EAAE,GAAG,oBAAoB,EAAC,GAAG,IAAA,sBAAc,EAAC,UAAU,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAClF,OAAO,CACH,wBAAC,yBAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,aACzD,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,uBAAC,kBAAK,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,GAAI,CAC5E,EACD,iCACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,iBAAiB,EAAE,CAAC,IAAA,iBAAO,EAAC,UAAU,CAAC;iBAC1C,CAAC,aAEF,uBAAC,4BAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,KAAM,oBAAoB,GAAI,EAC9E,uBAAC,UAAG,cACC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,uBAAC,UAAG,IAAa,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACjD,KAAK,IADA,KAAK,CAET,CACT,CAAC,GACA,IACJ,IACK,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\nimport isEmpty from 'lodash/isEmpty';\n\nimport {AnimateBlock, BackgroundImage, Title} from '../../components';\nimport {useTheme} from '../../context/theme';\nimport {Col, GridColumnSizesType, Row} from '../../grid';\nimport {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport './CardLayout.scss';\n\nconst DEFAULT_SIZES: GridColumnSizesType = {\n    all: 12,\n    sm: 6,\n    md: 4,\n};\nexport type CardLayoutBlockProps = React.PropsWithChildren<\n    Omit<CardLayoutBlockParams, 'children'>\n> &\n    ClassNameProps;\n\nconst b = block('card-layout-block');\n\nconst CardLayout: React.FC<CardLayoutBlockProps> = ({\n    title,\n    description,\n    animated,\n    colSizes = DEFAULT_SIZES,\n    children,\n    className,\n    titleClassName,\n    background,\n}) => {\n    const theme = useTheme();\n    const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme);\n    return (\n        <AnimateBlock className={b(null, className)} animate={animated}>\n            {(title || description) && (\n                <Title title={title} subtitle={description} className={titleClassName} />\n            )}\n            <div\n                className={b('content', {\n                    'with-background': !isEmpty(background),\n                })}\n            >\n                <BackgroundImage className={b('image', {border})} {...backgroundImageProps} />\n                <Row>\n                    {React.Children.map(children, (child, index) => (\n                        <Col key={index} sizes={colSizes} className={b('item')}>\n                            {child}\n                        </Col>\n                    ))}\n                </Row>\n            </div>\n        </AnimateBlock>\n    );\n};\n\nexport default CardLayout;\n"]}
+{"version":3,"file":"CardLayout.js","sourceRoot":"../../../../src","sources":["blocks/CardLayout/CardLayout.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,wEAAqC;AAErC,0DAAsE;AACtE,oGAAiE;AACjE,wDAA6C;AAC7C,8CAA+D;AAE/D,gDAAkD;AAIlD,MAAM,aAAa,GAAwB;IACvC,GAAG,EAAE,EAAE;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AAMF,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,UAAU,GAAmC,CAAC,EAChD,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,aAAa,EACxB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,GACb,EAAE,EAAE;IACD,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,EAAC,MAAM,EAAE,GAAG,oBAAoB,EAAC,GAAG,IAAA,sBAAc,EAAC,UAAU,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAClF,OAAO,CACH,uBAAC,yBAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,YAC1D,wBAAC,WAAI,eACA,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,uBAAC,kBAAK,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,GAAI,CAC5E,EACD,iCACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;wBACpB,iBAAiB,EAAE,CAAC,IAAA,iBAAO,EAAC,UAAU,CAAC;qBAC1C,CAAC,aAEF,uBAAC,4BAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,KAAM,oBAAoB,GAAI,EAE9E,uBAAC,UAAG,cACC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,uBAAC,UAAG,IAAa,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAClD,uBAAC,kBAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,KAAK,GAAY,IADpC,KAAK,CAET,CACT,CAAC,GACA,IACJ,IACH,GACI,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\nimport isEmpty from 'lodash/isEmpty';\n\nimport {AnimateBlock, BackgroundImage, Title} from '../../components';\nimport ItemWrap from '../../components/editor/ItemWrap/ItemWrap';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, GridColumnSizesType, Row} from '../../grid';\nimport {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport './CardLayout.scss';\n\nconst DEFAULT_SIZES: GridColumnSizesType = {\n    all: 12,\n    sm: 6,\n    md: 4,\n};\nexport type CardLayoutBlockProps = React.PropsWithChildren<\n    Omit<CardLayoutBlockParams, 'children'>\n> &\n    ClassNameProps;\n\nconst b = block('card-layout-block');\n\nconst CardLayout: React.FC<CardLayoutBlockProps> = ({\n    title,\n    description,\n    animated,\n    colSizes = DEFAULT_SIZES,\n    children,\n    className,\n    titleClassName,\n    background,\n}) => {\n    const theme = useTheme();\n    const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme);\n    return (\n        <AnimateBlock className={b(null, className)} animate={animated}>\n            <Grid>\n                {(title || description) && (\n                    <Title title={title} subtitle={description} className={titleClassName} />\n                )}\n                <div\n                    className={b('content', {\n                        'with-background': !isEmpty(background),\n                    })}\n                >\n                    <BackgroundImage className={b('image', {border})} {...backgroundImageProps} />\n\n                    <Row>\n                        {React.Children.map(children, (child, index) => (\n                            <Col key={index} sizes={colSizes} className={b('item')}>\n                                <ItemWrap index={index}>{child}</ItemWrap>\n                            </Col>\n                        ))}\n                    </Row>\n                </div>\n            </Grid>\n        </AnimateBlock>\n    );\n};\n\nexport default CardLayout;\n"]}

package/build/cjs/blocks/CardLayout/index.d.ts

@@ -0,0 +1,5 @@
+import { ConfigInput } from "../../common/types/index.js";
+import { BlockData } from "../../constructor-items.js";
+export declare const blockConfig: ConfigInput[];
+declare const CardLayoutBlockConfig: BlockData;
+export default CardLayoutBlockConfig;

package/build/cjs/blocks/CardLayout/index.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockConfig = void 0;
+const tslib_1 = require("tslib");
+const common_1 = require("../../schema/validators/common.js");
+const form_generator_1 = require("../../utils/form-generator.js");
+const CardLayout_1 = tslib_1.__importDefault(require("./CardLayout.js"));
+const schema_1 = require("./schema.js");
+const textSizeEnum = common_1.textSize.map((size) => ({ value: size, content: size }));
+exports.blockConfig = [
+    {
+        type: 'oneOf',
+        name: 'title',
+        title: 'Title Object',
+        options: [
+            {
+                title: 'Simple',
+                value: 'simple',
+                properties: [
+                    {
+                        type: 'text',
+                        name: '',
+                        title: 'Title',
+                    },
+                ],
+            },
+            {
+                title: 'Complex',
+                value: 'complex',
+                properties: [
+                    {
+                        type: 'text',
+                        name: 'text',
+                        title: 'Title',
+                    },
+                    {
+                        type: 'select',
+                        name: 'textSize',
+                        title: 'Text Size',
+                        enum: textSizeEnum,
+                        view: 'select',
+                        mode: 'single',
+                    },
+                    {
+                        type: 'text',
+                        name: 'url',
+                        title: 'Url',
+                    },
+                    {
+                        type: 'text',
+                        name: 'urlTitle',
+                        title: 'Url',
+                    },
+                    {
+                        type: 'boolean',
+                        name: 'resetMargin',
+                        title: 'Reset Margin',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        type: 'textarea',
+        name: 'description',
+        title: 'Description',
+    },
+    {
+        type: 'boolean',
+        name: 'dots',
+        title: 'With dots',
+    },
+    {
+        type: 'boolean',
+        name: 'arrows',
+        title: 'With Arrows',
+    },
+    {
+        type: 'boolean',
+        name: 'randomOrder',
+        title: 'Random Order',
+    },
+    {
+        type: 'number',
+        name: 'autoplay',
+        title: 'Autoplay',
+    },
+    {
+        type: 'object',
+        name: 'disclaimer',
+        title: 'Disclaimer',
+        properties: [
+            {
+                type: 'text',
+                name: 'text',
+                title: 'Text',
+            },
+            {
+                type: 'select',
+                name: 'size',
+                title: 'Size',
+                enum: textSizeEnum,
+                view: 'select',
+                mode: 'single',
+            },
+        ],
+    },
+    {
+        type: 'oneOf',
+        name: 'slidesToShow',
+        title: 'Slides to Show',
+        options: [
+            {
+                title: 'Simple',
+                value: 'simple',
+                properties: [
+                    {
+                        type: 'number',
+                        name: '',
+                        title: 'Slides',
+                    },
+                ],
+            },
+            {
+                title: 'Complex',
+                value: 'complex',
+                properties: common_1.sliderSizesArray.reduce((acc, size) => {
+                    acc.push({ type: 'number', name: size, title: size });
+                    return acc;
+                }, []),
+            },
+        ],
+    },
+    {
+        type: 'array',
+        name: 'array',
+        title: 'Array Properties',
+        buttonText: 'Add new',
+        arrayType: 'object',
+        properties: [
+            {
+                type: 'text',
+                name: 'text',
+                title: 'Property',
+            },
+            {
+                type: 'boolean',
+                name: 'boolean',
+                title: 'Property',
+            },
+        ],
+    },
+];
+const CardLayoutBlockConfig = {
+    component: CardLayout_1.default,
+    schema: {
+        name: 'Card Layout Block',
+        group: '@gravity-ui/page-constructor/Card Containers',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.CardLayoutProps),
+        default: {
+            type: 'card-layout-block',
+            children: [
+                {
+                    type: 'background-card',
+                    title: 'Tell a story and build a narrative',
+                    text: 'We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.',
+                },
+                {
+                    type: 'background-card',
+                    title: 'Tell a story and build a narrative',
+                    text: 'We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.',
+                },
+                {
+                    type: 'background-card',
+                    title: 'Tell a story and build a narrative',
+                    text: 'We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.',
+                },
+            ],
+            title: 'Card Layout Block',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+        previewImg: 'https://storage.cloud-preprod.yandex.net/qradle-test/card-layout-block.svg',
+    },
+};
+exports.default = CardLayoutBlockConfig;
+//# sourceMappingURL=index.js.map

package/build/cjs/blocks/CardLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["blocks/CardLayout/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {JSONSchemaType} from 'ajv';\n\nimport {ConfigInput} from '../../common/types';\nimport {BlockData} from '../../constructor-items';\nimport {sliderSizesArray, textSize} from '../../schema/validators/common';\nimport {generateFromAJV} from '../../utils/form-generator';\n\nimport CardLayout from './CardLayout';\nimport {CardLayoutProps} from './schema';\n\nconst textSizeEnum = textSize.map((size) => ({value: size, content: size}));\n\nexport const blockConfig: ConfigInput[] = [\n    {\n        type: 'oneOf',\n        name: 'title',\n        title: 'Title Object',\n        options: [\n            {\n                title: 'Simple',\n                value: 'simple',\n                properties: [\n                    {\n                        type: 'text',\n                        name: '',\n                        title: 'Title',\n                    },\n                ],\n            },\n            {\n                title: 'Complex',\n                value: 'complex',\n                properties: [\n                    {\n                        type: 'text',\n                        name: 'text',\n                        title: 'Title',\n                    },\n                    {\n                        type: 'select',\n                        name: 'textSize',\n                        title: 'Text Size',\n                        enum: textSizeEnum,\n                        view: 'select',\n                        mode: 'single',\n                    },\n                    {\n                        type: 'text',\n                        name: 'url',\n                        title: 'Url',\n                    },\n                    {\n                        type: 'text',\n                        name: 'urlTitle',\n                        title: 'Url',\n                    },\n                    {\n                        type: 'boolean',\n                        name: 'resetMargin',\n                        title: 'Reset Margin',\n                    },\n                ],\n            },\n        ],\n    },\n    {\n        type: 'textarea',\n        name: 'description',\n        title: 'Description',\n    },\n    {\n        type: 'boolean',\n        name: 'dots',\n        title: 'With dots',\n    },\n    {\n        type: 'boolean',\n        name: 'arrows',\n        title: 'With Arrows',\n    },\n    {\n        type: 'boolean',\n        name: 'randomOrder',\n        title: 'Random Order',\n    },\n    {\n        type: 'number',\n        name: 'autoplay',\n        title: 'Autoplay',\n    },\n    {\n        type: 'object',\n        name: 'disclaimer',\n        title: 'Disclaimer',\n        properties: [\n            {\n                type: 'text',\n                name: 'text',\n                title: 'Text',\n            },\n            {\n                type: 'select',\n                name: 'size',\n                title: 'Size',\n                enum: textSizeEnum,\n                view: 'select',\n                mode: 'single',\n            },\n        ],\n    },\n    {\n        type: 'oneOf',\n        name: 'slidesToShow',\n        title: 'Slides to Show',\n        options: [\n            {\n                title: 'Simple',\n                value: 'simple',\n                properties: [\n                    {\n                        type: 'number',\n                        name: '',\n                        title: 'Slides',\n                    },\n                ],\n            },\n            {\n                title: 'Complex',\n                value: 'complex',\n                properties: sliderSizesArray.reduce((acc, size) => {\n                    acc.push({type: 'number', name: size, title: size});\n                    return acc;\n                }, [] as Array<ConfigInput>),\n            },\n        ],\n    },\n    {\n        type: 'array',\n        name: 'array',\n        title: 'Array Properties',\n        buttonText: 'Add new',\n        arrayType: 'object',\n        properties: [\n            {\n                type: 'text',\n                name: 'text',\n                title: 'Property',\n            },\n            {\n                type: 'boolean',\n                name: 'boolean',\n                title: 'Property',\n            },\n        ],\n    },\n];\n\nconst CardLayoutBlockConfig: BlockData = {\n    component: CardLayout,\n    schema: {\n        name: 'Card Layout Block',\n        group: '@gravity-ui/page-constructor/Card Containers',\n        inputs: generateFromAJV(CardLayoutProps as unknown as JSONSchemaType<{}>),\n        default: {\n            type: 'card-layout-block',\n            children: [\n                {\n                    type: 'background-card',\n                    title: 'Tell a story and build a narrative',\n                    text: 'We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.',\n                },\n                {\n                    type: 'background-card',\n                    title: 'Tell a story and build a narrative',\n                    text: 'We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.',\n                },\n                {\n                    type: 'background-card',\n                    title: 'Tell a story and build a narrative',\n                    text: 'We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.',\n                },\n            ],\n            title: 'Card Layout Block',\n            description:\n                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n        },\n        previewImg: 'https://storage.cloud-preprod.yandex.net/qradle-test/card-layout-block.svg',\n    },\n};\n\nexport default CardLayoutBlockConfig;\n"]}

package/build/cjs/blocks/Companies/Companies.js

@@ -6,12 +6,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const components_1 = require("../../components/index.js");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock.js"));
 const theme_1 = require("../../context/theme/index.js");
+const grid_1 = require("../../grid/index.js");
 const utils_1 = require("../../utils/index.js");
 const b = (0, utils_1.block)('companies-block');
 const CompaniesBlock = ({ title, description, images, animated }) => {
     const theme = (0, theme_1.useTheme)();
     const themedImages = (0, utils_1.getThemedValue)(images, theme) || {};
-    return ((0, jsx_runtime_1.jsx)(AnimateBlock_1.default, { className: b(), offset: 150, animate: animated, children: (0, jsx_runtime_1.jsxs)("div", { className: b('content'), children: [(0, jsx_runtime_1.jsx)(components_1.Title, { title: title, subtitle: description, colSizes: { all: 12, sm: 12 } }), (0, jsx_runtime_1.jsx)("div", { className: b('images'), children: (0, jsx_runtime_1.jsx)(components_1.Image, { ...themedImages, className: b('image') }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(AnimateBlock_1.default, { className: b(), offset: 150, animate: animated, children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)("div", { className: b('content'), children: [(0, jsx_runtime_1.jsx)(components_1.Title, { title: title, subtitle: description, colSizes: { all: 12, sm: 12 } }), (0, jsx_runtime_1.jsx)("div", { className: b('images'), children: (0, jsx_runtime_1.jsx)(components_1.Image, { ...themedImages, className: b('image') }) })] }) }) }));
 };
 exports.CompaniesBlock = CompaniesBlock;
 exports.default = exports.CompaniesBlock;

package/build/cjs/blocks/Companies/Companies.js.map

@@ -1 +1 @@
-{"version":3,"file":"Companies.js","sourceRoot":"../../../../src","sources":["blocks/Companies/Companies.tsx"],"names":[],"mappings":";;;;;AAAA,0DAA8C;AAC9C,yGAAsE;AACtE,wDAA6C;AAE7C,gDAAkD;AAIlD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,iBAAiB,CAAC,CAAC;AAE5B,MAAM,cAAc,GAAG,CAAC,EAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,YAAY,GAAG,IAAA,sBAAc,EAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAEzD,OAAO,CACH,uBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,YACxD,iCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,uBAAC,kBAAK,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,GAAU,EACjF,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,kBAAK,OAAK,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,GAChD,IACJ,GACK,CAClB,CAAC;AACN,CAAC,CAAC;AAdW,QAAA,cAAc,kBAczB;AAEF,kBAAe,sBAAc,CAAC","sourcesContent":["import {Image, Title} from '../../components';\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {useTheme} from '../../context/theme';\nimport {CompaniesBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport './Companies.scss';\n\nconst b = block('companies-block');\n\nexport const CompaniesBlock = ({title, description, images, animated}: CompaniesBlockProps) => {\n    const theme = useTheme();\n    const themedImages = getThemedValue(images, theme) || {};\n\n    return (\n        <AnimateBlock className={b()} offset={150} animate={animated}>\n            <div className={b('content')}>\n                <Title title={title} subtitle={description} colSizes={{all: 12, sm: 12}}></Title>\n                <div className={b('images')}>\n                    <Image {...themedImages} className={b('image')} />\n                </div>\n            </div>\n        </AnimateBlock>\n    );\n};\n\nexport default CompaniesBlock;\n"]}
+{"version":3,"file":"Companies.js","sourceRoot":"../../../../src","sources":["blocks/Companies/Companies.tsx"],"names":[],"mappings":";;;;;AAAA,0DAA8C;AAC9C,yGAAsE;AACtE,wDAA6C;AAC7C,8CAAgC;AAEhC,gDAAkD;AAIlD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,iBAAiB,CAAC,CAAC;AAE5B,MAAM,cAAc,GAAG,CAAC,EAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,YAAY,GAAG,IAAA,sBAAc,EAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAEzD,OAAO,CACH,uBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,YACxD,uBAAC,WAAI,cACD,iCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,uBAAC,kBAAK,IACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,GACtB,EACT,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,kBAAK,OAAK,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,GAChD,IACJ,GACH,GACI,CAClB,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,cAAc,kBAoBzB;AAEF,kBAAe,sBAAc,CAAC","sourcesContent":["import {Image, Title} from '../../components';\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {useTheme} from '../../context/theme';\nimport {Grid} from '../../grid';\nimport {CompaniesBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport './Companies.scss';\n\nconst b = block('companies-block');\n\nexport const CompaniesBlock = ({title, description, images, animated}: CompaniesBlockProps) => {\n    const theme = useTheme();\n    const themedImages = getThemedValue(images, theme) || {};\n\n    return (\n        <AnimateBlock className={b()} offset={150} animate={animated}>\n            <Grid>\n                <div className={b('content')}>\n                    <Title\n                        title={title}\n                        subtitle={description}\n                        colSizes={{all: 12, sm: 12}}\n                    ></Title>\n                    <div className={b('images')}>\n                        <Image {...themedImages} className={b('image')} />\n                    </div>\n                </div>\n            </Grid>\n        </AnimateBlock>\n    );\n};\n\nexport default CompaniesBlock;\n"]}

package/build/cjs/blocks/Companies/index.d.ts

@@ -0,0 +1,3 @@
+import { BlockData } from "../../constructor-items.js";
+declare const CompaniesBlockConfig: BlockData;
+export default CompaniesBlockConfig;

package/build/cjs/blocks/Companies/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator.js");
+const Companies_1 = tslib_1.__importDefault(require("./Companies.js"));
+const schema_1 = require("./schema.js");
+const CompaniesBlockConfig = {
+    component: Companies_1.default,
+    schema: {
+        name: 'Companies Block',
+        group: '@gravity-ui/page-constructor/Blocks',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.CompaniesBlock['companies-block']),
+        default: {
+            title: 'Companies Block',
+            description: 'Here is the list',
+        },
+    },
+};
+exports.default = CompaniesBlockConfig;
+//# sourceMappingURL=index.js.map

package/build/cjs/blocks/Companies/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["blocks/Companies/index.ts"],"names":[],"mappings":";;;AAGA,kEAA2D;AAE3D,uEAAyC;AACzC,wCAAgE;AAEhE,MAAM,oBAAoB,GAAc;IACpC,SAAS,EAAE,mBAAc;IACzB,MAAM,EAAE;QACJ,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,IAAA,gCAAe,EACnB,uBAAoB,CAAC,iBAAiB,CAAkC,CAC3E;QACD,OAAO,EAAE;YACL,KAAK,EAAE,iBAAiB;YACxB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAC;AAEF,kBAAe,oBAAoB,CAAC","sourcesContent":["import {JSONSchemaType} from 'ajv';\n\nimport {BlockData} from '../../constructor-items';\nimport {generateFromAJV} from '../../utils/form-generator';\n\nimport CompaniesBlock from './Companies';\nimport {CompaniesBlock as CompaniesBlockSchema} from './schema';\n\nconst CompaniesBlockConfig: BlockData = {\n    component: CompaniesBlock,\n    schema: {\n        name: 'Companies Block',\n        group: '@gravity-ui/page-constructor/Blocks',\n        inputs: generateFromAJV(\n            CompaniesBlockSchema['companies-block'] as unknown as JSONSchemaType<{}>,\n        ),\n        default: {\n            title: 'Companies Block',\n            description: 'Here is the list',\n        },\n    },\n};\n\nexport default CompaniesBlockConfig;\n"]}

package/build/cjs/blocks/ContentLayout/ContentLayout.js

@@ -38,7 +38,7 @@ const ContentLayoutBlock = (props) => {
     const colSizes = React.useMemo(() => getTextWidth(textWidth), [textWidth]);
     const globalTheme = (0, theme_1.useTheme)();
     const themedBackground = (0, utils_1.getThemedValue)(background, globalTheme);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size, theme, background: Boolean(background) }), children: [(0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { className: b('content'), ...textContent, size: size, centered: centered, colSizes: colSizes, theme: theme }), fileContent && ((0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes, children: fileContent.map((file) => ((0, react_1.createElement)(components_1.FileLink, { className: b('file'), ...file, key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme }))) })), background && ((0, jsx_runtime_1.jsx)("div", { className: b('background'), children: (0, jsx_runtime_1.jsx)(components_1.BackgroundImage, { className: b('background-item'), ...themedBackground, hide: isMobile }) }))] }));
+    return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)("div", { className: b({ size, theme, background: Boolean(background) }), children: [(0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { className: b('content'), ...textContent, size: size, centered: centered, colSizes: colSizes, theme: theme }), fileContent && ((0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes, children: fileContent.map((file) => ((0, react_1.createElement)(components_1.FileLink, { className: b('file'), ...file, key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme }))) })), background && ((0, jsx_runtime_1.jsx)("div", { className: b('background'), children: (0, jsx_runtime_1.jsx)(components_1.BackgroundImage, { className: b('background-item'), ...themedBackground, hide: isMobile }) }))] }) }));
 };
 exports.ContentLayoutBlock = ContentLayoutBlock;
 exports.default = exports.ContentLayoutBlock;

package/build/cjs/blocks/ContentLayout/ContentLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentLayout.js","sourceRoot":"../../../../src","sources":["blocks/ContentLayout/ContentLayout.tsx"],"names":[],"mappings":";;;;;;AAAA,qDAA+B;AAE/B,0DAA2D;AAC3D,wEAA0D;AAC1D,wDAA6C;AAC7C,8CAA+B;AAE/B,0DAAyC;AACzC,gDAAkD;AAIlD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,sBAAsB,CAAC,CAAC;AAExC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,GAAG,CAAC;QACf,KAAK,GAAG,CAAC;QACT;YACI,OAAO,GAAG,CAAC;IACnB,CAAC;AACL,CAAC;AAED,SAAS,YAAY,CAAC,IAAqB;IACvC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;QAC5B,KAAK,GAAG;YACJ,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,CAAC;QAC7B,KAAK,GAAG,CAAC;QACT;YACI,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;IAChC,CAAC;AACL,CAAC;AAEM,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACjE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IACjD,MAAM,EACF,WAAW,EACX,WAAW,EACX,IAAI,GAAG,GAAG,EACV,UAAU,EACV,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,GAAG,GAClB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,WAAW,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAC/B,MAAM,gBAAgB,GAAG,IAAA,sBAAc,EAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAEjE,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,EAAC,CAAC,aAC7D,uBAAC,oBAAO,IACJ,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,KACnB,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,EACD,WAAW,IAAI,CACZ,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC,EAAE,KAAK,QAAC,KAAK,EAAE,QAAQ,YAC9D,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACvB,2BAAC,qBAAQ,IACL,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAChB,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,EAC/B,KAAK,EAAE,KAAK,GACd,CACL,CAAC,GACA,CACT,EACA,UAAU,IAAI,CACX,gCAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YAC3B,uBAAC,4BAAe,IACZ,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,KAC3B,gBAAgB,EACpB,IAAI,EAAE,QAAQ,GAChB,GACA,CACT,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAnDW,QAAA,kBAAkB,sBAmD7B;AACF,kBAAe,0BAAkB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImage, FileLink} from '../../components';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useTheme} from '../../context/theme';\nimport {Col} from '../../grid';\nimport {ContentLayoutBlockProps, ContentSize, ContentTextSize} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block, getThemedValue} from '../../utils';\n\nimport './ContentLayout.scss';\n\nconst b = block('content-layout-block');\n\nfunction getFileTextSize(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 's';\n        case 'l':\n        default:\n            return 'l';\n    }\n}\n\nfunction getTextWidth(size: ContentTextSize) {\n    switch (size) {\n        case 's':\n            return {all: 12, md: 6};\n        case 'l':\n            return {all: 12, md: 12};\n        case 'm':\n        default:\n            return {all: 12, md: 8};\n    }\n}\n\nexport const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {\n    const isMobile = React.useContext(MobileContext);\n    const {\n        textContent,\n        fileContent,\n        size = 'l',\n        background,\n        centered,\n        theme = 'default',\n        textWidth = 'm',\n    } = props;\n\n    const colSizes = React.useMemo(() => getTextWidth(textWidth), [textWidth]);\n    const globalTheme = useTheme();\n    const themedBackground = getThemedValue(background, globalTheme);\n\n    return (\n        <div className={b({size, theme, background: Boolean(background)})}>\n            <Content\n                className={b('content')}\n                {...textContent}\n                size={size}\n                centered={centered}\n                colSizes={colSizes}\n                theme={theme}\n            />\n            {fileContent && (\n                <Col className={b('files', {size, centered})} reset sizes={colSizes}>\n                    {fileContent.map((file) => (\n                        <FileLink\n                            className={b('file')}\n                            {...file}\n                            key={file.href}\n                            type=\"horizontal\"\n                            textSize={getFileTextSize(size)}\n                            theme={theme}\n                        />\n                    ))}\n                </Col>\n            )}\n            {background && (\n                <div className={b('background')}>\n                    <BackgroundImage\n                        className={b('background-item')}\n                        {...themedBackground}\n                        hide={isMobile}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\nexport default ContentLayoutBlock;\n"]}
+{"version":3,"file":"ContentLayout.js","sourceRoot":"../../../../src","sources":["blocks/ContentLayout/ContentLayout.tsx"],"names":[],"mappings":";;;;;;AAAA,qDAA+B;AAE/B,0DAA2D;AAC3D,wEAA0D;AAC1D,wDAA6C;AAC7C,8CAAqC;AAErC,0DAAyC;AACzC,gDAAkD;AAIlD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,sBAAsB,CAAC,CAAC;AAExC,SAAS,eAAe,CAAC,IAAiB;IACtC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,GAAG,CAAC;QACf,KAAK,GAAG,CAAC;QACT;YACI,OAAO,GAAG,CAAC;IACnB,CAAC;AACL,CAAC;AAED,SAAS,YAAY,CAAC,IAAqB;IACvC,QAAQ,IAAI,EAAE,CAAC;QACX,KAAK,GAAG;YACJ,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;QAC5B,KAAK,GAAG;YACJ,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,CAAC;QAC7B,KAAK,GAAG,CAAC;QACT;YACI,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;IAChC,CAAC;AACL,CAAC;AAEM,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACjE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IACjD,MAAM,EACF,WAAW,EACX,WAAW,EACX,IAAI,GAAG,GAAG,EACV,UAAU,EACV,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,GAAG,GAClB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,WAAW,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAC/B,MAAM,gBAAgB,GAAG,IAAA,sBAAc,EAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAEjE,OAAO,CACH,uBAAC,WAAI,cACD,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,EAAC,CAAC,aAC7D,uBAAC,oBAAO,IACJ,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,KACnB,WAAW,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,EACD,WAAW,IAAI,CACZ,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC,EAAE,KAAK,QAAC,KAAK,EAAE,QAAQ,YAC9D,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACvB,2BAAC,qBAAQ,IACL,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAChB,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,EAC/B,KAAK,EAAE,KAAK,GACd,CACL,CAAC,GACA,CACT,EACA,UAAU,IAAI,CACX,gCAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YAC3B,uBAAC,4BAAe,IACZ,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,KAC3B,gBAAgB,EACpB,IAAI,EAAE,QAAQ,GAChB,GACA,CACT,IACC,GACH,CACV,CAAC;AACN,CAAC,CAAC;AArDW,QAAA,kBAAkB,sBAqD7B;AACF,kBAAe,0BAAkB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BackgroundImage, FileLink} from '../../components';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid} from '../../grid';\nimport {ContentLayoutBlockProps, ContentSize, ContentTextSize} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block, getThemedValue} from '../../utils';\n\nimport './ContentLayout.scss';\n\nconst b = block('content-layout-block');\n\nfunction getFileTextSize(size: ContentSize) {\n    switch (size) {\n        case 's':\n            return 's';\n        case 'l':\n        default:\n            return 'l';\n    }\n}\n\nfunction getTextWidth(size: ContentTextSize) {\n    switch (size) {\n        case 's':\n            return {all: 12, md: 6};\n        case 'l':\n            return {all: 12, md: 12};\n        case 'm':\n        default:\n            return {all: 12, md: 8};\n    }\n}\n\nexport const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {\n    const isMobile = React.useContext(MobileContext);\n    const {\n        textContent,\n        fileContent,\n        size = 'l',\n        background,\n        centered,\n        theme = 'default',\n        textWidth = 'm',\n    } = props;\n\n    const colSizes = React.useMemo(() => getTextWidth(textWidth), [textWidth]);\n    const globalTheme = useTheme();\n    const themedBackground = getThemedValue(background, globalTheme);\n\n    return (\n        <Grid>\n            <div className={b({size, theme, background: Boolean(background)})}>\n                <Content\n                    className={b('content')}\n                    {...textContent}\n                    size={size}\n                    centered={centered}\n                    colSizes={colSizes}\n                    theme={theme}\n                />\n                {fileContent && (\n                    <Col className={b('files', {size, centered})} reset sizes={colSizes}>\n                        {fileContent.map((file) => (\n                            <FileLink\n                                className={b('file')}\n                                {...file}\n                                key={file.href}\n                                type=\"horizontal\"\n                                textSize={getFileTextSize(size)}\n                                theme={theme}\n                            />\n                        ))}\n                    </Col>\n                )}\n                {background && (\n                    <div className={b('background')}>\n                        <BackgroundImage\n                            className={b('background-item')}\n                            {...themedBackground}\n                            hide={isMobile}\n                        />\n                    </div>\n                )}\n            </div>\n        </Grid>\n    );\n};\nexport default ContentLayoutBlock;\n"]}