krl-alfred 2.17.33 → 2.17.35

package/dist/components/BannerCard/BannerCard.d.ts

@@ -1,3 +1,3 @@
 import { BannerCardProps } from "./props";
-declare const BannerCard: ({ title, img, imgMobile, hasDarkTheme, hasShadow, description, shortDesc, buttonText, onClick, hasRightArrow, customStyle, }: BannerCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const BannerCard: ({ title, img, imgMobile, hasDarkTheme, hasShadow, description, shortDesc, buttonText, onClick, hasRightArrow, customStyle, buttonVariant, }: BannerCardProps) => import("react/jsx-runtime").JSX.Element;
 export default BannerCard;

package/dist/components/BannerCard/BannerCard.js

@@ -20,7 +20,7 @@ var BannerCard_styled_1 = require("./BannerCard.styled");
 var Button_1 = __importDefault(require("../Button"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var BannerCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.BannerDefault.title : _b, _c = _a.img, img = _c === void 0 ? props_1.BannerDefault.img : _c, _d = _a.imgMobile, imgMobile = _d === void 0 ? props_1.BannerDefault.imgMobile : _d, _e = _a.hasDarkTheme, hasDarkTheme = _e === void 0 ? props_1.BannerDefault.hasDarkTheme : _e, _f = _a.hasShadow, hasShadow = _f === void 0 ? props_1.BannerDefault.hasShadow : _f, _g = _a.description, description = _g === void 0 ? props_1.BannerDefault.description : _g, _h = _a.shortDesc, shortDesc = _h === void 0 ? props_1.BannerDefault.shortDesc : _h, _j = _a.buttonText, buttonText = _j === void 0 ? props_1.BannerDefault.buttonText : _j, _k = _a.onClick, onClick = _k === void 0 ? props_1.BannerDefault.onClick : _k, _l = _a.hasRightArrow, hasRightArrow = _l === void 0 ? props_1.BannerDefault.hasRightArrow : _l, _m = _a.customStyle, customStyle = _m === void 0 ? props_1.BannerDefault.customStyle : _m;
-    return ((0, jsx_runtime_1.jsxs)(BannerCard_styled_1.BannerCardStyled, __assign({ "$hasDarkTheme": hasDarkTheme, "$hasShadow": hasShadow, "$customStyle": customStyle }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "mobileLink", onClick: onClick }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [title && (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)("p", { className: "description", dangerouslySetInnerHTML: { __html: description } }), buttonText && (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: hasDarkTheme ? "secondary" : "primary", onClick: onClick }, { children: buttonText }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: img })), imgMobile && (0, jsx_runtime_1.jsx)("div", __assign({ className: "img imgMobile" }, { children: imgMobile })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "textMobile", onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: shortDesc } }), hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] }))] })));
+    var _b = _a.title, title = _b === void 0 ? props_1.BannerDefault.title : _b, _c = _a.img, img = _c === void 0 ? props_1.BannerDefault.img : _c, _d = _a.imgMobile, imgMobile = _d === void 0 ? props_1.BannerDefault.imgMobile : _d, _e = _a.hasDarkTheme, hasDarkTheme = _e === void 0 ? props_1.BannerDefault.hasDarkTheme : _e, _f = _a.hasShadow, hasShadow = _f === void 0 ? props_1.BannerDefault.hasShadow : _f, _g = _a.description, description = _g === void 0 ? props_1.BannerDefault.description : _g, _h = _a.shortDesc, shortDesc = _h === void 0 ? props_1.BannerDefault.shortDesc : _h, _j = _a.buttonText, buttonText = _j === void 0 ? props_1.BannerDefault.buttonText : _j, _k = _a.onClick, onClick = _k === void 0 ? props_1.BannerDefault.onClick : _k, _l = _a.hasRightArrow, hasRightArrow = _l === void 0 ? props_1.BannerDefault.hasRightArrow : _l, _m = _a.customStyle, customStyle = _m === void 0 ? props_1.BannerDefault.customStyle : _m, _o = _a.buttonVariant, buttonVariant = _o === void 0 ? props_1.BannerDefault.buttonVariant : _o;
+    return ((0, jsx_runtime_1.jsxs)(BannerCard_styled_1.BannerCardStyled, __assign({ "$hasDarkTheme": hasDarkTheme, "$hasShadow": hasShadow, "$customStyle": customStyle }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "mobileLink", onClick: onClick }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [title && (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)("p", { className: "description", dangerouslySetInnerHTML: { __html: description } }), buttonText && (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: buttonVariant, onClick: onClick }, { children: buttonText }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: img })), imgMobile && (0, jsx_runtime_1.jsx)("div", __assign({ className: "img imgMobile" }, { children: imgMobile })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "textMobile", onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: shortDesc } }), hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] }))] })));
 };
 exports.default = BannerCard;

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { variants } from "../Button/props";
+type BUTTON_VARIANT = typeof variants[number];
 export interface BannerCard {
     img?: React.ReactNode;
     imgMobile?: React.ReactNode;
@@ -11,6 +13,7 @@ export interface BannerCard {
     customStyle?: string;
     onClick?: () => void;
     hasRightArrow?: boolean;
+    buttonVariant?: BUTTON_VARIANT;
 }
 export interface BannerCardStyledProps {
     $hasDarkTheme?: boolean;
@@ -19,3 +22,4 @@ export interface BannerCardStyledProps {
 }
 export declare const BannerDefault: BannerCard;
 export type BannerCardProps = typeof BannerDefault;
+export {};

package/dist/components/BannerCard/props.js

@@ -12,5 +12,6 @@ exports.BannerDefault = {
     buttonText: "",
     onClick: null,
     hasRightArrow: false,
-    customStyle: ""
+    customStyle: "",
+    buttonVariant: "primary"
 };

package/dist/components/ProductCardVertical/ProductCardVertical.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, ...other }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, ...other }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/ProductCardVertical/ProductCardVertical.js

