@cloud-ru/uikit-product-card-predefined 1.1.13-preview-926fd6b4.0 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.2.0 (2026-05-22)
+
+
+### Features
+
+* **FF-8339:** new CardServiceLight, deprecated CardServiceSmall ([2a0fdbf](https://github.com/cloud-ru-tech/uikit-product/commit/2a0fdbf21e02a5569b2545e5f67cf583843af202))
+
+
+
+
+
 ## 1.1.12 (2026-04-27)
 
 ### Only dependencies have been changed

package/README.md

@@ -3,10 +3,80 @@
 ## Installation
 `npm i @cloud-ru/uikit-product-card-predefined`
 
+## CardServiceLight
+
+Компактная карточка сервиса для списков и навигации. Не использует обёртку `@snack-uikit/card`.
+
+Корневой элемент — нативный `<a>` при передаче `href`, иначе `<button>`. Содержимое карточки (иконка, заголовок, promo tag) доступно для скринридеров. Кнопка «Избранное» отображается при наведении и фокусе на карточке; клик по ней не активирует переход по ссылке.
+
+Тултип promo tag всегда открывается по `hover` (задаётся внутри компонента).
+
+```tsx
+import { CardServiceLight } from '@cloud-ru/uikit-product-card-predefined';
+
+<CardServiceLight
+  href="/services/compute"
+  title="Compute"
+  icon={<ComputeSVG />}
+  promoTag={{ variant: 'preview', context: 'service', tooltip: { placement: 'top' } }}
+  favorite={{ enabled: true, checked, onChange: setChecked }}
+/>;
+```
+
+## CardServiceSmall
+
+> **Deprecated.** Используйте [`CardServiceLight`](#cardservicelight).
+
+Предыдущая реализация на базе `@snack-uikit/card` с overlay-ссылкой. Сохранена для обратной совместимости.
 
 ## Props
 
 ```ts
+type CardServiceLightAnchorProps = {
+  href: string;
+  type?: never;
+};
+
+type CardServiceLightButtonProps = {
+  href?: never;
+  type?: 'button' | 'submit' | 'reset';
+};
+
+type CardServiceLightProps = WithSupportProps<
+  (CardServiceLightAnchorProps | CardServiceLightButtonProps) & {
+    icon: ReactElement;
+    title: string;
+    /** При отсутствии promo tag не отображается. Тултип всегда с trigger: 'hover' */
+    promoTag?: Omit<PromoTagPredefinedProps, 'trigger'>;
+    onClick?(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+    onKeyDown?: KeyboardEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    truncate?: {
+      title?: number;
+    };
+    favorite?: {
+      enabled: boolean;
+      checked?: boolean;
+      onChange?(value: boolean): void;
+    };
+    className?: string;
+  }
+>;
+
+/** @deprecated use CardServiceLight */
+type CardServiceSmallProps = WithSupportProps<
+  Pick<CardProps, 'onClick' | 'className' | 'disabled' | 'outline' | 'href' | 'checked'> &
+    Required<Pick<Card.HeaderProps, 'title' | 'emblem'>> & {
+      truncate?: Pick<NonNullable<Card.HeaderProps['truncate']>, 'title'>;
+      favorite?: {
+        enabled: boolean;
+        visibilityStrategy: 'always' | 'hover';
+        checked?: boolean;
+        onChange?(value: boolean): void;
+      };
+      promoBadge?: PromoTagPredefinedProps | CardProps['promoBadge'];
+    }
+>;
+
 type CardBannerProps = WithSupportProps<
   Pick<CardProps, 'onClick' | 'className'> &
     Required<Pick<Card.HeaderProps, 'title' | 'emblem'>> & {
@@ -27,10 +97,6 @@ type CardServiceProps = WithSupportProps<
   }
 >;
 
-type CardServiceSmallProps = WithSupportProps<
-  Pick<CardProps, 'promoBadge' | 'onClick' | 'className'> & Required<Pick<Card.HeaderProps, 'title' | 'emblem'>>
->;
-
 export type CardSuggestProps = WithSupportProps<
   Pick<CardProps, 'promoBadge' | 'onClick' | 'className'> & {
     title: string;
@@ -45,5 +111,3 @@ export type CardSuggestProps = WithSupportProps<
 ```
 
 [Changelog](./CHANGELOG.md)
-
-

package/dist/cjs/components/CardServiceLight/CardServiceLight.d.ts

@@ -0,0 +1,82 @@
+import { KeyboardEventHandler, MouseEvent, ReactElement } from 'react';
+import { PromoTagPredefinedProps } from '@cloud-ru/uikit-product-promo-tag-predefined';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { VisibilityStrategy } from './types';
+type CardElement = HTMLAnchorElement | HTMLButtonElement;
+export type CardServiceLightProps = WithSupportProps<{
+    /** Иконка сервиса */
+    icon: ReactElement;
+    /** Заголовок карточки */
+    title: string;
+    /** Ссылка, открываемая при клике по карточке */
+    href?: string;
+    /** Тип кнопки */
+    type?: 'button' | 'submit' | 'reset';
+    /** Настройки promo tag. При отсутствии не отображается */
+    promoTag?: Omit<PromoTagPredefinedProps, 'trigger'>;
+    /** Колбек на клик по карточке */
+    onClick?(event: MouseEvent<CardElement>): void;
+    /** Колбек нажатия клавиши клавиатуры на карточке */
+    onKeyDown?: KeyboardEventHandler<CardElement>;
+    /** Настройки обрезки текста заголовка */
+    truncate?: {
+        /** Максимальное количество строк заголовка */
+        title?: number;
+    };
+    /** Настройки кнопки «Избранное» */
+    favorite?: {
+        /** Включить отображение кнопки избранного */
+        enabled: boolean;
+        /**
+         * Формат отображения: всегда или при наведении и фокусе
+         * @default 'hover'
+         */
+        visibilityStrategy?: VisibilityStrategy;
+        /** Состояние избранного. При передаче вместе с `onChange` компонент работает в controlled-режиме */
+        checked?: boolean;
+        /** Колбек изменения состояния избранного. При передаче вместе с `checked` компонент работает в controlled-режиме */
+        onChange?(value: boolean): void;
+    };
+    /** CSS-класс корневого элемента */
+    className?: string;
+}>;
+export declare const CardServiceLight: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    /** Иконка сервиса */
+    icon: ReactElement;
+    /** Заголовок карточки */
+    title: string;
+    /** Ссылка, открываемая при клике по карточке */
+    href?: string;
+    /** Тип кнопки */
+    type?: "button" | "submit" | "reset";
+    /** Настройки promo tag. При отсутствии не отображается */
+    promoTag?: Omit<PromoTagPredefinedProps, "trigger">;
+    /** Колбек на клик по карточке */
+    onClick?(event: MouseEvent<CardElement>): void;
+    /** Колбек нажатия клавиши клавиатуры на карточке */
+    onKeyDown?: KeyboardEventHandler<CardElement>;
+    /** Настройки обрезки текста заголовка */
+    truncate?: {
+        /** Максимальное количество строк заголовка */
+        title?: number;
+    };
+    /** Настройки кнопки «Избранное» */
+    favorite?: {
+        /** Включить отображение кнопки избранного */
+        enabled: boolean;
+        /**
+         * Формат отображения: всегда или при наведении и фокусе
+         * @default 'hover'
+         */
+        visibilityStrategy?: VisibilityStrategy;
+        /** Состояние избранного. При передаче вместе с `onChange` компонент работает в controlled-режиме */
+        checked?: boolean;
+        /** Колбек изменения состояния избранного. При передаче вместе с `checked` компонент работает в controlled-режиме */
+        onChange?(value: boolean): void;
+    };
+    /** CSS-класс корневого элемента */
+    className?: string;
+} & import("react").RefAttributes<CardElement>>;
+export {};

package/dist/cjs/components/CardServiceLight/CardServiceLight.js

@@ -0,0 +1,85 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardServiceLight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_promo_tag_predefined_1 = require("@cloud-ru/uikit-product-promo-tag-predefined");
+const toggles_1 = require("@snack-uikit/toggles");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.CardServiceLight = (0, react_1.forwardRef)((_a, ref) => {
+    var { href, type: typeProp, promoTag, title, icon, onClick, onKeyDown: onKeyDownProp, className, truncate, favorite } = _a, rest = __rest(_a, ["href", "type", "promoTag", "title", "icon", "onClick", "onKeyDown", "className", "truncate", "favorite"]);
+    const [isFavorite, setIsFavorite] = (0, uncontrollable_1.useUncontrolledProp)(favorite === null || favorite === void 0 ? void 0 : favorite.checked, false, favorite === null || favorite === void 0 ? void 0 : favorite.onChange);
+    const componentRef = (0, react_1.useRef)(null);
+    const favoriteRef = (0, react_1.useRef)(null);
+    const Component = href ? 'a' : 'button';
+    const onKeyDown = (e) => {
+        var _a, _b, _c;
+        if (e.target !== componentRef.current) {
+            onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+            return;
+        }
+        if (e.code === 'ArrowRight' && (favorite === null || favorite === void 0 ? void 0 : favorite.enabled)) {
+            (_a = favoriteRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (constants_1.TRIGGER_CLICK_KEY_CODES.includes(e.code)) {
+            e.preventDefault();
+            href ? (_b = componentRef.current) === null || _b === void 0 ? void 0 : _b.click() : (_c = componentRef.current) === null || _c === void 0 ? void 0 : _c.click();
+        }
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+    };
+    const onFavoriteKeyUp = event => {
+        var _a;
+        if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (event.code === 'Space' || event.code === 'Enter') {
+            event.preventDefault();
+            setIsFavorite(!isFavorite);
+        }
+    };
+    const onFavoriteClick = event => {
+        var _a;
+        event.stopPropagation();
+        (_a = favoriteRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    const attributes = (0, react_1.useMemo)(() => {
+        if (href) {
+            return {
+                href,
+            };
+        }
+        return {
+            type: typeProp !== null && typeProp !== void 0 ? typeProp : 'button',
+        };
+    }, [href, typeProp]);
+    const promoTagProps = (0, react_1.useMemo)(() => {
+        if (!promoTag) {
+            return null;
+        }
+        const tooltipProps = Object.assign(Object.assign({}, ((promoTag === null || promoTag === void 0 ? void 0 : promoTag.tooltip) || {})), { trigger: 'hover' });
+        return Object.assign(Object.assign({}, promoTag), { tooltip: tooltipProps });
+    }, [promoTag]);
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: (0, merge_refs_1.default)(ref, componentRef), className: (0, classnames_1.default)(styles_module_scss_1.default.card, className) }, (0, utils_1.extractSupportProps)(rest), attributes, { onClick: onClick, onKeyDown: onKeyDown, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.title, "data-test-id": constants_1.TEST_IDS.title, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.title, variant: 'end' }) }), promoTagProps && (0, jsx_runtime_1.jsx)(uikit_product_promo_tag_predefined_1.PromoTagPredefined, Object.assign({}, promoTagProps, { "data-test-id": constants_1.TEST_IDS.promoTag }))] }), (favorite === null || favorite === void 0 ? void 0 : favorite.enabled) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.favoriteWrapper, "data-visibility-strategy": favorite.visibilityStrategy || constants_1.VISIBILITY_STRATEGY.hover, "data-checked": isFavorite || undefined, children: (0, jsx_runtime_1.jsx)(toggles_1.Favorite, { size: 'm', checked: isFavorite, inputRef: favoriteRef, onChange: setIsFavorite, tabIndex: -1, onKeyUp: onFavoriteKeyUp, onClick: onFavoriteClick, "data-test-id": constants_1.TEST_IDS.favorite, icon: 'star' }) }))] }) })));
+});

