@gravity-ui/page-constructor 8.1.2-alpha.1 → 8.2.0-alpha.0

package/build/cjs/blocks/Slider/Slider.d.ts

@@ -13,5 +13,5 @@ export interface SliderProps extends Omit<SliderParams, 'children'>, Partial<Pic
     arrowSize?: number;
     initialSlide?: number;
 }
-export declare const SliderBlock: ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, centeredSlides, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: React.PropsWithChildren<SliderProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const SliderBlock: ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: React.PropsWithChildren<SliderProps>) => import("react/jsx-runtime").JSX.Element;
 export default SliderBlock;

package/build/cjs/blocks/Slider/Slider.js

@@ -19,7 +19,7 @@ const i18n_1 = require("./i18n/index.js");
 const useSlider_1 = require("./useSlider.js");
 const useSliderPagination_1 = require("./useSliderPagination.js");
 const b = (0, utils_1.block)('SliderBlock');
-const SliderBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, dots = true, initialSlide = 0, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, centeredSlides, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
+const SliderBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, dots = true, initialSlide = 0, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
     const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, onPrev, onNext, setIsLocked } = (0, useSlider_1.useSlider)({
         slidesToShow,
         children,
@@ -44,7 +44,7 @@ const SliderBlock = ({ animated, title, description, type, anchorId, arrows = tr
                 arrows,
             'without-dots': !dots || isLocked,
             type,
-        }, blockClassName), children: [anchorId && (0, jsx_runtime_1.jsx)(Anchor_1.default, { id: anchorId }), (0, jsx_runtime_1.jsx)(Title_1.default, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }), (0, jsx_runtime_1.jsxs)(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated, children: [(0, jsx_runtime_1.jsx)(react_1.Swiper, { modules: [modules_1.Autoplay, modules_1.A11y, modules_1.Pagination], className: b('slider', className), onSwiper: onSwiper, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, centeredSlides: centeredSlides, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), watchOverflow: true, watchSlidesProgress: true, touchStartPreventDefault: false, touchAngle: 45, threshold: 10, longSwipes: true, longSwipesRatio: 0.5, resistance: true, resistanceRatio: 0.5, a11y: {
+        }, blockClassName), children: [anchorId && (0, jsx_runtime_1.jsx)(Anchor_1.default, { id: anchorId }), (0, jsx_runtime_1.jsx)(Title_1.default, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }), (0, jsx_runtime_1.jsxs)(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated, children: [(0, jsx_runtime_1.jsx)(react_1.Swiper, { modules: [modules_1.Autoplay, modules_1.A11y, modules_1.Pagination], className: b('slider', className), onSwiper: onSwiper, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), watchOverflow: true, watchSlidesProgress: true, touchStartPreventDefault: false, touchAngle: 45, threshold: 10, longSwipes: true, longSwipesRatio: 0.5, resistance: true, resistanceRatio: 0.5, a11y: {
                             slideLabelMessage: '',
                             paginationBulletMessage: (0, i18n_1.i18n)('dot-label', { index: '{{index}}' }),
                         }, ...paginationProps, children: React.Children.map(children, (elem, index) => ((0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { className: b('slide'), children: ({ isVisible }) => ((0, jsx_runtime_1.jsx)("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible, children: elem })) }, index))) }), arrows && !isLocked && ((0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { "aria-hidden": isA11yControlHidden, children: [(0, jsx_runtime_1.jsx)(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", transparent: type === models_1.SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", transparent: type === models_1.SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })] }) })), (0, jsx_runtime_1.jsx)("div", { className: b('footer'), children: disclaimer ? ((0, jsx_runtime_1.jsx)("div", { className: b('disclaimer', { size: disclaimer?.size || 'm' }), children: disclaimer?.text })) : null })] })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"../../../../src","sources":["blocks/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport 'swiper/css';\nimport 'swiper/css/a11y';\nimport 'swiper/css/pagination';\nimport {A11y, Autoplay, Pagination} from 'swiper/modules';\nimport {Swiper as SwiperReact, SwiperSlide} from 'swiper/react';\n\nimport Anchor from '../../components/Anchor/Anchor';\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport Title from '../../components/Title/Title';\nimport {ClassNameProps, Refable, SliderProps as SliderParams, SliderType} from '../../models';\nimport {block} from '../../utils';\n\nimport Arrow from './Arrow/Arrow';\nimport {i18n} from './i18n';\nimport {useSlider} from './useSlider';\nimport {useSliderPagination} from './useSliderPagination';\n\nimport './Slider.scss';\n\nexport type {Swiper, SwiperOptions} from 'swiper/types';\n\nconst b = block('SliderBlock');\n\nexport interface SliderProps\n    extends Omit<SliderParams, 'children'>,\n        Partial<\n            Pick<\n                React.ComponentProps<typeof SwiperReact>,\n                | 'onSlideChange'\n                | 'onSlideChangeTransitionStart'\n                | 'onSlideChangeTransitionEnd'\n                | 'onActiveIndexChange'\n                | 'onBreakpoint'\n            >\n        >,\n        Refable<HTMLDivElement>,\n        ClassNameProps {\n    type?: string;\n    anchorId?: string;\n    dotsClassName?: string;\n    blockClassName?: string;\n    arrowSize?: number;\n    initialSlide?: number;\n}\n\nexport const SliderBlock = ({\n    animated,\n    title,\n    description,\n    type,\n    anchorId,\n    arrows = true,\n    adaptive,\n    autoplay: autoplayMs,\n    dots = true,\n    initialSlide = 0,\n    className,\n    dotsClassName,\n    disclaimer,\n    children,\n    blockClassName,\n    arrowSize,\n    slidesToShow,\n    centeredSlides,\n    onSlideChange,\n    onSlideChangeTransitionStart,\n    onSlideChangeTransitionEnd,\n    onActiveIndexChange,\n    onBreakpoint,\n}: React.PropsWithChildren<SliderProps>) => {\n    const {autoplay, isLocked, childrenCount, breakpoints, onSwiper, onPrev, onNext, setIsLocked} =\n        useSlider({\n            slidesToShow,\n            children,\n            type,\n            autoplayMs,\n        });\n\n    const isA11yControlHidden = Boolean(autoplay);\n    const controlTabIndex = isA11yControlHidden ? -1 : 0;\n\n    const paginationProps = useSliderPagination({\n        enabled: dots,\n        isA11yControlHidden,\n        controlTabIndex,\n        horizontalClass: b('dots'),\n        bulletClass: b('dot', dotsClassName),\n        bulletActiveClass: b('dot_active'),\n        paginationLabel: i18n('pagination-label'),\n    });\n\n    return (\n        <div\n            className={b(\n                {\n                    'one-slide': childrenCount === 1,\n                    'only-arrows':\n                        (!title || (typeof title !== 'string' && !title?.text)) &&\n                        !description &&\n                        arrows,\n                    'without-dots': !dots || isLocked,\n                    type,\n                },\n                blockClassName,\n            )}\n        >\n            {anchorId && <Anchor id={anchorId} />}\n            <Title\n                title={title}\n                subtitle={description}\n                className={b('header', {'no-description': !description})}\n            />\n            <AnimateBlock className={b('animate-slides')} animate={animated}>\n                <SwiperReact\n                    modules={[Autoplay, A11y, Pagination]}\n                    className={b('slider', className)}\n                    onSwiper={onSwiper}\n                    speed={1000}\n                    autoplay={autoplay}\n                    autoHeight={adaptive}\n                    initialSlide={initialSlide}\n                    noSwiping={false}\n                    centeredSlides={centeredSlides}\n                    breakpoints={breakpoints}\n                    onSlideChange={onSlideChange}\n                    onSlideChangeTransitionStart={onSlideChangeTransitionStart}\n                    onSlideChangeTransitionEnd={onSlideChangeTransitionEnd}\n                    onActiveIndexChange={onActiveIndexChange}\n                    onBreakpoint={onBreakpoint}\n                    onLock={() => setIsLocked(true)}\n                    onUnlock={() => setIsLocked(false)}\n                    watchOverflow\n                    watchSlidesProgress\n                    touchStartPreventDefault={false}\n                    touchAngle={45}\n                    threshold={10}\n                    longSwipes={true}\n                    longSwipesRatio={0.5}\n                    resistance={true}\n                    resistanceRatio={0.5}\n                    a11y={{\n                        slideLabelMessage: '',\n                        paginationBulletMessage: i18n('dot-label', {index: '{{index}}'}),\n                    }}\n                    {...paginationProps}\n                >\n                    {React.Children.map(children, (elem, index) => (\n                        <SwiperSlide className={b('slide')} key={index}>\n                            {({isVisible}) => (\n                                <div\n                                    className={b('slide-item')}\n                                    aria-hidden={!isA11yControlHidden && !isVisible}\n                                >\n                                    {elem}\n                                </div>\n                            )}\n                        </SwiperSlide>\n                    ))}\n                </SwiperReact>\n                {arrows && !isLocked && (\n                    <React.Fragment>\n                        <div aria-hidden={isA11yControlHidden}>\n                            <Arrow\n                                className={b('arrow', {prev: true})}\n                                type=\"left\"\n                                transparent={type === SliderType.HeaderCard}\n                                onClick={onPrev}\n                                size={arrowSize}\n                                extraProps={{tabIndex: controlTabIndex}}\n                            />\n                            <Arrow\n                                className={b('arrow', {next: true})}\n                                type=\"right\"\n                                transparent={type === SliderType.HeaderCard}\n                                onClick={onNext}\n                                size={arrowSize}\n                                extraProps={{tabIndex: controlTabIndex}}\n                            />\n                        </div>\n                    </React.Fragment>\n                )}\n                <div className={b('footer')}>\n                    {disclaimer ? (\n                        <div className={b('disclaimer', {size: disclaimer?.size || 'm'})}>\n                            {disclaimer?.text}\n                        </div>\n                    ) : null}\n                </div>\n            </AnimateBlock>\n        </div>\n    );\n};\n\nexport default SliderBlock;\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"../../../../src","sources":["blocks/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport 'swiper/css';\nimport 'swiper/css/a11y';\nimport 'swiper/css/pagination';\nimport {A11y, Autoplay, Pagination} from 'swiper/modules';\nimport {Swiper as SwiperReact, SwiperSlide} from 'swiper/react';\n\nimport Anchor from '../../components/Anchor/Anchor';\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport Title from '../../components/Title/Title';\nimport {ClassNameProps, Refable, SliderProps as SliderParams, SliderType} from '../../models';\nimport {block} from '../../utils';\n\nimport Arrow from './Arrow/Arrow';\nimport {i18n} from './i18n';\nimport {useSlider} from './useSlider';\nimport {useSliderPagination} from './useSliderPagination';\n\nimport './Slider.scss';\n\nexport type {Swiper, SwiperOptions} from 'swiper/types';\n\nconst b = block('SliderBlock');\n\nexport interface SliderProps\n    extends Omit<SliderParams, 'children'>,\n        Partial<\n            Pick<\n                React.ComponentProps<typeof SwiperReact>,\n                | 'onSlideChange'\n                | 'onSlideChangeTransitionStart'\n                | 'onSlideChangeTransitionEnd'\n                | 'onActiveIndexChange'\n                | 'onBreakpoint'\n            >\n        >,\n        Refable<HTMLDivElement>,\n        ClassNameProps {\n    type?: string;\n    anchorId?: string;\n    dotsClassName?: string;\n    blockClassName?: string;\n    arrowSize?: number;\n    initialSlide?: number;\n}\n\nexport const SliderBlock = ({\n    animated,\n    title,\n    description,\n    type,\n    anchorId,\n    arrows = true,\n    adaptive,\n    autoplay: autoplayMs,\n    dots = true,\n    initialSlide = 0,\n    className,\n    dotsClassName,\n    disclaimer,\n    children,\n    blockClassName,\n    arrowSize,\n    slidesToShow,\n    onSlideChange,\n    onSlideChangeTransitionStart,\n    onSlideChangeTransitionEnd,\n    onActiveIndexChange,\n    onBreakpoint,\n}: React.PropsWithChildren<SliderProps>) => {\n    const {autoplay, isLocked, childrenCount, breakpoints, onSwiper, onPrev, onNext, setIsLocked} =\n        useSlider({\n            slidesToShow,\n            children,\n            type,\n            autoplayMs,\n        });\n\n    const isA11yControlHidden = Boolean(autoplay);\n    const controlTabIndex = isA11yControlHidden ? -1 : 0;\n\n    const paginationProps = useSliderPagination({\n        enabled: dots,\n        isA11yControlHidden,\n        controlTabIndex,\n        horizontalClass: b('dots'),\n        bulletClass: b('dot', dotsClassName),\n        bulletActiveClass: b('dot_active'),\n        paginationLabel: i18n('pagination-label'),\n    });\n\n    return (\n        <div\n            className={b(\n                {\n                    'one-slide': childrenCount === 1,\n                    'only-arrows':\n                        (!title || (typeof title !== 'string' && !title?.text)) &&\n                        !description &&\n                        arrows,\n                    'without-dots': !dots || isLocked,\n                    type,\n                },\n                blockClassName,\n            )}\n        >\n            {anchorId && <Anchor id={anchorId} />}\n            <Title\n                title={title}\n                subtitle={description}\n                className={b('header', {'no-description': !description})}\n            />\n            <AnimateBlock className={b('animate-slides')} animate={animated}>\n                <SwiperReact\n                    modules={[Autoplay, A11y, Pagination]}\n                    className={b('slider', className)}\n                    onSwiper={onSwiper}\n                    speed={1000}\n                    autoplay={autoplay}\n                    autoHeight={adaptive}\n                    initialSlide={initialSlide}\n                    noSwiping={false}\n                    breakpoints={breakpoints}\n                    onSlideChange={onSlideChange}\n                    onSlideChangeTransitionStart={onSlideChangeTransitionStart}\n                    onSlideChangeTransitionEnd={onSlideChangeTransitionEnd}\n                    onActiveIndexChange={onActiveIndexChange}\n                    onBreakpoint={onBreakpoint}\n                    onLock={() => setIsLocked(true)}\n                    onUnlock={() => setIsLocked(false)}\n                    watchOverflow\n                    watchSlidesProgress\n                    touchStartPreventDefault={false}\n                    touchAngle={45}\n                    threshold={10}\n                    longSwipes={true}\n                    longSwipesRatio={0.5}\n                    resistance={true}\n                    resistanceRatio={0.5}\n                    a11y={{\n                        slideLabelMessage: '',\n                        paginationBulletMessage: i18n('dot-label', {index: '{{index}}'}),\n                    }}\n                    {...paginationProps}\n                >\n                    {React.Children.map(children, (elem, index) => (\n                        <SwiperSlide className={b('slide')} key={index}>\n                            {({isVisible}) => (\n                                <div\n                                    className={b('slide-item')}\n                                    aria-hidden={!isA11yControlHidden && !isVisible}\n                                >\n                                    {elem}\n                                </div>\n                            )}\n                        </SwiperSlide>\n                    ))}\n                </SwiperReact>\n                {arrows && !isLocked && (\n                    <React.Fragment>\n                        <div aria-hidden={isA11yControlHidden}>\n                            <Arrow\n                                className={b('arrow', {prev: true})}\n                                type=\"left\"\n                                transparent={type === SliderType.HeaderCard}\n                                onClick={onPrev}\n                                size={arrowSize}\n                                extraProps={{tabIndex: controlTabIndex}}\n                            />\n                            <Arrow\n                                className={b('arrow', {next: true})}\n                                type=\"right\"\n                                transparent={type === SliderType.HeaderCard}\n                                onClick={onNext}\n                                size={arrowSize}\n                                extraProps={{tabIndex: controlTabIndex}}\n                            />\n                        </div>\n                    </React.Fragment>\n                )}\n                <div className={b('footer')}>\n                    {disclaimer ? (\n                        <div className={b('disclaimer', {size: disclaimer?.size || 'm'})}>\n                            {disclaimer?.text}\n                        </div>\n                    ) : null}\n                </div>\n            </AnimateBlock>\n        </div>\n    );\n};\n\nexport default SliderBlock;\n"]}

package/build/cjs/components/Title/TitleItem.d.ts

@@ -1,6 +1,6 @@
-import { QAProps, TextSize, TitleItemProps } from "../../models/index.js";
+import { AnalyticsEventsBase, QAProps, TextSize, TitleItemProps } from "../../models/index.js";
 export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24 | 13 | 22 | 26 | 38;
-export interface TitleItemFullProps extends TitleItemProps, QAProps {
+export interface TitleItemFullProps extends TitleItemProps, QAProps, AnalyticsEventsBase {
     className?: string;
     onClick?: () => void;
     resetMargin?: boolean;

package/build/cjs/components/Title/TitleItem.js

@@ -7,6 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const __1 = require("../index.js");
 const locationContext_1 = require("../../context/locationContext/index.js");
 const mobileContext_1 = require("../../context/mobileContext/index.js");
+const hooks_1 = require("../../hooks/index.js");
 const utils_1 = require("../../utils/index.js");
 const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor.js"));
 const b = (0, utils_1.block)('title-item');
@@ -27,21 +28,30 @@ function getArrowSize(size, isMobile) {
 }
 const TitleItem = (props) => {
     const isMobile = React.useContext(mobileContext_1.MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, analyticsEvents, } = props;
+    const handleAnalytics = (0, hooks_1.useAnalytics)();
     const { hostname } = React.useContext(locationContext_1.LocationContext);
     const textMarkup = ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.YFMWrapper, { className: b('text'), contentClassName: b('text'), content: text, modifiers: {
                     constructor: true,
                 } }), custom && ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)("span", { className: b('custom'), children: custom })] }))] }));
     let content;
     const insideClickableContent = ((0, jsx_runtime_1.jsxs)("span", { className: b('wrapper'), children: [textMarkup, "\u00A0", (0, jsx_runtime_1.jsx)(__1.ToggleArrow, { className: b('arrow', { size: textSize }), size: getArrowSize(textSize, isMobile), type: 'horizontal', iconType: "navigation", open: false })] }));
+    const handleClick = () => {
+        if (analyticsEvents) {
+            handleAnalytics(analyticsEvents);
+        }
+        if (onClick) {
+            onClick();
+        }
+    };
     if (!url && !onClick) {
         content = textMarkup;
     }
     else if (url) {
-        content = ((0, jsx_runtime_1.jsx)("a", { className: b('link'), href: url, ...(0, utils_1.getLinkProps)(url, hostname), onClick: onClick, title: urlTitle, children: insideClickableContent }));
+        content = ((0, jsx_runtime_1.jsx)("a", { className: b('link'), href: url, ...(0, utils_1.getLinkProps)(url, hostname), onClick: handleClick, title: urlTitle, children: insideClickableContent }));
     }
     else if (onClick) {
-        content = ((0, jsx_runtime_1.jsx)("button", { className: b('link'), onClick: onClick, title: urlTitle, children: insideClickableContent }));
+        content = ((0, jsx_runtime_1.jsx)("button", { className: b('link'), onClick: handleClick, title: urlTitle, children: insideClickableContent }));
     }
     return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [anchor && (0, jsx_runtime_1.jsx)(Anchor_1.default, { id: anchor, className: b('anchor') }), React.createElement((0, utils_1.getHeaderTag)(textSize), {
                 className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),

package/build/cjs/components/Title/TitleItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TitleItem.js","sourceRoot":"../../../../src","sources":["components/Title/TitleItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {ToggleArrow, YFMWrapper} from '../';\nimport {LocationContext} from '../../context/locationContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {QAProps, TextSize, TitleItemProps} from '../../models';\nimport {block, getHeaderTag, getLinkProps} from '../../utils';\nimport Anchor from '../Anchor/Anchor';\n\nimport './TitleItem.scss';\n\nconst b = block('title-item');\n\nexport function getArrowSize(size: TextSize, isMobile: boolean) {\n    switch (size) {\n        case 'xs':\n            return 13;\n        case 's':\n            return 16;\n        case 'sm':\n        case 'm':\n            return isMobile ? 22 : 24;\n        case 'l':\n            return isMobile ? 26 : 38;\n        default:\n            return 20;\n    }\n}\n\nexport interface TitleItemFullProps extends TitleItemProps, QAProps {\n    className?: string;\n    onClick?: () => void;\n    resetMargin?: boolean;\n}\n\nconst TitleItem = (props: TitleItemFullProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    const {\n        textSize = 'm',\n        text,\n        anchor,\n        justify,\n        url,\n        onClick,\n        custom,\n        className,\n        qa,\n        resetMargin = true,\n        urlTitle,\n    } = props;\n\n    const {hostname} = React.useContext(LocationContext);\n    const textMarkup = (\n        <React.Fragment>\n            <YFMWrapper\n                className={b('text')}\n                contentClassName={b('text')}\n                content={text}\n                modifiers={{\n                    constructor: true,\n                }}\n            />\n            {custom && (\n                <React.Fragment>\n                    &nbsp;\n                    <span className={b('custom')}>{custom}</span>\n                </React.Fragment>\n            )}\n        </React.Fragment>\n    );\n    let content: React.ReactNode;\n\n    const insideClickableContent = (\n        <span className={b('wrapper')}>\n            {textMarkup}\n            &nbsp;\n            <ToggleArrow\n                className={b('arrow', {size: textSize})}\n                size={getArrowSize(textSize, isMobile)}\n                type={'horizontal'}\n                iconType=\"navigation\"\n                open={false}\n            />\n        </span>\n    );\n\n    if (!url && !onClick) {\n        content = textMarkup;\n    } else if (url) {\n        content = (\n            <a\n                className={b('link')}\n                href={url}\n                {...getLinkProps(url, hostname)}\n                onClick={onClick}\n                title={urlTitle}\n            >\n                {insideClickableContent}\n            </a>\n        );\n    } else if (onClick) {\n        content = (\n            <button className={b('link')} onClick={onClick} title={urlTitle}>\n                {insideClickableContent}\n            </button>\n        );\n    }\n\n    return (\n        <React.Fragment>\n            {anchor && <Anchor id={anchor} className={b('anchor')} />}\n            {React.createElement(\n                getHeaderTag(textSize),\n                {\n                    className: b({size: textSize, justify, 'reset-margin': resetMargin}, className),\n                    'data-qa': `${qa}-header`,\n                },\n                content,\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default TitleItem;\n"]}
+{"version":3,"file":"TitleItem.js","sourceRoot":"../../../../src","sources":["components/Title/TitleItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {ToggleArrow, YFMWrapper} from '../';\nimport {LocationContext} from '../../context/locationContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useAnalytics} from '../../hooks';\nimport {AnalyticsEventsBase, QAProps, TextSize, TitleItemProps} from '../../models';\nimport {block, getHeaderTag, getLinkProps} from '../../utils';\nimport Anchor from '../Anchor/Anchor';\n\nimport './TitleItem.scss';\n\nconst b = block('title-item');\n\nexport function getArrowSize(size: TextSize, isMobile: boolean) {\n    switch (size) {\n        case 'xs':\n            return 13;\n        case 's':\n            return 16;\n        case 'sm':\n        case 'm':\n            return isMobile ? 22 : 24;\n        case 'l':\n            return isMobile ? 26 : 38;\n        default:\n            return 20;\n    }\n}\n\nexport interface TitleItemFullProps extends TitleItemProps, QAProps, AnalyticsEventsBase {\n    className?: string;\n    onClick?: () => void;\n    resetMargin?: boolean;\n}\n\nconst TitleItem = (props: TitleItemFullProps) => {\n    const isMobile = React.useContext(MobileContext);\n\n    const {\n        textSize = 'm',\n        text,\n        anchor,\n        justify,\n        url,\n        onClick,\n        custom,\n        className,\n        qa,\n        resetMargin = true,\n        urlTitle,\n        analyticsEvents,\n    } = props;\n\n    const handleAnalytics = useAnalytics();\n\n    const {hostname} = React.useContext(LocationContext);\n    const textMarkup = (\n        <React.Fragment>\n            <YFMWrapper\n                className={b('text')}\n                contentClassName={b('text')}\n                content={text}\n                modifiers={{\n                    constructor: true,\n                }}\n            />\n            {custom && (\n                <React.Fragment>\n                    &nbsp;\n                    <span className={b('custom')}>{custom}</span>\n                </React.Fragment>\n            )}\n        </React.Fragment>\n    );\n    let content: React.ReactNode;\n\n    const insideClickableContent = (\n        <span className={b('wrapper')}>\n            {textMarkup}\n            &nbsp;\n            <ToggleArrow\n                className={b('arrow', {size: textSize})}\n                size={getArrowSize(textSize, isMobile)}\n                type={'horizontal'}\n                iconType=\"navigation\"\n                open={false}\n            />\n        </span>\n    );\n\n    const handleClick = () => {\n        if (analyticsEvents) {\n            handleAnalytics(analyticsEvents);\n        }\n\n        if (onClick) {\n            onClick();\n        }\n    };\n\n    if (!url && !onClick) {\n        content = textMarkup;\n    } else if (url) {\n        content = (\n            <a\n                className={b('link')}\n                href={url}\n                {...getLinkProps(url, hostname)}\n                onClick={handleClick}\n                title={urlTitle}\n            >\n                {insideClickableContent}\n            </a>\n        );\n    } else if (onClick) {\n        content = (\n            <button className={b('link')} onClick={handleClick} title={urlTitle}>\n                {insideClickableContent}\n            </button>\n        );\n    }\n\n    return (\n        <React.Fragment>\n            {anchor && <Anchor id={anchor} className={b('anchor')} />}\n            {React.createElement(\n                getHeaderTag(textSize),\n                {\n                    className: b({size: textSize, justify, 'reset-margin': resetMargin}, className),\n                    'data-qa': `${qa}-header`,\n                },\n                content,\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default TitleItem;\n"]}

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

@@ -19,7 +19,7 @@ export declare const blockMap: {
     "map-block": ({ map, border, disableShadow, ...props }: import("./models/index.js").MapBlockProps) => import("react/jsx-runtime").JSX.Element;
     "filter-block": ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }: import("./models/index.js").FilterBlockProps) => import("react/jsx-runtime").JSX.Element;
     "form-block": (props: import("./models/index.js").FormBlockProps) => import("react/jsx-runtime").JSX.Element | null;
-    "slider-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, centeredSlides, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: React.PropsWithChildren<import("./blocks/Slider/Slider.js").SliderProps>) => import("react/jsx-runtime").JSX.Element;
+    "slider-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: React.PropsWithChildren<import("./blocks/Slider/Slider.js").SliderProps>) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models/index.js").DividerProps) => import("react/jsx-runtime").JSX.Element;

package/build/cjs/demo/ComponentsControls.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryFn } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;

package/build/cjs/demo/ComponentsControls.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const BackLink_1 = tslib_1.__importDefault(require("../components/BackLink/BackLink.js"));
+const Button_1 = tslib_1.__importDefault(require("../components/Button/Button.js"));
+const Control_1 = tslib_1.__importDefault(require("../components/Control/Control.js"));
+const FileLink_1 = tslib_1.__importDefault(require("../components/FileLink/FileLink.js"));
+const HeaderBreadcrumbs_1 = tslib_1.__importDefault(require("../components/HeaderBreadcrumbs/HeaderBreadcrumbs.js"));
+const Link_1 = tslib_1.__importDefault(require("../components/Link/Link.js"));
+const ToggleArrow_1 = tslib_1.__importDefault(require("../components/ToggleArrow/ToggleArrow.js"));
+const data_json_1 = tslib_1.__importDefault(require("../components/BackLink/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../components/Button/__stories__/data.json"));
+const data_json_3 = tslib_1.__importDefault(require("../components/Control/__stories__/data.json"));
+const data_json_4 = tslib_1.__importDefault(require("../components/FileLink/__stories__/data.json"));
+const data_json_5 = tslib_1.__importDefault(require("../components/HeaderBreadcrumbs/__stories__/data.json"));
+const data_json_6 = tslib_1.__importDefault(require("../components/Link/__stories__/data.json"));
+const data_json_7 = tslib_1.__importDefault(require("../components/ToggleArrow/__stories__/data.json"));
+exports.default = { title: 'Lab/Tokenization/Components/Controls' };
+const LINK_THEMES = ['normal', 'underline', 'back', 'file-link'];
+const CONTROL_THEMES = ['primary', 'secondary', 'link', 'accent'];
+const CONTROL_SIZES = ['xs', 's', 'm', 'l'];
+const FILE_EXTENSIONS = ['example.pdf', 'example.doc', 'example.xls', 'example.ppt', 'example.zip'];
+const Default = () => ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Button \u2014 default" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(Button_1.default, { ...data_json_2.default.default }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Button \u2014 width (max / auto)" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: data_json_2.default.width.map((item, index) => ((0, jsx_runtime_1.jsx)(Button_1.default, { ...item }, index))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Link \u2014 themes" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px', display: 'flex', gap: '24px', flexWrap: 'wrap' }, children: LINK_THEMES.map((theme) => ((0, jsx_runtime_1.jsx)(Link_1.default, { text: `${theme}`, url: "#", theme: theme }, theme))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Link \u2014 with arrow (s / m / l)" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: data_json_6.default.normalArrows.map((item, index) => ((0, jsx_runtime_1.jsx)(Link_1.default, { ...item }, index))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "BackLink" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(BackLink_1.default, { ...data_json_1.default.default.content }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "FileLink \u2014 default" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(FileLink_1.default, { ...data_json_4.default.default.content }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "FileLink \u2014 horizontal / vertical" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '8px', display: 'flex', gap: '24px' }, children: [(0, jsx_runtime_1.jsx)(FileLink_1.default, { ...data_json_4.default.typesThemes.content, type: "horizontal" }), (0, jsx_runtime_1.jsx)(FileLink_1.default, { ...data_json_4.default.typesThemes.content, type: "vertical" })] })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "FileLink \u2014 extensions" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px', display: 'flex', gap: '16px', flexWrap: 'wrap' }, children: FILE_EXTENSIONS.map((href) => ((0, jsx_runtime_1.jsx)(FileLink_1.default, { href: href, text: "Link to file" }, href))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Control \u2014 themes \u00D7 sizes" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        marginTop: '8px',
+                        display: 'grid',
+                        gridTemplateColumns: 'auto repeat(4, 40px)',
+                        gap: '8px',
+                        alignItems: 'center',
+                    }, children: [(0, jsx_runtime_1.jsx)("span", {}), CONTROL_SIZES.map((size) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '12px', textAlign: 'center' }, children: size }, size))), CONTROL_THEMES.map((theme) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '12px' }, children: theme }), CONTROL_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(Control_1.default, { ...data_json_3.default.sizesThemes.content, theme: theme, size: size }, `${theme}-${size}`)))] }, theme)))] })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ToggleArrow \u2014 closed / open" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '8px', display: 'flex', gap: '24px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(ToggleArrow_1.default, { ...data_json_7.default.vertical.content }), (0, jsx_runtime_1.jsx)(ToggleArrow_1.default, { ...data_json_7.default.vertical.content, open: true }), (0, jsx_runtime_1.jsx)(ToggleArrow_1.default, { ...data_json_7.default.horizontal.content }), (0, jsx_runtime_1.jsx)(ToggleArrow_1.default, { ...data_json_7.default.horizontal.content, open: true })] })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "HeaderBreadcrumbs" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(HeaderBreadcrumbs_1.default, { ...data_json_5.default.default.content }) })] })] }));
+exports.Default = Default;
+//# sourceMappingURL=ComponentsControls.stories.js.map

