krl-alfred 2.24.5 → 2.24.7

package/dist/components/Checkbox/Checkbox.styled.d.ts

@@ -1,6 +1,16 @@
 /// <reference types="react" />
 import { CheckboxStyledProps } from "./props";
 export declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never>>> & string;
+export declare const CheckboxIndicatorIdle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLSpanElement>;
+}, "aria-hidden"> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLSpanElement>;
+}, "aria-hidden">>> & string;
+export declare const CheckboxIndicatorChecked: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLSpanElement>;
+}, "aria-hidden"> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLSpanElement>;
+}, "aria-hidden">>> & string;
 export declare const CheckboxIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never>>> & string;
 export declare const CheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never>>> & string;
 export declare const LabelsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never>>> & string;

package/dist/components/Checkbox/Checkbox.styled.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxLabel = exports.LabelsWrapper = exports.CheckboxInput = exports.CheckboxIndicator = exports.CheckboxWrapper = void 0;
+exports.CheckboxLabel = exports.LabelsWrapper = exports.CheckboxInput = exports.CheckboxIndicator = exports.CheckboxIndicatorChecked = exports.CheckboxIndicatorIdle = exports.CheckboxWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var getIndicatorSize = function (size) {
     switch (size) {
@@ -39,12 +39,18 @@ var getCheckboxCursor = function (props) {
     return 'pointer';
 };
 exports.CheckboxWrapper = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"], ["\n    flex: 1;\n    position: relative;\n    align-items: ", ";\n    justify-content: flex-start;\n    display: grid;\n    grid-template-columns: auto 1fr;\n    cursor: ", ";\n"])), function (props) { return props.$verticalAlign; }, function (props) { return getCheckboxCursor(props); });
-exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n\n    svg {\n        display: block;\n        width: 100%;\n        height: 100%;\n    }\n\n    .checkbox-indicator-checked {\n        display: none;\n    }\n\n    .checkbox-indicator-idle {\n        display: block;\n    }\n"], ["\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n\n    svg {\n        display: block;\n        width: 100%;\n        height: 100%;\n    }\n\n    .checkbox-indicator-checked {\n        display: none;\n    }\n\n    .checkbox-indicator-idle {\n        display: block;\n    }\n"])), function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getCheckboxCursor(props); });
-exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        .checkbox-indicator-checked {\n            display: block;\n        }\n\n        .checkbox-indicator-idle {\n            display: none;\n        }\n    }\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        .checkbox-indicator-checked {\n            display: block;\n        }\n\n        .checkbox-indicator-idle {\n            display: none;\n        }\n    }\n"])), exports.CheckboxIndicator);
-exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"], ["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"])), function (props) { return getCheckboxCursor(props); }, function (props) {
+exports.CheckboxIndicatorIdle = styled_components_1.default.span.attrs({
+    'aria-hidden': true,
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+exports.CheckboxIndicatorChecked = styled_components_1.default.span.attrs({
+    'aria-hidden': true,
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+exports.CheckboxIndicator = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n\n    svg {\n        display: block;\n        width: 100%;\n        height: 100%;\n    }\n"], ["\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    margin: ", " ", " 0 0;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n\n    svg {\n        display: block;\n        width: 100%;\n        height: 100%;\n    }\n"])), function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getCheckboxCursor(props); });
+exports.CheckboxInput = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        ", " {\n            display: block;\n        }\n\n        ", " {\n            display: none;\n        }\n    }\n"], ["\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked:not(:disabled) + ", " {\n        ", " {\n            display: block;\n        }\n\n        ", " {\n            display: none;\n        }\n    }\n"])), exports.CheckboxIndicator, exports.CheckboxIndicatorChecked, exports.CheckboxIndicatorIdle);
+exports.LabelsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"], ["\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n\n    * {\n        ", ";\n    }\n"])), function (props) { return getCheckboxCursor(props); }, function (props) {
     if (props.disabled)
         return 'var(--dark-opacity-25)';
     return props.$valid ? 'var(--dark)' : 'var(--red)';
 }, function (props) { return !props.disabled && !props.$valid && 'color: var(--red)'; });
-exports.CheckboxLabel = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--dark-opacity-50);\n    }\n"], ["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--dark-opacity-50);\n    }\n"])), function (props) { return getLabelFont(props.$textSize); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+exports.CheckboxLabel = styled_components_1.default.label(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--dark-opacity-50);\n    }\n"], ["\n    display: block;\n    margin: 0;\n    cursor: inherit;\n    font: ", ";\n\n    b {\n        font-weight: bold;\n        color: var(--dark-opacity-50);\n    }\n"])), function (props) { return getLabelFont(props.$textSize); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Checkbox/Checkbox.test.js

@@ -18,7 +18,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("@testing-library/react");
 var server_1 = require("react-dom/server");
 var Checkbox_1 = __importDefault(require("./Checkbox"));
+var Checkbox_styled_1 = require("./Checkbox.styled");
 var props_1 = require("./props");
+var getCheckedSvg = function (container) {
+    return container.querySelector("".concat(Checkbox_styled_1.CheckboxIndicatorChecked, " svg"));
+};
 var renderCheckbox = function (props) {
     if (props === void 0) { props = {}; }
     return (0, react_1.render)((0, jsx_runtime_1.jsx)(Checkbox_1.default, __assign({}, props_1.CheckboxDefault, { id: "checkbox-test", label: "Se\u00E7enek" }, props)));
@@ -34,7 +38,7 @@ describe('Checkbox', function () {
     });
     it('paints the checked indicator with var(--primary) instead of a resolved hex', function () {
         var container = renderCheckbox({ checked: true, onChange: jest.fn() }).container;
-        var checkedSvg = container.querySelector('.checkbox-indicator-checked svg');
+        var checkedSvg = getCheckedSvg(container);
         expect(checkedSvg).toHaveAttribute('color', 'var(--primary)');
     });
     it('paints the success variant with var(--green)', function () {
@@ -43,7 +47,7 @@ describe('Checkbox', function () {
             checked: true,
             onChange: jest.fn(),
         }).container;
-        var checkedSvg = container.querySelector('.checkbox-indicator-checked svg');
+        var checkedSvg = getCheckedSvg(container);
         expect(checkedSvg).toHaveAttribute('color', 'var(--green)');
     });
     it('uses the color prop as an SSR-safe override', function () {
@@ -52,7 +56,7 @@ describe('Checkbox', function () {
             color: '#00aa88',
             onChange: jest.fn(),
         }).container;
-        var checkedSvg = container.querySelector('.checkbox-indicator-checked svg');
+        var checkedSvg = getCheckedSvg(container);
         expect(checkedSvg).toHaveAttribute('color', '#00aa88');
     });
     it('does not snapshot indicator SVGs into data URIs', function () {

package/dist/components/Checkbox/CheckboxIndicator.js

@@ -1,21 +1,11 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Checkbox_styled_1 = require("./Checkbox.styled");
 var CheckboxIndicatorIcons = function (_a) {
     var disabled = _a.disabled, _b = _a.valid, valid = _b === void 0 ? true : _b, color = _a.color, variant = _a.variant;
     var checkedColor = color || (variant === "success" ? "var(--green)" : "var(--primary)");
@@ -25,6 +15,6 @@ var CheckboxIndicatorIcons = function (_a) {
             ? "CheckboxElementUncheck"
             : "CheckboxElementInvalid";
     var idleColor = disabled || valid ? "currentColor" : "var(--red)";
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "checkbox-indicator-idle", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: idleName, color: idleColor }) })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "checkbox-indicator-checked", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "CheckboxElementChecked", color: checkedColor }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Checkbox_styled_1.CheckboxIndicatorIdle, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: idleName, color: idleColor }) }), (0, jsx_runtime_1.jsx)(Checkbox_styled_1.CheckboxIndicatorChecked, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "CheckboxElementChecked", color: checkedColor }) })] }));
 };
 exports.default = CheckboxIndicatorIcons;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, oldPrice, newPrice, discountRate, variant, slug, component, onClick, hasLoading, hasPriceLoading, textSize, hasBgColor, }: import("./props").ProductCardHorizontalMd) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, oldPrice, newPrice, discountRate, variant, slug, component, onClick, hasLoading, hasPriceLoading, textSize, hasBgColor, campaigns, onCampaignCountClick, }: import("./props").ProductCardHorizontalMd) => React.JSX.Element>;
 export default _default;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.js