package/dist/cjs/components/CardServiceLight/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const TEST_IDS: {
+    readonly title: "card-service-light__title";
+    readonly promoTag: "card-service-light__promo-tag";
+    readonly favorite: "card-service-light__favorite";
+};
+export declare const TRIGGER_CLICK_KEY_CODES: string[];
+export declare const VISIBILITY_STRATEGY: {
+    readonly hover: "hover";
+    readonly always: "always";
+};

package/dist/cjs/components/CardServiceLight/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VISIBILITY_STRATEGY = exports.TRIGGER_CLICK_KEY_CODES = exports.TEST_IDS = void 0;
+exports.TEST_IDS = {
+    title: 'card-service-light__title',
+    promoTag: 'card-service-light__promo-tag',
+    favorite: 'card-service-light__favorite',
+};
+exports.TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];
+exports.VISIBILITY_STRATEGY = {
+    hover: 'hover',
+    always: 'always',
+};

package/dist/cjs/components/CardServiceLight/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CardServiceLight';
+export { VISIBILITY_STRATEGY } from './constants';
+export type { VisibilityStrategy } from './types';

package/dist/cjs/components/CardServiceLight/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VISIBILITY_STRATEGY = void 0;
+__exportStar(require("./CardServiceLight"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "VISIBILITY_STRATEGY", { enumerable: true, get: function () { return constants_1.VISIBILITY_STRATEGY; } });

package/dist/cjs/components/CardServiceLight/styles.module.css

@@ -0,0 +1,90 @@
+.favoriteWrapper{
+  position:relative;
+  flex-shrink:0;
+  height:var(--size-icon-container-s, 24px);
+  width:var(--size-icon-container-s, 24px);
+  border-radius:2px;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  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));
+}
+.favoriteWrapper[data-visibility-strategy=hover]{
+  visibility:hidden;
+}
+.favoriteWrapper[data-visibility-strategy=hover]:not(.favoriteWrapper[data-visibility-strategy=hover][data-checked]){
+  position:absolute;
+  right:4px;
+}
+.favoriteWrapper[data-visibility-strategy=always]{
+  visibility:visible;
+}
+
+.card{
+  display:flex;
+  flex:1 0 0;
+  min-width:228px;
+  width:100%;
+  align-items:center;
+  position:relative;
+  padding:0;
+  border:none;
+  font:inherit;
+  color:inherit;
+  text-decoration:none;
+  background:transparent;
+  cursor:pointer;
+}
+.card: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, );
+  border-color:var(--sys-available-complementary, #1c1c24);
+  border-radius:4px;
+}
+.card:hover:before, .card:focus-within:before{
+  display:flex;
+  position:absolute;
+  width:100%;
+  height:100%;
+  content:"";
+  border-radius:4px;
+  opacity:0.08;
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}
+.card:hover .favoriteWrapper, .card:focus-within .favoriteWrapper{
+  visibility:visible;
+}
+
+.container{
+  position:relative;
+  display:flex;
+  padding:4px;
+  align-items:center;
+  gap:8px;
+  flex:1;
+  width:100%;
+}
+
+.content{
+  display:flex;
+  min-height:24px;
+  align-items:center;
+  gap:4px;
+  max-width:100%;
+  min-width:0;
+  flex-grow:1;
+}
+
+.icon{
+  height:var(--size-icon-container-s, 24px);
+  width:var(--size-icon-container-s, 24px);
+  flex-shrink:0;
+}
+.icon > svg{
+  height:var(--size-icon-container-s, 24px);
+  width:var(--size-icon-container-s, 24px);
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  min-width:0;
+}

