@gravity-ui/blog-constructor 1.0.0-aplha.0

package/build/esm/components/PostInfo/PostInfo.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { PostData } from '../../models/common';
+import './PostInfo.css';
+export type BlogMetrikaGoals = {
+    sharing?: string;
+    save?: string;
+};
+type PostInfoProps = {
+    postId: PostData['id'];
+    readingTime: PostData['readingTime'];
+    date: PostData['date'];
+    theme?: 'light' | 'dark';
+    metrikaGoals?: BlogMetrikaGoals;
+    dataQa?: string;
+};
+/**
+ *  Blog post info panel component
+ *
+ * @param postId - post id
+ * @param readingTime - post reading time
+ * @param date - post create date
+ * @param theme - theme name
+ * @param metrikaGoals - metrika goals name
+ * @param dataQa - test-attr
+ *
+ * @returns jsx
+ */
+export declare const PostInfo: React.FC<PostInfoProps>;
+export {};

package/build/esm/components/PostInfo/PostInfo.js

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import { PostPageContext } from '../../contexts/PostPageContext';
+import { Date } from './components/Date';
+import { ReadingTime } from './components/ReadingTime';
+import { Sharing } from './components/Sharing';
+import { Save } from './components/Save';
+import { block } from '../../utils/cn';
+import './PostInfo.css';
+const b = block('post-info');
+/**
+ *  Blog post info panel component
+ *
+ * @param postId - post id
+ * @param readingTime - post reading time
+ * @param date - post create date
+ * @param theme - theme name
+ * @param metrikaGoals - metrika goals name
+ * @param dataQa - test-attr
+ *
+ * @returns jsx
+ */
+export const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, dataQa, }) => {
+    const { likes } = useContext(PostPageContext);
+    return (React.createElement("div", { className: b('container', { theme }) },
+        date && React.createElement(Date, { date: date }),
+        readingTime && React.createElement(ReadingTime, { readingTime: readingTime }),
+        React.createElement(Sharing, { metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.sharing, theme: theme }),
+        likes && (React.createElement(Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, dataQa: dataQa }))));
+};

package/build/esm/components/PostInfo/SuggestPostInfo.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PostData, ToggleLikeCallbackType } from '../../models/common';
+import './PostInfo.css';
+export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'> {
+    postId: PostData['blogPostId'];
+    size?: 's' | 'm';
+    dataQa?: string;
+    likes?: {
+        likesCount?: number;
+        hasUserLike?: boolean;
+        toggleLike?: ToggleLikeCallbackType;
+    };
+}
+/**
+ * Suggest blog card info component
+ *
+ * @param postId - post id
+ * @param date - post create date
+ * @param readingTime - post reading time
+ * @param hasUserLike - flag that the user liked the post
+ * @param likes - likes count
+ * @param dataQa - test-attr
+ * @param size - text size
+ * @param isModernIcon - flag what we need render 'bookmark' icon
+ *
+ * @returns jsx
+ */
+export declare const SuggestPostInfo: React.FC<SuggestPostInfoProps>;

package/build/esm/components/PostInfo/SuggestPostInfo.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useLikes } from '../../hooks/useLikes';
+import { Date } from './components/Date';
+import { ReadingTime } from './components/ReadingTime';
+import { Save } from './components/Save';
+import { block } from '../../utils/cn';
+import './PostInfo.css';
+const b = block('post-info');
+/**
+ * Suggest blog card info component
+ *
+ * @param postId - post id
+ * @param date - post create date
+ * @param readingTime - post reading time
+ * @param hasUserLike - flag that the user liked the post
+ * @param likes - likes count
+ * @param dataQa - test-attr
+ * @param size - text size
+ * @param isModernIcon - flag what we need render 'bookmark' icon
+ *
+ * @returns jsx
+ */
+export const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', dataQa, }) => {
+    const { hasUserLike, likesCount, handleLike } = useLikes({
+        hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
+        count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
+        toggleLikeCallback: likes === null || likes === void 0 ? void 0 : likes.toggleLike,
+        postId: postId,
+    });
+    return (React.createElement("div", { className: b('container') },
+        React.createElement("div", { className: b('suggest-container') },
+            date && React.createElement(Date, { date: date, size: size }),
+            readingTime && React.createElement(ReadingTime, { readingTime: readingTime, size: size })),
+        likes && postId && (React.createElement(Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, dataQa: dataQa }))));
+};