package/build/cjs/demo/ComponentsControls.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsControls.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsControls.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Meta, StoryFn} from '@storybook/react';\n\nimport BackLink, {BackLinkProps} from '../components/BackLink/BackLink';\nimport Button, {ButtonProps} from '../components/Button/Button';\nimport Control, {ControlProps} from '../components/Control/Control';\nimport FileLink from '../components/FileLink/FileLink';\nimport HeaderBreadcrumbs from '../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport Link, {LinkFullProps} from '../components/Link/Link';\nimport ToggleArrow, {ToggleArrowProps} from '../components/ToggleArrow/ToggleArrow';\nimport {FileLinkProps, HeaderBreadCrumbsProps} from '../models';\n\nimport backLinkData from '../components/BackLink/__stories__/data.json';\nimport buttonData from '../components/Button/__stories__/data.json';\nimport controlData from '../components/Control/__stories__/data.json';\nimport fileLinkData from '../components/FileLink/__stories__/data.json';\nimport headerBreadcrumbsData from '../components/HeaderBreadcrumbs/__stories__/data.json';\nimport linkData from '../components/Link/__stories__/data.json';\nimport toggleArrowData from '../components/ToggleArrow/__stories__/data.json';\n\nexport default {title: 'Lab/Tokenization/Components/Controls'} as Meta;\n\nconst LINK_THEMES: LinkFullProps['theme'][] = ['normal', 'underline', 'back', 'file-link'];\nconst CONTROL_THEMES: ControlProps['theme'][] = ['primary', 'secondary', 'link', 'accent'];\nconst CONTROL_SIZES: ControlProps['size'][] = ['xs', 's', 'm', 'l'];\nconst FILE_EXTENSIONS = ['example.pdf', 'example.doc', 'example.xls', 'example.ppt', 'example.zip'];\n\nexport const Default: StoryFn = () => (\n    <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n        <section>\n            <strong>Button — default</strong>\n            <div style={{marginTop: '8px'}}>\n                <Button {...buttonData.default} />\n            </div>\n        </section>\n        <section>\n            <strong>Button — width (max / auto)</strong>\n            <div style={{marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px'}}>\n                {(buttonData.width as ButtonProps[]).map((item, index) => (\n                    <Button key={index} {...item} />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>Link — themes</strong>\n            <div style={{marginTop: '8px', display: 'flex', gap: '24px', flexWrap: 'wrap'}}>\n                {LINK_THEMES.map((theme) => (\n                    <Link key={theme} text={`${theme}`} url=\"#\" theme={theme} />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>Link — with arrow (s / m / l)</strong>\n            <div style={{marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px'}}>\n                {(linkData.normalArrows as LinkFullProps[]).map((item, index) => (\n                    <Link key={index} {...item} />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>BackLink</strong>\n            <div style={{marginTop: '8px'}}>\n                <BackLink {...(backLinkData.default.content as BackLinkProps)} />\n            </div>\n        </section>\n        <section>\n            <strong>FileLink — default</strong>\n            <div style={{marginTop: '8px'}}>\n                <FileLink {...fileLinkData.default.content} />\n            </div>\n        </section>\n        <section>\n            <strong>FileLink — horizontal / vertical</strong>\n            <div style={{marginTop: '8px', display: 'flex', gap: '24px'}}>\n                <FileLink\n                    {...(fileLinkData.typesThemes.content as FileLinkProps)}\n                    type=\"horizontal\"\n                />\n                <FileLink\n                    {...(fileLinkData.typesThemes.content as FileLinkProps)}\n                    type=\"vertical\"\n                />\n            </div>\n        </section>\n        <section>\n            <strong>FileLink — extensions</strong>\n            <div style={{marginTop: '8px', display: 'flex', gap: '16px', flexWrap: 'wrap'}}>\n                {FILE_EXTENSIONS.map((href) => (\n                    <FileLink key={href} href={href} text=\"Link to file\" />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>Control — themes × sizes</strong>\n            <div\n                style={{\n                    marginTop: '8px',\n                    display: 'grid',\n                    gridTemplateColumns: 'auto repeat(4, 40px)',\n                    gap: '8px',\n                    alignItems: 'center',\n                }}\n            >\n                <span />\n                {CONTROL_SIZES.map((size) => (\n                    <span key={size} style={{fontSize: '12px', textAlign: 'center'}}>\n                        {size}\n                    </span>\n                ))}\n                {CONTROL_THEMES.map((theme) => (\n                    <React.Fragment key={theme}>\n                        <span style={{fontSize: '12px'}}>{theme}</span>\n                        {CONTROL_SIZES.map((size) => (\n                            <Control\n                                key={`${theme}-${size}`}\n                                {...(controlData.sizesThemes.content as ControlProps)}\n                                theme={theme}\n                                size={size}\n                            />\n                        ))}\n                    </React.Fragment>\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>ToggleArrow — closed / open</strong>\n            <div style={{marginTop: '8px', display: 'flex', gap: '24px', alignItems: 'center'}}>\n                <ToggleArrow {...(toggleArrowData.vertical.content as ToggleArrowProps)} />\n                <ToggleArrow {...(toggleArrowData.vertical.content as ToggleArrowProps)} open />\n                <ToggleArrow {...(toggleArrowData.horizontal.content as ToggleArrowProps)} />\n                <ToggleArrow {...(toggleArrowData.horizontal.content as ToggleArrowProps)} open />\n            </div>\n        </section>\n        <section>\n            <strong>HeaderBreadcrumbs</strong>\n            <div style={{marginTop: '8px'}}>\n                <HeaderBreadcrumbs\n                    {...(headerBreadcrumbsData.default.content as HeaderBreadCrumbsProps)}\n                />\n            </div>\n        </section>\n    </div>\n);\n"]}

package/build/cjs/demo/ComponentsLayout.stories.css

@@ -0,0 +1,13 @@
+.demo-balanced-masonry {
+  display: flex;
+}
+
+.demo-balanced-masonry-column {
+  margin: 5px;
+}
+
+.demo-balanced-masonry-card {
+  min-height: auto;
+  height: auto;
+  margin-bottom: 10px;
+}

package/build/cjs/demo/ComponentsLayout.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryFn } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;

package/build/cjs/demo/ComponentsLayout.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BalancedMasonry_1 = tslib_1.__importDefault(require("../components/BalancedMasonry/BalancedMasonry.js"));
+const CardBase_1 = tslib_1.__importDefault(require("../components/CardBase/CardBase.js"));
+const ErrorWrapper_1 = tslib_1.__importDefault(require("../components/ErrorWrapper/ErrorWrapper.js"));
+const FullWidthBackground_1 = tslib_1.__importDefault(require("../components/FullWidthBackground/FullWidthBackground.js"));
+const Table_1 = tslib_1.__importDefault(require("../components/Table/Table.js"));
+const UnpublishedLabel_1 = tslib_1.__importDefault(require("../components/UnpublishedLabel/UnpublishedLabel.js"));
+const constants_1 = require("../constants.js");
+const data_json_1 = tslib_1.__importDefault(require("../components/BalancedMasonry/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../components/ErrorWrapper/__stories__/data.json"));
+const data_json_3 = tslib_1.__importDefault(require("../components/FullWidthBackground/__stories__/data.json"));
+const data_json_4 = tslib_1.__importDefault(require("../components/Table/__stories__/data.json"));
+const data_json_5 = tslib_1.__importDefault(require("../components/UnpublishedLabel/__stories__/data.json"));
+const masonryBreakpointCols = {
+    [constants_1.BREAKPOINTS.xs]: 1,
+    [constants_1.BREAKPOINTS.sm]: 2,
+    [constants_1.BREAKPOINTS.md]: 2,
+    [constants_1.BREAKPOINTS.lg]: 3,
+    [constants_1.BREAKPOINTS.xl]: 3,
+};
+exports.default = { title: 'Lab/Tokenization/Components/Layout' };
+const Default = () => ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "FullWidthBackground \u2014 default" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px', height: '100px' }, children: (0, jsx_runtime_1.jsx)(FullWidthBackground_1.default, { ...data_json_3.default.default, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '40px', color: 'white' }, children: "Content" }) }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "FullWidthBackground \u2014 rounded" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px', height: '100px' }, children: (0, jsx_runtime_1.jsx)(FullWidthBackground_1.default, { ...data_json_3.default.rounded, children: (0, jsx_runtime_1.jsx)("div", { style: { padding: '40px', color: 'white' }, children: "Content" }) }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "BalancedMasonry" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(BalancedMasonry_1.default, { className: "demo-balanced-masonry", columnClassName: "demo-balanced-masonry-column", breakpointCols: masonryBreakpointCols, children: data_json_1.default.default.content.children.map((text, index) => ((0, jsx_runtime_1.jsx)(CardBase_1.default, { className: "demo-balanced-masonry-card", children: (0, jsx_runtime_1.jsx)(CardBase_1.default.Content, { children: text }) }, index))) }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Table \u2014 default" }), (0, jsx_runtime_1.jsx)(Table_1.default, { ...data_json_4.default.default.content })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Table \u2014 tick markers" }), (0, jsx_runtime_1.jsx)(Table_1.default, { ...data_json_4.default.tick.content })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "UnpublishedLabel (label)" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(UnpublishedLabel_1.default, { ...data_json_5.default.label.content }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "UnpublishedLabel (line)" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(UnpublishedLabel_1.default, { ...data_json_5.default.line.content }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ErrorWrapper (error state)" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(ErrorWrapper_1.default, { ...data_json_2.default.default.content, handler: () => { }, children: data_json_2.default.default.content.children }) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ErrorWrapper (no error)" }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '8px' }, children: (0, jsx_runtime_1.jsx)(ErrorWrapper_1.default, { ...data_json_2.default.noError.content, handler: () => { }, children: data_json_2.default.noError.content.children }) })] })] }));
+exports.Default = Default;
+//# sourceMappingURL=ComponentsLayout.stories.js.map

