krl-alfred 2.18.12 → 2.18.14

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, isOldPricePeriodUnderline, hasImageOffset, ...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, hasImageOffset, }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/ProductCardVertical/ProductCardVertical.js

@@ -10,17 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -32,8 +21,18 @@ 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, _y = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _y === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _y, _z = _a.hasImageOffset, hasImageOffset = _z === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _z, 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", "hasImageOffset"]);
+    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, _z = _a.hasImageOffset, hasImageOffset = _z === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _z;
     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, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline, "$hasImageOffset": hasImageOffset }, { 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 })), oldPricePeriod && (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 })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
+    var badgeOffset = isResponsive ? "16px" : "8px";
+    var cardProps = {
+        $isResponsive: isResponsive,
+        $discountRate: discountRate,
+        $hasNewImageType: hasNewImageType,
+        $hasOutOfStock: hasOutOfStock,
+        $imageInfoTextVariant: imageInfoTextVariant,
+        $isOldPricePeriodUnderline: isOldPricePeriodUnderline,
+        $hasImageOffset: hasImageOffset,
+    };
+    return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({}, cardProps, { children: (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.CardBody, { children: [hasBeltBadge && !hasCustomBadge && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CartBadge, __assign({ "$isResponsive": isResponsive, "$isInset": false }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: badgeOffset, top: badgeOffset, title: beltBadgeTitle }) }))), hasCustomBadge && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CartBadge, __assign({ "$isResponsive": isResponsive, "$isInset": true }, { children: customBadge }))), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.ImageSection, __assign({}, cardProps, { children: [image, hasOutOfStock && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OutOfStock, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ImageInfoText, __assign({}, cardProps, { dangerouslySetInnerHTML: { __html: imageInfoText } })))] })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.ProductCardContent, __assign({ "$isResponsive": isResponsive }, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductTitle, __assign({ "$hasOutOfStock": hasOutOfStock, "$isResponsive": isResponsive }, { children: title })), (0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductDescription, __assign({ "$isResponsive": isResponsive }, { children: description })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.PriceLayout, __assign({}, cardProps, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.DiscountPill, __assign({ "$isResponsive": isResponsive }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.PriceStack, { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.OldPrice, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OldPriceAmount, __assign({ "$isResponsive": isResponsive }, { children: oldPrice })), oldPricePeriod && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OldPricePeriod, __assign({ "$isOldPricePeriodUnderline": isOldPricePeriodUnderline }, { children: "/".concat(oldPricePeriod) })))] })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.NewPrice, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.NewPriceAmount, __assign({ "$isResponsive": isResponsive }, { children: price })), period && (0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.NewPricePeriod, __assign({ "$isResponsive": isResponsive }, { children: "/".concat(period) }))] })] })] }))] }))] }) })));
 };
 exports.default = (0, react_1.memo)(ProductCardVertical);

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

@@ -1,3 +1,27 @@
 /// <reference types="react" />
 import { ProductCardVerticalStyledProps } from "./props";
+export declare const ProductCardRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const CardBody: 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;
+type CartBadgeProps = {
+    $isInset?: boolean;
+    $isResponsive?: boolean;
+};
+export declare const CartBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CartBadgeProps> & CartBadgeProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CartBadgeProps> & CartBadgeProps, never>>> & string;
+export declare const ImageSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const OutOfStock: 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 ImageInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const ProductCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const ProductTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const ProductDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const PriceLayout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const DiscountPill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const PriceStack: 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 OldPrice: 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 OldPriceAmount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const OldPricePeriod: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const NewPrice: 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 NewPriceAmount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export declare const NewPricePeriod: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+/** Dış tüketimde kullanım için (root ile aynı) */
 export declare const ProductCardVerticalStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardVerticalStyledProps> & ProductCardVerticalStyledProps, never>>> & string;
+export {};

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

