@gravity-ui/page-constructor 5.14.3 → 5.14.4-alpha.0

package/build/esm/blocks/Header/index.d.ts

@@ -0,0 +1,8 @@
+declare const HeaderBlockConfig: {
+    component: (props: import("../..").WithChildren<import("../..").HeaderBlockProps & import("../..").ClassNameProps>) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+    };
+};
+export default HeaderBlockConfig;

package/build/esm/blocks/Header/index.js

@@ -0,0 +1,11 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import HeaderBlock from './Header';
+import { HeaderBlock as HeaderBlockSchema } from './schema';
+const HeaderBlockConfig = {
+    component: HeaderBlock,
+    schema: {
+        name: 'Header Block',
+        inputs: generateFromAJV(HeaderBlockSchema['header-block']),
+    },
+};
+export default HeaderBlockConfig;

package/build/esm/blocks/HeaderSlider/HeaderSlider.js

@@ -12,7 +12,8 @@ export const HeaderSliderBlock = (_a) => {
     const isMobile = useContext(MobileContext);
     const showArrows = isMobile ? false : arrows;
     return (React.createElement("div", { className: b('wrapper'), "data-qa": "header-slider" },
-        React.createElement(SliderBlock, Object.assign({}, props, { arrows: showArrows, slidesToShow: 1, type: SliderType.HeaderCard, animated: false, blockClassName: b(), arrowSize: 20 }), items.map((item, index) => (React.createElement("div", { key: index, className: b('item'), "data-qa": `header-slider-item-${index + 1}` },
-            React.createElement(Header, Object.assign({}, item, { className: b('item-content') }))))))));
+        React.createElement(SliderBlock, Object.assign({}, props, { arrows: showArrows, slidesToShow: 1, type: SliderType.HeaderCard, animated: false, blockClassName: b(), arrowSize: 20 }), items &&
+            items.map((item, index) => (React.createElement("div", { key: index, className: b('item'), "data-qa": `header-slider-item-${index + 1}` },
+                React.createElement(Header, Object.assign({}, item, { className: b('item-content') }))))))));
 };
 export default HeaderSliderBlock;

package/build/esm/blocks/HeaderSlider/index.d.ts

@@ -0,0 +1,31 @@
+declare const HeaderSliderBlockConfig: {
+    component: ({ items, arrows, ...props }: import("../..").HeaderSliderBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            type: string;
+            items: ({
+                title: string;
+                overtitle: string;
+                description: string;
+                image?: undefined;
+                mediaView?: undefined;
+                width?: undefined;
+                buttons?: undefined;
+            } | {
+                image: string;
+                mediaView: string;
+                title: string;
+                overtitle: string;
+                description: string;
+                width: string;
+                buttons: {
+                    text: string;
+                    theme: string;
+                }[];
+            })[];
+        };
+    };
+};
+export default HeaderSliderBlockConfig;

package/build/esm/blocks/HeaderSlider/index.js

@@ -0,0 +1,35 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import HeaderSliderBlock from './HeaderSlider';
+import { HeaderSliderBlock as HeaderSliderBlockSchema } from './schema';
+const HeaderSliderBlockConfig = {
+    component: HeaderSliderBlock,
+    schema: {
+        name: 'Header Slider Block',
+        inputs: generateFromAJV(HeaderSliderBlockSchema['header-slider-block']),
+        default: {
+            type: 'header-slider-block',
+            items: [
+                {
+                    title: 'Header Slide 1',
+                    overtitle: 'Header Slider Block presents',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                },
+                {
+                    image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_light.png',
+                    mediaView: 'fit',
+                    title: 'Header Slide 2',
+                    overtitle: 'Header Slider Block presents',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                    width: 'm',
+                    buttons: [
+                        {
+                            text: 'Button',
+                            theme: 'action',
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+};
+export default HeaderSliderBlockConfig;

package/build/esm/blocks/Icons/Icons.js

@@ -1,6 +1,7 @@
 import React, { Fragment, useCallback, useContext } from 'react';
 import { Image, Title } from '../../components';
 import { LocationContext } from '../../context/locationContext';
+import { Grid } from '../../grid';
 import { useAnalytics } from '../../hooks';
 import { block, getLinkProps } from '../../utils';
 import './Icons.css';
@@ -15,11 +16,13 @@ const Icons = ({ title, description, size = 's', colSizes = { all: 12 }, items }
         handleAnalytics(analyticsEvents, { url });
     }, [handleAnalytics]);
     return (React.createElement("div", { className: b({ size }) },
-        (title || description) && (React.createElement(Title, { className: b('header'), title: title, subtitle: description, colSizes: colSizes })),
-        items.map((item) => {
-            const itemContent = getItemContent(item);
-            const { url, text } = item;
-            return url ? (React.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, getLinkProps(url, hostname), { onClick: () => onClick(item) }), itemContent)) : (React.createElement("div", { className: b('item'), key: text }, itemContent));
-        })));
+        React.createElement(Grid, null,
+            (title || description) && (React.createElement(Title, { className: b('header'), title: title, subtitle: description, colSizes: colSizes })),
+            items &&
+                items.map((item) => {
+                    const itemContent = getItemContent(item);
+                    const { url, text } = item;
+                    return url ? (React.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, getLinkProps(url, hostname), { onClick: () => onClick(item) }), itemContent)) : (React.createElement("div", { className: b('item'), key: text }, itemContent));
+                }))));
 };
 export default Icons;

