@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/components/CardBase/CardBase.css

@@ -0,0 +1,93 @@
+a.pc-card-base-block_border_shadow, .pc-card-base-block_border_shadow {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-card-base-block__body, .pc-card-base-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.pc-card-base-block {
+  min-height: 248px;
+  height: 100%;
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--g-color-base-float);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  display: flex;
+}
+.pc-card-base-block_border_line {
+  border: 1px solid var(--g-color-line-generic);
+}
+@media (min-width: 577px) {
+  .swiper-slide:not(.swiper-slide-visible) .pc-card-base-block {
+    box-shadow: none;
+  }
+}
+.pc-card-base-block__header {
+  position: relative;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  margin: var(--pc-image-padding);
+  border-radius: calc(var(--pc-border-radius) - var(--pc-image-padding));
+}
+.pc-card-base-block__header-content {
+  padding: 32px;
+}
+.pc-card-base-block__body {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  flex: 1;
+  padding: 32px;
+}
+.pc-card-base-block__header + .pc-card-base-block__body {
+  padding: 24px 32px 32px;
+}
+.pc-card-base-block__content {
+  flex: 1;
+}
+.pc-card-base-block__footer {
+  margin-top: 14px;
+}
+@media (max-width: 577px) {
+  .pc-card-base-block {
+    min-height: unset;
+  }
+}
+
+a.pc-card-base-block {
+  color: inherit;
+  text-decoration: none;
+  min-height: 248px;
+  height: 100%;
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--g-color-base-float);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+a.pc-card-base-block:hover, a.pc-card-base-block:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+a.pc-card-base-block_border_line {
+  border: 1px solid var(--g-color-line-generic);
+}
+a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
+  transition: transform 0.3s ease-out;
+}
+a.pc-card-base-block_border_line:hover, a.pc-card-base-block_border_none:hover {
+  transform: translateY(-8px);
+}
+a.pc-card-base-block_border_shadow {
+  transition: transform 0.3s ease-out;
+}
+a.pc-card-base-block_border_shadow:hover {
+  transform: translateY(-8px);
+}
+a.pc-card-base-block_border_shadow:hover {
+  background-color: var(--pc-color-base-float-hover);
+}

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

@@ -0,0 +1,30 @@
+import React, { HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
+import { AnalyticsEventsBase, CardBaseProps as CardBaseParams, ImageProps } from '../../models';
+import './CardBase.css';
+interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
+    className?: string;
+    bodyClassName?: string;
+    contentClassName?: string;
+    url?: string;
+    urlTitle?: string;
+    target?: HTMLAttributeAnchorTarget;
+    qa?: string;
+    extraProps?: React.HTMLAttributes<HTMLElement>;
+}
+export type CardBasePropsType = PropsWithChildren<CardBaseProps>;
+export interface CardHeaderBaseProps {
+    className?: string;
+    image?: ImageProps | null;
+}
+export interface CardFooterBaseProps {
+    className?: string;
+}
+export declare const Layout: {
+    (props: CardBasePropsType): JSX.Element;
+    Header: React.FC<React.PropsWithChildren<CardHeaderBaseProps>>;
+    Content: React.FC<{
+        children?: React.ReactNode;
+    }>;
+    Footer: React.FC<React.PropsWithChildren<CardFooterBaseProps>>;
+};
+export default Layout;

package/build/esm/components/CardBase/CardBase.js