@@ -21,19 +21,26 @@ var props_1 = require("./props");
 var ProductCardHorizontalMd_styled_1 = require("./ProductCardHorizontalMd.styled");
 var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
 var Loader_1 = __importDefault(require("../Loader"));
+var Badges_1 = __importDefault(require("../Badges"));
+var MAX_VISIBLE_CAMPAIGNS = 3;
 var CardLinkComponent = (0, react_1.memo)(function (_a) {
     var Component = _a.component, slug = _a.slug, children = _a.children;
     return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CardLink, __assign({ as: Component || "a", href: slug }, { children: children })));
 });
 var ProductCardHorizontalMd = function (_a) {
     var _b;
-    var _c = _a.title, title = _c === void 0 ? props_1.ProductCardHorizontalMdDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardHorizontalMdDefault.description : _d, _e = _a.listDescription, listDescription = _e === void 0 ? props_1.ProductCardHorizontalMdDefault.listDescription : _e, _f = _a.image, image = _f === void 0 ? props_1.ProductCardHorizontalMdDefault.image : _f, _g = _a.unitPriceText, unitPriceText = _g === void 0 ? props_1.ProductCardHorizontalMdDefault.unitPriceText : _g, _h = _a.totalPrice, totalPrice = _h === void 0 ? props_1.ProductCardHorizontalMdDefault.totalPrice : _h, _j = _a.oldPrice, oldPrice = _j === void 0 ? props_1.ProductCardHorizontalMdDefault.oldPrice : _j, _k = _a.newPrice, newPrice = _k === void 0 ? props_1.ProductCardHorizontalMdDefault.newPrice : _k, _l = _a.discountRate, discountRate = _l === void 0 ? props_1.ProductCardHorizontalMdDefault.discountRate : _l, _m = _a.variant, variant = _m === void 0 ? props_1.ProductCardHorizontalMdDefault.variant : _m, _o = _a.slug, slug = _o === void 0 ? props_1.ProductCardHorizontalMdDefault.slug : _o, _p = _a.component, component = _p === void 0 ? props_1.ProductCardHorizontalMdDefault.component : _p, _q = _a.onClick, onClick = _q === void 0 ? props_1.ProductCardHorizontalMdDefault.onClick : _q, _r = _a.hasLoading, hasLoading = _r === void 0 ? props_1.ProductCardHorizontalMdDefault.hasLoading : _r, _s = _a.hasPriceLoading, hasPriceLoading = _s === void 0 ? props_1.ProductCardHorizontalMdDefault.hasPriceLoading : _s, _t = _a.textSize, textSize = _t === void 0 ? props_1.ProductCardHorizontalMdDefault.textSize : _t, _u = _a.hasBgColor, hasBgColor = _u === void 0 ? props_1.ProductCardHorizontalMdDefault.hasBgColor : _u;
+    var _c = _a.title, title = _c === void 0 ? props_1.ProductCardHorizontalMdDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardHorizontalMdDefault.description : _d, _e = _a.listDescription, listDescription = _e === void 0 ? props_1.ProductCardHorizontalMdDefault.listDescription : _e, _f = _a.image, image = _f === void 0 ? props_1.ProductCardHorizontalMdDefault.image : _f, _g = _a.unitPriceText, unitPriceText = _g === void 0 ? props_1.ProductCardHorizontalMdDefault.unitPriceText : _g, _h = _a.totalPrice, totalPrice = _h === void 0 ? props_1.ProductCardHorizontalMdDefault.totalPrice : _h, _j = _a.oldPrice, oldPrice = _j === void 0 ? props_1.ProductCardHorizontalMdDefault.oldPrice : _j, _k = _a.newPrice, newPrice = _k === void 0 ? props_1.ProductCardHorizontalMdDefault.newPrice : _k, _l = _a.discountRate, discountRate = _l === void 0 ? props_1.ProductCardHorizontalMdDefault.discountRate : _l, _m = _a.variant, variant = _m === void 0 ? props_1.ProductCardHorizontalMdDefault.variant : _m, _o = _a.slug, slug = _o === void 0 ? props_1.ProductCardHorizontalMdDefault.slug : _o, _p = _a.component, component = _p === void 0 ? props_1.ProductCardHorizontalMdDefault.component : _p, _q = _a.onClick, onClick = _q === void 0 ? props_1.ProductCardHorizontalMdDefault.onClick : _q, _r = _a.hasLoading, hasLoading = _r === void 0 ? props_1.ProductCardHorizontalMdDefault.hasLoading : _r, _s = _a.hasPriceLoading, hasPriceLoading = _s === void 0 ? props_1.ProductCardHorizontalMdDefault.hasPriceLoading : _s, _t = _a.textSize, textSize = _t === void 0 ? props_1.ProductCardHorizontalMdDefault.textSize : _t, _u = _a.hasBgColor, hasBgColor = _u === void 0 ? props_1.ProductCardHorizontalMdDefault.hasBgColor : _u, _v = _a.campaigns, campaigns = _v === void 0 ? props_1.ProductCardHorizontalMdDefault.campaigns : _v, _w = _a.onCampaignCountClick, onCampaignCountClick = _w === void 0 ? props_1.ProductCardHorizontalMdDefault.onCampaignCountClick : _w;
+    var campaignItems = Array.isArray(campaigns) ? campaigns.filter(Boolean) : [];
+    var visibleCampaigns = campaignItems.slice(0, MAX_VISIBLE_CAMPAIGNS);
+    var extraCampaignCount = campaignItems.length - visibleCampaigns.length;
+    var hasCampaigns = !hasLoading && visibleCampaigns.length > 0;
     var styledProps = {
         $hasLoading: hasLoading,
         $textSize: textSize,
         $hasBgColor: hasBgColor,
         $variant: variant,
         $discountRate: discountRate,
+        $hasCampaigns: hasCampaigns,
     };
     var filteredListDescription = (_b = listDescription === null || listDescription === void 0 ? void 0 : listDescription.filter(Boolean)) !== null && _b !== void 0 ? _b : [];
     var hasListDescription = filteredListDescription.length > 0;
@@ -41,15 +48,23 @@ var ProductCardHorizontalMd = function (_a) {
     var isDiscountVariant = variant === 'discount';
     var showPriceLoading = hasPriceLoading && !hasLoading;
     var hasDiscountPrice = hasLoading || showPriceLoading || oldPrice || newPrice || (discountRate != null && discountRate > 0);
+    var hasSlug = Boolean(slug && String(slug).trim());
+    var wrapWithLink = function (children) {
+        return hasLoading || !hasSlug ? (children) : ((0, jsx_runtime_1.jsx)(CardLinkComponent, __assign({ component: component, slug: slug }, { children: children })));
+    };
+    var campaignsRow = hasCampaigns ? ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CampaignsRow, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CampaignsList, { children: visibleCampaigns.map(function (campaignTitle, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CampaignBadge, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: campaignTitle }) }, "".concat(campaignTitle, "-").concat(index))); }) }), extraCampaignCount > 0 && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CampaignCountButton, __assign({ type: "button", onClick: function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onCampaignCountClick === null || onCampaignCountClick === void 0 ? void 0 : onCampaignCountClick();
+                } }, { children: ["+", extraCampaignCount] })))] })) : null;
     var imageContent = ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ImageWrapper, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "64px", height: "64px", hasInset: true })) : (image) })));
     var titleContent = ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Title, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "180px", height: "19px", hasInset: true })] })) : (title) })));