package/build/esm/blocks/Icons/index.d.ts

@@ -0,0 +1,13 @@
+declare const IconsBlockConfig: {
+    component: ({ title, description, size, colSizes, items }: import("../..").IconsBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            type: string;
+            title: string;
+            description: string;
+        };
+    };
+};
+export default IconsBlockConfig;

package/build/esm/blocks/Icons/index.js

@@ -0,0 +1,16 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import IconsBlock from './Icons';
+import { IconsProps } from './schema';
+const IconsBlockConfig = {
+    component: IconsBlock,
+    schema: {
+        name: 'Icons Block',
+        inputs: generateFromAJV(IconsProps),
+        default: {
+            type: 'icons-block',
+            title: 'Icons Block',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+    },
+};
+export default IconsBlockConfig;

package/build/esm/blocks/Info/index.d.ts

@@ -0,0 +1,21 @@
+declare const InfoBlockConfig: {
+    component: (props: import("../..").InfoBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            type: string;
+            title: string;
+            backgroundColor: string;
+            sectionsTitle: string;
+            links: {
+                text: string;
+            }[];
+            buttons: {
+                text: string;
+                theme: string;
+            }[];
+        };
+    };
+};
+export default InfoBlockConfig;

package/build/esm/blocks/Info/index.js

@@ -0,0 +1,38 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import InfoBlock from './Info';
+import { InfoBlock as InfoBlockSchema } from './schema';
+const InfoBlockConfig = {
+    component: InfoBlock,
+    schema: {
+        name: 'Info Block',
+        inputs: generateFromAJV(InfoBlockSchema['info-block']),
+        default: {
+            type: 'info-block',
+            title: 'Info Block',
+            backgroundColor: '#1c1c1c',
+            sectionsTitle: 'Other links',
+            links: [
+                {
+                    text: 'Link 1',
+                },
+                {
+                    text: 'Link 2',
+                },
+                {
+                    text: 'Link 3',
+                },
+            ],
+            buttons: [
+                {
+                    text: 'Read more',
+                    theme: 'outlined-contrast',
+                },
+                {
+                    text: 'Go back',
+                    theme: 'action',
+                },
+            ],
+        },
+    },
+};
+export default InfoBlockConfig;

package/build/esm/blocks/Map/index.d.ts

@@ -0,0 +1,11 @@
+declare const MapBlockConfig: {
+    component: ({ map, border, disableShadow, ...props }: import("../..").MapBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            title: string;
+        };
+    };
+};
+export default MapBlockConfig;

package/build/esm/blocks/Map/index.js

@@ -0,0 +1,14 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import MapBlock from './Map';
+import { MapBlock as MapBlockSchema } from './schema';
+const MapBlockConfig = {
+    component: MapBlock,
+    schema: {
+        name: 'Map Block',
+        inputs: generateFromAJV(MapBlockSchema['map-block']),
+        default: {
+            title: 'Map Block',
+        },
+    },
+};
+export default MapBlockConfig;

package/build/esm/blocks/Media/index.d.ts

@@ -0,0 +1,14 @@
+declare const MediaBlockConfig: {
+    component: (props: import("../..").MediaBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            type: string;
+            title: string;
+            additionalInfo: string;
+            description: string;
+        };
+    };
+};
+export default MediaBlockConfig;

package/build/esm/blocks/Media/index.js