@@ -0,0 +1,75 @@
+import React, { Children, Fragment, isValidElement, useCallback, useMemo, } from 'react';
+import { Link } from '@gravity-ui/uikit';
+import { useAnalytics } from '../../hooks';
+import { DefaultEventNames, } from '../../models';
+import { block, getQaAttrubutes } from '../../utils';
+import BackgroundImage from '../BackgroundImage/BackgroundImage';
+import RouterLink from '../RouterLink/RouterLink';
+import './CardBase.css';
+const b = block('card-base-block');
+const Header = () => null;
+const Content = () => null;
+const Footer = () => null;
+export const Layout = (props) => {
+    const { className, bodyClassName, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, extraProps = {}, } = props;
+    const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
+    const qaAttributes = useMemo(() => getQaAttrubutes(qa, 'header', 'footer', 'body', 'content'), [qa]);
+    const { header, content, footer, image, headerClass, footerClass } = useMemo(() => {
+        let _header, _content, _footer, _image, _headerClass, _footerClass;
+        function handleChild(child) {
+            switch (child.type) {
+                case Header:
+                    _header = child.props.children;
+                    _image = child.props.image;
+                    _headerClass = child.props.className;
+                    break;
+                case Content:
+                    _content = child.props.children;
+                    break;
+                case Footer:
+                    _footer = child.props.children;
+                    _footerClass = child.props.className;
+                    break;
+            }
+        }
+        Children.toArray(children).forEach((child) => {
+            if (isValidElement(child)) {
+                handleChild(child);
+            }
+        });
+        return {
+            header: _header,
+            content: _content,
+            footer: _footer,
+            image: _image,
+            headerClass: _headerClass,
+            footerClass: _footerClass,
+        };
+    }, [children]);
+    const cardContent = useMemo(() => (React.createElement(Fragment, null,
+        (header || image) && (React.createElement(BackgroundImage, Object.assign({ className: b('header', headerClass) }, (typeof image === 'string' ? { src: image } : image), { qa: qaAttributes.header }),
+            React.createElement("div", { className: b('header-content') }, header))),
+        React.createElement("div", { className: b('body', bodyClassName), "data-qa": qaAttributes.body },
+            React.createElement("div", { className: b('content', contentClassName), "data-qa": qaAttributes.content }, content),
+            footer && (React.createElement("div", { className: b('footer', footerClass), "data-qa": qaAttributes.footer }, footer))))), [
+        header,
+        content,
+        image,
+        headerClass,
+        bodyClassName,
+        contentClassName,
+        footer,
+        footerClass,
+        qaAttributes,
+    ]);
+    const fullClassName = useMemo(() => b({ border }, className), [border, className]);
+    const onClick = useCallback(() => {
+        handleAnalytics(analyticsEvents);
+    }, [handleAnalytics, analyticsEvents]);
+    return url ? (React.createElement(RouterLink, { href: url },
+        React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, onClick: onClick, title: urlTitle, extraProps: Object.assign({ draggable: false, onDragStart: (e) => e.preventDefault() }, extraProps), qa: qa }, cardContent))) : (React.createElement("div", Object.assign({ className: fullClassName, "data-qa": qa }, extraProps), cardContent));
+};
+Layout.Header = Header;
+Layout.Content = Content;
+Layout.Footer = Footer;
+export default Layout;

package/build/esm/components/ContentList/ContentList.css

