@snack-uikit/card 0.4.9-preview-85c5f47b.0

package/dist/components/Card/styles.module.css

@@ -0,0 +1,142 @@
+.functionBadgeWrapper{
+  position:absolute;
+  top:0;
+  right:0;
+  display:none;
+}
+.functionBadgeWrapper[data-visible]{
+  display:block;
+}
+
+.composition{
+  border-radius:var(--radius-card-container, 20px);
+  box-sizing:border-box;
+}
+
+.card{
+  --snack-ui-card-background-color:var(--sys-neutral-background1-level, #f9f9f9);
+  border-radius:var(--radius-card-container, 20px);
+  border-width:var(--border-width-card-container, 1px);
+  position:relative;
+  overflow:hidden;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  text-align:left;
+  background-color:var(--snack-ui-card-background-color);
+  border:0;
+  outline-color:transparent;
+}
+.card:hover .functionBadgeWrapper{
+  display:block;
+}
+.card:hover, .card:focus-visible{
+  --snack-ui-card-background-color:var(--sys-neutral-background2-level, #fdfdfd);
+}
+.card:focus-visible{
+  outline-width:var(--border-state-focus-l-border-width, 4px);
+  outline-style:var(--border-state-focus-l-border-style, solid);
+  outline-color:var(--border-state-focus-l-border-color, );
+  outline-color:var(--sys-primary-accent-default, #794ed3);
+}
+.card:focus-visible .functionBadgeWrapper{
+  display:block;
+}
+.card:focus-visible .check{
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.card:focus-within .functionBadgeWrapper{
+  display:block;
+}
+.card[data-outline]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-neutral-decor-default, #dedede);
+  outline-width:var(--border-width-card-container, 1px);
+}
+.card[data-pointer] *{
+  cursor:pointer;
+}
+.card[data-pointer][data-outline]:hover{
+  outline-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+  box-shadow:none;
+}
+.card[data-pointer][data-outline]:focus-visible{
+  outline-width:var(--border-state-focus-l-border-width, 4px);
+  outline-style:var(--border-state-focus-l-border-style, solid);
+  outline-color:var(--border-state-focus-l-border-color, );
+  outline-color:var(--sys-primary-accent-default, #794ed3);
+}
+.card[data-pointer][data-checked]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-primary-decor-activated, #c5b2f1);
+  outline-width:var(--border-width-card-container, 1px);
+}
+.card[data-pointer][data-checked]:hover{
+  outline-color:var(--sys-primary-decor-hovered, #decdfb);
+  box-shadow:none;
+}
+.card[data-pointer][data-checked] .contentWrapper{
+  background-color:color-mix(in srgb, var(--sys-primary-accent-default, #794ed3), var(--snack-ui-card-background-color) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.card[data-pointer][data-checked] .check{
+  color:var(--sys-primary-on-accent, #fdfbff);
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.card[data-pointer][data-checked]:focus-visible{
+  outline-width:var(--border-state-focus-l-border-width, 4px);
+  outline-style:var(--border-state-focus-l-border-style, solid);
+  outline-color:var(--border-state-focus-l-border-color, );
+  outline-color:var(--sys-primary-accent-default, #794ed3);
+}
+.card[data-pointer][data-checked]:focus-visible .check{
+  color:var(--sys-primary-on-accent, #fdfbff);
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.card[data-pointer]:hover{
+  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
+}
+.card[data-disabled]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #f0f0f0);
+  outline-color:var(--sys-neutral-decor-default, #dedede);
+  outline-width:var(--border-width-card-container, 1px);
+}
+.card[data-disabled] *{
+  cursor:not-allowed;
+}
+
+.body{
+  display:block;
+  color:var(--sys-neutral-text-support, #565656);
+  text-align:initial;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  justify-content:flex-start;
+  box-sizing:border-box;
+  max-width:100%;
+}
+.content[data-size=m]{
+  padding:var(--space-card-padding-container, 16px);
+  gap:var(--space-card-gap-m, 8px);
+}
+.content[data-size=l]{
+  padding:var(--space-card-padding-container, 16px);
+  gap:var(--space-card-gap-l, 16px);
+}
+
+.footer{
+  padding:var(--space-card-padding-container, 16px);
+  position:relative;
+  box-sizing:border-box;
+}

package/dist/components/Footer/components/Action/Action.d.ts

@@ -0,0 +1,11 @@
+import { ButtonFilledProps, ButtonTonalProps } from '@snack-uikit/button';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type FooterActionProps = WithSupportProps<{
+    /** Параметры для основной кнопки */
+    button: Pick<ButtonFilledProps, 'label' | 'onClick' | 'loading' | 'icon'>;
+    /** Параметры для вторичной кнопки */
+    secondaryButton?: Pick<ButtonTonalProps, 'label' | 'onClick' | 'loading' | 'icon'>;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+}>;
+export declare function FooterAction({ button, secondaryButton, className, ...rest }: FooterActionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Footer/components/Action/Action.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { ButtonFilled, ButtonTonal } from '@snack-uikit/button';
+import { excludeSupportProps } from '@snack-uikit/utils';
+import { useCardContext } from '../../../../context';
+import styles from './styles.module.css';
+export function FooterAction(_a) {
+    var { button, secondaryButton, className } = _a, rest = __rest(_a, ["button", "secondaryButton", "className"]);
+    const { disabled } = useCardContext();
+    return (_jsxs("div", Object.assign({ className: cn(styles.action, className) }, excludeSupportProps(rest), { children: [_jsx(ButtonFilled, Object.assign({}, button, { appearance: ButtonFilled.appearances.Primary, size: ButtonFilled.sizes.M, disabled: disabled })), secondaryButton && (_jsx(ButtonTonal, Object.assign({}, secondaryButton, { appearance: ButtonTonal.appearances.Neutral, size: ButtonTonal.sizes.M, disabled: disabled })))] })));
+}

package/dist/components/Footer/components/Action/index.d.ts

@@ -0,0 +1 @@
+export * from './Action';

package/dist/components/Footer/components/Action/index.js

@@ -0,0 +1 @@
+export * from './Action';

package/dist/components/Footer/components/Action/styles.module.css

@@ -0,0 +1,7 @@
+.action{
+  gap:var(--space-card-gap-l, 16px);
+  display:flex;
+  align-items:center;
+  justify-content:flex-start;
+  box-sizing:border-box;
+}

package/dist/components/Footer/components/CallToAction/CallToAction.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type FooterCallToActionProps = WithSupportProps<{
+    /** Лейбл */
+    label: string;
+    /** Иконка */
+    icon?: ReactNode;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+}>;
+export declare function FooterCallToAction({ label, icon, className, ...rest }: FooterCallToActionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Footer/components/CallToAction/CallToAction.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Typography } from '@snack-uikit/typography';
+import { excludeSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+export function FooterCallToAction(_a) {
+    var { label, icon, className } = _a, rest = __rest(_a, ["label", "icon", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.callToAction, className) }, excludeSupportProps(rest), { children: [_jsx(Typography.SansLabelL, Object.assign({ className: styles.label }, { children: label })), _jsx("span", Object.assign({ className: styles.icon }, { children: icon }))] })));
+}

package/dist/components/Footer/components/CallToAction/index.d.ts

@@ -0,0 +1 @@
+export * from './CallToAction';

package/dist/components/Footer/components/CallToAction/index.js

@@ -0,0 +1 @@
+export * from './CallToAction';

package/dist/components/Footer/components/CallToAction/styles.module.css

@@ -0,0 +1,22 @@
+.callToAction{
+  gap:var(--space-card-gap-s, 4px);
+  display:flex;
+  align-items:center;
+  justify-content:flex-start;
+  box-sizing:border-box;
+}
+
+.label{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+
+.icon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+.icon svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}

package/dist/components/Footer/components/Dimension/Dimension.d.ts

@@ -0,0 +1,12 @@
+import { Size } from '../../../../constants';
+export type DimensionProps = {
+    /** Единица измерения */
+    dimension?: string;
+    /** Текущее значение */
+    currentValue: string;
+    /** Старое значение */
+    oldValue?: string;
+    /** Размер */
+    size?: Size;
+};
+export declare function Dimension({ dimension, currentValue, oldValue, size: sizeProp }: DimensionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Footer/components/Dimension/Dimension.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import { useCardContext } from '../../../../context';
+import { TYPOGRAPHY_SIZE_MAP } from './constants';
+import styles from './styles.module.css';
+export function Dimension({ dimension, currentValue, oldValue, size: sizeProp }) {
+    const { size: sizeContext } = useCardContext();
+    const size = TYPOGRAPHY_SIZE_MAP[sizeProp || sizeContext];
+    return (_jsxs("div", Object.assign({ className: styles.wrapper }, { children: [dimension && (_jsx(Typography, Object.assign({ role: Typography.roles.Title, family: Typography.families.Sans, size: size, className: styles.dimension }, { children: dimension }))), _jsxs("div", Object.assign({ className: styles.valueContainer }, { children: [_jsx(Typography, Object.assign({ role: Typography.roles.Title, family: Typography.families.Sans, size: size, className: styles.currentValue }, { children: currentValue })), oldValue && _jsx(Typography.CrossedOutBodyS, Object.assign({ className: styles.oldValue }, { children: oldValue }))] }))] })));
+}

package/dist/components/Footer/components/Dimension/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TYPOGRAPHY_SIZE_MAP: {
+    m: import("@snack-uikit/typography/dist/components/contants").Size;
+    l: import("@snack-uikit/typography/dist/components/contants").Size;
+};

package/dist/components/Footer/components/Dimension/constants.js

@@ -0,0 +1,6 @@
+import { Typography } from '@snack-uikit/typography';
+import { Size } from '../../../../constants';
+export const TYPOGRAPHY_SIZE_MAP = {
+    [Size.M]: Typography.sizes.M,
+    [Size.L]: Typography.sizes.L,
+};

package/dist/components/Footer/components/Dimension/index.d.ts

@@ -0,0 +1 @@
+export * from './Dimension';

package/dist/components/Footer/components/Dimension/index.js

@@ -0,0 +1 @@
+export * from './Dimension';

package/dist/components/Footer/components/Dimension/styles.module.css

@@ -0,0 +1,27 @@
+.wrapper{
+  gap:var(--space-card-gap-s, 4px);
+  display:flex;
+  flex:1 0 auto;
+  justify-content:flex-end;
+  box-sizing:border-box;
+}
+
+.valueContainer{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-end;
+  justify-content:flex-start;
+  box-sizing:border-box;
+}
+
+.currentValue{
+  color:var(--sys-neutral-text-main, #333333);
+}
+
+.oldValue{
+  color:var(--sys-neutral-text-light, #898989);
+}
+
+.dimension{
+  color:var(--sys-neutral-text-light, #898989);
+}

package/dist/components/Footer/components/Promo/Promo.d.ts

@@ -0,0 +1,18 @@
+import { ButtonFilledProps } from '@snack-uikit/button';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../../../constants';
+import { DimensionProps } from '../Dimension';
+export type FooterPromoProps = WithSupportProps<{
+    /** Параметры для блока значений */
+    volume?: DimensionProps;
+    /** Параметры для основной кнопки */
+    button?: Pick<ButtonFilledProps, 'label' | 'onClick' | 'loading' | 'icon'>;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+    /** Размер */
+    size?: Size;
+}>;
+export declare function FooterPromo({ volume, button, className, size, ...rest }: FooterPromoProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FooterPromo {
+    var sizes: typeof Size;
+}

package/dist/components/Footer/components/Promo/Promo.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { ButtonFilled } from '@snack-uikit/button';
+import { excludeSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../../../constants';
+import { useCardContext } from '../../../../context';
+import { Dimension } from '../Dimension';
+import styles from './styles.module.css';
+export function FooterPromo(_a) {
+    var { volume, button, className, size } = _a, rest = __rest(_a, ["volume", "button", "className", "size"]);
+    const { disabled } = useCardContext();
+    return (_jsxs("div", Object.assign({ className: cn(styles.promo, className) }, excludeSupportProps(rest), { children: [button && (_jsx(ButtonFilled, Object.assign({}, button, { appearance: ButtonFilled.appearances.Primary, size: ButtonFilled.sizes.M, disabled: disabled }))), volume && _jsx(Dimension, Object.assign({}, volume, { size: size }))] })));
+}
+FooterPromo.sizes = Size;

package/dist/components/Footer/components/Promo/index.d.ts

@@ -0,0 +1 @@
+export * from './Promo';

package/dist/components/Footer/components/Promo/index.js

@@ -0,0 +1 @@
+export * from './Promo';

package/dist/components/Footer/components/Promo/styles.module.css

@@ -0,0 +1,6 @@
+.promo{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+  box-sizing:border-box;
+}

package/dist/components/Footer/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Promo';
+export * from './Action';
+export * from './CallToAction';

package/dist/components/Footer/components/index.js

@@ -0,0 +1,3 @@
+export * from './Promo';
+export * from './Action';
+export * from './CallToAction';

package/dist/components/Footer/index.d.ts

@@ -0,0 +1,11 @@
+import { FooterAction, FooterActionProps, FooterCallToAction, FooterCallToActionProps, FooterPromo, FooterPromoProps } from './components';
+export declare const Footer: {
+    Promo: typeof FooterPromo;
+    Action: typeof FooterAction;
+    CallToAction: typeof FooterCallToAction;
+};
+export declare namespace Footer {
+    type PromoProps = FooterPromoProps;
+    type ActionProps = FooterActionProps;
+    type CallToActionProps = FooterCallToActionProps;
+}

package/dist/components/Footer/index.js

@@ -0,0 +1,6 @@
+import { FooterAction, FooterCallToAction, FooterPromo, } from './components';
+export const Footer = {
+    Promo: FooterPromo,
+    Action: FooterAction,
+    CallToAction: FooterCallToAction,
+};

package/dist/components/FunctionBadge/FunctionBadge.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ItemSingleProps } from '@snack-uikit/droplist';
+export type FunctionBadgeProps = {
+    /** Иконка */
+    icon?: ReactNode;
+    /** Вложенные опции */
+    options: Pick<ItemSingleProps, 'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'>[];
+};
+export declare function FunctionBadge({ icon, options }: FunctionBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FunctionBadge/FunctionBadge.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useCallback, useContext, useLayoutEffect, useState } from 'react';
+import { Droplist } from '@snack-uikit/droplist';
+import { KebabSVG } from '@snack-uikit/icons';
+import { TEST_IDS } from '../../constants';
+import { FunctionBadgeContext } from '../../context';
+import styles from './styles.module.css';
+export function FunctionBadge({ icon, options }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const { setVisible } = useContext(FunctionBadgeContext);
+    useLayoutEffect(() => {
+        setVisible && setVisible(isOpen);
+    }, [isOpen, setVisible]);
+    const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleDroplistItemClick, handleTriggerKeyDown, handleDroplistItemKeyDown, } = Droplist.useKeyboardNavigation({ setDroplistOpen: setIsOpen });
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        setIsOpen(isOpen => !isOpen);
+    }, []);
+    return (_jsx("span", Object.assign({ className: styles.wrapper }, { children: _jsx(Droplist, Object.assign({ open: isOpen, onOpenChange: setIsOpen, firstElementRefCallback: firstElementRefCallback, widthStrategy: Droplist.widthStrategies.Gte, useScroll: true, onFocusLeave: handleDroplistFocusLeave, "data-test-id": TEST_IDS.droplist, triggerClassName: styles.triggerClassName, placement: Droplist.placements.BottomEnd, triggerElement: _jsx("button", Object.assign({ "data-test-id": TEST_IDS.functionBadge, className: styles.button, onKeyDown: handleTriggerKeyDown, onClick: onClick, ref: triggerElementRef }, { children: icon || _jsx(KebabSVG, {}) })) }, { children: options.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: item.option, className: styles.item, "data-test-id": TEST_IDS.option, onClick: e => {
+                    handleDroplistItemClick(e, item.onClick);
+                }, onKeyDown: handleDroplistItemKeyDown })))) })) })));
+}

package/dist/components/FunctionBadge/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const TRIGGER_OPEN_DROPLIST_KEY_KEYS: string[];
+export declare const TRIGGER_CLOSE_DROPLIST_KEY_CODES: string[];

package/dist/components/FunctionBadge/constants.js

@@ -0,0 +1,5 @@
+export const TRIGGER_OPEN_DROPLIST_KEY_KEYS = [
+    ' ',
+    'ArrowDown',
+];
+export const TRIGGER_CLOSE_DROPLIST_KEY_CODES = ['Escape', 'Tab'];

package/dist/components/FunctionBadge/index.d.ts

@@ -0,0 +1 @@
+export * from './FunctionBadge';

package/dist/components/FunctionBadge/index.js

@@ -0,0 +1 @@
+export * from './FunctionBadge';

package/dist/components/FunctionBadge/styles.module.css

@@ -0,0 +1,39 @@
+.button{
+  width:var(--size-card-button, 32px);
+  height:var(--size-card-button, 32px);
+  border-radius:var(--radius-card-button, 12px);
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-main, #333333);
+  background-color:transparent;
+  border:0;
+  outline-color:transparent;
+}
+.button:hover{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.button:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  color:var(--sys-neutral-text-support, #565656);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.button:active{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.button svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}
+
+.wrapper{
+  position:relative;
+}

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,21 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../constants';
+import { EmblemProps } from '../../helperComponents';
+export type HeaderProps = WithSupportProps<{
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    description?: string;
+    /** Метаинформация */
+    metadata?: string;
+    /** Эмблема иконка/картинка */
+    emblem?: EmblemProps;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+    /** Размер */
+    size?: Size;
+}>;
+export declare function Header({ title, description, metadata, emblem, className, size: sizeProp, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Header {
+    var emblemIconAppearances: typeof import("@snack-uikit/icon-predefined/dist/constants").Appearance;
+}

package/dist/components/Header/Header.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { excludeSupportProps } from '@snack-uikit/utils';
+import { TEST_IDS } from '../../constants';
+import { useCardContext } from '../../context';
+import { Emblem } from '../../helperComponents';
+import { DESCRIPTION_SIZE_MAP, TITLE_SIZE_MAP } from './constants';
+import styles from './styles.module.css';
+export function Header(_a) {
+    var { title, description, metadata, emblem, className, size: sizeProp } = _a, rest = __rest(_a, ["title", "description", "metadata", "emblem", "className", "size"]);
+    const { size: sizeContext } = useCardContext();
+    const size = sizeProp || sizeContext;
+    return (_jsxs("div", Object.assign({ className: cn(styles.titleLayout, className) }, excludeSupportProps(rest), { "data-size": size }, { children: [emblem && _jsx(Emblem, Object.assign({}, emblem)), _jsxs("div", Object.assign({ className: styles.contentLayout }, { children: [_jsx(Typography, Object.assign({ family: Typography.families.Sans, size: TITLE_SIZE_MAP[size], role: Typography.roles.Title, className: styles.title, "data-test-id": TEST_IDS.title }, { children: _jsx(TruncateString, { variant: TruncateString.variants.End, maxLines: 1, text: title }) })), metadata && (_jsx(Typography.SansBodyS, Object.assign({ className: styles.metadata }, { children: _jsx(TruncateString, { variant: TruncateString.variants.End, maxLines: 1, text: metadata, "data-test-id": TEST_IDS.metadata }) }))), description && (_jsx(Typography, Object.assign({ family: Typography.families.Sans, size: DESCRIPTION_SIZE_MAP[size], role: Typography.roles.Body, className: styles.description }, { children: _jsx(TruncateString, { variant: TruncateString.variants.End, maxLines: 2, text: description, "data-test-id": TEST_IDS.description }) })))] }))] })));
+}
+Header.emblemIconAppearances = Emblem.appearances;

package/dist/components/Header/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const TITLE_SIZE_MAP: {
+    m: import("@snack-uikit/typography/dist/components/contants").Size;
+    l: import("@snack-uikit/typography/dist/components/contants").Size;
+};
+export declare const DESCRIPTION_SIZE_MAP: {
+    m: import("@snack-uikit/typography/dist/components/contants").Size;
+    l: import("@snack-uikit/typography/dist/components/contants").Size;
+};

package/dist/components/Header/constants.js

@@ -0,0 +1,10 @@
+import { Typography } from '@snack-uikit/typography';
+import { Size } from '../../constants';
+export const TITLE_SIZE_MAP = {
+    [Size.M]: Typography.sizes.S,
+    [Size.L]: Typography.sizes.L,
+};
+export const DESCRIPTION_SIZE_MAP = {
+    [Size.M]: Typography.sizes.M,
+    [Size.L]: Typography.sizes.L,
+};

package/dist/components/Header/index.d.ts

@@ -0,0 +1 @@
+export * from './Header';

package/dist/components/Header/index.js

@@ -0,0 +1 @@
+export * from './Header';

package/dist/components/Header/styles.module.css

@@ -0,0 +1,34 @@
+.titleLayout{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.titleLayout[data-size=m]{
+  gap:var(--space-card-gap-m, 8px);
+}
+.titleLayout[data-size=l]{
+  gap:var(--space-card-gap-l, 16px);
+}
+
+.contentLayout{
+  overflow:hidden;
+  display:block;
+  max-width:100%;
+}
+
+.title{
+  display:block;
+  max-width:100%;
+  color:var(--sys-neutral-text-main, #333333);
+}
+
+.metadata{
+  max-width:100%;
+  color:var(--sys-neutral-text-light, #898989);
+}
+
+.description{
+  max-width:100%;
+  color:var(--sys-neutral-text-support, #565656);
+}