@gravity-ui/page-constructor 1.0.0

package/build/esm/components/BackLink/BackLink.js

@@ -0,0 +1,25 @@
+import React, { useCallback, useContext } from 'react';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { ArrowSidebar } from '../../icons';
+import { LocationContext } from '../../context/locationContext';
+export default function BackLink(props) {
+    const { history } = useContext(LocationContext);
+    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
+    const backActionHandler = useCallback(async () => {
+        if (!history) {
+            return;
+        }
+        if (onClick) {
+            onClick();
+        }
+        if (history.length > 1) {
+            history.goBack();
+        }
+        else {
+            history.push({ pathname: url });
+        }
+    }, [history, onClick, url]);
+    return (React.createElement(Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
+        React.createElement(Icon, { data: ArrowSidebar, size: 24 }),
+        React.createElement("span", null, title)));
+}

package/build/esm/components/BackgroundImage/BackgroundImage.css

@@ -0,0 +1,16 @@
+.pc-storage-background-image {
+  position: relative;
+  overflow: hidden;
+}
+.pc-storage-background-image__img {
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.pc-storage-background-image__container {
+  position: relative;
+}

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

@@ -0,0 +1,4 @@
+import { BackgroundImageProps, WithChildren } from '../../models';
+import './BackgroundImage.css';
+declare const BackgroundImage: (props: WithChildren<BackgroundImageProps>) => JSX.Element;
+export default BackgroundImage;

package/build/esm/components/BackgroundImage/BackgroundImage.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { block } from '../../utils';
+import Image from '../Image/Image';
+import './BackgroundImage.css';
+const b = block('storage-background-image');
+const BackgroundImage = (props) => {
+    const { children, src, alt, disableCompress, className, imageClassName, style, hide } = props;
+    return (React.createElement("div", { className: b(null, className), style: style },
+        src && !hide && (React.createElement(Image, { className: b('img', imageClassName), src: src, alt: alt, disableCompress: disableCompress })),
+        children && React.createElement("div", { className: b('container') }, children)));
+};
+export default BackgroundImage;

package/build/esm/components/BackgroundMedia/BackgroundMedia.css

@@ -0,0 +1,50 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-BackgroundMedia {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.pc-BackgroundMedia__media {
+  margin: 0 auto;
+  max-width: 1440px;
+  text-align: center;
+}
+.pc-BackgroundMedia__image {
+  height: 100%;
+  width: 100%;
+}
+.pc-BackgroundMedia__video {
+  position: relative;
+}
+.pc-BackgroundMedia__video video {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pc-BackgroundMedia__video,
+.pc-BackgroundMedia video {
+  width: auto;
+}
+@media (max-width: 769px) {
+  .pc-BackgroundMedia__image {
+    display: block;
+  }
+  .pc-BackgroundMedia__video {
+    display: none;
+  }
+}
+@media (min-width: 769px) {
+  .pc-BackgroundMedia.pc-AnimateBlock__image, .pc-AnimateBlock .pc-BackgroundMedia__image {
+    position: relative;
+    bottom: 100px;
+    opacity: 0;
+  }
+  .pc-BackgroundMedia.pc-AnimateBlock.animate .pc-BackgroundMedia__image, .pc-AnimateBlock .pc-BackgroundMedia.animate .pc-BackgroundMedia__image {
+    bottom: 0;
+    opacity: 1;
+    transition: bottom 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+}

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

@@ -0,0 +1,7 @@
+import { MediaProps, Animatable } from '../../models';
+import './BackgroundMedia.css';
+export interface FullProps extends MediaProps, Animatable {
+    className?: string;
+}
+declare const BackgroundMedia: ({ className, color, animated, parallax, video, ...props }: FullProps) => JSX.Element;
+export default BackgroundMedia;

package/build/esm/components/BackgroundMedia/BackgroundMedia.js

@@ -0,0 +1,16 @@
+import { __rest } from "tslib";
+import React, { useContext } from 'react';
+import { block } from '../../utils';
+import Media from '../Media/Media';
+import AnimateBlock from '../AnimateBlock/AnimateBlock';
+import { MobileContext } from '../../context/mobileContext';
+import './BackgroundMedia.css';
+const b = block('BackgroundMedia');
+const BackgroundMedia = (_a) => {
+    var { className, color, animated, parallax = true, video } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video"]);
+    const isMobile = useContext(MobileContext);
+    return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
+        React.createElement(Media, Object.assign({ className: b('media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
+            parallax, video: isMobile ? undefined : video }, props)))));
+};
+export default BackgroundMedia;

package/build/esm/components/BalancedMasonry/BalancedMasonry.css

@@ -0,0 +1,10 @@
+.pc-BalancedMasonry {
+  position: relative;
+}
+.pc-BalancedMasonry__hidden-container {
+  position: absolute;
+  visibility: hidden;
+  overflow: hidden;
+  height: 100%;
+  z-index: -1;
+}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { WithChildren } from '../../models';
+import './BalancedMasonry.css';
+export interface BalancedMasonryProps {
+    className: string;
+    columnClassName: string;
+    children: ReactNode[];
+    breakpointCols: {
+        [key: number]: number;
+    };
+}
+declare const BalancedMasonry: (props: WithChildren<BalancedMasonryProps>) => JSX.Element;
+export default BalancedMasonry;

package/build/esm/components/BalancedMasonry/BalancedMasonry.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useState, useCallback, useRef, useContext } from 'react';
+import _ from 'lodash';
+import { block } from '../../utils';
+import { SSRContext } from '../../context/ssrContext';
+import './BalancedMasonry.css';
+const b = block('BalancedMasonry');
+const BalancedMasonry = (props) => {
+    const { className, columnClassName, children = [], breakpointCols } = props;
+    const { isServer } = useContext(SSRContext);
+    const getCurrentColumnsCount = useCallback(() => {
+        const breakpoints = Object.entries(breakpointCols).sort(([firstBreakpoint], [secondBreakpoint]) => {
+            return Number(secondBreakpoint) - Number(firstBreakpoint);
+        });
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        let [, result] = _.first(breakpoints);
+        if (isServer) {
+            return result;
+        }
+        for (const [rawWidth, columnCount] of breakpoints) {
+            const width = Number(rawWidth);
+            if (document.body.clientWidth <= width) {
+                result = columnCount;
+            }
+        }
+        return result;
+    }, [breakpointCols, isServer]);
+    const [columnCount, setColumnCount] = useState(getCurrentColumnsCount());
+    const [columns, setColumns] = useState([]);
+    const containerRef = useRef(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const balanceColumns = useCallback(_.debounce(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        const localColumns = [];
+        const columnsMeta = [];
+        for (let i = 0; i < columnCount; i++) {
+            columnsMeta.push({ id: i, height: 0 });
+            localColumns.push([]);
+        }
+        for (let i = 0; i < containerRef.current.children.length; i++) {
+            const node = containerRef.current.children.item(i);
+            if (!node) {
+                continue;
+            }
+            const minColumn = _.minBy(columnsMeta, 'height') || { id: 0, height: 0 };
+            const { id: columnId } = minColumn;
+            localColumns[columnId].push(children[i]);
+            minColumn.height += node.offsetHeight;
+        }
+        setColumns(localColumns);
+    }, 300), [children, columnCount]);
+    useEffect(() => {
+        balanceColumns();
+    }, [balanceColumns, children, columnCount]);
+    useEffect(() => {
+        const updateColumnCounter = () => setColumnCount(getCurrentColumnsCount());
+        window.addEventListener('resize', updateColumnCounter);
+        return () => window.removeEventListener('resize', updateColumnCounter);
+    }, [setColumnCount, columns, getCurrentColumnsCount]);
+    useEffect(() => {
+        const currentRef = containerRef.current;
+        const isResizeEventsSupported = 'ResizeObserver' in window;
+        if (!currentRef || !isResizeEventsSupported) {
+            return () => { };
+        }
+        const observer = new ResizeObserver(balanceColumns);
+        for (let i = 0; i < currentRef.children.length; i++) {
+            const node = currentRef.children.item(i);
+            if (!node) {
+                continue;
+            }
+            observer.observe(node);
+        }
+        return () => observer.disconnect();
+    }, [balanceColumns, children]);
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", { className: b('hidden-container'), style: { width: `${100 / columnCount}%` } },
+            React.createElement("div", { ref: containerRef, className: b('hidden-list') }, children)),
+        columns.map((columnElements, index) => (React.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` } }, columnElements)))));
+};
+export default BalancedMasonry;

package/build/esm/components/BlockBase/BlockBase.css

@@ -0,0 +1,30 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-block-base {
+  --anchor-offset: 48px;
+  margin-top: 48px;
+  padding: 0 0 48px;
+}
+.pc-block-base:first-child {
+  margin-top: var(--pc-first-block-indent, 96px);
+}
+@media only screen and (max-width: 577px) {
+  .pc-block-base.pc-block-base {
+    margin-top: 32px;
+    padding-bottom: 32px;
+  }
+  .pc-block-base.pc-block-base:first-child {
+    margin-top: var(--pc-first-block-mobile-indent, 64px);
+  }
+}
+
+.pc-block-base_reset-paddings.pc-block-base.pc-block-base_reset-paddings.pc-block-base {
+  padding: 0;
+  margin: 0;
+}
+
+@media (max-width: 577px) {
+  .pc-block-base {
+    --anchor-offset: 32px;
+  }
+}

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

@@ -0,0 +1,4 @@
+import { BlockBaseProps, ClassNameProps, WithChildren } from '../../models';
+import './BlockBase.css';
+declare const BlockBase: (props: WithChildren<BlockBaseProps & ClassNameProps>) => JSX.Element;
+export default BlockBase;

package/build/esm/components/BlockBase/BlockBase.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { block } from '../../utils';
+import Anchor from '../Anchor/Anchor';
+import { Col } from '../../grid';
+import './BlockBase.css';
+const b = block('block-base');
+const BlockBase = (props) => {
+    const { anchor, visible, children, className, resetPaddings } = props;
+    return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true },
+        anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
+        children));
+};
+export default BlockBase;

package/build/esm/components/BlockHeader/BlockHeader.css

@@ -0,0 +1,27 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-BlockHeader__description {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  margin-top: 16px;
+}
+.pc-BlockHeader__description_titleSize_s {
+  margin-top: 8px;
+}
+.pc-BlockHeader__description_titleSize_l {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}
+.pc-BlockHeader__description a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-BlockHeader__description a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-BlockHeader__description a:hover, .pc-BlockHeader__description a:active {
+  --pc-text-header-color: var(--yc-color-text-link-hover);
+  color: var(--yc-color-text-link-hover);
+}

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

@@ -0,0 +1,8 @@
+import { BlockHeaderProps as BlockHeaderParams, ClassNameProps } from '../../models';
+import { GridColumnSizesType } from '../../grid';
+import './BlockHeader.css';
+export interface BlockHeaderProps extends BlockHeaderParams {
+    colSizes?: GridColumnSizesType;
+}
+declare const BlockHeader: ({ title, description, className, colSizes, }: BlockHeaderProps & ClassNameProps) => JSX.Element | null;
+export default BlockHeader;

package/build/esm/components/BlockHeader/BlockHeader.js

@@ -0,0 +1,20 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { block } from '../../utils';
+import { Col } from '../../grid';
+import { Title, HTML } from '../';
+import './BlockHeader.css';
+const b = block('BlockHeader');
+const BlockHeader = ({ title, description, className, colSizes = { all: 12, sm: 8 }, }) => {
+    if (!title && !description) {
+        return null;
+    }
+    const _a = !title || typeof title === 'string' ? { text: title } : title, { text } = _a, titleProps = __rest(_a, ["text"]);
+    return (React.createElement("div", { className: b(null, className) },
+        text && (React.createElement(Col, { reset: true, sizes: colSizes },
+            React.createElement(Title, Object.assign({ text: text }, titleProps)))),
+        description && (React.createElement(Col, { reset: true, sizes: { all: 12, sm: 8 } },
+            React.createElement("div", { className: b('description', { titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize }) },
+                React.createElement(HTML, null, description))))));
+};
+export default BlockHeader;

package/build/esm/components/Button/Button.css

@@ -0,0 +1,42 @@
+.pc-button-block__content {
+  display: flex;
+  align-items: center;
+}
+.pc-button-block__image {
+  width: 18px;
+  height: 18px;
+}
+.pc-button-block__image + .pc-button-block__text, .pc-button-block__text + .pc-button-block__image {
+  margin-left: var(--btn-image-margin);
+}
+.pc-button-block_theme_github.pc-button-block_theme_github {
+  --yc-button-background-color: var(--pc-monochrome-button);
+  --yc-button-background-color-hover: var(--pc-monochrome-button-hover);
+  color: var(--yc-color-text-light-primary);
+}
+.pc-button-block_theme_github.pc-button-block_theme_github:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-button-block_theme_scale::before, .pc-button-block_theme_scale::after {
+  border-radius: 300px;
+}
+.pc-button-block_theme_monochrome {
+  --yc-button-background-color: var(--pc-monochrome-button);
+  --yc-button-background-color-hover: var(--pc-monochrome-button-hover);
+  color: var(--yc-color-text-light-primary);
+}
+.pc-button-block_theme_monochrome:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-button-block_size_s {
+  --btn-image-margin: 10px;
+}
+.pc-button-block_size_m {
+  --btn-image-margin: 13px;
+}
+.pc-button-block_size_l {
+  --btn-image-margin: 18px;
+}
+.pc-button-block_size_xl {
+  --btn-image-margin: 25px;
+}

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

@@ -0,0 +1,9 @@
+import { ButtonProps as ButtonParams } from '../../models';
+import './Button.css';
+export interface ButtonProps extends Omit<ButtonParams, 'url'> {
+    className?: string;
+    url?: string;
+    onClick?: () => void;
+}
+declare const Button: (props: ButtonProps) => JSX.Element;
+export default Button;

package/build/esm/components/Button/Button.js

@@ -0,0 +1,48 @@
+import { __rest } from "tslib";
+import React, { useCallback, useContext } from 'react';
+import { Platform, Button as CommonButton, Icon, StoreBadge } from '@gravity-ui/uikit';
+import { block, setUrlTld } from '../../utils';
+import { toCommonSize, toCommonView } from './utils';
+import { LocaleContext } from '../../context/localeContext/localeContext';
+import { useMetrika } from '../../hooks/useMetrika';
+import { Github } from '../../icons';
+import './Button.css';
+const b = block('button-block');
+const Button = (props) => {
+    const handleMetrika = useMetrika();
+    const { lang, tld } = useContext(LocaleContext);
+    const { className, metrikaGoals, pixelEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "size", "theme", "url", "img", "onClick", "text"]);
+    const defaultImgPosition = 'left';
+    const onClick = useCallback(() => {
+        handleMetrika({ metrikaGoals, pixelEvents });
+        if (onClickOrigin) {
+            onClickOrigin();
+        }
+    }, [handleMetrika, metrikaGoals, pixelEvents, onClickOrigin]);
+    const buttonImg = img instanceof Object
+        ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
+        : { url: img, position: defaultImgPosition };
+    const buttonClass = img
+        ? b({ position: buttonImg.position, size, theme }, className)
+        : b({ size, theme }, className);
+    const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
+    if (theme === 'app-store' || theme === 'google-play') {
+        const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;
+        return React.createElement(StoreBadge, { className: buttonClass, platform: platform, lang: lang, url: url });
+    }
+    let icon;
+    let image = img && React.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
+    if (theme === 'github') {
+        icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24 });
+        image = undefined;
+    }
+    const buttonTheme = theme === 'scale' ? 'accent' : theme;
+    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined }, buttonProps),
+        icon && buttonImg.position === 'left' ? icon : null,
+        React.createElement("span", { className: b('content') },
+            image && buttonImg.position === 'left' ? image : null,
+            React.createElement("span", { className: b('text') }, text),
+            image && buttonImg.position === 'right' ? image : null),
+        icon && buttonImg.position === 'right' ? icon : null));
+};
+export default Button;

package/build/esm/components/Button/utils.d.ts

@@ -0,0 +1,5 @@
+import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+export declare type OldButtonTheme = 'normal' | 'action' | 'flat' | 'light' | 'clear' | 'raised' | 'pseudo' | 'link' | 'accent' | 'websearch' | 'flat-special' | 'normal-special' | 'normal-dark' | 'pseudo-special';
+export declare type OldButtonSize = 'xs' | 'ns' | 's' | 'm' | 'l' | 'n' | 'head' | 'promo';
+export declare const toCommonView: (theme: OldButtonTheme) => ButtonView;
+export declare const toCommonSize: (size: OldButtonSize) => ButtonSize;

package/build/esm/components/Button/utils.js

@@ -0,0 +1,28 @@
+const themeMap = {
+    normal: 'normal',
+    action: 'action',
+    flat: 'flat',
+    light: 'flat-secondary',
+    clear: 'flat-secondary',
+    raised: 'raised',
+    pseudo: 'outlined',
+    link: 'outlined-info',
+    accent: 'action',
+    websearch: 'action',
+    'flat-special': 'flat-contrast',
+    'normal-special': 'normal-contrast',
+    'normal-dark': 'outlined-contrast',
+    'pseudo-special': 'outlined-contrast',
+};
+const sizeMap = {
+    xs: 's',
+    ns: 's',
+    s: 'm',
+    m: 'l',
+    l: 'l',
+    n: 'l',
+    head: 'l',
+    promo: 'xl',
+};
+export const toCommonView = (theme) => { var _a; return (_a = themeMap[theme]) !== null && _a !== void 0 ? _a : theme; };
+export const toCommonSize = (size) => { var _a; return (_a = sizeMap[size]) !== null && _a !== void 0 ? _a : size; };

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(--yc-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(--yc-color-line-generic);
+}
+.pc-card-base-block_border_line, .pc-card-base-block_border_none {
+  cursor: default;
+}
+@media (min-width: 577px) {
+  .slick-slide:not(.slick-active) .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(--yc-text-body-2-font-size);
+  line-height: var(--yc-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(--yc-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(--yc-color-line-generic);
+}
+a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
+  cursor: default;
+}
+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,29 @@
+import React, { ReactElement, HTMLAttributeAnchorTarget } from 'react';
+import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
+import './CardBase.css';
+export interface CardBaseProps extends CardBaseParams {
+    className?: string;
+    bodyClassName?: string;
+    contentClassName?: string;
+    children: ReactElement | ReactElement[];
+    url?: string;
+    target?: HTMLAttributeAnchorTarget;
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: ButtonPixel;
+}
+export interface CardHeaderBaseProps {
+    className?: string;
+    image?: ImageProps | null;
+}
+export interface CardFooterBaseProps {
+    className?: string;
+}
+export declare const Layout: {
+    (props: CardBaseProps): JSX.Element;
+    Header: React.FC<WithChildren<CardHeaderBaseProps>>;
+    Content: React.FC<{
+        children?: React.ReactNode;
+    }>;
+    Footer: React.FC<WithChildren<CardFooterBaseProps>>;
+};
+export default Layout;