package/dist/cjs/components/CardServiceLight/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { VISIBILITY_STRATEGY } from './constants';
+export type VisibilityStrategy = ValueOf<typeof VISIBILITY_STRATEGY>;

package/dist/cjs/components/CardServiceLight/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/CardServiceSmall/CardServiceSmall.d.ts

@@ -11,4 +11,5 @@ export type CardServiceSmallProps = WithSupportProps<Pick<CardProps, 'onClick' |
     };
     promoBadge?: PromoTagPredefinedProps | CardProps['promoBadge'];
 }>;
+/** @deprecated use CardServiceLight instead */
 export declare function CardServiceSmall({ href, promoBadge, title, emblem, onClick, className, disabled, truncate, outline, checked, favorite, ...rest }: CardServiceSmallProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CardServiceSmall/CardServiceSmall.js

@@ -30,6 +30,7 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function isIconProps(props) {
     return Boolean(props && 'icon' in props);
 }
+/** @deprecated use CardServiceLight instead */
 function CardServiceSmall(_a) {
     var { href, promoBadge, title, emblem, onClick, className, disabled, truncate, outline, checked, favorite } = _a, rest = __rest(_a, ["href", "promoBadge", "title", "emblem", "onClick", "className", "disabled", "truncate", "outline", "checked", "favorite"]);
     const [isFavourite, setIsFavorite] = (0, uncontrollable_1.useUncontrolledProp)(favorite === null || favorite === void 0 ? void 0 : favorite.checked, false, favorite === null || favorite === void 0 ? void 0 : favorite.onChange);

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

@@ -2,3 +2,4 @@ export * from './CardBanner';
 export * from './CardSuggest';
 export * from './CardService';
 export * from './CardServiceSmall';
+export * from './CardServiceLight';

package/dist/cjs/components/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./CardBanner"), exports);
 __exportStar(require("./CardSuggest"), exports);
 __exportStar(require("./CardService"), exports);
 __exportStar(require("./CardServiceSmall"), exports);
+__exportStar(require("./CardServiceLight"), exports);

package/dist/esm/components/CardServiceLight/CardServiceLight.d.ts

@@ -0,0 +1,82 @@
+import { KeyboardEventHandler, MouseEvent, ReactElement } from 'react';
+import { PromoTagPredefinedProps } from '@cloud-ru/uikit-product-promo-tag-predefined';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { VisibilityStrategy } from './types';
+type CardElement = HTMLAnchorElement | HTMLButtonElement;
+export type CardServiceLightProps = WithSupportProps<{
+    /** Иконка сервиса */
+    icon: ReactElement;
+    /** Заголовок карточки */
+    title: string;
+    /** Ссылка, открываемая при клике по карточке */
+    href?: string;
+    /** Тип кнопки */
+    type?: 'button' | 'submit' | 'reset';
+    /** Настройки promo tag. При отсутствии не отображается */
+    promoTag?: Omit<PromoTagPredefinedProps, 'trigger'>;
+    /** Колбек на клик по карточке */
+    onClick?(event: MouseEvent<CardElement>): void;
+    /** Колбек нажатия клавиши клавиатуры на карточке */
+    onKeyDown?: KeyboardEventHandler<CardElement>;
+    /** Настройки обрезки текста заголовка */
+    truncate?: {
+        /** Максимальное количество строк заголовка */
+        title?: number;
+    };
+    /** Настройки кнопки «Избранное» */
+    favorite?: {
+        /** Включить отображение кнопки избранного */
+        enabled: boolean;
+        /**
+         * Формат отображения: всегда или при наведении и фокусе
+         * @default 'hover'
+         */
+        visibilityStrategy?: VisibilityStrategy;
+        /** Состояние избранного. При передаче вместе с `onChange` компонент работает в controlled-режиме */
+        checked?: boolean;
+        /** Колбек изменения состояния избранного. При передаче вместе с `checked` компонент работает в controlled-режиме */
+        onChange?(value: boolean): void;
+    };
+    /** CSS-класс корневого элемента */
+    className?: string;
+}>;
+export declare const CardServiceLight: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    /** Иконка сервиса */
+    icon: ReactElement;
+    /** Заголовок карточки */
+    title: string;
+    /** Ссылка, открываемая при клике по карточке */
+    href?: string;
+    /** Тип кнопки */
+    type?: "button" | "submit" | "reset";
+    /** Настройки promo tag. При отсутствии не отображается */
+    promoTag?: Omit<PromoTagPredefinedProps, "trigger">;
+    /** Колбек на клик по карточке */
+    onClick?(event: MouseEvent<CardElement>): void;
+    /** Колбек нажатия клавиши клавиатуры на карточке */
+    onKeyDown?: KeyboardEventHandler<CardElement>;
+    /** Настройки обрезки текста заголовка */
+    truncate?: {
+        /** Максимальное количество строк заголовка */
+        title?: number;
+    };
+    /** Настройки кнопки «Избранное» */
+    favorite?: {
+        /** Включить отображение кнопки избранного */
+        enabled: boolean;
+        /**
+         * Формат отображения: всегда или при наведении и фокусе
+         * @default 'hover'
+         */
+        visibilityStrategy?: VisibilityStrategy;
+        /** Состояние избранного. При передаче вместе с `onChange` компонент работает в controlled-режиме */
+        checked?: boolean;
+        /** Колбек изменения состояния избранного. При передаче вместе с `checked` компонент работает в controlled-режиме */
+        onChange?(value: boolean): void;
+    };
+    /** CSS-класс корневого элемента */
+    className?: string;
+} & import("react").RefAttributes<CardElement>>;
+export {};

package/dist/esm/components/CardServiceLight/CardServiceLight.js

@@ -0,0 +1,79 @@
+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 mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef, } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { PromoTagPredefined } from '@cloud-ru/uikit-product-promo-tag-predefined';
+import { Favorite } from '@snack-uikit/toggles';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { TEST_IDS, TRIGGER_CLICK_KEY_CODES, VISIBILITY_STRATEGY } from './constants';
+import styles from './styles.module.css';
+export const CardServiceLight = forwardRef((_a, ref) => {
+    var { href, type: typeProp, promoTag, title, icon, onClick, onKeyDown: onKeyDownProp, className, truncate, favorite } = _a, rest = __rest(_a, ["href", "type", "promoTag", "title", "icon", "onClick", "onKeyDown", "className", "truncate", "favorite"]);
+    const [isFavorite, setIsFavorite] = useUncontrolledProp(favorite === null || favorite === void 0 ? void 0 : favorite.checked, false, favorite === null || favorite === void 0 ? void 0 : favorite.onChange);
+    const componentRef = useRef(null);
+    const favoriteRef = useRef(null);
+    const Component = href ? 'a' : 'button';
+    const onKeyDown = (e) => {
+        var _a, _b, _c;
+        if (e.target !== componentRef.current) {
+            onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+            return;
+        }
+        if (e.code === 'ArrowRight' && (favorite === null || favorite === void 0 ? void 0 : favorite.enabled)) {
+            (_a = favoriteRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (TRIGGER_CLICK_KEY_CODES.includes(e.code)) {
+            e.preventDefault();
+            href ? (_b = componentRef.current) === null || _b === void 0 ? void 0 : _b.click() : (_c = componentRef.current) === null || _c === void 0 ? void 0 : _c.click();
+        }
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+    };
+    const onFavoriteKeyUp = event => {
+        var _a;
+        if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (event.code === 'Space' || event.code === 'Enter') {
+            event.preventDefault();
+            setIsFavorite(!isFavorite);
+        }
+    };
+    const onFavoriteClick = event => {
+        var _a;
+        event.stopPropagation();
+        (_a = favoriteRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    const attributes = useMemo(() => {
+        if (href) {
+            return {
+                href,
+            };
+        }
+        return {
+            type: typeProp !== null && typeProp !== void 0 ? typeProp : 'button',
+        };
+    }, [href, typeProp]);
+    const promoTagProps = useMemo(() => {
+        if (!promoTag) {
+            return null;
+        }
+        const tooltipProps = Object.assign(Object.assign({}, ((promoTag === null || promoTag === void 0 ? void 0 : promoTag.tooltip) || {})), { trigger: 'hover' });
+        return Object.assign(Object.assign({}, promoTag), { tooltip: tooltipProps });
+    }, [promoTag]);
+    return (_jsx(Component, Object.assign({ ref: mergeRefs(ref, componentRef), className: cn(styles.card, className) }, extractSupportProps(rest), attributes, { onClick: onClick, onKeyDown: onKeyDown, children: _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { className: styles.content, children: [_jsx(Typography.SansBodyM, { className: styles.title, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { text: title, maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.title, variant: 'end' }) }), promoTagProps && _jsx(PromoTagPredefined, Object.assign({}, promoTagProps, { "data-test-id": TEST_IDS.promoTag }))] }), (favorite === null || favorite === void 0 ? void 0 : favorite.enabled) && (_jsx("div", { className: styles.favoriteWrapper, "data-visibility-strategy": favorite.visibilityStrategy || VISIBILITY_STRATEGY.hover, "data-checked": isFavorite || undefined, children: _jsx(Favorite, { size: 'm', checked: isFavorite, inputRef: favoriteRef, onChange: setIsFavorite, tabIndex: -1, onKeyUp: onFavoriteKeyUp, onClick: onFavoriteClick, "data-test-id": TEST_IDS.favorite, icon: 'star' }) }))] }) })));
+});

