@doyourjob/gravity-ui-page-constructor 5.31.227 → 5.31.230

package/build/cjs/blocks/LogoRotator/Item.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { LogoRotatorBlockProps } from '../../models';
 type Props = {
     src: string;
-    url: string;
+    url?: string;
     hidden: boolean;
     colSizes: LogoRotatorBlockProps['colSizes'];
 };

package/build/cjs/blocks/LogoRotator/Item.js

@@ -10,8 +10,14 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('logo-rotator-block');
 const defaultColSizes = { all: 3 };
 const Item = ({ url, src, hidden, colSizes }) => {
-    const renderItem = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Link, { href: url, className: b('item', { hidden }) },
-        react_1.default.createElement(components_1.Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" }))), [hidden, src, url]);
+    const renderItem = react_1.default.useMemo(() => {
+        if (url) {
+            return (react_1.default.createElement(uikit_1.Link, { href: url, className: b('item', { hidden }) },
+                react_1.default.createElement(components_1.Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" })));
+        }
+        return (react_1.default.createElement("div", { className: b('item', { hidden }) },
+            react_1.default.createElement(components_1.Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" })));
+    }, [hidden, src, url]);
     return react_1.default.createElement(grid_1.Col, { sizes: colSizes || defaultColSizes }, renderItem);
 };
 exports.Item = Item;

package/build/cjs/blocks/LogoRotator/LogoRotator.js

@@ -91,8 +91,17 @@ const LogoRotatorBlock = (props) => {
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b({ theme }), animate: animated },
         react_1.default.createElement("div", { className: b('root') },
             hasTitle && (react_1.default.createElement(components_1.Title, { title: titleProps, className: b('title'), colSizes: { all: 12 } })),
-            rowMode ? (react_1.default.createElement("div", { className: b('row-items') }, slots.map((slot, index) => (react_1.default.createElement(uikit_1.Link, { key: index, href: items[slot].url, className: b('row-item', { hidden: hidden[index] }) },
-                react_1.default.createElement(components_1.ImageBase, { src: items[slot].src, className: b('image'), alt: "", "aria-hidden": "true" })))))) : (react_1.default.createElement(grid_1.Grid, { className: b('items') },
+            rowMode ? (react_1.default.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
+                const item = items[slot];
+                if (!item)
+                    return null;
+                if (item.url) {
+                    return (react_1.default.createElement(uikit_1.Link, { key: index, href: item.url, className: b('row-item', { hidden: hidden[index] }) },
+                        react_1.default.createElement(components_1.ImageBase, { src: item.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+                }
+                return (react_1.default.createElement("div", { key: index, className: b('row-item', { hidden: hidden[index] }) },
+                    react_1.default.createElement(components_1.ImageBase, { src: item.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+            }))) : (react_1.default.createElement(grid_1.Grid, { className: b('items') },
                 react_1.default.createElement(grid_1.Row, { className: b('row') }, renderItems))))));
 };
 exports.LogoRotatorBlock = LogoRotatorBlock;

package/build/cjs/blocks/LogoRotator/schema.js

@@ -20,7 +20,7 @@ exports.LogoRotatorBlock = {
                 items: {
                     type: 'object',
                     additionalProperties: false,
-                    required: ['url', 'src'],
+                    required: ['src'],
                     properties: {
                         url: { type: 'string' },
                         src: { type: 'string' },

package/build/cjs/blocks/Scroller/Scroller.css

@@ -31,9 +31,99 @@ unpredictable css rules order in build */
 .pc-scroller-block__content_gapLong {
   gap: 48px;
 }
+@media (min-width: 769px) {
+  .pc-scroller-block__content {
+    --scroller-edge-margin: calc(100% / 2.5);
+  }
+}
+.pc-scroller-block__content .pc-scroller-block__item:first-child {
+  margin-left: 48px;
+}
+@media (min-width: 769px) {
+  .pc-scroller-block__content .pc-scroller-block__item:first-child {
+    margin-left: var(--scroller-edge-margin);
+  }
+}
+.pc-scroller-block__content .pc-scroller-block__item:last-child {
+  margin-right: 48px;
+}
+@media (min-width: 769px) {
+  .pc-scroller-block__content .pc-scroller-block__item:last-child {
+    margin-right: var(--scroller-edge-margin);
+  }
+}
+.pc-scroller-block__content_scroll-snap-center {
+  scroll-snap-type: x mandatory;
+}
+.pc-scroller-block__content_scroll-snap-center .pc-scroller-block__item {
+  scroll-snap-align: center;
+}
 .pc-scroller-block__item {
   position: relative;
   z-index: 1;
   flex: none;
   max-width: 100%;
+}
+.pc-scroller-block__pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 32px;
+}
+.pc-scroller-block__pagination {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: fit-content;
+  padding: 12px;
+  border-radius: 9999px;
+  background: #f3f4f5;
+  height: 30px;
+}
+.pc-scroller-block__pagination-button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: #f3f4f5;
+  width: 30px;
+  height: 30px;
+}
+.pc-scroller-block__pip {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(0, 26, 43, 0.3);
+  transition: width 0.3s ease, border-radius 0.3s ease;
+}
+.pc-scroller-block__pip_active {
+  width: 48px;
+  border-radius: 9999px;
+}
+.pc-scroller-block__pip-inner {
+  height: 100%;
+  min-width: 6px;
+  width: 0%;
+  border-radius: 9999px;
+  background-color: transparent;
+  transition: opacity 0.5s ease;
+}
+.pc-scroller-block__pip-inner_active {
+  width: 100%;
+  background-color: rgb(0, 26, 43);
+}
+.pc-scroller-block__pip-inner_paused {
+  width: 0;
+  opacity: 0;
 }

package/build/cjs/blocks/Scroller/Scroller.js

@@ -6,29 +6,162 @@ const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('scroller-block');
+const getChild = (parent, index) => {
+    const child = parent.children[index];
+    return child instanceof HTMLElement ? child : null;
+};
+const getCenteredChildIndex = (content) => {
+    const midLine = content.getBoundingClientRect().left + content.clientWidth / 2;
+    for (let i = 0; i < content.children.length; i++) {
+        const rect = content.children[i].getBoundingClientRect();
+        if (rect.left <= midLine && rect.right >= midLine) {
+            return i;
+        }
+    }
+    return 0;
+};
+const scrollToChild = (content, child, behavior = 'smooth') => {
+    const left = child.offsetLeft - (content.offsetWidth - child.offsetWidth) / 2;
+    content.scrollTo({ left, behavior });
+};
+const PlayIcon = () => {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
+        react_1.default.createElement("path", { d: "M13.765 9.83831L20.3154 13.7086C21.2977 14.289 21.298 15.7102 20.3159 16.2911L13.7714 20.1618C12.7719 20.7529 11.5086 20.033 11.5078 18.8718L11.502 11.1309C11.5011 9.96894 12.7646 9.24725 13.765 9.83831Z", fill: "currentColor" })));
+};
+const PauseIcon = () => {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
+        react_1.default.createElement("path", { d: "M12.5 10C13.3284 10 14 10.6716 14 11.5V18.5C14 19.3284 13.3284 20 12.5 20C11.6716 20 11 19.3284 11 18.5V11.5C11 10.6716 11.6716 10 12.5 10ZM17.5 10C18.3284 10 19 10.6716 19 11.5V18.5C19 19.3284 18.3284 20 17.5 20C16.6716 20 16 19.3284 16 18.5V11.5C16 10.6716 16.6716 10 17.5 10Z", fill: "currentColor" })));
+};
 const ScrollerBlock = (props) => {
-    const { animated, widths, gapLong, fullWidth, children } = props;
+    const { animated, widths, gapLong, fullWidth, scrollSnapCenter, children, autoScroll = true, autoScrollInterval = 3000, infinite = false, } = props;
+    const childCount = react_1.default.Children.count(children);
     const rootRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
+    const [currentElement, setCurrentElement] = (0, react_1.useState)(0);
+    const [isPaused, setIsPaused] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
+        const content = contentRef.current;
+        const root = rootRef.current;
         const updateSize = () => {
-            if (contentRef.current && rootRef.current && fullWidth) {
-                const space = (window.innerWidth - rootRef.current.clientWidth) / 2;
-                contentRef.current.style.setProperty('padding-left', `${space}px`);
-                contentRef.current.style.setProperty('padding-right', `${space}px`);
-                contentRef.current.style.setProperty('left', `${-space}px`);
-                contentRef.current.style.setProperty('width', `calc(100% + ${2 * space}px)`);
+            if (!content || !root) {
+                return;
+            }
+            if (fullWidth) {
+                const space = (window.innerWidth - root.clientWidth) / 2;
+                content.style.setProperty('padding-left', `${space}px`);
+                content.style.setProperty('padding-right', `${space}px`);
+                content.style.setProperty('left', `${-space}px`);
+                content.style.setProperty('width', `calc(100% + ${2 * space}px)`);
             }
         };
+        const determineCurrentElement = () => {
+            if (!content || childCount <= 1) {
+                return;
+            }
+            setCurrentElement(getCenteredChildIndex(content) % childCount);
+        };
         updateSize();
+        determineCurrentElement();
         window.addEventListener('resize', updateSize, { passive: true });
+        content === null || content === void 0 ? void 0 : content.addEventListener('scroll', determineCurrentElement, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
+            content === null || content === void 0 ? void 0 : content.removeEventListener('scroll', determineCurrentElement);
+        };
+    }, [fullWidth, childCount, children]);
+    (0, react_1.useEffect)(() => {
+        const content = contentRef.current;
+        if (!content || !infinite || childCount <= 1) {
+            return () => { };
+        }
+        const middleCenterIndex = Math.floor(childCount * 1.5);
+        const copyStartIndex = childCount;
+        const endCopyStartIndex = childCount * 2;
+        const scrollToMiddle = () => {
+            const middleChild = getChild(content, middleCenterIndex);
+            if (middleChild) {
+                content.scrollTo(middleChild.offsetLeft + content.offsetWidth / 2 - middleChild.offsetWidth / 2, 0);
+            }
+        };
+        const handleInfiniteScroll = () => {
+            const scrollLeft = content.scrollLeft;
+            const endCopyChild = getChild(content, endCopyStartIndex);
+            const copyStartChild = getChild(content, copyStartIndex);
+            if (endCopyChild && scrollLeft > endCopyChild.offsetLeft) {
+                const delta = endCopyChild.offsetLeft - scrollLeft;
+                const resetChild = getChild(content, copyStartIndex);
+                if (resetChild) {
+                    content.scrollTo(resetChild.offsetLeft + delta, 0);
+                }
+            }
+            if (copyStartChild && scrollLeft < copyStartChild.offsetLeft - content.clientWidth) {
+                const endChild = getChild(content, endCopyStartIndex);
+                if (endChild) {
+                    content.scrollTo(endChild.offsetLeft - content.clientWidth, 0);
+                }
+            }
+        };
+        content.addEventListener('scroll', handleInfiniteScroll, { passive: true });
+        scrollToMiddle();
+        return () => {
+            content.removeEventListener('scroll', handleInfiniteScroll);
+        };
+    }, [infinite, childCount]);
+    (0, react_1.useEffect)(() => {
+        if (autoScroll) {
+            setIsPaused(false);
+        }
+    }, [autoScroll]);
+    const scrollToNext = (0, react_1.useCallback)(() => {
+        const content = contentRef.current;
+        if (!content || childCount <= 1) {
+            return;
+        }
+        if (infinite) {
+            const centeredIndex = getCenteredChildIndex(content);
+            const nextElement = getChild(content, centeredIndex + 1);
+            if (nextElement) {
+                scrollToChild(content, nextElement);
+            }
+            return;
+        }
+        const nextIndex = (currentElement + 1) % childCount;
+        const nextElement = getChild(content, nextIndex);
+        if (nextElement) {
+            scrollToChild(content, nextElement);
+        }
+    }, [childCount, currentElement, infinite]);
+    (0, react_1.useEffect)(() => {
+        let timeout = null;
+        if (!isPaused) {
+            timeout = setTimeout(() => {
+                scrollToNext();
+            }, autoScrollInterval);
+        }
+        return () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
         };
-    }, [fullWidth]);
+    }, [isPaused, currentElement, autoScrollInterval, scrollToNext]);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b({ fullWidth }), animate: animated },
         react_1.default.createElement("div", { className: b('root'), ref: rootRef },
-            react_1.default.createElement("div", { className: b('content', { gapLong, fullWidth }), ref: contentRef }, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement("div", { key: index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child)))))));
+            react_1.default.createElement("div", { className: b('content', {
+                    gapLong,
+                    fullWidth,
+                    'scroll-snap-center': infinite ? false : scrollSnapCenter,
+                }), ref: contentRef }, (infinite ? [0, 1, 2] : [0])
+                .map((mi) => react_1.default.Children.map(children, (child, index) => (react_1.default.createElement("div", { key: mi * childCount + index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child))))
+                .flat())),
+        autoScroll && childCount > 0 && (react_1.default.createElement("div", { className: b('pagination-container') },
+            react_1.default.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (react_1.default.createElement("div", { key: index, className: b('pip', { active: index === currentElement }) },
+                react_1.default.createElement("div", { style: {
+                        transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
+                    }, className: b('pip-inner', {
+                        active: index === currentElement,
+                        paused: isPaused,
+                    }) }))))),
+            react_1.default.createElement("button", { className: b('pagination-button'), onClick: () => setIsPaused(!isPaused) }, isPaused ? react_1.default.createElement(PlayIcon, null) : react_1.default.createElement(PauseIcon, null))))));
 };
 exports.ScrollerBlock = ScrollerBlock;
 exports.default = exports.ScrollerBlock;