package/build/cjs/demo/ComponentsLayout.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsLayout.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsLayout.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport BalancedMasonry, {BalancedMasonryProps} from '../components/BalancedMasonry/BalancedMasonry';\nimport CardBase from '../components/CardBase/CardBase';\nimport ErrorWrapper from '../components/ErrorWrapper/ErrorWrapper';\nimport FullWidthBackground, {\n    FullWidthBackgroundProps,\n} from '../components/FullWidthBackground/FullWidthBackground';\nimport Table from '../components/Table/Table';\nimport UnpublishedLabel, {\n    UnpublishedLabelProps,\n} from '../components/UnpublishedLabel/UnpublishedLabel';\nimport {BREAKPOINTS} from '../constants';\nimport {TableProps} from '../models';\n\nimport balancedMasonryData from '../components/BalancedMasonry/__stories__/data.json';\nimport errorWrapperData from '../components/ErrorWrapper/__stories__/data.json';\nimport fullWidthBackgroundData from '../components/FullWidthBackground/__stories__/data.json';\nimport tableData from '../components/Table/__stories__/data.json';\nimport unpublishedLabelData from '../components/UnpublishedLabel/__stories__/data.json';\n\nimport './ComponentsLayout.stories.scss';\n\nconst masonryBreakpointCols: BalancedMasonryProps['breakpointCols'] = {\n    [BREAKPOINTS.xs]: 1,\n    [BREAKPOINTS.sm]: 2,\n    [BREAKPOINTS.md]: 2,\n    [BREAKPOINTS.lg]: 3,\n    [BREAKPOINTS.xl]: 3,\n};\n\nexport default {title: 'Lab/Tokenization/Components/Layout'} as Meta;\n\nexport const Default: StoryFn = () => (\n    <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n        <section>\n            <strong>FullWidthBackground — default</strong>\n            <div style={{marginTop: '8px', height: '100px'}}>\n                <FullWidthBackground\n                    {...(fullWidthBackgroundData.default as FullWidthBackgroundProps)}\n                >\n                    <div style={{padding: '40px', color: 'white'}}>Content</div>\n                </FullWidthBackground>\n            </div>\n        </section>\n        <section>\n            <strong>FullWidthBackground — rounded</strong>\n            <div style={{marginTop: '8px', height: '100px'}}>\n                <FullWidthBackground\n                    {...(fullWidthBackgroundData.rounded as FullWidthBackgroundProps)}\n                >\n                    <div style={{padding: '40px', color: 'white'}}>Content</div>\n                </FullWidthBackground>\n            </div>\n        </section>\n        <section>\n            <strong>BalancedMasonry</strong>\n            <div style={{marginTop: '8px'}}>\n                <BalancedMasonry\n                    className=\"demo-balanced-masonry\"\n                    columnClassName=\"demo-balanced-masonry-column\"\n                    breakpointCols={masonryBreakpointCols}\n                >\n                    {balancedMasonryData.default.content.children.map((text, index) => (\n                        <CardBase key={index} className=\"demo-balanced-masonry-card\">\n                            <CardBase.Content>{text}</CardBase.Content>\n                        </CardBase>\n                    ))}\n                </BalancedMasonry>\n            </div>\n        </section>\n        <section>\n            <strong>Table — default</strong>\n            <Table {...(tableData.default.content as TableProps)} />\n        </section>\n        <section>\n            <strong>Table — tick markers</strong>\n            <Table {...(tableData.tick.content as TableProps)} />\n        </section>\n        <section>\n            <strong>UnpublishedLabel (label)</strong>\n            <div style={{marginTop: '8px'}}>\n                <UnpublishedLabel\n                    {...(unpublishedLabelData.label.content as UnpublishedLabelProps)}\n                />\n            </div>\n        </section>\n        <section>\n            <strong>UnpublishedLabel (line)</strong>\n            <div style={{marginTop: '8px'}}>\n                <UnpublishedLabel\n                    {...(unpublishedLabelData.line.content as UnpublishedLabelProps)}\n                />\n            </div>\n        </section>\n        <section>\n            <strong>ErrorWrapper (error state)</strong>\n            <div style={{marginTop: '8px'}}>\n                <ErrorWrapper {...errorWrapperData.default.content} handler={() => {}}>\n                    {errorWrapperData.default.content.children}\n                </ErrorWrapper>\n            </div>\n        </section>\n        <section>\n            <strong>ErrorWrapper (no error)</strong>\n            <div style={{marginTop: '8px'}}>\n                <ErrorWrapper {...errorWrapperData.noError.content} handler={() => {}}>\n                    {errorWrapperData.noError.content.children}\n                </ErrorWrapper>\n            </div>\n        </section>\n    </div>\n);\n"]}