package/dist/esm/components/CardServiceLight/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const TEST_IDS: {
+    readonly title: "card-service-light__title";
+    readonly promoTag: "card-service-light__promo-tag";
+    readonly favorite: "card-service-light__favorite";
+};
+export declare const TRIGGER_CLICK_KEY_CODES: string[];
+export declare const VISIBILITY_STRATEGY: {
+    readonly hover: "hover";
+    readonly always: "always";
+};

package/dist/esm/components/CardServiceLight/constants.js

@@ -0,0 +1,10 @@
+export const TEST_IDS = {
+    title: 'card-service-light__title',
+    promoTag: 'card-service-light__promo-tag',
+    favorite: 'card-service-light__favorite',
+};
+export const TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];
+export const VISIBILITY_STRATEGY = {
+    hover: 'hover',
+    always: 'always',
+};

package/dist/esm/components/CardServiceLight/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CardServiceLight';
+export { VISIBILITY_STRATEGY } from './constants';
+export type { VisibilityStrategy } from './types';

package/dist/esm/components/CardServiceLight/index.js

@@ -0,0 +1,2 @@
+export * from './CardServiceLight';
+export { VISIBILITY_STRATEGY } from './constants';

package/dist/esm/components/CardServiceLight/styles.module.css

@@ -0,0 +1,90 @@
+.favoriteWrapper{
+  position:relative;
+  flex-shrink:0;
+  height:var(--size-icon-container-s, 24px);
+  width:var(--size-icon-container-s, 24px);
+  border-radius:2px;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  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));
+}
+.favoriteWrapper[data-visibility-strategy=hover]{
+  visibility:hidden;
+}
+.favoriteWrapper[data-visibility-strategy=hover]:not(.favoriteWrapper[data-visibility-strategy=hover][data-checked]){
+  position:absolute;
+  right:4px;
+}
+.favoriteWrapper[data-visibility-strategy=always]{
+  visibility:visible;
+}
+
+.card{
+  display:flex;
+  flex:1 0 0;
+  min-width:228px;
+  width:100%;
+  align-items:center;
+  position:relative;
+  padding:0;
+  border:none;
+  font:inherit;
+  color:inherit;
+  text-decoration:none;
+  background:transparent;
+  cursor:pointer;
+}
+.card: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, );
+  border-color:var(--sys-available-complementary, #1c1c24);
+  border-radius:4px;
+}
+.card:hover:before, .card:focus-within:before{
+  display:flex;
+  position:absolute;
+  width:100%;
+  height:100%;
+  content:"";
+  border-radius:4px;
+  opacity:0.08;
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}
+.card:hover .favoriteWrapper, .card:focus-within .favoriteWrapper{
+  visibility:visible;
+}
+
+.container{
+  position:relative;
+  display:flex;
+  padding:4px;
+  align-items:center;
+  gap:8px;
+  flex:1;
+  width:100%;
+}
+
+.content{
+  display:flex;
+  min-height:24px;
+  align-items:center;
+  gap:4px;
+  max-width:100%;
+  min-width:0;
+  flex-grow:1;
+}
+
+.icon{
+  height:var(--size-icon-container-s, 24px);
+  width:var(--size-icon-container-s, 24px);
+  flex-shrink:0;
+}
+.icon > svg{
+  height:var(--size-icon-container-s, 24px);
+  width:var(--size-icon-container-s, 24px);
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  min-width:0;
+}