@@ -7,8 +7,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCardVerticalStyled = void 0;
+exports.ProductCardVerticalStyled = exports.NewPricePeriod = exports.NewPriceAmount = exports.NewPrice = exports.OldPricePeriod = exports.OldPriceAmount = exports.OldPrice = exports.PriceStack = exports.DiscountPill = exports.PriceLayout = exports.ProductDescription = exports.ProductTitle = exports.ProductCardContent = exports.ImageInfoText = exports.OutOfStock = exports.ImageSection = exports.CartBadge = exports.CardBody = exports.ProductCardRoot = 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        ", "\n        ", "\n        .outOfStock{\n            width: 100% !important;\n            height: 100% !important;\n            background-color: #BABBC280;\n            position: absolute;\n            inset: 0;\n            align-items: center;\n            justify-content: center;\n            display: flex;\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        ", "\n        ", "\n        .outOfStock{\n            width: 100% !important;\n            height: 100% !important;\n            background-color: #BABBC280;\n            position: absolute;\n            inset: 0;\n            align-items: center;\n            justify-content: center;\n            display: flex;\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.$hasImageOffset ? "\n          padding: 0.5rem;\n        " : "\n          padding: 0;\n          background-color:var(--dark-opacity-5);\n        "; }, function (props) { return props.$hasNewImageType ? "\n          *{\n            height: 100% !important;\n            object-fit: ".concat(props.$hasImageOffset ? 'contain' : 'cover', ";\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;
+var responsiveSm = function (cssBlock) { return "\n  @media only screen and ".concat(devices_1.devices.sm, " {\n    ").concat(cssBlock, "\n  }\n"); };
+exports.ProductCardRoot = 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 0.2s ease;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\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  ", "\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 0.2s ease;\n  position: relative;\n  box-sizing: border-box;\n  background-color: white;\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  ", "\n"])), function (props) {
+    return props.$isResponsive &&
+        responsiveSm("padding: 1.5rem;");
+});
+exports.CardBody = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.CartBadge = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: -8px;\n  top: -8px;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"], ["\n  position: absolute;\n  left: -8px;\n  top: -8px;\n  z-index: 2;\n\n  ", "\n\n  ", "\n"])), function (p) {
+    return p.$isInset &&
+        "\n    left: 7px;\n    top: 0;\n  ";
+}, function (p) {
+    return p.$isResponsive &&
+        responsiveSm("\n    ".concat(p.$isInset ? "left: 15px; top: 8px;" : "", "\n  "));
+});
+exports.ImageSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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\n  ", "\n\n  ", "\n\n  ", "\n"], ["\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\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
+    return props.$hasImageOffset
+        ? "\n    padding: 0.5rem;\n  "
+        : "\n    padding: 0;\n    background-color: var(--dark-opacity-5);\n  ";
+}, function (props) {
+    return props.$hasNewImageType
+        ? "\n    * {\n      height: 100% !important;\n      object-fit: ".concat(props.$hasImageOffset ? "contain" : "cover", ";\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.$isResponsive &&
+        responsiveSm("height: 215px;");
+});
+exports.OutOfStock = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100% !important;\n  height: 100% !important;\n  background-color: #babbc280;\n  position: absolute;\n  inset: 0;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  > div {\n    height: 17px !important;\n    aspect-ratio: initial !important;\n  }\n"], ["\n  width: 100% !important;\n  height: 100% !important;\n  background-color: #babbc280;\n  position: absolute;\n  inset: 0;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  > div {\n    height: 17px !important;\n    aspect-ratio: initial !important;\n  }\n"])));
+exports.ImageInfoText = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\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  border-radius: 0;\n  transform: none;\n  aspect-ratio: initial !important;\n  font: var(--caption-semi-bold-10-12);\n\n  ", "\n\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  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  border-radius: 0;\n  transform: none;\n  aspect-ratio: initial !important;\n  font: var(--caption-semi-bold-10-12);\n\n  ", "\n\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"])), function (props) {
+    return props.$imageInfoTextVariant === "secondary"
+        ? "\n    background-color: var(--primary-opacity-10);\n    color: var(--primary);\n  "
+        : "\n    background: var(--dark);\n    color: white;\n  ";
+}, function (props) {
+    return props.$isResponsive &&
+        responsiveSm("\n    font: var(--body-semi-bold-13-16);\n    height: 32px !important;\n    strong {\n      font: var(--body-bold-13-16);\n    }\n  ");
+});
+exports.ProductCardContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 1rem 0 0.5rem 0;\n\n  ", "\n"], ["\n  padding: 1rem 0 0.5rem 0;\n\n  ", "\n"])), function (props) { return props.$isResponsive && responsiveSm("padding: 1.5rem 0 0.5rem 0;"); });
+exports.ProductTitle = styled_components_1.default.strong(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\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"], ["\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"])), function (props) { return (props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"); }, function (props) {
+    return props.$isResponsive &&
+        responsiveSm("\n    height: 44px;\n    font: var(--headline-bold-18-22);\n  ");
+});
+exports.ProductDescription = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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"], ["\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"])), function (props) {
+    return props.$isResponsive &&
+        responsiveSm("\n    margin-bottom: 1.5rem;\n    height: 37px;\n    font: var(--title-medium-16-19);\n  ");
+});
+exports.PriceLayout = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: grid;\n  align-items: ", ";\n  justify-content: flex-start;\n  height: 36px;\n  grid-template-columns: ", ";\n  color: ", ";\n\n  ", "\n"], ["\n  display: grid;\n  align-items: ", ";\n  justify-content: flex-start;\n  height: 36px;\n  grid-template-columns: ", ";\n  color: ", ";\n\n  ", "\n"])), 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 &&
+        responsiveSm("height: 48px;");
+});
+exports.DiscountPill = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\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"], ["\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"])), function (props) {
+    return props.$isResponsive &&
+        responsiveSm("\n    width: 65px;\n    height: 48px;\n    font: var(--title-extra-bold-16-19);\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  justify-content: flex-end;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-end;\n  min-width: 0;\n"])));
+exports.OldPrice = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: end;\n  justify-content: flex-start;\n  color: var(--dark-opacity-25);\n  margin-bottom: 2px;\n"], ["\n  display: flex;\n  align-items: end;\n  justify-content: flex-start;\n  color: var(--dark-opacity-25);\n  margin-bottom: 2px;\n"])));
+exports.OldPriceAmount = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  margin-right: 4px;\n  font: var(--caption-semi-bold-12-15);\n  text-decoration: line-through;\n\n  ", "\n"], ["\n  margin-right: 4px;\n  font: var(--caption-semi-bold-12-15);\n  text-decoration: line-through;\n\n  ", "\n"])), function (props) {
+    return props.$isResponsive &&
+        responsiveSm("font: var(--body-semi-bold-13-16);");
+});
+exports.OldPricePeriod = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font: var(--caption-regular-12-15);\n  ", "\n"], ["\n  font: var(--caption-regular-12-15);\n  ", "\n"])), function (props) { return props.$isOldPricePeriodUnderline && "text-decoration: line-through;"; });
+exports.NewPrice = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: end;\n  justify-content: flex-start;\n"], ["\n  display: flex;\n  align-items: end;\n  justify-content: flex-start;\n"])));
+exports.NewPriceAmount = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  margin-right: 4px;\n  font: var(--body-extra-bold-14-17);\n\n  ", "\n"], ["\n  margin-right: 4px;\n  font: var(--body-extra-bold-14-17);\n\n  ", "\n"])), function (props) {
+    return props.$isResponsive &&
+        responsiveSm("font: var(--title-extra-bold-16-19);");
+});
+exports.NewPricePeriod = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  font: var(--body-regular-13-16);\n\n  ", "\n"], ["\n  font: var(--body-regular-13-16);\n\n  ", "\n"])), function (props) {
+    return props.$isResponsive &&
+        responsiveSm("font: var(--body-regular-14-17);");
+});
+/** Dış tüketimde kullanım için (root ile aynı) */
+exports.ProductCardVerticalStyled = exports.ProductCardRoot;
+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;

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