package/build/esm/components/PostInfo/components/Date.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '../PostInfo.css';
+type DateProps = {
+    date: string | number;
+    size?: 's' | 'm';
+};
+export declare const Date: React.FC<DateProps>;
+export {};

package/build/esm/components/PostInfo/components/Date.js

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+import { LocaleContext } from '../../../contexts/LocaleContext';
+import { format } from '../../../utils/date';
+import { block } from '../../../utils/cn';
+import '../PostInfo.css';
+const b = block('post-info');
+export const Date = ({ date, size = 's' }) => {
+    const { locale } = useContext(LocaleContext);
+    return React.createElement("div", { className: b('item', { size }) }, format(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code));
+};

package/build/esm/components/PostInfo/components/ReadingTime.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '../PostInfo.css';
+type ReadingTimeProps = {
+    readingTime: number;
+    size?: 's' | 'm';
+};
+export declare const ReadingTime: React.FC<ReadingTimeProps>;
+export {};

package/build/esm/components/PostInfo/components/ReadingTime.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { i18, Keyset } from '../../../i18n';
+import { Time } from '../../../icons/Time';
+import { block } from '../../../utils/cn';
+import '../PostInfo.css';
+const b = block('post-info');
+const ICON_SIZE = 16;
+export const ReadingTime = ({ readingTime, size = 's' }) => (React.createElement("div", { className: b('item', { size }) },
+    React.createElement("span", { className: b('icon') },
+        React.createElement(Icon, { data: Time, size: ICON_SIZE, className: b('icon-color') })),
+    i18(Keyset.ContextReadingTime, { count: readingTime })));

package/build/esm/components/PostInfo/components/Save.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import '../PostInfo.css';
+type SaveProps = {
+    title: string | number;
+    postId: number;
+    hasUserLike: boolean;
+    handleUserLike: () => void;
+    theme?: 'light' | 'dark';
+    metrikaGoal?: string;
+    dataQa?: string;
+    size?: 's' | 'm';
+};
+/**
+ * Components for 'save' blog UI-component
+ *
+ * @param title - post title
+ * @param postId - post id
+ * @param hasUserLike - flag what blog has like from current user
+ * @param metrikaGoal - metrika goal name
+ * @param dataQa - test-attr
+ * @param size - text size
+ *
+ * @returns jsx
+ */
+export declare const Save: React.FC<SaveProps>;
+export {};

package/build/esm/components/PostInfo/components/Save.js

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { postLikeStatus } from '../../../utils/common';
+import { block } from '../../../utils/cn';
+import { MetrikaCounter } from '../../../counters/utils';
+// @ts-ignore
+import metrika from '../../../counters/metrika.js';
+import { Save as SaveIcon } from '../../../icons/Save';
+import { SaveFilled } from '../../../icons/SaveFilled';
+import { UserContext } from '../../../contexts/UserContext';
+import '../PostInfo.css';
+const ICON_SIZE = 16;
+const b = block('post-info');
+/**
+ * Components for 'save' blog UI-component
+ *
+ * @param title - post title
+ * @param postId - post id
+ * @param hasUserLike - flag what blog has like from current user
+ * @param metrikaGoal - metrika goal name
+ * @param dataQa - test-attr
+ * @param size - text size
+ *
+ * @returns jsx
+ */
+export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, dataQa, }) => {
+    const { uid } = useContext(UserContext);
+    return (React.createElement("div", { className: b('item', { size }), onClick: (event) => {
+            // both preventDefault and stopImmediatePropagation required to work properly
+            // https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events
+            event.preventDefault();
+            event.nativeEvent.stopImmediatePropagation();
+            if (!uid) {
+                return;
+            }
+            postLikeStatus(postId, Boolean(hasUserLike));
+            handleUserLike();
+            metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
+        }, "data-qa": `${dataQa ? dataQa + '-' : ''}save` },
+        React.createElement("div", { className: b('content', { cursor: Boolean(uid), theme }) },
+            React.createElement("span", { className: b('icon') },
+                React.createElement(Icon, { data: hasUserLike ? SaveFilled : SaveIcon, size: ICON_SIZE, className: b({ filled: Boolean(hasUserLike) }) })),
+            React.createElement("span", { className: b('title', { cursor: Boolean(uid) }) }, title))));
+};