@@ -32,8 +32,8 @@ var ProductCardVertical_styled_1 = require("./ProductCardVertical.styled");
 var react_i18next_1 = require("react-i18next");
 var Badges_1 = __importDefault(require("../Badges"));
 var ProductCardVertical = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, _w = _a.imageInfoTextVariant, imageInfoTextVariant = _w === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _w, _x = _a.isShowOldPrice, isShowOldPrice = _x === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _x, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock", "hasBeltBadge", "beltBadgeVariant", "beltBadgeTitle", "imageInfoText", "imageInfoTextVariant", "isShowOldPrice"]);
+    var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, _w = _a.imageInfoTextVariant, imageInfoTextVariant = _w === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _w, _x = _a.isShowOldPrice, isShowOldPrice = _x === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _x, _y = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _y === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _y, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock", "hasBeltBadge", "beltBadgeVariant", "beltBadgeTitle", "imageInfoText", "imageInfoTextVariant", "isShowOldPrice", "isOldPricePeriodUnderline"]);
     var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
 };
 exports.default = (0, react_1.memo)(ProductCardVertical);

package/dist/components/ProductCardVertical/ProductCardVertical.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductCardVerticalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    min-width: 240px;\n    padding: 1rem;\n    transition: all .2s ease;\n    position: relative;\n    box-sizing: border-box;\n    background-color: white;\n    .cartBadge {\n        position: absolute;\n        left: 8px;\n        top: 8px;\n        z-index: 2;\n\n        &:is(.hasInset) {\n            left: 7px;\n            top: 0;\n        }\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    &:hover {\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n\n    .img {\n        border-radius: 0.5rem;\n        border: 1px solid var(--dark-opacity-5);\n        background: #FFF;\n        position: relative;\n        overflow: hidden;\n        height: 150px;\n        box-sizing: border-box;\n        z-index: 1;\n        text-align: center;\n        padding: 0.5rem;\n        ", "\n        .outOfStock{\n            width: 100% !important;\n            height: 100% !important;\n            background-color: #BABBC280;\n            > div{\n                height: 17px !important;\n                aspect-ratio: initial !important;\n            }\n        }\n            .imageInfoText{\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                top:auto !important;\n                width: 100%;\n                height: 24px !important;\n                align-items: center;\n                justify-content: center;\n                display: flex;\n                ", "\n                border-radius: 0;\n                top: auto;\n                transform: none;\n                aspect-ratio: initial !important;\n                font:var(--caption-semi-bold-10-12); \n                strong{\n                  font:var(--caption-bold-10-12);\n                  height: auto !important;\n                  aspect-ratio: initial !important;\n                  margin-right: 2px;\n                }\n            }\n    }\n\n    .productCardContent {\n        padding: 1rem 0 0.5rem 0;\n\n        .productCardTitle {\n            display: block;\n            color: ", ";\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            height: 38px;\n            word-break: break-word;\n            font: var(--title-bold-16-19);\n        }\n\n        .productCardDescription {\n            display: block;\n            margin-top: 0.5rem;\n            color: var(--grey-40);\n            margin-bottom: 1.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            height: 34px;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n        }\n\n        .productCardPriceContent {\n            display: grid;\n            align-items: ", ";\n            justify-content: flex-start;\n            height: 36px;\n            grid-template-columns: ", ";\n            color: ", ";\n            .discountRate {\n                margin-right: 0.5rem;\n                width: 48px;\n                height: 36px;\n                border-radius: 0.5rem;\n                background-color: var(--primary-opacity-10);\n                color: var(--primary);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font: var(--body-extra-bold-13-16);\n            }\n\n            .oldPrice, .newPrice {\n                display: flex;\n                align-items: end;\n                justify-content: flex-start;\n\n                .price {\n                    margin-right: 4px;\n                }\n            }\n\n            .oldPrice {\n                color: var(--dark-opacity-25);\n                margin-bottom: 2px;\n\n                .price, .period {\n                    text-decoration: line-through;\n                }\n\n                .price {\n                    font: var(--caption-semi-bold-12-15);\n                }\n\n                .period {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n\n            .newPrice {\n                .price {\n                    font: var(--body-extra-bold-14-17);\n                }\n\n                .period {\n                    font: var(--body-regular-13-16);\n                }\n            }\n        }\n    }\n\n    ", "\n"], ["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    min-width: 240px;\n    padding: 1rem;\n    transition: all .2s ease;\n    position: relative;\n    box-sizing: border-box;\n    background-color: white;\n    .cartBadge {\n        position: absolute;\n        left: 8px;\n        top: 8px;\n        z-index: 2;\n\n        &:is(.hasInset) {\n            left: 7px;\n            top: 0;\n        }\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    &:hover {\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n\n    .img {\n        border-radius: 0.5rem;\n        border: 1px solid var(--dark-opacity-5);\n        background: #FFF;\n        position: relative;\n        overflow: hidden;\n        height: 150px;\n        box-sizing: border-box;\n        z-index: 1;\n        text-align: center;\n        padding: 0.5rem;\n        ", "\n        .outOfStock{\n            width: 100% !important;\n            height: 100% !important;\n            background-color: #BABBC280;\n            > div{\n                height: 17px !important;\n                aspect-ratio: initial !important;\n            }\n        }\n            .imageInfoText{\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                top:auto !important;\n                width: 100%;\n                height: 24px !important;\n                align-items: center;\n                justify-content: center;\n                display: flex;\n                ", "\n                border-radius: 0;\n                top: auto;\n                transform: none;\n                aspect-ratio: initial !important;\n                font:var(--caption-semi-bold-10-12); \n                strong{\n                  font:var(--caption-bold-10-12);\n                  height: auto !important;\n                  aspect-ratio: initial !important;\n                  margin-right: 2px;\n                }\n            }\n    }\n\n    .productCardContent {\n        padding: 1rem 0 0.5rem 0;\n\n        .productCardTitle {\n            display: block;\n            color: ", ";\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            height: 38px;\n            word-break: break-word;\n            font: var(--title-bold-16-19);\n        }\n\n        .productCardDescription {\n            display: block;\n            margin-top: 0.5rem;\n            color: var(--grey-40);\n            margin-bottom: 1.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            height: 34px;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n        }\n\n        .productCardPriceContent {\n            display: grid;\n            align-items: ", ";\n            justify-content: flex-start;\n            height: 36px;\n            grid-template-columns: ", ";\n            color: ", ";\n            .discountRate {\n                margin-right: 0.5rem;\n                width: 48px;\n                height: 36px;\n                border-radius: 0.5rem;\n                background-color: var(--primary-opacity-10);\n                color: var(--primary);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font: var(--body-extra-bold-13-16);\n            }\n\n            .oldPrice, .newPrice {\n                display: flex;\n                align-items: end;\n                justify-content: flex-start;\n\n                .price {\n                    margin-right: 4px;\n                }\n            }\n\n            .oldPrice {\n                color: var(--dark-opacity-25);\n                margin-bottom: 2px;\n\n                .price, .period {\n                    text-decoration: line-through;\n                }\n\n                .price {\n                    font: var(--caption-semi-bold-12-15);\n                }\n\n                .period {\n                    font: var(--caption-regular-12-15);\n                }\n            }\n\n            .newPrice {\n                .price {\n                    font: var(--body-extra-bold-14-17);\n                }\n\n                .period {\n                    font: var(--body-regular-13-16);\n                }\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.$hasNewImageType ? "\n          *{\n            height: 100% !important;\n            object-fit: contain;\n            max-width: 100%;\n          }\n        " : "\n         > * {\n            width: 100%;\n            position: absolute;\n            left: 50%;\n            top: 50%;\n            transform: translate(-50%,-50%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n          *{    \n            height: calc(100% - 0.5rem) !important;\n            aspect-ratio: 1 / 1 !important;\n          }\n      "; }, function (props) { return props.$imageInfoTextVariant === "secondary" ? "\n                  background-color: var(--primary-opacity-10);\n                  color: var(--primary);\n                " : "\n                  background: linear-gradient(360deg, #411590 0%, #9760FC 100%);\n                  color: white;\n                "; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$isResponsive && "\n    @media only screen and ".concat(devices_1.devices.sm, " {\n      padding: 1.5rem;\n        .cartBadge{\n          left: 16px;\n          top: 16px;\n          &:is(.hasInset){\n            left: 15px;\n            top: 8px;\n          }\n        }\n        .img {\n          height: 215px;\n          .imageInfoText{\n            font:var(--body-semi-bold-13-16);\n            height: 32px !important;\n            strong{\n              font:var(--body-bold-13-16);\n            }\n          }\n        }\n        .productCardContent{\n          padding: 1.5rem 0 0.5rem 0;\n          .productCardTitle{\n            height: 44px;\n            font: var(--headline-bold-18-22);\n          }\n          .productCardDescription{\n            margin-bottom: 1.5rem;\n            height: 37px;\n            font: var(--title-medium-16-19);\n          }\n          .productCardPriceContent{\n            height: 48px;\n            .discountRate{\n              width: 65px;\n              height: 48px;\n              font: var(--title-extra-bold-16-19);\n            }\n            \n            .oldPrice {\n              .price{\n                font: var(--body-semi-bold-13-16);\n              }\n            }\n            .newPrice {\n              .price{\n                font: var(--title-extra-bold-16-19);\n              }\n              .period{\n                font: var(--body-regular-14-17);\n              }\n            }\n          }\n        }\n    }\n  "); });
+exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    min-width: 240px;\n    padding: 1rem;\n    transition: all .2s ease;\n    position: relative;\n    box-sizing: border-box;\n    background-color: white;\n    .cartBadge {\n        position: absolute;\n        left: 8px;\n        top: 8px;\n        z-index: 2;\n\n        &:is(.hasInset) {\n            left: 7px;\n            top: 0;\n        }\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    &:hover {\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n\n    .img {\n        border-radius: 0.5rem;\n        border: 1px solid var(--dark-opacity-5);\n        background: #FFF;\n        position: relative;\n        overflow: hidden;\n        height: 150px;\n        box-sizing: border-box;\n        z-index: 1;\n        text-align: center;\n        padding: 0.5rem;\n        ", "\n        .outOfStock{\n            width: 100% !important;\n            height: 100% !important;\n            background-color: #BABBC280;\n            > div{\n                height: 17px !important;\n                aspect-ratio: initial !important;\n            }\n        }\n            .imageInfoText{\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                top:auto !important;\n                width: 100%;\n                height: 24px !important;\n                align-items: center;\n                justify-content: center;\n                display: flex;\n                ", "\n                border-radius: 0;\n                top: auto;\n                transform: none;\n                aspect-ratio: initial !important;\n                font:var(--caption-semi-bold-10-12); \n                strong{\n                  font:var(--caption-bold-10-12);\n                  height: auto !important;\n                  aspect-ratio: initial !important;\n                  margin-right: 2px;\n                }\n            }\n    }\n\n    .productCardContent {\n        padding: 1rem 0 0.5rem 0;\n\n        .productCardTitle {\n            display: block;\n            color: ", ";\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            height: 38px;\n            word-break: break-word;\n            font: var(--title-bold-16-19);\n        }\n\n        .productCardDescription {\n            display: block;\n            margin-top: 0.5rem;\n            color: var(--grey-40);\n            margin-bottom: 1.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            height: 34px;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n        }\n\n        .productCardPriceContent {\n            display: grid;\n            align-items: ", ";\n            justify-content: flex-start;\n            height: 36px;\n            grid-template-columns: ", ";\n            color: ", ";\n            .discountRate {\n                margin-right: 0.5rem;\n                width: 48px;\n                height: 36px;\n                border-radius: 0.5rem;\n                background-color: var(--primary-opacity-10);\n                color: var(--primary);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font: var(--body-extra-bold-13-16);\n            }\n\n            .oldPrice, .newPrice {\n                display: flex;\n                align-items: end;\n                justify-content: flex-start;\n\n                .price {\n                    margin-right: 4px;\n                }\n            }\n\n            .oldPrice {\n                color: var(--dark-opacity-25);\n                margin-bottom: 2px;\n                \n                .price {\n                    font: var(--caption-semi-bold-12-15);\n                    text-decoration: line-through;\n                }\n\n                .period {\n                    font: var(--caption-regular-12-15);\n                    ", "\n                }\n            }\n\n            .newPrice {\n                .price {\n                    font: var(--body-extra-bold-14-17);\n                }\n\n                .period {\n                    font: var(--body-regular-13-16);\n                }\n            }\n        }\n    }\n\n    ", "\n"], ["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    min-width: 240px;\n    padding: 1rem;\n    transition: all .2s ease;\n    position: relative;\n    box-sizing: border-box;\n    background-color: white;\n    .cartBadge {\n        position: absolute;\n        left: 8px;\n        top: 8px;\n        z-index: 2;\n\n        &:is(.hasInset) {\n            left: 7px;\n            top: 0;\n        }\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    &:hover {\n        box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n    }\n\n    .img {\n        border-radius: 0.5rem;\n        border: 1px solid var(--dark-opacity-5);\n        background: #FFF;\n        position: relative;\n        overflow: hidden;\n        height: 150px;\n        box-sizing: border-box;\n        z-index: 1;\n        text-align: center;\n        padding: 0.5rem;\n        ", "\n        .outOfStock{\n            width: 100% !important;\n            height: 100% !important;\n            background-color: #BABBC280;\n            > div{\n                height: 17px !important;\n                aspect-ratio: initial !important;\n            }\n        }\n            .imageInfoText{\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                top:auto !important;\n                width: 100%;\n                height: 24px !important;\n                align-items: center;\n                justify-content: center;\n                display: flex;\n                ", "\n                border-radius: 0;\n                top: auto;\n                transform: none;\n                aspect-ratio: initial !important;\n                font:var(--caption-semi-bold-10-12); \n                strong{\n                  font:var(--caption-bold-10-12);\n                  height: auto !important;\n                  aspect-ratio: initial !important;\n                  margin-right: 2px;\n                }\n            }\n    }\n\n    .productCardContent {\n        padding: 1rem 0 0.5rem 0;\n\n        .productCardTitle {\n            display: block;\n            color: ", ";\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            height: 38px;\n            word-break: break-word;\n            font: var(--title-bold-16-19);\n        }\n\n        .productCardDescription {\n            display: block;\n            margin-top: 0.5rem;\n            color: var(--grey-40);\n            margin-bottom: 1.5rem;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            height: 34px;\n            word-break: break-word;\n            font: var(--body-medium-14-17);\n        }\n\n        .productCardPriceContent {\n            display: grid;\n            align-items: ", ";\n            justify-content: flex-start;\n            height: 36px;\n            grid-template-columns: ", ";\n            color: ", ";\n            .discountRate {\n                margin-right: 0.5rem;\n                width: 48px;\n                height: 36px;\n                border-radius: 0.5rem;\n                background-color: var(--primary-opacity-10);\n                color: var(--primary);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font: var(--body-extra-bold-13-16);\n            }\n\n            .oldPrice, .newPrice {\n                display: flex;\n                align-items: end;\n                justify-content: flex-start;\n\n                .price {\n                    margin-right: 4px;\n                }\n            }\n\n            .oldPrice {\n                color: var(--dark-opacity-25);\n                margin-bottom: 2px;\n                \n                .price {\n                    font: var(--caption-semi-bold-12-15);\n                    text-decoration: line-through;\n                }\n\n                .period {\n                    font: var(--caption-regular-12-15);\n                    ", "\n                }\n            }\n\n            .newPrice {\n                .price {\n                    font: var(--body-extra-bold-14-17);\n                }\n\n                .period {\n                    font: var(--body-regular-13-16);\n                }\n            }\n        }\n    }\n\n    ", "\n"])), function (props) { return props.$hasNewImageType ? "\n          *{\n            height: 100% !important;\n            object-fit: contain;\n            max-width: 100%;\n          }\n        " : "\n         > * {\n            width: 100%;\n            position: absolute;\n            left: 50%;\n            top: 50%;\n            transform: translate(-50%,-50%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n          *{    \n            height: calc(100% - 0.5rem) !important;\n            aspect-ratio: 1 / 1 !important;\n          }\n      "; }, function (props) { return props.$imageInfoTextVariant === "secondary" ? "\n                  background-color: var(--primary-opacity-10);\n                  color: var(--primary);\n                " : "\n                  background: linear-gradient(360deg, #411590 0%, #9760FC 100%);\n                  color: white;\n                "; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$isOldPricePeriodUnderline ? "text-decoration: line-through;" : ""; }, function (props) { return props.$isResponsive && "\n    @media only screen and ".concat(devices_1.devices.sm, " {\n      padding: 1.5rem;\n        .cartBadge{\n          left: 16px;\n          top: 16px;\n          &:is(.hasInset){\n            left: 15px;\n            top: 8px;\n          }\n        }\n        .img {\n          height: 215px;\n          .imageInfoText{\n            font:var(--body-semi-bold-13-16);\n            height: 32px !important;\n            strong{\n              font:var(--body-bold-13-16);\n            }\n          }\n        }\n        .productCardContent{\n          padding: 1.5rem 0 0.5rem 0;\n          .productCardTitle{\n            height: 44px;\n            font: var(--headline-bold-18-22);\n          }\n          .productCardDescription{\n            margin-bottom: 1.5rem;\n            height: 37px;\n            font: var(--title-medium-16-19);\n          }\n          .productCardPriceContent{\n            height: 48px;\n            .discountRate{\n              width: 65px;\n              height: 48px;\n              font: var(--title-extra-bold-16-19);\n            }\n            \n            .oldPrice {\n              .price{\n                font: var(--body-semi-bold-13-16);\n              }\n            }\n            .newPrice {\n              .price{\n                font: var(--title-extra-bold-16-19);\n              }\n              .period{\n                font: var(--body-regular-14-17);\n              }\n            }\n          }\n        }\n    }\n  "); });
 var templateObject_1;

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

@@ -23,6 +23,7 @@ export interface ProductCardVertical {
     beltBadgeTitle?: string;
     imageInfoText?: string;
     imageInfoTextVariant?: IMAGE_INFO_TEXT_VARIANT;
+    isOldPricePeriodUnderline?: boolean;
 }
 export interface ProductCardVerticalStyledProps {
     $discountRate?: number;
@@ -30,6 +31,7 @@ export interface ProductCardVerticalStyledProps {
     $hasNewImageType?: boolean;
     $hasOutOfStock?: boolean;
     $imageInfoTextVariant?: IMAGE_INFO_TEXT_VARIANT;
+    $isOldPricePeriodUnderline?: boolean;
 }
 export declare const ProductCardVerticalDefault: ProductCardVertical;
 export type ProductCardVerticalProps = typeof ProductCardVerticalDefault;

package/dist/components/ProductCardVertical/props.js

@@ -23,5 +23,6 @@ exports.ProductCardVerticalDefault = {
     beltBadgeTitle: "discount",
     imageInfoText: null,
     imageInfoTextVariant: "secondary",
-    isShowOldPrice: false
+    isShowOldPrice: false,
+    isOldPricePeriodUnderline: true,
 };

package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts

@@ -37,5 +37,6 @@ export declare const Default: {
         imageInfoText: import("react/jsx-runtime").JSX.Element;
         imageInfoTextVariant: string;
         isShowOldPrice: boolean;
+        isOldPricePeriodUnderline: boolean;
     };
 };

package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js

@@ -50,5 +50,6 @@ exports.Default = {
         imageInfoText: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "A\u011EUST" }), " koduyla sepette 250 TL indirim"] }),
         imageInfoTextVariant: "secondary",
         isShowOldPrice: true,
+        isOldPricePeriodUnderline: true,
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.17.33",
+  "version": "2.17.35",
   "files": [
     "dist"
   ],