package/build/cjs/blocks/Scroller/schema.d.ts

@@ -1,8 +1,40 @@
+export declare const ScrollerControlsProps: {
+    infinite: {
+        type: string;
+    };
+    scrollSnapCenter: {
+        type: string;
+    };
+    autoScroll: {
+        type: string;
+    };
+    autoScrollInterval: {
+        type: string;
+    };
+};
 export declare const ScrollerBlock: {
     'scroller-block': {
         additionalProperties: boolean;
         required: boolean;
         properties: {
+            children: {
+                type: string;
+                items: {
+                    $ref: string;
+                };
+            };
+            infinite: {
+                type: string;
+            };
+            scrollSnapCenter: {
+                type: string;
+            };
+            autoScroll: {
+                type: string;
+            };
+            autoScrollInterval: {
+                type: string;
+            };
             widths: {
                 type: string;
                 items: {
@@ -12,11 +44,8 @@ export declare const ScrollerBlock: {
             gapLong: {
                 type: string;
             };
-            children: {
+            fullWidth: {
                 type: string;
-                items: {
-                    $ref: string;
-                };
             };
             animated: {
                 type: string;

package/build/cjs/blocks/Scroller/schema.js

@@ -1,18 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollerBlock = void 0;
+exports.ScrollerBlock = exports.ScrollerControlsProps = void 0;
 const common_1 = require("../../schema/validators/common");
+exports.ScrollerControlsProps = {
+    infinite: {
+        type: 'boolean',
+    },
+    scrollSnapCenter: {
+        type: 'boolean',
+    },
+    autoScroll: {
+        type: 'boolean',
+    },
+    autoScrollInterval: {
+        type: 'number',
+    },
+};
 exports.ScrollerBlock = {
     'scroller-block': {
         additionalProperties: false,
         required: false,
-        properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { widths: {
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { widths: {
                 type: 'array',
                 items: {
                     type: 'string',
                 },
             }, gapLong: {
                 type: 'boolean',
-            }, children: common_1.ChildrenCardsProps }),
+            }, fullWidth: {
+                type: 'boolean',
+            } }), exports.ScrollerControlsProps), { children: common_1.ChildrenCardsProps }),
     },
 };

package/build/cjs/blocks/WhatsNew/WhatsNew.js

@@ -7,12 +7,12 @@ const NewsCard_1 = tslib_1.__importDefault(require("../../sub-blocks/NewsCard/Ne
 const utils_1 = require("../../utils");
 const Scroller_1 = tslib_1.__importDefault(require("../Scroller/Scroller"));
 const b = (0, utils_1.block)('whats-new-block');
-const WhatsNew = ({ title, items, footnote, links, animated }) => {
+const WhatsNew = ({ title, items, footnote, links, animated, infinite, scrollSnapCenter, autoScroll, autoScrollInterval, }) => {
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         react_1.default.createElement("div", { className: b('root') },
             title && (react_1.default.createElement("div", { className: b('head') },
                 react_1.default.createElement("h2", { className: b('title') }, title))),
-            react_1.default.createElement(Scroller_1.default, { fullWidth: true }, items.map((item, index) => (react_1.default.createElement(NewsCard_1.default, Object.assign({ key: index }, item))))),
+            react_1.default.createElement(Scroller_1.default, { fullWidth: true, infinite: infinite, scrollSnapCenter: scrollSnapCenter, autoScroll: autoScroll !== null && autoScroll !== void 0 ? autoScroll : true, autoScrollInterval: autoScrollInterval }, items.map((item, index) => (react_1.default.createElement(NewsCard_1.default, Object.assign({ key: index }, item))))),
             (footnote || (links === null || links === void 0 ? void 0 : links.length)) && (react_1.default.createElement("div", { className: b('footer') },
                 footnote && react_1.default.createElement("div", { className: b('footnote') }, footnote),
                 (links === null || links === void 0 ? void 0 : links.length) ? (react_1.default.createElement("div", { className: b('links') }, links.map((link, index) => (react_1.default.createElement("a", { key: index, href: link.url, className: b('link'), target: "_blank", rel: "noopener noreferrer" },

package/build/cjs/blocks/WhatsNew/schema.d.ts

@@ -56,6 +56,18 @@ export declare const WhatsNewBlock: {
                     };
                 };
             };
+            infinite: {
+                type: string;
+            };
+            scrollSnapCenter: {
+                type: string;
+            };
+            autoScroll: {
+                type: string;
+            };
+            autoScrollInterval: {
+                type: string;
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/cjs/blocks/WhatsNew/schema.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WhatsNewBlock = void 0;
 const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../Scroller/schema");
 exports.WhatsNewBlock = {
     'whats-new-block': {
         additionalProperties: false,
         required: ['items'],
-        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), { items: {
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), schema_1.ScrollerControlsProps), { items: {
                 type: 'array',
                 items: {
                     type: 'object',

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -298,7 +298,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {
 export interface LogoRotatorBlockProps extends Animatable {
     title?: TitleItemBaseProps | string;
     items: {
-        url: string;
+        url?: string;
         src: string;
         isStatic?: boolean;
     }[];
@@ -359,6 +359,10 @@ export interface ScrollerBlockProps extends Animatable {
     widths?: string[];
     gapLong?: boolean;
     fullWidth?: boolean;
+    infinite?: boolean;
+    scrollSnapCenter?: boolean;
+    autoScroll?: boolean;
+    autoScrollInterval?: number;
 }
 export interface CompaniesBlockProps extends Animatable {
     title: string;
@@ -638,7 +642,7 @@ export interface BenchmarkBlockProps extends Animatable {
         postfix?: string;
     }[];
 }
-export interface WhatsNewBlockProps extends Animatable {
+export interface WhatsNewBlockProps extends Animatable, Pick<ScrollerBlockProps, 'infinite' | 'scrollSnapCenter' | 'autoScroll' | 'autoScrollInterval'> {
     title?: string;
     items: NewsCardProps[];
     footnote?: string;

package/build/esm/blocks/LogoRotator/Item.d.ts

@@ -3,7 +3,7 @@ import { LogoRotatorBlockProps } from '../../models';
 import './LogoRotator.css';
 type Props = {
     src: string;
-    url: string;
+    url?: string;
     hidden: boolean;
     colSizes: LogoRotatorBlockProps['colSizes'];
 };

package/build/esm/blocks/LogoRotator/Item.js

@@ -7,8 +7,14 @@ import './LogoRotator.css';
 const b = block('logo-rotator-block');
 const defaultColSizes = { all: 3 };
 export const Item = ({ url, src, hidden, colSizes }) => {
-    const renderItem = React.useMemo(() => (React.createElement(Link, { href: url, className: b('item', { hidden }) },
-        React.createElement(Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" }))), [hidden, src, url]);
+    const renderItem = React.useMemo(() => {
+        if (url) {
+            return (React.createElement(Link, { href: url, className: b('item', { hidden }) },
+                React.createElement(Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" })));
+        }
+        return (React.createElement("div", { className: b('item', { hidden }) },
+            React.createElement(Image, { src: src, className: b('image'), alt: "", "aria-hidden": "true" })));
+    }, [hidden, src, url]);
     return React.createElement(Col, { sizes: colSizes || defaultColSizes }, renderItem);
 };
 export default React.memo(Item);

package/build/esm/blocks/LogoRotator/LogoRotator.js

@@ -88,8 +88,17 @@ export const LogoRotatorBlock = (props) => {
     return (React.createElement(AnimateBlock, { className: b({ theme }), animate: animated },
         React.createElement("div", { className: b('root') },
             hasTitle && (React.createElement(Title, { title: titleProps, className: b('title'), colSizes: { all: 12 } })),
-            rowMode ? (React.createElement("div", { className: b('row-items') }, slots.map((slot, index) => (React.createElement(Link, { key: index, href: items[slot].url, className: b('row-item', { hidden: hidden[index] }) },
-                React.createElement(ImageBase, { src: items[slot].src, className: b('image'), alt: "", "aria-hidden": "true" })))))) : (React.createElement(Grid, { className: b('items') },
+            rowMode ? (React.createElement("div", { className: b('row-items') }, slots.map((slot, index) => {
+                const item = items[slot];
+                if (!item)
+                    return null;
+                if (item.url) {
+                    return (React.createElement(Link, { key: index, href: item.url, className: b('row-item', { hidden: hidden[index] }) },
+                        React.createElement(ImageBase, { src: item.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+                }
+                return (React.createElement("div", { key: index, className: b('row-item', { hidden: hidden[index] }) },
+                    React.createElement(ImageBase, { src: item.src, className: b('image'), alt: "", "aria-hidden": "true" })));
+            }))) : (React.createElement(Grid, { className: b('items') },
                 React.createElement(Row, { className: b('row') }, renderItems))))));
 };
 export default LogoRotatorBlock;

package/build/esm/blocks/LogoRotator/schema.js

@@ -17,7 +17,7 @@ export const LogoRotatorBlock = {
                 items: {
                     type: 'object',
                     additionalProperties: false,
-                    required: ['url', 'src'],
+                    required: ['src'],
                     properties: {
                         url: { type: 'string' },
                         src: { type: 'string' },

package/build/esm/blocks/Scroller/Scroller.css

@@ -31,9 +31,99 @@ unpredictable css rules order in build */
 .pc-scroller-block__content_gapLong {
   gap: 48px;
 }
+@media (min-width: 769px) {
+  .pc-scroller-block__content {
+    --scroller-edge-margin: calc(100% / 2.5);
+  }
+}
+.pc-scroller-block__content .pc-scroller-block__item:first-child {
+  margin-left: 48px;
+}
+@media (min-width: 769px) {
+  .pc-scroller-block__content .pc-scroller-block__item:first-child {
+    margin-left: var(--scroller-edge-margin);
+  }
+}
+.pc-scroller-block__content .pc-scroller-block__item:last-child {
+  margin-right: 48px;
+}
+@media (min-width: 769px) {
+  .pc-scroller-block__content .pc-scroller-block__item:last-child {
+    margin-right: var(--scroller-edge-margin);
+  }
+}
+.pc-scroller-block__content_scroll-snap-center {
+  scroll-snap-type: x mandatory;
+}
+.pc-scroller-block__content_scroll-snap-center .pc-scroller-block__item {
+  scroll-snap-align: center;
+}
 .pc-scroller-block__item {
   position: relative;
   z-index: 1;
   flex: none;
   max-width: 100%;
+}
+.pc-scroller-block__pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 32px;
+}
+.pc-scroller-block__pagination {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: fit-content;
+  padding: 12px;
+  border-radius: 9999px;
+  background: #f3f4f5;
+  height: 30px;
+}
+.pc-scroller-block__pagination-button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: #f3f4f5;
+  width: 30px;
+  height: 30px;
+}
+.pc-scroller-block__pip {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(0, 26, 43, 0.3);
+  transition: width 0.3s ease, border-radius 0.3s ease;
+}
+.pc-scroller-block__pip_active {
+  width: 48px;
+  border-radius: 9999px;
+}
+.pc-scroller-block__pip-inner {
+  height: 100%;
+  min-width: 6px;
+  width: 0%;
+  border-radius: 9999px;
+  background-color: transparent;
+  transition: opacity 0.5s ease;
+}
+.pc-scroller-block__pip-inner_active {
+  width: 100%;
+  background-color: rgb(0, 26, 43);
+}
+.pc-scroller-block__pip-inner_paused {
+  width: 0;
+  opacity: 0;
 }