package/build/esm/components/PostInfo/components/Sharing.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import '../PostInfo.css';
+type SharingProps = {
+    theme?: 'light' | 'dark';
+    metrikaGoal?: string;
+};
+export declare const Sharing: React.FC<SharingProps>;
+export {};

package/build/esm/components/PostInfo/components/Sharing.js

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { SharePopover } from '@gravity-ui/uikit';
+import { MobileContext } from '../../../contexts/MobileContext';
+import { RouterContext } from '../../../contexts/RouterContext';
+import { PostPageContext } from '../../../contexts/PostPageContext';
+import { i18, Keyset } from '../../../i18n';
+import { getAbsolutePath } from '../../../utils/common';
+import { block } from '../../../utils/cn';
+import { MetrikaCounter } from '../../../counters/utils';
+// @ts-ignore
+import metrika from '../../../counters/metrika.js';
+import { ShareArrowUp } from '../../../icons/ShareArrowUp';
+import '../PostInfo.css';
+const b = block('post-info');
+export const Sharing = ({ theme, metrikaGoal }) => {
+    const router = useContext(RouterContext);
+    const isMobile = useContext(MobileContext);
+    const { shareOptions } = useContext(PostPageContext);
+    const handleMetrika = () => {
+        metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
+    };
+    return (React.createElement("div", { className: b('item') },
+        React.createElement("span", { className: b('icon') },
+            React.createElement(SharePopover, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleMetrika }))));
+};

package/build/esm/components/Posts/Posts.css

@@ -0,0 +1,28 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-posts__cards-container, .bc-posts__pinned-container {
+  padding-top: 24px;
+  scroll-margin: 48px;
+}
+.bc-posts__pagination {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 48px;
+  padding-bottom: 64px;
+}
+.bc-posts__more-button {
+  margin-bottom: 12px;
+}
+.bc-posts__error-show-more {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--yc-color-promo-base-tomato);
+  padding-bottom: 12px;
+}
+.bc-posts__paginator {
+  padding-top: 12px;
+}

package/build/esm/components/Posts/Posts.d.ts