package/dist/esm/components/CardServiceLight/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { VISIBILITY_STRATEGY } from './constants';
+export type VisibilityStrategy = ValueOf<typeof VISIBILITY_STRATEGY>;

package/dist/esm/components/CardServiceLight/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/CardServiceSmall/CardServiceSmall.d.ts

@@ -11,4 +11,5 @@ export type CardServiceSmallProps = WithSupportProps<Pick<CardProps, 'onClick' |
     };
     promoBadge?: PromoTagPredefinedProps | CardProps['promoBadge'];
 }>;
+/** @deprecated use CardServiceLight instead */
 export declare function CardServiceSmall({ href, promoBadge, title, emblem, onClick, className, disabled, truncate, outline, checked, favorite, ...rest }: CardServiceSmallProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CardServiceSmall/CardServiceSmall.js

@@ -24,6 +24,7 @@ import styles from './styles.module.css';
 function isIconProps(props) {
     return Boolean(props && 'icon' in props);
 }
+/** @deprecated use CardServiceLight instead */
 export function CardServiceSmall(_a) {
     var { href, promoBadge, title, emblem, onClick, className, disabled, truncate, outline, checked, favorite } = _a, rest = __rest(_a, ["href", "promoBadge", "title", "emblem", "onClick", "className", "disabled", "truncate", "outline", "checked", "favorite"]);
     const [isFavourite, setIsFavorite] = useUncontrolledProp(favorite === null || favorite === void 0 ? void 0 : favorite.checked, false, favorite === null || favorite === void 0 ? void 0 : favorite.onChange);

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

@@ -2,3 +2,4 @@ export * from './CardBanner';
 export * from './CardSuggest';
 export * from './CardService';
 export * from './CardServiceSmall';
+export * from './CardServiceLight';

package/dist/esm/components/index.js

@@ -2,3 +2,4 @@ export * from './CardBanner';
 export * from './CardSuggest';
 export * from './CardService';
 export * from './CardServiceSmall';
+export * from './CardServiceLight';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-card-predefined",
   "title": "Card Predefined",
-  "version": "1.1.13-preview-926fd6b4.0",
+  "version": "1.2.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,14 +39,15 @@
     "@cloud-ru/uikit-product-icons": "17.3.0",
     "@cloud-ru/uikit-product-promo-tag-predefined": "2.0.5",
     "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/card": "0.20.20",
+    "@snack-uikit/card": "0.20.18",
     "@snack-uikit/promo-tag": "0.7.1",
     "@snack-uikit/toggles": "0.13.26",
     "@snack-uikit/truncate-string": "0.7.11",
     "@snack-uikit/typography": "0.8.4",
     "@snack-uikit/utils": "3.7.0",
     "classnames": "2.5.1",
+    "merge-refs": "1.3.0",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "b3f5ee8a0353d2bdf60276fcd5326b4e809bbd7e"
+  "gitHead": "af75ed24ad92cfdc4c7a84b21f930c610f445d79"
 }

package/src/components/CardServiceLight/CardServiceLight.tsx

@@ -0,0 +1,197 @@
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import {
+  forwardRef,
+  KeyboardEvent,
+  KeyboardEventHandler,
+  MouseEvent,
+  MouseEventHandler,
+  ReactElement,
+  Ref,
+  useMemo,
+  useRef,
+} from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { PromoTagPredefined, PromoTagPredefinedProps } from '@cloud-ru/uikit-product-promo-tag-predefined';
+import { Favorite } from '@snack-uikit/toggles';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { TEST_IDS, TRIGGER_CLICK_KEY_CODES, VISIBILITY_STRATEGY } from './constants';
+import styles from './styles.module.scss';
+import { VisibilityStrategy } from './types';
+
+type CardElement = HTMLAnchorElement | HTMLButtonElement;
+
+export type CardServiceLightProps = WithSupportProps<{
+  /** Иконка сервиса */
+  icon: ReactElement;
+  /** Заголовок карточки */
+  title: string;
+  /** Ссылка, открываемая при клике по карточке */
+  href?: string;
+  /** Тип кнопки */
+  type?: 'button' | 'submit' | 'reset';
+  /** Настройки promo tag. При отсутствии не отображается */
+  promoTag?: Omit<PromoTagPredefinedProps, 'trigger'>;
+  /** Колбек на клик по карточке */
+  onClick?(event: MouseEvent<CardElement>): void;
+  /** Колбек нажатия клавиши клавиатуры на карточке */
+  onKeyDown?: KeyboardEventHandler<CardElement>;
+  /** Настройки обрезки текста заголовка */
+  truncate?: {
+    /** Максимальное количество строк заголовка */
+    title?: number;
+  };
+  /** Настройки кнопки «Избранное» */
+  favorite?: {
+    /** Включить отображение кнопки избранного */
+    enabled: boolean;
+    /**
+     * Формат отображения: всегда или при наведении и фокусе
+     * @default 'hover'
+     */
+    visibilityStrategy?: VisibilityStrategy;
+    /** Состояние избранного. При передаче вместе с `onChange` компонент работает в controlled-режиме */
+    checked?: boolean;
+    /** Колбек изменения состояния избранного. При передаче вместе с `checked` компонент работает в controlled-режиме */
+    onChange?(value: boolean): void;
+  };
+  /** CSS-класс корневого элемента */
+  className?: string;
+}>;
+
+export const CardServiceLight = forwardRef<CardElement, CardServiceLightProps>(
+  (
+    {
+      href,
+      type: typeProp,
+      promoTag,
+      title,
+      icon,
+      onClick,
+      onKeyDown: onKeyDownProp,
+      className,
+      truncate,
+      favorite,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [isFavorite, setIsFavorite] = useUncontrolledProp(favorite?.checked, false, favorite?.onChange);
+    const componentRef = useRef<CardElement>(null);
+    const favoriteRef = useRef<HTMLInputElement>(null);
+
+    const Component = href ? 'a' : 'button';
+
+    const onKeyDown = (e: KeyboardEvent<CardElement>) => {
+      if (e.target !== componentRef.current) {
+        onKeyDownProp?.(e);
+
+        return;
+      }
+
+      if (e.code === 'ArrowRight' && favorite?.enabled) {
+        favoriteRef.current?.focus();
+      }
+
+      if (TRIGGER_CLICK_KEY_CODES.includes(e.code)) {
+        e.preventDefault();
+        href ? componentRef.current?.click() : componentRef.current?.click();
+      }
+
+      onKeyDownProp?.(e);
+    };
+
+    const onFavoriteKeyUp: KeyboardEventHandler = event => {
+      if (event.code === 'ArrowLeft') {
+        event.preventDefault();
+        componentRef.current?.focus();
+      }
+
+      if (event.code === 'Space' || event.code === 'Enter') {
+        event.preventDefault();
+        setIsFavorite(!isFavorite);
+      }
+    };
+
+    const onFavoriteClick: MouseEventHandler = event => {
+      event.stopPropagation();
+
+      favoriteRef.current?.blur();
+    };
+
+    const attributes = useMemo(() => {
+      if (href) {
+        return {
+          href,
+        };
+      }
+
+      return {
+        type: typeProp ?? 'button',
+      };
+    }, [href, typeProp]);
+
+    const promoTagProps: PromoTagPredefinedProps | null = useMemo(() => {
+      if (!promoTag) {
+        return null;
+      }
+
+      const tooltipProps: PromoTagPredefinedProps['tooltip'] = {
+        ...(promoTag?.tooltip || {}),
+        trigger: 'hover',
+      };
+
+      return {
+        ...promoTag,
+        tooltip: tooltipProps,
+      };
+    }, [promoTag]);
+
+    return (
+      <Component
+        ref={mergeRefs(ref, componentRef) as Ref<HTMLAnchorElement> & Ref<HTMLButtonElement>}
+        className={cn(styles.card, className)}
+        {...extractSupportProps(rest)}
+        {...attributes}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+      >
+        <div className={styles.container}>
+          <div className={styles.icon}>{icon}</div>
+
+          <div className={styles.content}>
+            <Typography.SansBodyM className={styles.title} data-test-id={TEST_IDS.title}>
+              <TruncateString text={title} maxLines={truncate?.title} variant='end' />
+            </Typography.SansBodyM>
+
+            {promoTagProps && <PromoTagPredefined {...promoTagProps} data-test-id={TEST_IDS.promoTag} />}
+          </div>
+
+          {favorite?.enabled && (
+            <div
+              className={styles.favoriteWrapper}
+              data-visibility-strategy={favorite.visibilityStrategy || VISIBILITY_STRATEGY.hover}
+              data-checked={isFavorite || undefined}
+            >
+              <Favorite
+                size='m'
+                checked={isFavorite}
+                inputRef={favoriteRef}
+                onChange={setIsFavorite}
+                tabIndex={-1}
+                onKeyUp={onFavoriteKeyUp}
+                onClick={onFavoriteClick}
+                data-test-id={TEST_IDS.favorite}
+                icon='star'
+              />
+            </div>
+          )}
+        </div>
+      </Component>
+    );
+  },
+);

package/src/components/CardServiceLight/constants.ts

@@ -0,0 +1,12 @@
+export const TEST_IDS = {
+  title: 'card-service-light__title',
+  promoTag: 'card-service-light__promo-tag',
+  favorite: 'card-service-light__favorite',
+} as const;
+
+export const TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];
+
+export const VISIBILITY_STRATEGY = {
+  hover: 'hover',
+  always: 'always',
+} as const;

package/src/components/CardServiceLight/index.ts

@@ -0,0 +1,3 @@
+export * from './CardServiceLight';
+export { VISIBILITY_STRATEGY } from './constants';
+export type { VisibilityStrategy } from './types';

package/src/components/CardServiceLight/styles.module.scss

@@ -0,0 +1,108 @@
+@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+$side: ste.$icon-s;
+
+.favoriteWrapper {
+  position: relative;
+  flex-shrink: 0;
+  height: $side;
+  width: $side;
+  border-radius: 2px;
+  background-color: ste.$sys-neutral-background1-level;
+  box-shadow: ste.$box-shadow-elevation-level2;
+
+  &[data-visibility-strategy='hover'] {
+    visibility: hidden;
+
+    &:not(&[data-checked]) {
+      position: absolute;
+      right: 4px;
+    }
+  }
+
+  &[data-visibility-strategy='always'] {
+    visibility: visible;
+  }
+}
+
+.card {
+  display: flex;
+  flex: 1 0 0;
+  min-width: 228px;
+  width: 100%;
+  align-items: center;
+  position: relative;
+
+  padding: 0;
+  border: none;
+
+  font: inherit;
+  color: inherit;
+  text-decoration: none;
+
+  background: transparent;
+
+  cursor: pointer;
+
+  &:focus-visible {
+    @include ste.outline-var(ste.$container-focused-s);
+
+    border-color: ste.$sys-available-complementary;
+    border-radius: 4px;
+  }
+
+  &:hover,
+  &:focus-within {
+    &:before {
+      display: flex;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      content: '';
+      border-radius: 4px;
+      opacity: 0.08;
+      background-color: ste.$sys-neutral-accent-default;
+    }
+
+    .favoriteWrapper {
+      visibility: visible;
+    }
+  }
+}
+
+.container {
+  position: relative;
+  display: flex;
+  padding: 4px;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  width: 100%;
+}
+
+.content {
+  display: flex;
+  min-height: 24px;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  min-width: 0;
+  flex-grow: 1;
+}
+
+.icon {
+  height: $side;
+  width: $side;
+
+  flex-shrink: 0;
+
+  & > svg {
+    height: $side;
+    width: $side;
+  }
+}
+
+.title {
+  color: ste.$sys-neutral-text-main;
+  min-width: 0; // Fixes sluggish truncate behavior
+}

package/src/components/CardServiceLight/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { VISIBILITY_STRATEGY } from './constants';
+
+export type VisibilityStrategy = ValueOf<typeof VISIBILITY_STRATEGY>;

package/src/components/CardServiceSmall/CardServiceSmall.tsx

@@ -32,6 +32,7 @@ function isIconProps(
   return Boolean(props && 'icon' in props);
 }
 
+/** @deprecated use CardServiceLight instead */
 export function CardServiceSmall({
   href,
   promoBadge,

package/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './CardBanner';
 export * from './CardSuggest';
 export * from './CardService';
 export * from './CardServiceSmall';
+export * from './CardServiceLight';