@@ -1 +1,2 @@
-export { default } from './ProductCardVertical';
+export { default } from "./ProductCardVertical";
+export { ProductCardRoot, ProductCardVerticalStyled, CardBody, CartBadge, ImageSection, OutOfStock, ImageInfoText, ProductCardContent, ProductTitle, ProductDescription, PriceLayout, DiscountPill, PriceStack, OldPrice, OldPriceAmount, OldPricePeriod, NewPrice, NewPriceAmount, NewPricePeriod, } from "./ProductCardVertical.styled";

package/dist/components/ProductCardVertical/index.js

@@ -3,6 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
+exports.NewPricePeriod = exports.NewPriceAmount = exports.NewPrice = exports.OldPricePeriod = exports.OldPriceAmount = exports.OldPrice = exports.PriceStack = exports.DiscountPill = exports.PriceLayout = exports.ProductDescription = exports.ProductTitle = exports.ProductCardContent = exports.ImageInfoText = exports.OutOfStock = exports.ImageSection = exports.CartBadge = exports.CardBody = exports.ProductCardVerticalStyled = exports.ProductCardRoot = exports.default = void 0;
 var ProductCardVertical_1 = require("./ProductCardVertical");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ProductCardVertical_1).default; } });
+var ProductCardVertical_styled_1 = require("./ProductCardVertical.styled");
+Object.defineProperty(exports, "ProductCardRoot", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductCardRoot; } });
+Object.defineProperty(exports, "ProductCardVerticalStyled", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductCardVerticalStyled; } });
+Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return ProductCardVertical_styled_1.CardBody; } });
+Object.defineProperty(exports, "CartBadge", { enumerable: true, get: function () { return ProductCardVertical_styled_1.CartBadge; } });
+Object.defineProperty(exports, "ImageSection", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ImageSection; } });
+Object.defineProperty(exports, "OutOfStock", { enumerable: true, get: function () { return ProductCardVertical_styled_1.OutOfStock; } });
+Object.defineProperty(exports, "ImageInfoText", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ImageInfoText; } });
+Object.defineProperty(exports, "ProductCardContent", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductCardContent; } });
+Object.defineProperty(exports, "ProductTitle", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductTitle; } });
+Object.defineProperty(exports, "ProductDescription", { enumerable: true, get: function () { return ProductCardVertical_styled_1.ProductDescription; } });
+Object.defineProperty(exports, "PriceLayout", { enumerable: true, get: function () { return ProductCardVertical_styled_1.PriceLayout; } });
+Object.defineProperty(exports, "DiscountPill", { enumerable: true, get: function () { return ProductCardVertical_styled_1.DiscountPill; } });
+Object.defineProperty(exports, "PriceStack", { enumerable: true, get: function () { return ProductCardVertical_styled_1.PriceStack; } });
+Object.defineProperty(exports, "OldPrice", { enumerable: true, get: function () { return ProductCardVertical_styled_1.OldPrice; } });
+Object.defineProperty(exports, "OldPriceAmount", { enumerable: true, get: function () { return ProductCardVertical_styled_1.OldPriceAmount; } });
+Object.defineProperty(exports, "OldPricePeriod", { enumerable: true, get: function () { return ProductCardVertical_styled_1.OldPricePeriod; } });
+Object.defineProperty(exports, "NewPrice", { enumerable: true, get: function () { return ProductCardVertical_styled_1.NewPrice; } });
+Object.defineProperty(exports, "NewPriceAmount", { enumerable: true, get: function () { return ProductCardVertical_styled_1.NewPriceAmount; } });
+Object.defineProperty(exports, "NewPricePeriod", { enumerable: true, get: function () { return ProductCardVertical_styled_1.NewPricePeriod; } });

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