@@ -0,0 +1,20 @@
+import React, { MouseEvent } from 'react';
+import { PostData } from '../../models/common';
+import './Posts.css';
+type PostCardProps = {
+    containerId: string;
+    currentPage: number;
+    isShowMoreVisible: boolean;
+    errorShowMore: boolean;
+    postCountOnPage: number;
+    perPageInQuery: number;
+    isFetching: boolean;
+    isShowMoreFetching: boolean;
+    handleShowMore: (value?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void> | void;
+    handlePageChange: (value: number) => Promise<void> | void;
+    postsOnPage?: PostData[];
+    pinnedPostOnPage?: PostData;
+    pageCountForShowSupportButtons?: number;
+};
+export declare const Posts: React.FC<PostCardProps>;
+export {};

package/build/esm/components/Posts/Posts.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { CardLayoutBlock } from '@gravity-ui/page-constructor';
+import { Button } from '@gravity-ui/uikit';
+import { i18, Keyset } from '../../i18n';
+import { Paginator } from '../Paginator/Paginator';
+import { PostCard } from '../PostCard/PostCard';
+import { PostsEmpty } from '../PostsEmpty/PostsEmpty';
+import { block } from '../../utils/cn';
+import './Posts.css';
+const b = block('posts');
+export const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShowMoreVisible, errorShowMore, postCountOnPage, perPageInQuery, isFetching, isShowMoreFetching, handleShowMore, handlePageChange, pageCountForShowSupportButtons, }) => (React.createElement("div", { className: b() },
+    React.createElement("div", { id: containerId, className: b('cards-container') },
+        pinnedPostOnPage && currentPage === 1 && (React.createElement("div", { className: b('pinned-container') },
+            React.createElement(PostCard, { post: pinnedPostOnPage, size: "m", fullWidth: true, showTag: true }))),
+        (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length) ? (React.createElement(CardLayoutBlock, { title: '', colSizes: {
+                all: 12,
+                lg: 4,
+                md: 6,
+            } }, postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.map((post) => (React.createElement(PostCard, { key: post.id, post: post, showTag: true }))))) : (React.createElement(PostsEmpty, null))),
+    React.createElement("div", { className: b('pagination') },
+        Boolean(isShowMoreVisible && (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length)) && (React.createElement(Button, { view: "outlined", size: "xl", className: b('more-button'), onClick: handleShowMore, loading: isShowMoreFetching }, i18(Keyset.ActionLoadMore))),
+        errorShowMore && (React.createElement("div", { className: b('error-show-more') },
+            React.createElement("div", null, i18(Keyset.ErrorTitle)),
+            React.createElement("div", null, i18(Keyset.PostLoadError)))),
+        Boolean(currentPage && postCountOnPage) && (React.createElement("div", { className: b('paginator') },
+            React.createElement(Paginator, { onPageChange: handlePageChange, page: currentPage, totalItems: postCountOnPage, itemsPerPage: perPageInQuery, loading: isFetching, maxPages: Infinity, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))))));

package/build/esm/components/PostsEmpty/PostsEmpty.css

@@ -0,0 +1,25 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-posts-empty__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.bc-posts-empty__title, .bc-posts-empty__subtitle {
+  text-align: center;
+  word-wrap: break-word;
+  max-width: 400px;
+  width: 100%;
+}
+.bc-posts-empty__title {
+  margin-top: 24px;
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+.bc-posts-empty__subtitle {
+  margin-top: 16px;
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}

package/build/esm/components/PostsEmpty/PostsEmpty.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './PostsEmpty.css';
+export declare const PostsEmpty: React.FC;

package/build/esm/components/PostsEmpty/PostsEmpty.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { block } from '../../utils/cn';
+import './PostsEmpty.css';
+import { i18, Keyset } from '../../i18n';
+const b = block('posts-empty');
+export const PostsEmpty = () => (React.createElement("div", { className: b('container') },
+    React.createElement("div", { className: b('title') }, i18(Keyset.TitleEmptyContainer)),
+    React.createElement("div", { className: b('subtitle') }, i18(Keyset.ContextEmptyContainer))));

package/build/esm/components/PostsError/PostError.css

@@ -0,0 +1,30 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-posts-error__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 24px;
+  padding-bottom: 64px;
+}
+.bc-posts-error__title, .bc-posts-error__subtitle {
+  text-align: center;
+  word-wrap: break-word;
+  max-width: 400px;
+  width: 100%;
+}
+.bc-posts-error__title {
+  margin-top: 24px;
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+.bc-posts-error__subtitle {
+  margin-top: 16px;
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}
+.bc-posts-error__button {
+  padding: 24px 0 48px;
+}

package/build/esm/components/PostsError/PostsError.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './PostError.css';
+type PostsErrorContainerProps = {
+    onButtonClick?: () => void | Promise<void>;
+};
+export declare const PostsError: React.FC<PostsErrorContainerProps>;
+export {};

package/build/esm/components/PostsError/PostsError.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { i18, Keyset } from '../../i18n';
+import { block } from '../../utils/cn';
+import './PostError.css';
+const b = block('posts-error');
+export const PostsError = ({ onButtonClick }) => {
+    const handleClick = () => (onButtonClick ? onButtonClick() : window.location.reload());
+    return (React.createElement("div", { className: b('container') },
+        React.createElement("div", { className: b('title') }, i18(Keyset.ErrorTitle)),
+        React.createElement("div", { className: b('subtitle') }, i18(Keyset.PostLoadError)),
+        React.createElement("div", { className: b('button') },
+            React.createElement(Button, { size: "xl", view: "outlined", onClick: handleClick }, i18(Keyset.ActionTryAgain)))));
+};

package/build/esm/components/Search/Search.css

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-search {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 376px;
+  height: 44px;
+  transition: width 0.3s;
+}
+.bc-search__close-button, .bc-search__search-button {
+  position: absolute;
+  z-index: 2;
+  right: 10px;
+  color: var(--yc-color-text-hint);
+}
+.bc-search__search-button:hover {
+  color: var(--yc-color-text-secondary);
+}
+.bc-search__search-suggest-container {
+  width: 100%;
+}
+.bc-search__search-suggest .yc-text-input__control {
+  padding-right: 32px;
+}
+.bc-search_size_s {
+  height: 36px;
+  width: 352px;
+  max-width: 100%;
+}

package/build/esm/components/Search/Search.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClassNameProps } from '../../models/common';
+import './Search.css';
+export type SearchSize = 's' | 'm';
+interface SearchProps extends ClassNameProps {
+    value?: string;
+    initialValue: string;
+    onSubmit: (value: string) => void;
+    debounce?: number;
+    placeholder?: string;
+    size?: SearchSize;
+    autoFocus?: boolean;
+    className?: string;
+}
+export declare const Search: React.FC<SearchProps>;
+export {};

package/build/esm/components/Search/Search.js

@@ -0,0 +1,41 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { debounce as lodashDebounce } from 'lodash';
+import { TextInput } from '@gravity-ui/uikit';
+import { ButtonWithIcon } from '../ButtonWithIcon/ButtonWithIcon';
+import { useIsIPhone } from '../../hooks/useIsIPhone';
+import { Close } from '../../icons/Close';
+import { SearchIcon } from '../../icons/SearchIcon';
+import { i18, Keyset } from '../../i18n';
+import { block } from '../../utils/cn';
+import './Search.css';
+const b = block('search');
+const SEARCH_ICON_SIZE = 16;
+const CLOSE_ICON_SIZE = 12;
+export const Search = (props) => {
+    const { className, initialValue, onSubmit, debounce = 300, placeholder = i18(Keyset.Search), size = 'm', autoFocus = false, value: externalValue, } = props;
+    const handleChange = lodashDebounce(onSubmit, debounce);
+    const [value, setValue] = useState(initialValue);
+    const inputRef = useRef(null);
+    const isIPhone = useIsIPhone();
+    useEffect(() => {
+        if (externalValue !== undefined) {
+            setValue(externalValue);
+        }
+    }, [externalValue]);
+    useEffect(() => {
+        if (autoFocus && !isIPhone) {
+            setTimeout(() => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); }, 0);
+        }
+    }, [autoFocus, inputRef, isIPhone]);
+    return (React.createElement("div", { className: b({ size }, className) },
+        React.createElement("div", { className: b('search-suggest-container') },
+            React.createElement(TextInput, { value: value, onUpdate: (query) => {
+                    setValue(query);
+                    handleChange(query);
+                }, placeholder: placeholder, className: b('search-suggest'), size: size === 'm' ? 'xl' : 'l', controlRef: inputRef })),
+        value ? (React.createElement(ButtonWithIcon, { className: b('close-button'), icon: Close, iconSize: CLOSE_ICON_SIZE, size: "xs", onClick: () => {
+                handleChange.cancel();
+                setValue('');
+                onSubmit('');
+            } })) : (React.createElement(ButtonWithIcon, { className: b('search-button'), icon: SearchIcon, iconSize: SEARCH_ICON_SIZE, size: "xs", disabled: true }))));
+};