package/build/cjs/demo/ComponentsText.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryFn } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;

package/build/cjs/demo/ComponentsText.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../.storybook/utils.js");
+const Author_1 = tslib_1.__importDefault(require("../components/Author/Author.js"));
+const ContentList_1 = tslib_1.__importDefault(require("../components/ContentList/ContentList.js"));
+const MetaInfo_1 = tslib_1.__importDefault(require("../components/MetaInfo/MetaInfo.js"));
+const Title_1 = tslib_1.__importDefault(require("../components/Title/Title.js"));
+const YFMWrapper_1 = tslib_1.__importDefault(require("../components/YFMWrapper/YFMWrapper.js"));
+const models_1 = require("../models/index.js");
+const data_json_1 = tslib_1.__importDefault(require("../components/Author/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../components/ContentList/__stories__/data.json"));
+const data_json_3 = tslib_1.__importDefault(require("../components/MetaInfo/__stories__/data.json"));
+const data_json_4 = tslib_1.__importDefault(require("../components/Title/__stories__/data.json"));
+const data_json_5 = tslib_1.__importDefault(require("../components/YFMWrapper/__stories__/data.json"));
+exports.default = { title: 'Lab/Tokenization/Components/Text' };
+const defaultTitleArgs = {
+    ...data_json_4.default.default.content,
+    subtitle: (0, utils_1.yfmTransform)(data_json_4.default.default.content.subtitle),
+};
+const transformContentList = (item) => (0, utils_1.blockTransform)(item);
+const Default = () => ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px' }, children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 default" }), (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 sizes (l \u2192 xs)" }), (0, jsx_runtime_1.jsx)("div", { children: Object.entries(data_json_4.default.sizes).map(([size, props]) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: '32px' }, children: (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs, title: props }) }, size))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Title \u2014 with link" }), (0, jsx_runtime_1.jsx)(Title_1.default, { ...defaultTitleArgs, title: data_json_4.default.titleLink.content.title })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "YFMWrapper" }), (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { ...data_json_5.default.default.content })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Author \u2014 column" }), (0, jsx_runtime_1.jsx)(Author_1.default, { ...data_json_1.default.default.content })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Author \u2014 line" }), (0, jsx_runtime_1.jsx)(Author_1.default, { ...data_json_1.default.default.content, type: models_1.AuthorType.Line })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ContentList \u2014 default" }), (0, jsx_runtime_1.jsx)(ContentList_1.default, { ...transformContentList(data_json_2.default.default) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ContentList \u2014 without icon" }), (0, jsx_runtime_1.jsx)(ContentList_1.default, { ...transformContentList(data_json_2.default.withoutIcon) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "ContentList \u2014 sizes (s / m / l)" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: data_json_2.default.sizes.map((item, index) => ((0, jsx_runtime_1.jsx)(ContentList_1.default, { ...transformContentList(item) }, index))) })] }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "MetaInfo" }), (0, jsx_runtime_1.jsx)(MetaInfo_1.default, { ...data_json_3.default.default.content })] })] }));
+exports.Default = Default;
+//# sourceMappingURL=ComponentsText.stories.js.map