@@ -1,16 +1,26 @@
+import React from "react";
+import type { ProductCardVerticalProps } from "../props";
+/**
+ * Tüm ProductCardVertical propları — Default ve varyantlar için ortak taban.
+ * hasDiscount bileşende henüz kullanılmıyor; kontrol paneli ve dokümantasyon için set edilir.
+ */
+export declare const allProductCardArgs: ProductCardVerticalProps;
 declare const _default: {
     title: string;
-    component: (props: any) => import("react/jsx-runtime").JSX.Element;
+    component: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, }: import("../props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
     tags: string[];
     argTypes: {
         title: {
             control: string;
+            description: string;
         };
         description: {
             control: string;
+            description: string;
         };
         hasDiscount: {
             control: string;
+            description: string;
         };
         price: {
             control: string;
@@ -23,6 +33,7 @@ declare const _default: {
         };
         slug: {
             control: string;
+            description: string;
         };
         period: {
             control: string;
@@ -34,13 +45,14 @@ declare const _default: {
             control: string;
         };
         image: {
-            control: string;
+            control: boolean;
+            description: string;
         };
         hasCustomBadge: {
             control: string;
         };
         customBadge: {
-            control: string;
+            control: boolean;
         };
         hasNewImageType: {
             control: string;
@@ -75,33 +87,35 @@ declare const _default: {
             control: string;
         };
     };
+    render: (args: ProductCardVerticalProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
 export declare const Default: {
+    name: string;
     args: {
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        hasBeltBadge: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isShowOldPrice: boolean;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const NoDiscount: {
@@ -110,25 +124,25 @@ export declare const NoDiscount: {
         discountRate: number;
         oldPrice: any;
         isShowOldPrice: boolean;
-        title: string;
-        description: string;
-        price: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        hasBeltBadge: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const OutOfStock: {
@@ -137,25 +151,25 @@ export declare const OutOfStock: {
         hasDiscount: boolean;
         discountRate: number;
         hasBeltBadge: boolean;
-        title: string;
-        description: string;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isShowOldPrice: boolean;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const WithCustomBadge: {
@@ -163,26 +177,26 @@ export declare const WithCustomBadge: {
         hasCustomBadge: boolean;
         hasBeltBadge: boolean;
         customBadge: import("react/jsx-runtime").JSX.Element;
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isShowOldPrice: boolean;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const ResponsiveWithNewImageType: {
@@ -190,107 +204,107 @@ export declare const ResponsiveWithNewImageType: {
         isResponsive: boolean;
         hasNewImageType: boolean;
         hasImageOffset: boolean;
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasOutOfStock: boolean;
-        hasBeltBadge: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isShowOldPrice: boolean;
-        isOldPricePeriodUnderline: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
     };
 };
 export declare const DarkImageInfoText: {
     args: {
         imageInfoTextVariant: string;
         imageInfoText: string;
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        hasBeltBadge: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        isShowOldPrice: boolean;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const WithoutBeltBadge: {
     args: {
         hasBeltBadge: boolean;
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isShowOldPrice: boolean;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const WithoutImageInfoText: {
     args: {
         imageInfoText: any;
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        hasBeltBadge: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoTextVariant: string;
-        isShowOldPrice: boolean;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const Minimal: {
@@ -301,103 +315,103 @@ export declare const Minimal: {
         isShowOldPrice: boolean;
         hasBeltBadge: boolean;
         imageInfoText: any;
-        title: string;
-        description: string;
-        price: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoTextVariant: string;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const WithoutImageOffset: {
     args: {
         hasImageOffset: boolean;
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        hasBeltBadge: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isShowOldPrice: boolean;
-        isOldPricePeriodUnderline: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
     };
 };
 export declare const WithoutOldPrice: {
     args: {
         isShowOldPrice: boolean;
         oldPrice: any;
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        hasBeltBadge: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isOldPricePeriodUnderline: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        isOldPricePeriodUnderline?: boolean;
+        hasImageOffset?: boolean;
     };
 };
 export declare const WithoutOldPriceUnderline: {
     args: {
         isOldPricePeriodUnderline: boolean;
-        title: string;
-        description: string;
-        hasDiscount: boolean;
-        price: string;
-        oldPrice: string;
-        oldPricePeriod: string;
-        slug: string;
-        period: string;
-        discountRate: number;
-        isResponsive: boolean;
-        image: import("react/jsx-runtime").JSX.Element;
-        hasCustomBadge: boolean;
-        customBadge: import("react/jsx-runtime").JSX.Element;
-        hasNewImageType: boolean;
-        hasOutOfStock: boolean;
-        hasBeltBadge: boolean;
-        beltBadgeVariant: string;
-        beltBadgeTitle: string;
-        imageInfoText: string;
-        imageInfoTextVariant: string;
-        isShowOldPrice: boolean;
-        hasImageOffset: boolean;
+        title?: string;
+        description?: string;
+        hasDiscount?: boolean;
+        hasCustomBadge?: boolean;
+        price?: string;
+        oldPrice?: string;
+        oldPricePeriod?: string;
+        slug?: string;
+        period?: string;
+        discountRate?: number;
+        isResponsive?: boolean;
+        image?: React.ReactNode;
+        customBadge?: React.ReactNode;
+        hasNewImageType?: boolean;
+        hasOutOfStock?: boolean;
+        hasBeltBadge?: boolean;
+        isShowOldPrice?: boolean;
+        beltBadgeVariant?: string;
+        beltBadgeTitle?: string;
+        imageInfoText?: string;
+        imageInfoTextVariant?: string;
+        hasImageOffset?: boolean;
     };
 };

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

@@ -14,105 +14,124 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithoutOldPriceUnderline = exports.WithoutOldPrice = exports.WithoutImageOffset = exports.Minimal = exports.WithoutImageInfoText = exports.WithoutBeltBadge = exports.DarkImageInfoText = exports.ResponsiveWithNewImageType = exports.WithCustomBadge = exports.OutOfStock = exports.NoDiscount = exports.Default = void 0;
+exports.WithoutOldPriceUnderline = exports.WithoutOldPrice = exports.WithoutImageOffset = exports.Minimal = exports.WithoutImageInfoText = exports.WithoutBeltBadge = exports.DarkImageInfoText = exports.ResponsiveWithNewImageType = exports.WithCustomBadge = exports.OutOfStock = exports.NoDiscount = exports.Default = exports.allProductCardArgs = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardVertical_1 = __importDefault(require("../ProductCardVertical"));
+var props_1 = require("../props");
 var Badges_1 = __importDefault(require("../../Badges"));
+var props_2 = require("../../Badges/props");
+var DefaultImage = ((0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "\u00DCr\u00FCn g\u00F6rseli", style: { width: "100%", height: "100%", objectFit: "cover" } }));
+var DefaultCustomBadge = (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: "\u00D6zel" });
+/**
+ * Tüm ProductCardVertical propları — Default ve varyantlar için ortak taban.
+ * hasDiscount bileşende henüz kullanılmıyor; kontrol paneli ve dokümantasyon için set edilir.
+ */
+exports.allProductCardArgs = {
+    title: "Apple iPad Air WiFi 64GB (2020)",
+    description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
+    hasDiscount: true,
+    hasCustomBadge: false,
+    customBadge: DefaultCustomBadge,
+    price: "12.545,24 TL",
+    oldPrice: "15.000,00 TL",
+    oldPricePeriod: "hafta",
+    slug: "https://www.kiralarsin.com",
+    period: "hafta",
+    discountRate: 32,
+    isResponsive: false,
+    image: DefaultImage,
+    hasNewImageType: false,
+    hasOutOfStock: false,
+    hasBeltBadge: true,
+    isShowOldPrice: true,
+    beltBadgeVariant: "primary",
+    beltBadgeTitle: "İndirimli",
+    imageInfoText: "<strong>AĞUST</strong> koduyla sepette 250 TL indirim",
+    imageInfoTextVariant: "secondary",
+    isOldPricePeriodUnderline: true,
+    hasImageOffset: true,
+};
 exports.default = {
     title: "Components/ProductCard/ProductCard Vertical",
-    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "240px" } }, { children: (0, jsx_runtime_1.jsx)(ProductCardVertical_1.default, __assign({}, props)) }))); },
+    component: ProductCardVertical_1.default,
     tags: ["autodocs"],
     argTypes: {
-        title: { control: "text" },
-        description: { control: "text" },
-        hasDiscount: { control: "boolean" },
+        title: { control: "text", description: "Ürün başlığı" },
+        description: { control: "text", description: "Kısa açıklama" },
+        hasDiscount: {
+            control: "boolean",
+            description: "İndirim bayrağı (gelecek kullanım / API)",
+        },
         price: { control: "text" },
         oldPrice: { control: "text" },
         oldPricePeriod: { control: "text" },
-        slug: { control: "text" },
+        slug: {
+            control: "text",
+            description: "Ürün URL’i — story’de kartı saran link için",
+        },
         period: { control: "text" },
         discountRate: { control: "number" },
         isResponsive: { control: "boolean" },
-        image: { control: "none" },
+        image: { control: false, description: "Story’de sabit görsel" },
         hasCustomBadge: { control: "boolean" },
-        customBadge: { control: "none" },
+        customBadge: { control: false },
         hasNewImageType: { control: "boolean" },
         hasOutOfStock: { control: "boolean" },
         hasBeltBadge: { control: "boolean" },
         beltBadgeVariant: {
             control: "select",
-            options: ["primary", "secondary", "light"],
+            options: props_2.variants,
         },
         beltBadgeTitle: { control: "text" },
         imageInfoText: { control: "text" },
         imageInfoTextVariant: {
             control: "select",
-            options: ["secondary", "dark"],
+            options: props_1.imageInfoTextVariants,
         },
         isShowOldPrice: { control: "boolean" },
         isOldPricePeriodUnderline: { control: "boolean" },
         hasImageOffset: { control: "boolean" },
     },
+    render: function (args) {
+        var card = (0, jsx_runtime_1.jsx)(ProductCardVertical_1.default, __assign({}, args));
+        var wrapped = args.slug && String(args.slug).trim() !== "" ? ((0, jsx_runtime_1.jsx)("a", __assign({ href: args.slug, style: { textDecoration: "none", color: "inherit", display: "block" } }, { children: card }))) : (card);
+        return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "240px" } }, { children: wrapped }));
+    },
 };
-var DefaultImage = ((0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "default", style: { width: "100%", height: "100%", objectFit: "cover" } }));
-var DefaultBadge = (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: "test" });
 exports.Default = {
-    args: {
-        title: "Apple iPad Air WiFi 64GB (2020)",
-        description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
-        hasDiscount: true,
-        price: "12.545,24 TL",
-        oldPrice: "12.545,24 TL",
-        oldPricePeriod: "hafta",
-        slug: "https://www.kiralarsin.com",
-        period: "hafta",
-        discountRate: 32,
-        isResponsive: false,
-        image: DefaultImage,
-        hasCustomBadge: false,
-        customBadge: DefaultBadge,
-        hasNewImageType: false,
-        hasOutOfStock: false,
-        hasBeltBadge: true,
-        beltBadgeVariant: "primary",
-        beltBadgeTitle: "discount",
-        imageInfoText: "<strong>AĞUST</strong> koduyla sepette 250 TL indirim",
-        imageInfoTextVariant: "secondary",
-        isShowOldPrice: true,
-        isOldPricePeriodUnderline: true,
-        hasImageOffset: true,
-    },
+    name: "Tüm proplar (varsayılan)",
+    args: __assign({}, exports.allProductCardArgs),
 };
 exports.NoDiscount = {
-    args: __assign(__assign({}, exports.Default.args), { hasDiscount: false, discountRate: 0, oldPrice: null, isShowOldPrice: false }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { hasDiscount: false, discountRate: 0, oldPrice: null, isShowOldPrice: false }),
 };
 exports.OutOfStock = {
-    args: __assign(__assign({}, exports.Default.args), { hasOutOfStock: true, hasDiscount: false, discountRate: 0, hasBeltBadge: false }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { hasOutOfStock: true, hasDiscount: false, discountRate: 0, hasBeltBadge: false }),
 };
 exports.WithCustomBadge = {
-    args: __assign(__assign({}, exports.Default.args), { hasCustomBadge: true, hasBeltBadge: false, customBadge: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "dark", title: "Yeni" }) }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { hasCustomBadge: true, hasBeltBadge: false, customBadge: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "dark", title: "Yeni" }) }),
 };
 exports.ResponsiveWithNewImageType = {
-    args: __assign(__assign({}, exports.Default.args), { isResponsive: true, hasNewImageType: true, hasImageOffset: false }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { isResponsive: true, hasNewImageType: true, hasImageOffset: false }),
 };
 exports.DarkImageInfoText = {
-    args: __assign(__assign({}, exports.Default.args), { imageInfoTextVariant: "dark", imageInfoText: "<strong>ÖZEL</strong> fiyat" }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { imageInfoTextVariant: "dark", imageInfoText: "<strong>ÖZEL</strong> fiyat" }),
 };
 exports.WithoutBeltBadge = {
-    args: __assign(__assign({}, exports.Default.args), { hasBeltBadge: false }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { hasBeltBadge: false }),
 };
 exports.WithoutImageInfoText = {
-    args: __assign(__assign({}, exports.Default.args), { imageInfoText: null }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { imageInfoText: null }),
 };
 exports.Minimal = {
-    args: __assign(__assign({}, exports.Default.args), { hasDiscount: false, discountRate: 0, oldPrice: null, isShowOldPrice: false, hasBeltBadge: false, imageInfoText: null }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { hasDiscount: false, discountRate: 0, oldPrice: null, isShowOldPrice: false, hasBeltBadge: false, imageInfoText: null }),
 };
 exports.WithoutImageOffset = {
-    args: __assign(__assign({}, exports.Default.args), { hasImageOffset: false }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { hasImageOffset: false }),
 };
 exports.WithoutOldPrice = {
-    args: __assign(__assign({}, exports.Default.args), { isShowOldPrice: false, oldPrice: null }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { isShowOldPrice: false, oldPrice: null }),
 };
 exports.WithoutOldPriceUnderline = {
-    args: __assign(__assign({}, exports.Default.args), { isOldPricePeriodUnderline: false }),
+    args: __assign(__assign({}, exports.allProductCardArgs), { isOldPricePeriodUnderline: false }),
 };

package/dist/components/RadioButton/layouts/boxedWithIcon/BoxedWithIcon.styled.js

@@ -19,5 +19,5 @@ exports.Label = styled_components_1.default.span(templateObject_4 || (templateOb
 exports.Indicator = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-shrink: 0;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  width: 20px;\n  height: 20px;\n  display: block;\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n"], ["\n  flex-shrink: 0;\n  background-image: url('", "');\n  background-size: 100% 100%;\n  width: 20px;\n  height: 20px;\n  display: block;\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n"])), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); });
 exports.Separator = styled_components_1.default.hr(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 1px;\n  background-color: var(--grey-10);\n  margin: 0;\n  border: none;\n  opacity: 1;\n"], ["\n  height: 1px;\n  background-color: var(--grey-10);\n  margin: 0;\n  border: none;\n  opacity: 1;\n"])));
 exports.Content = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: var(--dark-opacity-50);\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  li {\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-70);\n    line-height: 1.4;\n  }\n"], ["\n  color: var(--dark-opacity-50);\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  li {\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-70);\n    line-height: 1.4;\n  }\n"])));
-exports.BoxedWithIconStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-10);\n  background-color: white;\n  cursor: ", ";\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"], ["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid var(--dark-opacity-10);\n  background-color: white;\n  cursor: ", ";\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$checked && "\n    &:before{\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      user-select: none;\n      pointer-events: none;\n      border: 2px solid var(--primary);\n    }\n  "; }, exports.ContentWrapper, exports.Header, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })); });
+exports.BoxedWithIconStyled = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: white;\n  cursor: ", ";\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"], ["\n  display: block;\n  position: relative;\n  border-radius: 0.5rem;\n  border: 1px solid ", ";\n  background-color: white;\n  cursor: ", ";\n  overflow: hidden;\n\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ ", " ", " ", " {\n      background-image: url('", "');\n    }\n  }\n"])), function (props) { return props.$checked ? "transparent" : "var(--dark-opacity-10)"; }, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$checked && "\n    &:before{\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      user-select: none;\n      pointer-events: none;\n      border: 2px solid var(--primary);\n    }\n  "; }, exports.ContentWrapper, exports.Header, exports.Indicator, function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color || "#9763F6", name: "RadioButtonElementChecked" })); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/RadioButton/layouts/color/Color.styled.js

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ColorStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: ", ";\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n  }\n\n  .colorIndicator {\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    box-sizing: border-box;\n    outline: ", ";\n    outline-offset: 2px;\n\n    &:hover {\n      ", "\n    }\n  }\n\n  .colorLabel {\n    font: var(--caption-medium-12-15);\n    color: ", ";\n    text-align: center;\n    white-space: nowrap;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: ", ";\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n  }\n\n  .colorIndicator {\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    box-sizing: border-box;\n    outline: ", ";\n    outline-offset: 2px;\n\n    &:hover {\n      ", "\n    }\n  }\n\n  .colorLabel {\n    font: var(--caption-medium-12-15);\n    color: ", ";\n    text-align: center;\n    white-space: nowrap;\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$disabled && "\n    opacity: 0.4;\n  "; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$color || "var(--dark)"; }, function (props) { return props.$checked ? "2px solid var(--primary)" : "2px solid transparent"; }, function (props) { return !props.$disabled && !props.$checked && "\n        outline: 2px solid var(--primary-hover);\n      "; }, function (props) { return props.$checked ? "var(--primary)" : "var(--dark-opacity-50)"; });
+exports.ColorStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: ", ";\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n  }\n\n  .colorIndicator {\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    box-sizing: border-box;\n    outline: ", ";\n    outline-offset: 2px;\n  }\n\n  .colorLabel {\n    font: var(--caption-medium-12-15);\n    color: ", ";\n    text-align: center;\n    white-space: nowrap;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: ", ";\n  ", "\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n  }\n\n  .colorIndicator {\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    background-color: ", ";\n    box-sizing: border-box;\n    outline: ", ";\n    outline-offset: 2px;\n  }\n\n  .colorLabel {\n    font: var(--caption-medium-12-15);\n    color: ", ";\n    text-align: center;\n    white-space: nowrap;\n  }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$disabled && "\n    opacity: 0.4;\n  "; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$size === "medium" ? "40px" : "32px"; }, function (props) { return props.$color || "var(--dark)"; }, function (props) { return props.$checked ? "2px solid var(--primary)" : "2px solid transparent"; }, function (props) { return props.$checked ? "var(--primary)" : "var(--dark-opacity-50)"; });
 var templateObject_1;

package/package.json

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