package/build/esm/components/Wrapper/Wrapper.css

@@ -0,0 +1,32 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-wrapper_padding-top_xs {
+  padding-top: 0px;
+}
+.bc-wrapper_padding-top_s {
+  padding-top: 16px;
+}
+.bc-wrapper_padding-top_m {
+  padding-top: 32px;
+}
+.bc-wrapper_padding-top_l {
+  padding-top: 48px;
+}
+.bc-wrapper_padding-top_xl {
+  padding-top: 64px;
+}
+.bc-wrapper_padding-bottom_xs {
+  padding-bottom: 0px;
+}
+.bc-wrapper_padding-bottom_s {
+  padding-bottom: 16px;
+}
+.bc-wrapper_padding-bottom_m {
+  padding-bottom: 32px;
+}
+.bc-wrapper_padding-bottom_l {
+  padding-bottom: 48px;
+}
+.bc-wrapper_padding-bottom_xl {
+  padding-bottom: 64px;
+}

package/build/esm/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ClassNameProps } from '../../models/common';
+import { Paddings } from '../../models/paddings';
+import './Wrapper.css';
+type WrapperProps = ClassNameProps & {
+    paddings?: Paddings;
+    dataQa?: string;
+    children?: React.ReactNode;
+};
+export declare const Wrapper: React.FunctionComponent<WrapperProps>;
+export {};