@@ -0,0 +1,17 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import MediaBlock from './Media';
+import { MediaBlock as MediaBlockSchema } from './schema';
+const MediaBlockConfig = {
+    component: MediaBlock,
+    schema: {
+        name: 'Media Block',
+        inputs: generateFromAJV(MediaBlockSchema['media-block']),
+        default: {
+            type: 'media-block',
+            title: 'Media Block',
+            additionalInfo: 'Additional info',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+    },
+};
+export default MediaBlockConfig;

package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -6,6 +6,7 @@ import Media from '../../components/Media/Media';
 import Title from '../../components/Title/Title';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { BREAKPOINTS } from '../../constants';
+import { Grid } from '../../grid';
 import { block } from '../../utils';
 import './PromoFeaturesBlock.css';
 const b = block('PromoFeaturesBlock');
@@ -17,21 +18,23 @@ const breakpointColumns = {
 const PromoFeaturesBlock = (props) => {
     const { items, title, description, theme, animated = true } = props;
     const backgroundTheme = theme || 'default';
-    return (React.createElement(AnimateBlock, { className: b({ [backgroundTheme]: true }), animate: animated },
-        React.createElement(FullWidthBackground, { className: b('background', { [backgroundTheme]: true }) }),
-        React.createElement(Title, { title: title, subtitle: description, className: b('header') }),
-        React.createElement(BalancedMasonry, { breakpointCols: breakpointColumns, className: b('card-container'), columnClassName: b('card-container-column') }, items.map(({ title: cardTitle, text, media, theme: cardTheme }, index) => {
-            const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
-            const themeMod = cardTheme || blockModifier || '';
-            return (React.createElement("div", { key: index, className: b('card', {
-                    'no-media': !media,
-                    [themeMod]: Boolean(themeMod),
-                }) },
-                React.createElement("div", { className: b('card-info') },
-                    React.createElement("h3", { className: b('card-title') }, cardTitle),
-                    React.createElement("div", { className: b('card-text') },
-                        React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true } }))),
-                media && React.createElement(Media, Object.assign({ className: b('card-media') }, media))));
-        }))));
+    return (React.createElement(Grid, null,
+        React.createElement(AnimateBlock, { className: b({ [backgroundTheme]: true }), animate: animated },
+            React.createElement(FullWidthBackground, { className: b('background', { [backgroundTheme]: true }) }),
+            React.createElement(Title, { title: title, subtitle: description, className: b('header') }),
+            React.createElement(BalancedMasonry, { breakpointCols: breakpointColumns, className: b('card-container'), columnClassName: b('card-container-column') }, items &&
+                items.map(({ title: cardTitle, text, media, theme: cardTheme }, index) => {
+                    const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
+                    const themeMod = cardTheme || blockModifier || '';
+                    return (React.createElement("div", { key: index, className: b('card', {
+                            'no-media': !media,
+                            [themeMod]: Boolean(themeMod),
+                        }) },
+                        React.createElement("div", { className: b('card-info') },
+                            React.createElement("h3", { className: b('card-title') }, cardTitle),
+                            React.createElement("div", { className: b('card-text') },
+                                React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true } }))),
+                        media && React.createElement(Media, Object.assign({ className: b('card-media') }, media))));
+                })))));
 };
 export default PromoFeaturesBlock;

package/build/esm/blocks/PromoFeaturesBlock/index.d.ts

@@ -0,0 +1,12 @@
+declare const PromoFeaturesBlockConfig: {
+    component: (props: import("../..").PromoFeaturesProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            title: string;
+            items: {}[];
+        };
+    };
+};
+export default PromoFeaturesBlockConfig;

package/build/esm/blocks/PromoFeaturesBlock/index.js

@@ -0,0 +1,15 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import PromoFeaturesBlock from './PromoFeaturesBlock';
+import { PromoFeaturesBlock as PromoFeaturesBlockSchema } from './schema';
+const PromoFeaturesBlockConfig = {
+    component: PromoFeaturesBlock,
+    schema: {
+        name: 'Promo Features Block',
+        inputs: generateFromAJV(PromoFeaturesBlockSchema['promo-features-block']),
+        default: {
+            title: 'Promo Features Block',
+            items: [{}],
+        },
+    },
+};
+export default PromoFeaturesBlockConfig;

package/build/esm/blocks/Questions/Questions.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Col, Row } from '../../grid';
+import { Col, Grid, Row } from '../../grid';
 import { Content } from '../../sub-blocks';
 import { block } from '../../utils';
 import { QuestionBlockItem } from './QuestionBlockItem/QuestionBlockItem';