-    var defaultCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [imageContent, (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.TextSection, { children: [titleContent, hasDescription && (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "140px", height: "17px", hasInset: true }) }))) : hasListDescription ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionList, __assign({}, styledProps, { children: filteredListDescription.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionListItem, { children: item }, "".concat(item, "-").concat(index))); }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: description }))))] }), (hasLoading || showPriceLoading || unitPriceText || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceSection, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(hasLoading || unitPriceText) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.UnitPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "120px", height: "17px" })) : (unitPriceText) })), (hasLoading || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.TotalPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "80px", height: "19px" })) : (totalPrice) }))] })) }))] })));
-    var discountCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [imageContent, (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.DiscountContentSection, { children: [titleContent, hasDiscountPrice && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceRow, __assign({}, styledProps, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, __assign({ "$isDiscount": true, "$fullRow": true }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(hasLoading || (discountRate != null && discountRate > 0)) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DiscountBadge, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "65px", height: "16px", hasInset: true })) : ("%".concat(discountRate)) })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceStack, { children: [(hasLoading || oldPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.OldPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "15px", hasInset: true })) : (oldPrice) }))), (hasLoading || newPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.NewPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "17px", hasInset: true })) : (newPrice) })))] })] })) })))] })] })));
+    var defaultCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [wrapWithLink(imageContent), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.ContentSection, { children: [wrapWithLink((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.MainRow, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.TextSection, { children: [titleContent, hasDescription && (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "140px", height: "17px", hasInset: true }) }))) : hasListDescription ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionList, __assign({}, styledProps, { children: filteredListDescription.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionListItem, { children: item }, "".concat(item, "-").concat(index))); }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: description }))))] }), (hasLoading || showPriceLoading || unitPriceText || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceSection, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(hasLoading || unitPriceText) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.UnitPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "120px", height: "17px" })) : (unitPriceText) })), (hasLoading || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.TotalPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "80px", height: "19px" })) : (totalPrice) }))] })) }))] })), campaignsRow] })] })));
+    var discountCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [wrapWithLink(imageContent), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.DiscountContentSection, { children: [wrapWithLink((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.ContentSection, { children: [titleContent, hasDiscountPrice && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceRow, __assign({}, styledProps, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, __assign({ "$isDiscount": true, "$fullRow": true }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(hasLoading || (discountRate != null && discountRate > 0)) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DiscountBadge, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "65px", height: "16px", hasInset: true })) : ("%".concat(discountRate)) })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceStack, { children: [(hasLoading || oldPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.OldPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "15px", hasInset: true })) : (oldPrice) }))), (hasLoading || newPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.NewPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "17px", hasInset: true })) : (newPrice) })))] })] })) })))] })), campaignsRow] })] })));
     var cardBody = isDiscountVariant ? discountCardBody : defaultCardBody;
     if (hasLoading) {
         return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CardLink, { children: cardBody }) })));
     }