package/build/esm/components/Wrapper/Wrapper.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { block } from '../../utils/cn';
+import { DEFAULT_PADDINGS } from '../../constants';
+import './Wrapper.css';
+const b = block('wrapper');
+export const Wrapper = ({ children, paddings = DEFAULT_PADDINGS, className, dataQa, }) => (React.createElement("section", { className: b({
+        ['padding-top']: (paddings === null || paddings === void 0 ? void 0 : paddings.top) || 'xs',
+        ['padding-bottom']: (paddings === null || paddings === void 0 ? void 0 : paddings.bottom) || 'l',
+        ['padding-left']: (paddings === null || paddings === void 0 ? void 0 : paddings.left) || '',
+        ['padding-right']: (paddings === null || paddings === void 0 ? void 0 : paddings.right) || '',
+    }, className), "data-qa": dataQa }, children));

package/build/esm/configure.d.ts

@@ -0,0 +1,5 @@
+import { Lang } from './models/locale';
+export interface ProjectConfigParams {
+    lang: Lang;
+}
+export declare const configure: ({ lang }: ProjectConfigParams) => void;

package/build/esm/configure.js

@@ -0,0 +1,4 @@
+import { i18n } from './i18n';
+export const configure = ({ lang }) => {
+    i18n.setLang(lang);
+};

package/build/esm/constants.d.ts

@@ -0,0 +1,27 @@
+import { Paddings } from './models/paddings';
+export declare const BREAKPOINTS: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const DEFAULT_THEME = "light";
+export declare enum BlogMetrikaGoalIds {
+    shareTop = "SITE_BLOG_SHARE-TOP_CLICK",
+    shareBottom = "SITE_BLOG_SHARE-BOTTOM_CLICK",
+    breadcrumbsTop = "SITE_BLOG_BREADCRUMBS-TOP_CLICK",
+    breadcrumbsBottom = "SITE_BLOG_BREADCRUMBS-BOTTOM_CLICK",
+    saveTop = "SITE_BLOG_SAVE-TOP_CLICK",
+    saveBottom = "SITE_BLOG_SAVE-BOTTOM_CLICK",
+    suggest = "SITE_BLOG_INTERESTING-CARD_CLICK",
+    bannerCommon = "SITE_BLOG_TEXT-BANNER_CLICK",
+    cta = "SITE_BLOG_CTA_CLICK",
+    tag = "SITE_BLOG_THEME-SELECTOR_CLCK",
+    service = "SITE_BLOG_SERVICE-SELECTOR_CLCK",
+    showMore = "SITE_BLOG-PAGINATION_SHOW-MORE_CLCK",
+    next = "SITE_BLOG-PAGINATION_NEXT_CLCK",
+    home = "SITE_BLOG-PAGINATION_HOME_CLCK",
+    page = "SITE_BLOG-PAGINATION_PAGE-NMBR_CLCK"
+}
+export declare const DEFAULT_PADDINGS: Paddings;