@@ -19,15 +19,17 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (React.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
-        React.createElement(Row, null,
-            React.createElement(Col, { sizes: { all: 12, md: 4 } },
-                React.createElement("div", { className: b('title') },
-                    React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
-            React.createElement(Col, { sizes: { all: 12, md: 8 }, role: 'list' }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
-                const isOpened = opened.includes(index);
-                const onClick = () => toggleItem(index);
-                return (React.createElement(QuestionBlockItem, { key: itemTitle, title: itemTitle, text: itemText, link: link, listStyle: listStyle, isOpened: isOpened, onClick: onClick }));
-            })))));
+    return (React.createElement(Grid, null,
+        React.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
+            React.createElement(Row, null,
+                React.createElement(Col, { sizes: { all: 12, md: 4 } },
+                    React.createElement("div", { className: b('title') },
+                        React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
+                React.createElement(Col, { sizes: { all: 12, md: 8 }, role: 'list' }, items &&
+                    items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
+                        const isOpened = opened.includes(index);
+                        const onClick = () => toggleItem(index);
+                        return (React.createElement(QuestionBlockItem, { key: itemTitle, title: itemTitle, text: itemText, link: link, listStyle: listStyle, isOpened: isOpened, onClick: onClick }));
+                    }))))));
 };
 export default QuestionsBlock;

package/build/esm/blocks/Questions/index.d.ts

@@ -0,0 +1,29 @@
+declare const QuestionsBlockConfig: {
+    component: (props: import("../..").QuestionsProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            type: string;
+            title: string;
+            text: string;
+            links: {
+                text: string;
+                url: string;
+            }[];
+            buttons: {
+                text: string;
+                theme: string;
+            }[];
+            list: {
+                title: string;
+                text: string;
+            }[];
+            items: {
+                title: string;
+                text: string;
+            }[];
+        };
+    };
+};
+export default QuestionsBlockConfig;

package/build/esm/blocks/Questions/index.js

@@ -0,0 +1,44 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import QuestionsBlock from './Questions';
+import { QuestionsBlock as QuestionsBlockSchema } from './schema';
+const QuestionsBlockConfig = {
+    component: QuestionsBlock,
+    schema: {
+        name: 'Questions Block',
+        inputs: generateFromAJV(QuestionsBlockSchema['questions-block']),
+        default: {
+            type: 'questions-block',
+            title: 'Questions Block',
+            text: 'Here you can find answers.',
+            links: [
+                {
+                    text: 'Report for 2024',
+                    url: 'file.doc',
+                },
+            ],
+            buttons: [
+                {
+                    text: 'Get more',
+                    theme: 'outlined-info',
+                },
+            ],
+            list: [
+                {
+                    title: 'Report for 2024',
+                    text: 'Some advice here',
+                },
+            ],
+            items: [
+                {
+                    title: 'Question 1',
+                    text: 'Answer for question 1',
+                },
+                {
+                    title: 'Question 2',
+                    text: 'Answer for question 2',
+                },
+            ],
+        },
+    },
+};
+export default QuestionsBlockConfig;

package/build/esm/blocks/Share/Share.js

@@ -25,15 +25,16 @@ const Share = ({ items, title }) => {
     const handleButtonClick = useCallback(() => handleAnalytics(), [handleAnalytics]);
     return (React.createElement("div", { className: b() },
         React.createElement("h5", { className: b('title') }, title || i18n('constructor-share')),
-        React.createElement("div", { className: b('items') }, items.map((type) => {
-            const url = getAbsolutePath(hostname, pathname);
-            const socialUrl = getShareLink(url, type);
-            const icon = icons[type];
-            const urlTitle = i18n(`${type}-title`);
-            const buttonLabel = i18n(`${type}-label`);
-            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick, title: urlTitle, extraProps: {
-                    'aria-label': buttonLabel,
-                } }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
-        }))));
+        React.createElement("div", { className: b('items') }, items &&
+            items.map((type) => {
+                const url = getAbsolutePath(hostname, pathname);
+                const socialUrl = getShareLink(url, type);
+                const icon = icons[type];
+                const urlTitle = i18n(`${type}-title`);
+                const buttonLabel = i18n(`${type}-label`);
+                return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick, title: urlTitle, extraProps: {
+                        'aria-label': buttonLabel,
+                    } }, icon && (React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) }))));
+            }))));
 };
 export default Share;

package/build/esm/blocks/Share/index.d.ts

@@ -0,0 +1,12 @@
+declare const ShareBlockConfig: {
+    component: ({ items, title }: import("../..").ShareBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            items: string[];
+            title: string;
+        };
+    };
+};
+export default ShareBlockConfig;

package/build/esm/blocks/Share/index.js