-    var hasSlug = Boolean(slug && String(slug).trim());
-    return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { onClick: onClick }, { children: hasSlug ? ((0, jsx_runtime_1.jsx)(CardLinkComponent, __assign({ component: component, slug: slug }, { children: cardBody }))) : (cardBody) })));
+    return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { onClick: onClick }, { children: cardBody })));
 };
 exports.default = (0, react_1.memo)(ProductCardHorizontalMd);

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.d.ts

@@ -2,6 +2,12 @@
 import { ProductCardHorizontalMdStyledProps } from "./props";
 export declare const CardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
 export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
+export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const MainRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const CampaignsRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const CampaignsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const CampaignBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const CampaignCountButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
 export declare const DiscountContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const PriceRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
 export declare const DiscountBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.js

@@ -7,30 +7,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCardHorizontalMdStyled = exports.PriceLoading = exports.TotalPrice = exports.UnitPrice = exports.PriceSection = exports.DescriptionListItem = exports.DescriptionList = exports.Description = exports.Title = exports.TextSection = exports.ImageWrapper = exports.NewPrice = exports.OldPrice = exports.PriceStack = exports.DiscountBadge = exports.PriceRow = exports.DiscountContentSection = exports.CardBody = exports.CardLink = void 0;
+exports.ProductCardHorizontalMdStyled = exports.PriceLoading = exports.TotalPrice = exports.UnitPrice = exports.PriceSection = exports.DescriptionListItem = exports.DescriptionList = exports.Description = exports.Title = exports.TextSection = exports.ImageWrapper = exports.NewPrice = exports.OldPrice = exports.PriceStack = exports.DiscountBadge = exports.PriceRow = exports.DiscountContentSection = exports.CampaignCountButton = exports.CampaignBadge = exports.CampaignsList = exports.CampaignsRow = exports.MainRow = exports.ContentSection = exports.CardBody = exports.CardLink = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.CardLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    text-decoration: none !important;\n    color: inherit;\n\n    &:hover,\n    &:focus,\n    &:visited,\n    &:active {\n        text-decoration: none !important;\n        color: inherit;\n    }\n\n    &,\n    & * {\n        text-decoration: none !important;\n    }\n"], ["\n    display: block;\n    text-decoration: none !important;\n    color: inherit;\n\n    &:hover,\n    &:focus,\n    &:visited,\n    &:active {\n        text-decoration: none !important;\n        color: inherit;\n    }\n\n    &,\n    & * {\n        text-decoration: none !important;\n    }\n"])));
-exports.CardBody = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n    position: relative;\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: 1rem;\n    width: 100%;\n    position: relative;\n"])), function (props) { return props.$variant === 'discount' ? 'auto 1fr' : 'auto 1fr auto'; });
-exports.DiscountContentSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    position: relative;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    position: relative;\n"])));
-exports.PriceRow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: grid;\n    align-items: center;\n    grid-template-columns: ", ";\n    gap: 0.5rem;\n    position: relative;\n"], ["\n    display: grid;\n    align-items: center;\n    grid-template-columns: ", ";\n    gap: 0.5rem;\n    position: relative;\n"])), function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; });
-exports.DiscountBadge = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 65px;\n    height: 47px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    color: var(--dark);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font: var(--title-extra-bold-16-19);\n    flex-shrink: 0;\n    position: relative;\n"], ["\n    width: 65px;\n    height: 47px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    color: var(--dark);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font: var(--title-extra-bold-16-19);\n    flex-shrink: 0;\n    position: relative;\n"])));
-exports.PriceStack = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    width: 100%;\n"])));
-exports.OldPrice = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    color: var(--dark-opacity-25);\n    font: var(--body-semi-bold-14-17);\n    text-decoration: line-through;\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"], ["\n    color: var(--dark-opacity-25);\n    font: var(--body-semi-bold-14-17);\n    text-decoration: line-through;\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"])), function (props) { return props.$hasLoading ? '50%' : 'auto'; }, function (props) { return props.$hasLoading ? '15px' : 'auto'; });
-exports.NewPrice = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    color: var(--dark);\n    font: var(--headline-extra-bold-18-22);\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"], ["\n    color: var(--dark);\n    font: var(--headline-extra-bold-18-22);\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"])), function (props) { return props.$hasLoading ? '50%' : 'auto'; }, function (props) { return props.$hasLoading ? '17px' : 'auto'; });
-exports.ImageWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"])), function (props) { return props.$hasLoading || props.$hasBgColor ? "none" : "1px solid var(--grey-10)"; });
-exports.TextSection = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"])));
-exports.Title = styled_components_1.default.strong(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"], ["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"])), function (props) { return props.$variant === 'discount' || props.$textSize === 'md'
+exports.CardLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    min-width: 0;\n    text-decoration: none !important;\n    color: inherit;\n\n    &:hover,\n    &:focus,\n    &:visited,\n    &:active {\n        text-decoration: none !important;\n        color: inherit;\n    }\n\n    &,\n    & * {\n        text-decoration: none !important;\n    }\n"], ["\n    display: block;\n    min-width: 0;\n    text-decoration: none !important;\n    color: inherit;\n\n    &:hover,\n    &:focus,\n    &:visited,\n    &:active {\n        text-decoration: none !important;\n        color: inherit;\n    }\n\n    &,\n    & * {\n        text-decoration: none !important;\n    }\n"])));
+exports.CardBody = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: ", ";\n    gap: 1rem;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n"], ["\n    display: grid;\n    grid-template-columns: auto 1fr;\n    align-items: ", ";\n    gap: 1rem;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n"])), function (props) { return props.$hasCampaigns ? 'start' : 'center'; });
+exports.ContentSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    position: relative;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    position: relative;\n"])));
+exports.MainRow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    gap: 1rem;\n    min-width: 0;\n"], ["\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    gap: 1rem;\n    min-width: 0;\n"])));
+exports.CampaignsRow = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    gap: 0.5rem;\n    min-width: 0;\n    width: 100%;\n"], ["\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    gap: 0.5rem;\n    min-width: 0;\n    width: 100%;\n"])));
+exports.CampaignsList = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    gap: 0.5rem;\n    min-width: 0;\n    flex: 0 1 auto;\n    overflow: hidden;\n"], ["\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    gap: 0.5rem;\n    min-width: 0;\n    flex: 0 1 auto;\n    overflow: hidden;\n"])));
+exports.CampaignBadge = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    min-width: 0;\n    flex: 0 1 auto;\n    overflow: hidden;\n\n    > div {\n        display: block;\n        max-width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n"], ["\n    min-width: 0;\n    flex: 0 1 auto;\n    overflow: hidden;\n\n    > div {\n        display: block;\n        max-width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n"])));
+exports.CampaignCountButton = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    flex-shrink: 0;\n    border: none;\n    background: none;\n    padding: 0;\n    cursor: pointer;\n    color: var(--primary);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    flex-shrink: 0;\n    border: none;\n    background: none;\n    padding: 0;\n    cursor: pointer;\n    color: var(--primary);\n    font: var(--caption-semi-bold-12-15);\n"])));
+exports.DiscountContentSection = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    position: relative;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    position: relative;\n"])));
+exports.PriceRow = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: grid;\n    align-items: center;\n    grid-template-columns: ", ";\n    gap: 0.5rem;\n    position: relative;\n"], ["\n    display: grid;\n    align-items: center;\n    grid-template-columns: ", ";\n    gap: 0.5rem;\n    position: relative;\n"])), function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; });
+exports.DiscountBadge = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 65px;\n    height: 47px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    color: var(--dark);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font: var(--title-extra-bold-16-19);\n    flex-shrink: 0;\n    position: relative;\n"], ["\n    width: 65px;\n    height: 47px;\n    border-radius: 0.5rem;\n    background-color: var(--primary-opacity-10);\n    color: var(--dark);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font: var(--title-extra-bold-16-19);\n    flex-shrink: 0;\n    position: relative;\n"])));
+exports.PriceStack = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    width: 100%;\n"])));
+exports.OldPrice = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    color: var(--dark-opacity-25);\n    font: var(--body-semi-bold-14-17);\n    text-decoration: line-through;\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"], ["\n    color: var(--dark-opacity-25);\n    font: var(--body-semi-bold-14-17);\n    text-decoration: line-through;\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"])), function (props) { return props.$hasLoading ? '50%' : 'auto'; }, function (props) { return props.$hasLoading ? '15px' : 'auto'; });
+exports.NewPrice = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    color: var(--dark);\n    font: var(--headline-extra-bold-18-22);\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"], ["\n    color: var(--dark);\n    font: var(--headline-extra-bold-18-22);\n    white-space: nowrap;\n    position: relative;\n    width: ", ";\n    min-height: ", ";\n"])), function (props) { return props.$hasLoading ? '50%' : 'auto'; }, function (props) { return props.$hasLoading ? '17px' : 'auto'; });
+exports.ImageWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"], ["\n    width: 64px;\n    height: 64px;\n    flex-shrink: 0;\n    border: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    overflow: hidden;\n    background: var(--theme-bg-color);\n    box-sizing: border-box;\n\n    > * {\n        display: block;\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        object-position: center center;\n    }\n"])), function (props) { return props.$hasLoading || props.$hasBgColor ? "none" : "1px solid var(--grey-10)"; });
+exports.TextSection = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"], ["\n    min-width: 0;\n    display: grid;\n    row-gap: 0.5rem;\n"])));
+exports.Title = styled_components_1.default.strong(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"], ["\n    display: block;\n    font: ", ";\n    color: var(--dark);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n"])), function (props) { return props.$variant === 'discount' || props.$textSize === 'md'
     ? 'var(--title-extra-bold-16-19)'
     : 'var(--body-semi-bold-14-17)'; });
 var descriptionTextStyles = function (props) { return "\n    font: ".concat(props.$textSize === 'md'
     ? 'var(--body-medium-14-17)'
     : 'var(--body-regular-14-17)', ";\n    color: ").concat(props.$hasBgColor ? 'var(--grey-40)' : 'inherit', ";\n"); };
-exports.Description = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    margin: 0;\n    ", ";\n    position: relative;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n    white-space: normal;\n    height: ", ";\n"], ["\n    margin: 0;\n    ", ";\n    position: relative;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n    white-space: normal;\n    height: ", ";\n"])), descriptionTextStyles, function (props) { return props.$textSize === 'md' ? '37px' : '34px'; });
-exports.DescriptionList = styled_components_1.default.ul(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-width: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    row-gap: 0.25rem;\n    column-gap: 0.5rem;\n"], ["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-width: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    row-gap: 0.25rem;\n    column-gap: 0.5rem;\n"])), descriptionTextStyles);
-exports.DescriptionListItem = styled_components_1.default.li(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n\n    & + & {\n        &::before {\n            content: '';\n            display: inline-block;\n            width: 4px;\n            height: 4px;\n            border-radius: 50%;\n            background-color: currentColor;\n            margin: 0 0.5rem;\n            flex-shrink: 0;\n        }\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n\n    & + & {\n        &::before {\n            content: '';\n            display: inline-block;\n            width: 4px;\n            height: 4px;\n            border-radius: 50%;\n            background-color: currentColor;\n            margin: 0 0.5rem;\n            flex-shrink: 0;\n        }\n    }\n"])));
-exports.PriceSection = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    flex-shrink: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    text-align: right;\n"], ["\n    flex-shrink: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    text-align: right;\n"])));
-exports.UnitPrice = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"])));
-exports.TotalPrice = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"])));
-exports.PriceLoading = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    min-height: ", ";\n\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    min-height: ", ";\n\n    ", "\n"])), function (props) { return props.$isDiscount ? 'flex-start' : 'flex-end'; }, function (props) { return props.$isDiscount ? '47px' : '44px'; }, function (props) { return props.$fullRow && "\n        grid-column: 1 / -1;\n    "; });
-exports.ProductCardHorizontalMdStyled = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"], ["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n"])), function (props) { return props.$hasBgColor ? 'none' : '1px solid var(--grey-10)'; }, function (props) { return props.$hasBgColor ? 'var(--dark-opacity-3)' : 'var(--theme-bg-color)'; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
+exports.Description = styled_components_1.default.p(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    margin: 0;\n    ", ";\n    position: relative;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n    white-space: normal;\n"], ["\n    margin: 0;\n    ", ";\n    position: relative;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n    white-space: normal;\n"])), descriptionTextStyles);
+exports.DescriptionList = styled_components_1.default.ul(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-width: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    row-gap: 0.25rem;\n    column-gap: 0.5rem;\n"], ["\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-width: 0;\n    ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    row-gap: 0.25rem;\n    column-gap: 0.5rem;\n"])), descriptionTextStyles);
+exports.DescriptionListItem = styled_components_1.default.li(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n\n    & + & {\n        &::before {\n            content: '';\n            display: inline-block;\n            width: 4px;\n            height: 4px;\n            border-radius: 50%;\n            background-color: currentColor;\n            margin: 0 0.5rem;\n            flex-shrink: 0;\n        }\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n\n    & + & {\n        &::before {\n            content: '';\n            display: inline-block;\n            width: 4px;\n            height: 4px;\n            border-radius: 50%;\n            background-color: currentColor;\n            margin: 0 0.5rem;\n            flex-shrink: 0;\n        }\n    }\n"])));
+exports.PriceSection = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    flex-shrink: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    text-align: right;\n"], ["\n    flex-shrink: 0;\n    display: grid;\n    row-gap: 0.5rem;\n    text-align: right;\n"])));
+exports.UnitPrice = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-regular-14-17);\n    white-space: nowrap;\n    position: relative;\n"])));
+exports.TotalPrice = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"], ["\n    font: var(--body-bold-14-17);\n    color: var(--dark);\n    white-space: nowrap;\n    position: relative;\n"])));
+exports.PriceLoading = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    min-height: ", ";\n\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    min-height: ", ";\n\n    ", "\n"])), function (props) { return props.$isDiscount ? 'flex-start' : 'flex-end'; }, function (props) { return props.$isDiscount ? '47px' : '44px'; }, function (props) { return props.$fullRow && "\n        grid-column: 1 / -1;\n    "; });
+exports.ProductCardHorizontalMdStyled = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n"], ["\n    border: ", ";\n    border-radius: 0.5rem;\n    background-color: ", ";\n    padding: 1rem;\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n"])), function (props) { return props.$hasBgColor ? 'none' : '1px solid var(--grey-10)'; }, function (props) { return props.$hasBgColor ? 'var(--dark-opacity-3)' : 'var(--theme-bg-color)'; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.test.d.ts

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

package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.test.js

@@ -0,0 +1,156 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var ProductCardHorizontalMd_1 = __importDefault(require("./ProductCardHorizontalMd"));
+var baseProps = {
+    title: 'Çekirdek kahve',
+    description: 'İki ayda bir',
+    unitPriceText: '10 adet x 520 TL',
+    totalPrice: '5.200 TL',
+};
+var renderCard = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_1.default, __assign({}, baseProps, props)));
+};
+describe('ProductCardHorizontalMd', function () {
+    it('renders title and price', function () {
+        renderCard();
+        expect(react_1.screen.getByText('Çekirdek kahve')).toBeInTheDocument();
+        expect(react_1.screen.getByText('5.200 TL')).toBeInTheDocument();
+    });
+});
+describe('ProductCardHorizontalMd campaigns', function () {
+    it('does not render a campaign row when campaigns is empty', function () {
+        renderCard({ campaigns: [] });
+        expect(react_1.screen.queryByRole('button', { name: /^\+\d+$/ })).not.toBeInTheDocument();
+    });
+    it('renders up to three campaigns without a remaining count', function () {
+        renderCard({
+            campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3'],
+        });
+        expect(react_1.screen.getByText('Kampanya 1')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Kampanya 2')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Kampanya 3')).toBeInTheDocument();
+        expect(react_1.screen.queryByRole('button', { name: /^\+\d+$/ })).not.toBeInTheDocument();
+    });
+    it('renders the first three campaigns and remaining count when there are more than three', function () {
+        renderCard({
+            campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3', 'Kampanya 4'],
+        });
+        expect(react_1.screen.getByText('Kampanya 1')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Kampanya 2')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Kampanya 3')).toBeInTheDocument();
+        expect(react_1.screen.getByRole('button', { name: '+1' })).toBeInTheDocument();
+        expect(react_1.screen.queryByText('Kampanya 4')).not.toBeInTheDocument();
+    });
+    it('calls onCampaignCountClick when the remaining count is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onCampaignCountClick;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onCampaignCountClick = jest.fn();
+                    renderCard({
+                        campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3', 'Kampanya 4', 'Kampanya 5'],
+                        onCampaignCountClick: onCampaignCountClick,
+                    });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: '+2' }))];
+                case 1:
+                    _a.sent();
+                    expect(onCampaignCountClick).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not call card onClick when the remaining count is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick, onCampaignCountClick;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onClick = jest.fn();
+                    onCampaignCountClick = jest.fn();
+                    renderCard({
+                        slug: null,
+                        onClick: onClick,
+                        campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3', 'Kampanya 4'],
+                        onCampaignCountClick: onCampaignCountClick,
+                    });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: '+1' }))];
+                case 1:
+                    _a.sent();
+                    expect(onCampaignCountClick).toHaveBeenCalledTimes(1);
+                    expect(onClick).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('renders campaign titles as text so markup is not executed', function () {
+        renderCard({ campaigns: ['<img src="x" onerror="alert(1)">'] });
+        expect(react_1.screen.getByText('<img src="x" onerror="alert(1)">')).toBeInTheDocument();
+        expect(document.querySelector('img[src="x"]')).not.toBeInTheDocument();
+    });
+    it('does not crash when campaigns is not an array', function () {
+        renderCard({ campaigns: 'kampanya' });
+        expect(react_1.screen.getByText('Çekirdek kahve')).toBeInTheDocument();
+        expect(react_1.screen.queryByRole('button', { name: /^\+\d+$/ })).not.toBeInTheDocument();
+    });
+    it('keeps campaign badges and remaining count on a single row', function () {
+        renderCard({
+            campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3', 'Kampanya 4'],
+        });
+        var countButton = react_1.screen.getByRole('button', { name: '+1' });
+        expect(countButton.parentElement).toHaveStyle({ flexWrap: 'nowrap' });
+        expect(countButton.previousElementSibling).toHaveStyle({ flexWrap: 'nowrap' });
+    });
+});

package/dist/components/ProductCardHorizontalMd/props.d.ts

@@ -21,6 +21,8 @@ export interface ProductCardHorizontalMd {
     hasPriceLoading?: boolean;
     textSize?: TEXTSIZE;
     hasBgColor?: boolean;
+    campaigns?: string[];
+    onCampaignCountClick?(): void;
 }
 export interface ProductCardHorizontalMdStyledProps {
     $hasLoading?: boolean;
@@ -28,6 +30,7 @@ export interface ProductCardHorizontalMdStyledProps {
     $hasBgColor?: boolean;
     $variant?: VARIANT;
     $discountRate?: number;
+    $hasCampaigns?: boolean;
 }
 export declare const ProductCardHorizontalMdDefault: ProductCardHorizontalMd;
 export type ProductCardHorizontalMdProps = typeof ProductCardHorizontalMdDefault;

package/dist/components/ProductCardHorizontalMd/props.js

@@ -21,4 +21,6 @@ exports.ProductCardHorizontalMdDefault = {
     hasPriceLoading: false,
     textSize: 'sm',
     hasBgColor: false,
+    campaigns: null,
+    onCampaignCountClick: null,
 };