@@ -0,0 +1,103 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-content-list_size_l {
+  max-width: 480px;
+}
+.pc-content-list_size_l .pc-content-list__title {
+  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
+  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
+  margin: 0 0 8px;
+}
+.pc-content-list_size_l .pc-content-list__icon {
+  width: 22px;
+  height: 22px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-right: 12px;
+}
+.pc-content-list_size_l .pc-content-list__item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.pc-content-list_size_l .pc-content-list__item_without-title:not(:last-child) {
+  margin-bottom: 12px;
+}
+.pc-content-list_size_l .pc-content-list__item_without-title .pc-content-list__icon {
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  margin-right: 8px;
+}
+.pc-content-list_size_l .pc-content-list__item_without-title .pc-content-list__text {
+  font-size: var(--g-text-subheader-3-font-size, var(--pc-text-subheader-3-font-size));
+  line-height: var(--g-text-subheader-3-line-height, var(--pc-text-subheader-3-line-height));
+}
+.pc-content-list_size_s {
+  max-width: 440px;
+}
+.pc-content-list_size_s .pc-content-list__title {
+  font-size: var(--g-text-subheader-3-font-size, var(--pc-text-subheader-3-font-size));
+  line-height: var(--g-text-subheader-3-line-height, var(--pc-text-subheader-3-line-height));
+  margin: 0 0 calc(8px / 2);
+}
+.pc-content-list_size_s .pc-content-list__icon {
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  margin-right: 8px;
+}
+.pc-content-list_size_s .pc-content-list__text {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+}
+.pc-content-list_size_s .pc-content-list__item:not(:last-child) {
+  margin-bottom: 12px;
+}
+.pc-content-list_size_s .pc-content-list__item_without-title:not(:last-child) {
+  margin-bottom: 8px;
+}
+.pc-content-list_size_s .pc-content-list__item_without-title .pc-content-list__icon {
+  width: 18px;
+  height: 18px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+.pc-content-list_size_s .pc-content-list__item_without-title .pc-content-list__text {
+  font-size: var(--g-text-subheader-2-font-size, var(--pc-text-subheader-2-font-size));
+  line-height: var(--g-text-subheader-2-line-height, var(--pc-text-subheader-2-line-height));
+}
+.pc-content-list_theme_light .pc-content-list__item *,
+.pc-content-list_theme_light .pc-content-list__item .yfm,
+.pc-content-list_theme_light .pc-content-list__item .yfm * {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-content-list_theme_light .pc-content-list__item .yfm a {
+  color: var(--g-color-text-dark-primary);
+  text-decoration: underline;
+}
+.pc-content-list_theme_light .pc-content-list__item .yfm a:hover {
+  color: var(--g-color-text-dark-secondary);
+}
+.pc-content-list_theme_dark .pc-content-list__item *,
+.pc-content-list_theme_dark .pc-content-list__item .yfm,
+.pc-content-list_theme_dark .pc-content-list__item .yfm * {
+  color: var(--g-color-text-light-primary);
+}
+.pc-content-list_theme_dark .pc-content-list__item .yfm a {
+  color: var(--g-color-text-light-primary);
+  text-decoration: underline;
+}
+.pc-content-list_theme_dark .pc-content-list__item .yfm a:hover {
+  color: var(--g-color-text-light-secondary);
+}
+.pc-content-list__icon {
+  display: block;
+}
+.pc-content-list__item {
+  display: flex;
+}
+.pc-content-list .pc-content-list__title .yfm {
+  font-size: inherit;
+  line-height: inherit;
+}

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

@@ -0,0 +1,5 @@
+import { ContentListProps } from '../../models';
+import { QAProps } from '../../models/common';
+import './ContentList.css';
+declare const ContentList: ({ list, size, qa, theme }: ContentListProps & QAProps) => JSX.Element;
+export default ContentList;

package/build/esm/components/ContentList/ContentList.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { block } from '../../utils';
+import { getQaAttrubutes } from '../../utils/blocks';
+import YFMWrapper from '../YFMWrapper/YFMWrapper';
+import ItemIcon from './ContentListItemIcon';
+import './ContentList.css';
+const b = block('content-list');
+function getHeadingLevel(size) {
+    switch (size) {
+        case 's':
+            return 'h4';
+        case 'l':
+        default:
+            return 'h3';
+    }
+}
+const ContentList = ({ list, size = 'l', qa, theme }) => {
+    const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);
+    return (React.createElement("div", { className: b({ size, theme }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
+        const { icon, title, text } = item;
+        return (React.createElement("div", { className: b('item', { 'without-title': !title }), key: uuidv4() },
+            React.createElement(ItemIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image }),
+            React.createElement("div", null,
+                title &&
+                    React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, React.createElement(YFMWrapper, { content: title, modifiers: { constructor: true } })),
+                text && (React.createElement(YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
+    })));
+};
+export default ContentList;

package/build/esm/components/ContentList/ContentListItemIcon.d.ts

@@ -0,0 +1,7 @@
+import { ClassNameProps, ImageProps, QAProps, SVGIcon } from '../../models';
+import { ThemeSupporting } from '../../utils';
+interface ListItemProps extends QAProps, ClassNameProps {
+    icon: ThemeSupporting<ImageProps | SVGIcon>;
+}
+declare const ContentListItemIcon: ({ icon, className, qa }: ListItemProps) => JSX.Element;
+export default ContentListItemIcon;

package/build/esm/components/ContentList/ContentListItemIcon.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTheme } from '../../context/theme';
+import { getThemedValue } from '../../utils';
+import Image from '../Image/Image';
+import { getMediaImage } from '../Media/Image/utils';
+function isIconSvg(icon) {
+    return typeof icon === 'function';
+}
+const ContentListItemIcon = ({ icon, className, qa }) => {
+    const theme = useTheme();
+    const iconThemed = getThemedValue(icon, theme);
+    if (isIconSvg(iconThemed)) {
+        const Icon = iconThemed;
+        return (React.createElement("div", null,
+            React.createElement(Icon, { className: className })));
+    }
+    const iconData = getMediaImage(iconThemed);
+    return React.createElement(Image, Object.assign({}, iconData, { className: className, qa: qa }));
+};
+export default ContentListItemIcon;

package/build/esm/components/Control/Control.css

@@ -0,0 +1,88 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--g-focus-border-radius);
+  transition: color 0.2s;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  outline: none;
+}
+.pc-control .pc-control_theme_primary, .pc-control .pc-control_theme_secondary, .pc-control .pc-control_theme_link {
+  transition: color 0.2s;
+}
+.pc-control .pc-control_theme_accent {
+  transition: opacity 0.2s;
+}
+.utilityfocus .pc-control:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-control:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-control:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-control_size_xs {
+  width: 24px;
+  height: 24px;
+}
+.pc-control_size_s {
+  width: 28px;
+  height: 28px;
+}
+.pc-control_size_m {
+  width: 32px;
+  height: 32px;
+}
+.pc-control_size_l {
+  width: 36px;
+  height: 36px;
+}
+.pc-control_theme_primary {
+  color: var(--g-color-text-complementary);
+}
+.pc-control_theme_primary:hover {
+  color: var(--g-color-text-primary);
+}
+.pc-control_theme_secondary {
+  color: var(--g-color-text-secondary);
+}
+.pc-control_theme_secondary:hover {
+  color: var(--g-color-text-complementary);
+}
+.pc-control_theme_link {
+  color: var(--g-color-text-complementary);
+}
+.pc-control_theme_link:hover {
+  color: var(--g-color-text-link-hover);
+}
+.pc-control_theme_accent {
+  opacity: 0.7;
+  color: var(--g-color-base-danger-heavy);
+}
+.pc-control_theme_accent:hover {
+  opacity: 1;
+}
+.pc-control_disabled {
+  cursor: default;
+  color: var(--g-color-text-secondary);
+}
+.pc-control_disabled:hover {
+  color: var(--g-color-text-secondary);
+}
+@media (max-width: 768px) {
+  .pc-control:hover {
+    color: inherit;
+  }
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SVGIconData } from '@gravity-ui/uikit/build/esm/components/Icon/types';
+import './Control.css';
+export declare const defaultIconId = "icon-test-id";
+export interface ControlProps {
+    icon: SVGIconData;
+    theme?: 'primary' | 'secondary' | 'link' | 'accent';
+    size?: 'xs' | 's' | 'm' | 'l';
+    iconSize?: number;
+    disabled?: boolean;
+    className?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    qa?: string;
+}
+declare const Control: (props: ControlProps) => JSX.Element;
+export default Control;

package/build/esm/components/Control/Control.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import { i18n } from './i18n';
+import './Control.css';
+const b = block('control');
+export const defaultIconId = 'icon-test-id';
+const Control = (props) => {
+    const { icon, theme = 'primary', size = 's', iconSize = 16, disabled = false, onClick, className, qa, } = props;
+    return (React.createElement("button", { type: "button", "aria-label": i18n('aria-label'), className: b({ size, theme, disabled }, className), onClick: disabled ? undefined : onClick, disabled: disabled, "data-qa": qa },
+        React.createElement(Icon, { data: icon, size: iconSize, qa: defaultIconId })));
+};
+export default Control;

package/build/esm/components/Control/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "aria-label": "Button label"
+}