@@ -0,0 +1,15 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import ShareBlock from './Share';
+import { ShareBlock as ShareBlockSchema } from './schema';
+const ShareBlockConfig = {
+    component: ShareBlock,
+    schema: {
+        name: 'Share Block',
+        inputs: generateFromAJV(ShareBlockSchema['share-block']),
+        default: {
+            items: ['vk', 'telegram', 'facebook'],
+            title: 'Share Block',
+        },
+    },
+};
+export default ShareBlockConfig;

package/build/esm/blocks/Slider/Slider.js

@@ -7,10 +7,13 @@ import Anchor from '../../components/Anchor/Anchor';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import OutsideClick from '../../components/OutsideClick/OutsideClick';
 import Title from '../../components/Title/Title';
+import ChildrenWrap from '../../components/editor/ChildrenWrap/ChildrenWrap';
+import ItemWrap from '../../components/editor/ItemWrap/ItemWrap';
 import { BREAKPOINTS } from '../../constants';
 import { MobileContext } from '../../context/mobileContext';
 import { SSRContext } from '../../context/ssrContext';
 import { StylesContext } from '../../context/stylesContext/StylesContext';
+import { Grid } from '../../grid';
 import useFocus from '../../hooks/useFocus';
 import { SliderType, } from '../../models';
 import { block } from '../../utils';
@@ -29,11 +32,11 @@ export const SliderBlock = (props) => {
     const [breakpoint, setBreakpoint] = useState(BREAKPOINTS.xl);
     const disclosedChildren = useMemo(() => discloseAllNestedChildren(children), [children]);
     const childrenCount = disclosedChildren.length;
-    const [slidesToShow] = useState(getSlidesToShowWithDefaults({
+    const slidesToShow = useMemo(() => getSlidesToShowWithDefaults({
         contentLength: childrenCount,
         breakpoints: props.slidesToShow,
         mobileFullscreen: Boolean(props.type && Object.values(SliderType).includes(props.type)),
-    }));
+    }), [childrenCount, props.slidesToShow, props.type]);
     const slidesToShowCount = getSlidesToShowCount(slidesToShow);
     const slidesCountByBreakpoint = getSlidesCountByBreakpoint(breakpoint, slidesToShow);
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -201,23 +204,25 @@ export const SliderBlock = (props) => {
             prevArrow: React.createElement(Arrow, { type: "left", handleClick: handleArrowClick, size: arrowSize }),
             lazyLoad,
         };
-        return (React.createElement(OutsideClick, { onOutsideClick: isMobile ? unsetFocus : noop },
-            React.createElement(SlickSlider, Object.assign({}, settings), disclosedChildren),
-            React.createElement("div", { className: b('footer') },
-                renderDisclaimer(),
-                renderNavigation())));
+        return (React.createElement(ChildrenWrap, null,
+            React.createElement(OutsideClick, { onOutsideClick: isMobile ? unsetFocus : noop },
+                React.createElement(SlickSlider, Object.assign({}, settings), React.Children.map(disclosedChildren, (child, index) => (React.createElement(ItemWrap, { index: index }, child)))),
+                React.createElement("div", { className: b('footer') },
+                    renderDisclaimer(),
+                    renderNavigation()))));
     };
     return (React.createElement(StylesContext.Provider, { value: Object.assign(Object.assign({}, childStyles), { setStyles: setChildStyles }) },
-        React.createElement("div", { className: b({
-                'align-left': childrenCount < slidesCountByBreakpoint,
-                'one-slide': childrenCount === 1,
-                'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
-                mobile: isMobile,
-                type,
-            }, blockClassName) },
-            anchorId && React.createElement(Anchor, { id: anchorId }),
-            React.createElement(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
-            React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated }, renderSlider()))));
+        React.createElement(Grid, null,
+            React.createElement("div", { className: b({
+                    'align-left': childrenCount < slidesCountByBreakpoint,
+                    'one-slide': childrenCount === 1,
+                    'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
+                    mobile: isMobile,
+                    type,
+                }, blockClassName) },
+                anchorId && React.createElement(Anchor, { id: anchorId }),
+                React.createElement(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
+                React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated }, renderSlider())))));
 };
 // TODO remove this and rework PriceDetailed CLOUDFRONT-12230
 function discloseAllNestedChildren(children) {

package/build/esm/blocks/Slider/dynamic-form.d.ts

@@ -0,0 +1,3 @@
+import { BlockFormSchema } from '../../types/dynamic-form';
+export declare const blockConfig: BlockFormSchema;
+export declare const exampleConfig: BlockFormSchema;