package/build/cjs/demo/ComponentsText.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsText.stories.js","sourceRoot":"../../../src","sources":["demo/ComponentsText.stories.tsx"],"names":[],"mappings":";;;;;AAEA,qDAAoE;AACpE,oFAAiD;AACjD,mGAAgE;AAChE,0FAAuD;AACvD,iFAA8C;AAC9C,gGAA6D;AAC7D,+CAAoF;AAEpF,mGAAoE;AACpE,wGAA8E;AAC9E,qGAAwE;AACxE,kGAAkE;AAClE,uGAA4E;AAE5E,kBAAe,EAAC,KAAK,EAAE,kCAAkC,EAAS,CAAC;AAEnE,MAAM,gBAAgB,GAAG;IACrB,GAAG,mBAAS,CAAC,OAAO,CAAC,OAAO;IAC5B,QAAQ,EAAE,IAAA,oBAAY,EAAC,mBAAS,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;CAC7D,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,IAAa,EAAE,EAAE,CAC3C,IAAA,sBAAc,EAAC,IAA8B,CAAqB,CAAC;AAEhE,MAAM,OAAO,GAAY,GAAG,EAAE,CAAC,CAClC,iCAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,aAChF,gDACI,sEAAgC,EAChC,uBAAC,eAAK,OAAK,gBAAgB,GAAI,IACzB,EACV,gDACI,kFAAuC,EACvC,0CACK,MAAM,CAAC,OAAO,CAAC,mBAAS,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACpD,gCAAgB,KAAK,EAAE,EAAC,aAAa,EAAE,MAAM,EAAC,YAC1C,uBAAC,eAAK,OAAK,gBAAgB,EAAE,KAAK,EAAE,KAAuB,GAAI,IADzD,IAAI,CAER,CACT,CAAC,GACA,IACA,EACV,gDACI,wEAAkC,EAClC,uBAAC,eAAK,OACE,gBAAgB,EACpB,KAAK,EAAE,mBAAS,CAAC,SAAS,CAAC,OAAO,CAAC,KAAuB,GAC5D,IACI,EACV,gDACI,4DAA2B,EAC3B,uBAAC,oBAAU,OAAK,mBAAc,CAAC,OAAO,CAAC,OAAO,GAAI,IAC5C,EACV,gDACI,sEAAgC,EAChC,uBAAC,gBAAM,OAAK,mBAAU,CAAC,OAAO,CAAC,OAAO,GAAI,IACpC,EACV,gDACI,oEAA8B,EAC9B,uBAAC,gBAAM,OAAK,mBAAU,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,mBAAU,CAAC,IAAI,GAAI,IAC3D,EACV,gDACI,4EAAsC,EACtC,uBAAC,qBAAW,OAAK,oBAAoB,CAAC,mBAAe,CAAC,OAAO,CAAC,GAAI,IAC5D,EACV,gDACI,iFAA2C,EAC3C,uBAAC,qBAAW,OAAK,oBAAoB,CAAC,mBAAe,CAAC,WAAW,CAAC,GAAI,IAChE,EACV,gDACI,sFAAgD,EAChD,gCAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,YAC9D,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,uBAAC,qBAAW,OAAiB,oBAAoB,CAAC,IAAI,CAAC,IAArC,KAAK,CAAoC,CAC9D,CAAC,GACA,IACA,EACV,gDACI,0DAAyB,EACzB,uBAAC,kBAAQ,OAAK,mBAAY,CAAC,OAAO,CAAC,OAAO,GAAI,IACxC,IACR,CACT,CAAC;AAxDW,QAAA,OAAO,WAwDlB","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform, yfmTransform} from '../../.storybook/utils';\nimport Author from '../components/Author/Author';\nimport ContentList from '../components/ContentList/ContentList';\nimport MetaInfo from '../components/MetaInfo/MetaInfo';\nimport Title from '../components/Title/Title';\nimport YFMWrapper from '../components/YFMWrapper/YFMWrapper';\nimport {AuthorType, ContentListProps, CustomBlock, TitleItemProps} from '../models';\n\nimport authorData from '../components/Author/__stories__/data.json';\nimport contentListData from '../components/ContentList/__stories__/data.json';\nimport metaInfoData from '../components/MetaInfo/__stories__/data.json';\nimport titleData from '../components/Title/__stories__/data.json';\nimport yfmWrapperData from '../components/YFMWrapper/__stories__/data.json';\n\nexport default {title: 'Lab/Tokenization/Components/Text'} as Meta;\n\nconst defaultTitleArgs = {\n    ...titleData.default.content,\n    subtitle: yfmTransform(titleData.default.content.subtitle),\n};\n\nconst transformContentList = (item: unknown) =>\n    blockTransform(item as unknown as CustomBlock) as ContentListProps;\n\nexport const Default: StoryFn = () => (\n    <div style={{padding: '40px', display: 'flex', flexDirection: 'column', gap: '48px'}}>\n        <section>\n            <strong>Title — default</strong>\n            <Title {...defaultTitleArgs} />\n        </section>\n        <section>\n            <strong>Title — sizes (l → xs)</strong>\n            <div>\n                {Object.entries(titleData.sizes).map(([size, props]) => (\n                    <div key={size} style={{paddingBottom: '32px'}}>\n                        <Title {...defaultTitleArgs} title={props as TitleItemProps} />\n                    </div>\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>Title — with link</strong>\n            <Title\n                {...defaultTitleArgs}\n                title={titleData.titleLink.content.title as TitleItemProps}\n            />\n        </section>\n        <section>\n            <strong>YFMWrapper</strong>\n            <YFMWrapper {...yfmWrapperData.default.content} />\n        </section>\n        <section>\n            <strong>Author — column</strong>\n            <Author {...authorData.default.content} />\n        </section>\n        <section>\n            <strong>Author — line</strong>\n            <Author {...authorData.default.content} type={AuthorType.Line} />\n        </section>\n        <section>\n            <strong>ContentList — default</strong>\n            <ContentList {...transformContentList(contentListData.default)} />\n        </section>\n        <section>\n            <strong>ContentList — without icon</strong>\n            <ContentList {...transformContentList(contentListData.withoutIcon)} />\n        </section>\n        <section>\n            <strong>ContentList — sizes (s / m / l)</strong>\n            <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>\n                {contentListData.sizes.map((item, index) => (\n                    <ContentList key={index} {...transformContentList(item)} />\n                ))}\n            </div>\n        </section>\n        <section>\n            <strong>MetaInfo</strong>\n            <MetaInfo {...metaInfoData.default.content} />\n        </section>\n    </div>\n);\n"]}

package/build/cjs/demo/ContentAndData.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { CustomConfig, NavigationData } from "../models/index.js";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    navigation: NavigationData;
+    custom?: CustomConfig;
+}>;

package/build/cjs/demo/ContentAndData.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../.storybook/utils.js");
+const PageConstructor_1 = require("../containers/PageConstructor/index.js");
+const CustomComponent_1 = require("../navigation/__stories__/CustomComponent/CustomComponent.js");
+const data_json_1 = tslib_1.__importDefault(require("../blocks/ContentLayout/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../blocks/FoldableList/__stories__/data.json"));
+const data_json_3 = tslib_1.__importDefault(require("../blocks/Questions/__stories__/data.json"));
+const data_json_4 = tslib_1.__importDefault(require("../blocks/Table/__stories__/data.json"));
+const data_json_5 = tslib_1.__importDefault(require("../blocks/Tabs/__stories__/data.json"));
+const data_json_6 = tslib_1.__importDefault(require("../navigation/__stories__/data.json"));
+exports.default = {
+    title: 'Lab/Tokenization/Blocks/ContentAndData',
+    component: PageConstructor_1.PageConstructor,
+};
+const Template = ({ navigation, custom = {}, }) => ((0, jsx_runtime_1.jsx)(PageConstructor_1.PageConstructor, { navigation: navigation, custom: custom, content: {
+        blocks: [
+            // content-layout-block: default text only
+            (0, utils_1.blockTransform)(data_json_1.default.default),
+            // content-layout-block: centered
+            (0, utils_1.blockTransform)(data_json_1.default.textAlignCenter),
+            // content-layout-block: with background color
+            (0, utils_1.blockTransform)(data_json_1.default.withBackgroundColor),
+            // content-layout-block: with background image + color
+            (0, utils_1.blockTransform)(data_json_1.default.withImageAndBackgroundColor),
+            // content-layout-block: dark monochrome theme
+            (0, utils_1.blockTransform)(data_json_1.default.theme[0]),
+            // content-layout-block: light monochrome theme
+            (0, utils_1.blockTransform)(data_json_1.default.theme[1]),
+            // content-layout-block variants with list/links/buttons
+            ...data_json_1.default.contentVariables.map(utils_1.blockTransform),
+            // tabs-block: default (all tab types: image, video, youtube)
+            (0, utils_1.blockTransform)(data_json_5.default.default.content),
+            // questions-block: default with links
+            (0, utils_1.blockTransform)(data_json_3.default.default.content),
+            // questions-block: with bullet list items
+            (0, utils_1.blockTransform)(data_json_3.default.textWithListBullet.content),
+            // foldable-list-block: default
+            (0, utils_1.blockTransform)(data_json_2.default.default),
+            // foldable-list-block: with bullet list items
+            (0, utils_1.blockTransform)(data_json_2.default.textWithListBullet),
+            // foldable-list-block: with dash list items
+            (0, utils_1.blockTransform)(data_json_2.default.textWithListDash),
+            // table-block: numeric values (0/1)
+            (0, utils_1.blockTransform)(data_json_4.default.default.content),
+            // table-block: tick markers
+            (0, utils_1.blockTransform)(data_json_4.default.tick.content),
+        ],
+    } }));
+exports.Default = Template.bind({});
+exports.Default.args = {
+    custom: {
+        navigation: {
+            'custom-item': CustomComponent_1.CustomComponent,
+        },
+    },
+    navigation: {
+        ...data_json_6.default.navigation,
+        header: {
+            ...data_json_6.default.navigation.header,
+            rightItems: [
+                ...data_json_6.default.navigation.header.rightItems,
+                {
+                    type: 'custom-item',
+                },
+            ],
+        },
+    },
+};
+//# sourceMappingURL=ContentAndData.stories.js.map

package/build/cjs/demo/ContentAndData.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentAndData.stories.js","sourceRoot":"../../../src","sources":["demo/ContentAndData.stories.tsx"],"names":[],"mappings":";;;;;AAEA,qDAAsD;AACtD,4EAA8D;AAE9D,kGAA0F;AAE1F,sGAA8E;AAC9E,qGAA4E;AAC5E,kGAAsE;AACtE,8FAA8D;AAC9D,6FAA4D;AAC5D,4FAA0D;AAE1D,kBAAe;IACX,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,iCAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,uBAAC,iCAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,0CAA0C;YAC1C,IAAA,sBAAc,EAAC,mBAAiB,CAAC,OAAO,CAAC;YACzC,iCAAiC;YACjC,IAAA,sBAAc,EAAC,mBAAiB,CAAC,eAAe,CAAC;YACjD,8CAA8C;YAC9C,IAAA,sBAAc,EAAC,mBAAiB,CAAC,mBAAmB,CAAC;YACrD,sDAAsD;YACtD,IAAA,sBAAc,EAAC,mBAAiB,CAAC,2BAA2B,CAAC;YAC7D,8CAA8C;YAC9C,IAAA,sBAAc,EAAC,mBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1C,+CAA+C;YAC/C,IAAA,sBAAc,EAAC,mBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1C,wDAAwD;YACxD,GAAG,mBAAiB,CAAC,gBAAgB,CAAC,GAAG,CAAC,sBAAc,CAAC;YAEzD,6DAA6D;YAC7D,IAAA,sBAAc,EAAC,mBAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;YAExC,sCAAsC;YACtC,IAAA,sBAAc,EAAC,mBAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,0CAA0C;YAC1C,IAAA,sBAAc,EAAC,mBAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC;YAExD,+BAA+B;YAC/B,IAAA,sBAAc,EAAC,mBAAgB,CAAC,OAAO,CAAC;YACxC,8CAA8C;YAC9C,IAAA,sBAAc,EAAC,mBAAgB,CAAC,kBAAkB,CAAC;YACnD,4CAA4C;YAC5C,IAAA,sBAAc,EAAC,mBAAgB,CAAC,gBAAgB,CAAC;YAEjD,oCAAoC;YACpC,IAAA,sBAAc,EAAC,mBAAS,CAAC,OAAO,CAAC,OAAO,CAAC;YACzC,4BAA4B;YAC5B,IAAA,sBAAc,EAAC,mBAAS,CAAC,IAAI,CAAC,OAAO,CAAC;SACzC;KACW,GAEtB,CACL,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACX,MAAM,EAAE;QACJ,UAAU,EAAE;YACR,aAAa,EAAE,iCAAe;SACjC;KACJ;IACD,UAAU,EAAE;QACR,GAAG,mBAAO,CAAC,UAAU;QACrB,MAAM,EAAE;YACJ,GAAG,mBAAO,CAAC,UAAU,CAAC,MAAM;YAC5B,UAAU,EAAE;gBACR,GAAG,mBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU;gBACvC;oBACI,IAAI,EAAE,aAAa;iBACtB;aACJ;SACJ;KACc;CACtB,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\nimport {CustomComponent} from '../navigation/__stories__/CustomComponent/CustomComponent';\n\nimport contentLayoutData from '../blocks/ContentLayout/__stories__/data.json';\nimport foldableListData from '../blocks/FoldableList/__stories__/data.json';\nimport questionsData from '../blocks/Questions/__stories__/data.json';\nimport tableData from '../blocks/Table/__stories__/data.json';\nimport tabsData from '../blocks/Tabs/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n    title: 'Lab/Tokenization/Blocks/ContentAndData',\n    component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n    navigation,\n    custom = {},\n}) => (\n    <PageConstructor\n        navigation={navigation}\n        custom={custom}\n        content={\n            {\n                blocks: [\n                    // content-layout-block: default text only\n                    blockTransform(contentLayoutData.default),\n                    // content-layout-block: centered\n                    blockTransform(contentLayoutData.textAlignCenter),\n                    // content-layout-block: with background color\n                    blockTransform(contentLayoutData.withBackgroundColor),\n                    // content-layout-block: with background image + color\n                    blockTransform(contentLayoutData.withImageAndBackgroundColor),\n                    // content-layout-block: dark monochrome theme\n                    blockTransform(contentLayoutData.theme[0]),\n                    // content-layout-block: light monochrome theme\n                    blockTransform(contentLayoutData.theme[1]),\n                    // content-layout-block variants with list/links/buttons\n                    ...contentLayoutData.contentVariables.map(blockTransform),\n\n                    // tabs-block: default (all tab types: image, video, youtube)\n                    blockTransform(tabsData.default.content),\n\n                    // questions-block: default with links\n                    blockTransform(questionsData.default.content),\n                    // questions-block: with bullet list items\n                    blockTransform(questionsData.textWithListBullet.content),\n\n                    // foldable-list-block: default\n                    blockTransform(foldableListData.default),\n                    // foldable-list-block: with bullet list items\n                    blockTransform(foldableListData.textWithListBullet),\n                    // foldable-list-block: with dash list items\n                    blockTransform(foldableListData.textWithListDash),\n\n                    // table-block: numeric values (0/1)\n                    blockTransform(tableData.default.content),\n                    // table-block: tick markers\n                    blockTransform(tableData.tick.content),\n                ],\n            } as PageContent\n        }\n    />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n    custom: {\n        navigation: {\n            'custom-item': CustomComponent,\n        },\n    },\n    navigation: {\n        ...navData.navigation,\n        header: {\n            ...navData.navigation.header,\n            rightItems: [\n                ...navData.navigation.header.rightItems,\n                {\n                    type: 'custom-item',\n                },\n            ],\n        },\n    } as NavigationData,\n};\n"]}

package/build/cjs/demo/FeaturesAndCards.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { CustomConfig, NavigationData } from "../models/index.js";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    navigation: NavigationData;
+    custom?: CustomConfig;
+}>;