package/build/esm/components/Control/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "aria-label", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/components/Control/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}Control`);

package/build/esm/components/Control/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "aria-label": "Лейбл кнопки"
+}

package/build/esm/components/DefaultVideo/DefaultVideo.css

@@ -0,0 +1,5 @@
+.pc-default-video {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MediaVideoProps } from '../../models';
+import './DefaultVideo.css';
+type DefaultVideoRefType = HTMLVideoElement | undefined;
+interface DefaultVideoProps {
+    video: MediaVideoProps;
+    qa?: string;
+    customBarControlsClassName?: string;
+    className?: string;
+}
+export declare const DefaultVideo: React.ForwardRefExoticComponent<DefaultVideoProps & React.RefAttributes<DefaultVideoRefType>>;
+export {};

package/build/esm/components/DefaultVideo/DefaultVideo.js

@@ -0,0 +1,61 @@
+import React, { Fragment, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { CustomControlsType, MediaVideoControlsType } from '../../models';
+import { block } from '../../utils';
+import { getVideoTypesWithPriority } from '../Media/Video/utils';
+import CustomBarControls from '../ReactPlayer/CustomBarControls';
+import './DefaultVideo.css';
+const b = block('default-video');
+export const DefaultVideo = React.forwardRef((props, ref) => {
+    const { video, qa, customBarControlsClassName } = props;
+    const { controls, customControlsOptions, muted: initiallyMuted = true } = video;
+    const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
+    const [isPaused, setIsPaused] = useState(false);
+    const [isMuted, setIsMuted] = useState(initiallyMuted);
+    const videoRef = useRef(null);
+    // one may not use this hook and work with `ref` variable only, but
+    // in this case one should support both function type and object type,
+    // according to ForwardedRef type.
+    // Currently used way with extra ref and useImperativeHandle is more
+    // convenient and allows us to work with object typed ref only,
+    // avoiding typeof ref === 'function' statements
+    useImperativeHandle(ref, () => {
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current)) {
+            return undefined;
+        }
+        return videoRef.current;
+    }, [videoRef]);
+    const onPlayToggle = useCallback(() => {
+        setIsPaused((value) => {
+            var _a, _b;
+            if (value) {
+                (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            }
+            else {
+                (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+            }
+            return !value;
+        });
+    }, [videoRef]);
+    const onMuteToggle = useCallback(() => {
+        setIsMuted((value) => !value);
+    }, []);
+    const onClick = useCallback(() => {
+        if (customControlsType === CustomControlsType.WithPlayPauseButton) {
+            onPlayToggle();
+        }
+    }, [onPlayToggle, customControlsType]);
+    return (React.createElement(Fragment, null,
+        React.createElement("video", { disablePictureInPicture: true, playsInline: true, 
+            // @ts-ignore
+            // eslint-disable-next-line react/no-unknown-property
+            pip: "false", autoPlay: video.autoplay, loop: Boolean(video.loop), className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick },
+            getVideoTypesWithPriority(video.src)
+                .filter(({ type }) => Boolean(type))
+                .map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type, "data-qa": qa }))),
+            !video.autoplay && React.createElement("track", { default: true, kind: "captions" })),
+        controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
+                isMuted: Boolean(isMuted),
+                changeMute: onMuteToggle,
+            } }))));
+});
+DefaultVideo.displayName = 'DefaultVideo';

package/build/esm/components/ErrorWrapper/ErrorWrapper.css

@@ -0,0 +1,11 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-ErrorWrapper {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  white-space: nowrap;
+  color: var(--g-color-text-danger);
+}
+.pc-ErrorWrapper__text {
+  margin-bottom: 5px;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ClassNameProps } from '../../models';
+import './ErrorWrapper.css';
+export interface ErrorWrapperProps extends ClassNameProps {
+    text: string;
+    handler: () => void;
+    isError: boolean;
+    buttonText: string;
+    children: React.ReactNode;
+}
+declare const ErrorWrapper: ({ text, buttonText, className, handler, isError, children, }: React.PropsWithChildren<ErrorWrapperProps>) => JSX.Element;
+export default ErrorWrapper;

package/build/esm/components/ErrorWrapper/ErrorWrapper.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './ErrorWrapper.css';
+const b = block('ErrorWrapper');
+const ErrorWrapper = ({ text, buttonText, className, handler, isError, children, }) => isError ? (React.createElement("div", { className: b(null, className) },
+    React.createElement("div", { className: b('text') }, text),
+    handler && (React.createElement(Button, { size: "s", onClick: handler }, buttonText)))) : (React.createElement(React.Fragment, null, children));
+export default ErrorWrapper;