krl-alfred 2.20.0 → 2.20.2

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

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ title, headerButtonText, hasHeaderDropdown, list, hasBadge, badgeText, hasHeader, hasRounded, hasBorder, headerImage, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerButtonAction, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
+    component: ({ title, headerButtonText, hasHeaderDropdown, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, headerButtonAction, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
     tags: string[];
     argTypes: {
         title: {
@@ -16,6 +16,12 @@ declare const _default: {
         hasHeader: {
             control: string;
         };
+        hasHeaderBackground: {
+            control: string;
+        };
+        hasHeaderBorder: {
+            control: string;
+        };
         hasRounded: {
             control: string;
         };
@@ -101,6 +107,72 @@ export declare const WithBadge: {
         headerImage: React.JSX.Element;
     };
 };
+export declare const WithHeaderBackground: {
+    args: {
+        hasHeaderBackground: boolean;
+        title: string;
+        hasBadge: boolean;
+        badgeText: string;
+        hasHeaderDropdown: boolean;
+        headerButtonText: string;
+        list: {
+            display: string;
+            title: string;
+        }[];
+        hasHeader: boolean;
+        hasRounded: boolean;
+        hasBorder: boolean;
+        hasHeaderButton: boolean;
+        headerButtonWidth: any;
+        hasHeaderPrimaryButton: boolean;
+        headerPrimaryButtonText: string;
+        headerPrimaryButtonAction: () => void;
+        headerButtonAction: () => void;
+        boxSize: number;
+        customColumnSpan: {
+            0: number;
+        };
+        dropdownList: {
+            name: string;
+            component: ({ children }: any) => React.JSX.Element;
+        }[];
+        dropdownWidth: string;
+        headerImage: React.JSX.Element;
+    };
+};
+export declare const WithoutHeaderBorder: {
+    args: {
+        hasHeaderBorder: boolean;
+        title: string;
+        hasBadge: boolean;
+        badgeText: string;
+        hasHeaderDropdown: boolean;
+        headerButtonText: string;
+        list: {
+            display: string;
+            title: string;
+        }[];
+        hasHeader: boolean;
+        hasRounded: boolean;
+        hasBorder: boolean;
+        hasHeaderButton: boolean;
+        headerButtonWidth: any;
+        hasHeaderPrimaryButton: boolean;
+        headerPrimaryButtonText: string;
+        headerPrimaryButtonAction: () => void;
+        headerButtonAction: () => void;
+        boxSize: number;
+        customColumnSpan: {
+            0: number;
+        };
+        dropdownList: {
+            name: string;
+            component: ({ children }: any) => React.JSX.Element;
+        }[];
+        dropdownWidth: string;
+        headerImage: React.JSX.Element;
+    };
+};
 export declare const WithHeaderButton: {
     args: {
         hasHeaderButton: boolean;
@@ -458,3 +530,23 @@ export declare const HasAccordion: {
         dropdownWidth: string;
     };
 };
+export declare const WithContent: {
+    args: {
+        title: string;
+        hasBadge: boolean;
+        badgeText: string;
+        hasHeader: boolean;
+        hasRounded: boolean;
+        hasBorder: boolean;
+        hasHeaderPrimaryButton: boolean;
+        headerPrimaryButtonText: string;
+        headerPrimaryButtonAction: () => void;
+        headerImage: any;
+        list: any[];
+        content: React.JSX.Element;
+    };
+    decorators: ((Story: any) => React.JSX.Element)[];
+};
+export declare const SubscriptionRules: {
+    render: () => React.JSX.Element;
+};

package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,8 +18,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithBadge = exports.Default = void 0;
+exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithBadge = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
 var DescriptionCard_1 = __importDefault(require("../DescriptionCard"));
 var descriptionList_json_1 = __importDefault(require("./../../../jsons/descriptionList.json"));
 var defaultHeaderImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
@@ -60,6 +65,8 @@ exports.default = {
         hasBadge: { control: 'boolean' },
         badgeText: { control: 'text' },
         hasHeader: { control: 'boolean' },
+        hasHeaderBackground: { control: 'boolean' },
+        hasHeaderBorder: { control: 'boolean' },
         hasRounded: { control: 'boolean' },
         hasBorder: { control: 'boolean' },
         hasHeaderButton: { control: 'boolean' },
@@ -74,6 +81,12 @@ exports.Default = {
 exports.WithBadge = {
     args: __assign(__assign({}, defaultArgs), { hasBadge: true, badgeText: "Yeni" }),
 };
+exports.WithHeaderBackground = {
+    args: __assign(__assign({}, defaultArgs), { hasHeaderBackground: true }),
+};
+exports.WithoutHeaderBorder = {
+    args: __assign(__assign({}, defaultArgs), { hasHeaderBorder: false }),
+};
 exports.WithHeaderButton = {
     args: __assign(__assign({}, defaultArgs), { hasHeaderButton: true, headerButtonText: "Seçenekler" }),
 };
@@ -150,3 +163,32 @@ exports.HasAccordion = {
             }
         ], headerImage: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }) }),
 };
+var SubscriptionRuleContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+var SubscriptionRuleDescription = styled_components_1.default.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0;\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"], ["\n    margin: 0;\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"])));
+var SubscriptionRuleDivider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-bottom: 1px solid var(--dark-opacity-10);\n    margin: 1rem 0;\n"], ["\n    border-bottom: 1px solid var(--dark-opacity-10);\n    margin: 1rem 0;\n"])));
+var SubscriptionRuleMeta = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 1.5rem;\n"], ["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 1.5rem;\n"])));
+var SubscriptionRuleMetaItem = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"])));
+var subscriptionRuleContent = function (description, meta) { return ((0, jsx_runtime_1.jsxs)(SubscriptionRuleContentWrapper, { children: [(0, jsx_runtime_1.jsx)(SubscriptionRuleDescription, { children: description }), (0, jsx_runtime_1.jsx)(SubscriptionRuleDivider, {}), (0, jsx_runtime_1.jsx)(SubscriptionRuleMeta, { children: meta.map(function (item) { return ((0, jsx_runtime_1.jsx)(SubscriptionRuleMetaItem, { children: item }, item)); }) })] })); };
+exports.WithContent = {
+    args: {
+        title: "Standart esnek",
+        hasBadge: true,
+        badgeText: "Esnek",
+        hasHeader: true,
+        hasRounded: true,
+        hasBorder: true,
+        hasHeaderPrimaryButton: true,
+        headerPrimaryButtonText: "Düzenle",
+        headerPrimaryButtonAction: function () { return console.log("edit clicked"); },
+        headerImage: null,
+        list: [],
+        content: subscriptionRuleContent("Çekirdek kahve ürünleri için varsayılan abonelik kuralı. Müşteriler istedikleri zaman aboneliklerini duraklatabilir veya iptal edebilir.", ["5 Ürün kullanıyor", "32 Aktif abone", "Son güncelleme: iki hafta önce"]),
+    },
+    decorators: [
+        function (Story) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))); },
+    ],
+};
+exports.SubscriptionRules = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "900px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Standart esnek", hasBadge: true, badgeText: "Esnek", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderPrimaryButton: true, headerPrimaryButtonText: "D\u00FCzenle", headerPrimaryButtonAction: function () { return console.log("edit clicked"); }, list: [], content: subscriptionRuleContent("Çekirdek kahve ürünleri için varsayılan abonelik kuralı. Müşteriler istedikleri zaman aboneliklerini duraklatabilir veya iptal edebilir.", ["5 Ürün kullanıyor", "32 Aktif abone", "Son güncelleme: iki hafta önce"]) }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Standart Taahh\u00FCtl\u00FC", hasBadge: true, badgeText: "Taahh\u00FCtl\u00FC", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderPrimaryButton: true, headerPrimaryButtonText: "D\u00FCzenle", headerPrimaryButtonAction: function () { return console.log("edit clicked"); }, list: [], content: subscriptionRuleContent("Çekirdek kahve ürünleri için taahhütlü abonelik kuralı. Müşteriler belirlenen süre boyunca aboneliklerini devam ettirmekle yükümlüdür.", ["3 Ürün kullanıyor", "18 Aktif abone", "Son güncelleme: bir hafta önce"]) })] }))); },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/Icon/iconList/RadioButtonElementChecked.js

@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
-var SvgRadioButtonElementChecked = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: 12, cy: 12, r: 12, fill: "#9763F6" }), (0, jsx_runtime_1.jsx)("circle", { cx: 12, cy: 12, r: 6, fill: "white" })] }))); };
+var SvgRadioButtonElementChecked = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: 12, cy: 12, r: 12, fill: "currentColor" }), (0, jsx_runtime_1.jsx)("circle", { cx: 12, cy: 12, r: 6, fill: "white" })] }))); };
 exports.default = SvgRadioButtonElementChecked;

package/dist/components/InfoBox/InfoBox.js

@@ -55,7 +55,7 @@ var InfoBox = function (_a) {
                 }, false);
             }
         });
-    }, []);
+    }, [description]);
     return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [hasIcon && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) }))), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, __assign({ "$size": size, ref: descriptionRef }, { children: description })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
 };
 exports.default = InfoBox;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare const sizes: string[];
 export declare const variants: string[];
 export declare const iconNames: string[];
@@ -27,5 +27,5 @@ export interface AlertProps {
     $visible?: boolean;
 }
 export declare const InfoBoxDefault: InfoBox;
-export type InfoBoxProps = typeof InfoBoxDefault;
+export type InfoBoxProps = InfoBox;
 export {};

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

@@ -37,14 +37,6 @@ export declare const Default: {
         onClick: () => void;
     };
 };
-export declare const WithoutIcon: {
-    args: {
-        hasIcon: boolean;
-        title: string;
-        description: string;
-        onClick: () => void;
-    };
-};
 export declare const Primary: {
     args: {
         variant: string;
@@ -77,6 +69,14 @@ export declare const Secondary: {
         description: string;
     };
 };
+export declare const WithoutIcon: {
+    args: {
+        hasIcon: boolean;
+        title: string;
+        description: string;
+        onClick: () => void;
+    };
+};
 export declare const Small: {
     args: {
         size: string;
@@ -152,6 +152,13 @@ export declare const SimpleDescription: {
         onClick: () => void;
     };
 };
+export declare const ReactNodeDescription: {
+    args: {
+        title: string;
+        description: React.JSX.Element;
+        onClick: any;
+    };
+};
 export declare const WithCustomRadius: {
     args: {
         radius: string;

package/dist/components/InfoBox/stories/InfoBox.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithCustomRadius = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.Secondary = exports.Warning = exports.Danger = exports.Primary = exports.WithoutIcon = exports.Default = void 0;
+exports.WithCustomRadius = exports.ReactNodeDescription = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.WithoutIcon = exports.Secondary = exports.Warning = exports.Danger = exports.Primary = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var InfoBox_1 = __importDefault(require("../InfoBox"));
 var props_1 = require("../props");
@@ -41,9 +41,6 @@ exports.default = {
 exports.Default = {
     args: defaultArgs,
 };
-exports.WithoutIcon = {
-    args: __assign(__assign({}, defaultArgs), { hasIcon: false }),
-};
 // Variant stories
 exports.Primary = {
     args: __assign(__assign({}, defaultArgs), { variant: 'primary' }),
@@ -57,6 +54,9 @@ exports.Warning = {
 exports.Secondary = {
     args: __assign(__assign({}, defaultArgs), { variant: 'secondary', onClick: undefined }),
 };
+exports.WithoutIcon = {
+    args: __assign(__assign({}, defaultArgs), { hasIcon: false, title: "İkon olmadan" }),
+};
 // Size stories
 exports.Small = {
     args: __assign(__assign({}, defaultArgs), { size: 'small' }),
@@ -92,6 +92,9 @@ exports.Minimal = {
 exports.SimpleDescription = {
     args: __assign(__assign({}, defaultArgs), { title: "Basit bilgi", description: "Bu sadece düz metin açıklamasıdır. HTML veya kopyalanabilir alan içermez." }),
 };
+exports.ReactNodeDescription = {
+    args: __assign(__assign({}, defaultArgs), { title: "React node açıklama", description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "\u0130ade g\u00FCn\u00FCn kiralama biti\u015F g\u00FCn\u00FCnd\u00FCr." }), (0, jsx_runtime_1.jsxs)("p", { children: ["Detaylar i\u00E7in ", (0, jsx_runtime_1.jsx)("b", { children: "info@kiralarsin.com" }), " adresine yazabilirsin."] })] })), onClick: undefined }),
+};
 exports.WithCustomRadius = {
     args: __assign(__assign({}, defaultArgs), { radius: "16px" }),
 };

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ModalProps } from "./props";
-declare const Modal: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, hasHeaderMinHeight, ...other }: ModalProps) => React.JSX.Element;
+declare const Modal: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, portalContainer, hasHeaderMinHeight, ...other }: ModalProps) => React.ReactPortal;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -37,21 +37,35 @@ var TextLink_1 = __importDefault(require("../TextLink"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var react_i18next_1 = require("react-i18next");
 var Modal = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showSkipButton, showSkipButton = _d === void 0 ? props_1.ModalDefault.showSkipButton : _d, _e = _a.skipButtonText, skipButtonText = _e === void 0 ? props_1.ModalDefault.skipButtonText : _e, _f = _a.onSkip, onSkip = _f === void 0 ? props_1.ModalDefault.onSkip : _f, _g = _a.showBackIcon, showBackIcon = _g === void 0 ? props_1.ModalDefault.showBackIcon : _g, _h = _a.backIconType, backIconType = _h === void 0 ? props_1.ModalDefault.backIconType : _h, _j = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _j === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _j, _k = _a.onClose, onClose = _k === void 0 ? props_1.ModalDefault.onClose : _k, _l = _a.onBack, onBack = _l === void 0 ? props_1.ModalDefault.onBack : _l, _m = _a.show, show = _m === void 0 ? props_1.ModalDefault.show : _m, _o = _a.showDivider, showDivider = _o === void 0 ? props_1.ModalDefault.showDivider : _o, _p = _a.title, title = _p === void 0 ? props_1.ModalDefault.title : _p, _q = _a.children, children = _q === void 0 ? props_1.ModalDefault.children : _q, _r = _a.modalFooter, modalFooter = _r === void 0 ? props_1.ModalDefault.modalFooter : _r, _s = _a.showPrimaryButton, showPrimaryButton = _s === void 0 ? props_1.ModalDefault.showPrimaryButton : _s, _t = _a.showSecondaryButton, showSecondaryButton = _t === void 0 ? props_1.ModalDefault.showSecondaryButton : _t, _u = _a.onPrimaryAction, onPrimaryAction = _u === void 0 ? props_1.ModalDefault.onPrimaryAction : _u, _v = _a.onSecondaryAction, onSecondaryAction = _v === void 0 ? props_1.ModalDefault.onSecondaryAction : _v, _w = _a.buttonsAlignment, buttonsAlignment = _w === void 0 ? props_1.ModalDefault.buttonsAlignment : _w, _x = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _x === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _x, _y = _a.primaryButtonText, primaryButtonText = _y === void 0 ? props_1.ModalDefault.primaryButtonText : _y, _z = _a.secondaryButtonText, secondaryButtonText = _z === void 0 ? props_1.ModalDefault.secondaryButtonText : _z, _0 = _a.showHeaderBorder, showHeaderBorder = _0 === void 0 ? props_1.ModalDefault.showHeaderBorder : _0, _1 = _a.showFooterBorder, showFooterBorder = _1 === void 0 ? props_1.ModalDefault.showFooterBorder : _1, _2 = _a.autoHeight, autoHeight = _2 === void 0 ? props_1.ModalDefault.autoHeight : _2, _3 = _a.titleAlignment, titleAlignment = _3 === void 0 ? props_1.ModalDefault.titleAlignment : _3, _4 = _a.titleDescription, titleDescription = _4 === void 0 ? props_1.ModalDefault.titleDescription : _4, _5 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _5, _6 = _a.primaryButtonIcon, primaryButtonIcon = _6 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _6, _7 = _a.secondaryButtonIcon, secondaryButtonIcon = _7 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _7, _8 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _8 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _8, _9 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _9 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _9, _10 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _10 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _10, _11 = _a.primaryButtonWidth, primaryButtonWidth = _11 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _11, _12 = _a.secondaryButtonWidth, secondaryButtonWidth = _12 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _12, _13 = _a.customContent, customContent = _13 === void 0 ? props_1.ModalDefault.customContent : _13, _14 = _a.showHeader, showHeader = _14 === void 0 ? props_1.ModalDefault.showHeader : _14, _15 = _a.id, id = _15 === void 0 ? props_1.ModalDefault.id : _15, _16 = _a.renderInDOM, renderInDOM = _16 === void 0 ? props_1.ModalDefault.renderInDOM : _16, _17 = _a.hasHeaderMinHeight, hasHeaderMinHeight = _17 === void 0 ? props_1.ModalDefault.hasHeaderMinHeight : _17, other = __rest(_a, ["size", "showCloseIcon", "showSkipButton", "skipButtonText", "onSkip", "showBackIcon", "backIconType", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "showHeader", "id", "renderInDOM", "hasHeaderMinHeight"]);
-    var uniqueId = (0, react_1.useId)();
+    var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showSkipButton, showSkipButton = _d === void 0 ? props_1.ModalDefault.showSkipButton : _d, _e = _a.skipButtonText, skipButtonText = _e === void 0 ? props_1.ModalDefault.skipButtonText : _e, _f = _a.onSkip, onSkip = _f === void 0 ? props_1.ModalDefault.onSkip : _f, _g = _a.showBackIcon, showBackIcon = _g === void 0 ? props_1.ModalDefault.showBackIcon : _g, _h = _a.backIconType, backIconType = _h === void 0 ? props_1.ModalDefault.backIconType : _h, _j = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _j === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _j, _k = _a.onClose, onClose = _k === void 0 ? props_1.ModalDefault.onClose : _k, _l = _a.onBack, onBack = _l === void 0 ? props_1.ModalDefault.onBack : _l, _m = _a.show, show = _m === void 0 ? props_1.ModalDefault.show : _m, _o = _a.showDivider, showDivider = _o === void 0 ? props_1.ModalDefault.showDivider : _o, _p = _a.title, title = _p === void 0 ? props_1.ModalDefault.title : _p, _q = _a.children, children = _q === void 0 ? props_1.ModalDefault.children : _q, _r = _a.modalFooter, modalFooter = _r === void 0 ? props_1.ModalDefault.modalFooter : _r, _s = _a.showPrimaryButton, showPrimaryButton = _s === void 0 ? props_1.ModalDefault.showPrimaryButton : _s, _t = _a.showSecondaryButton, showSecondaryButton = _t === void 0 ? props_1.ModalDefault.showSecondaryButton : _t, _u = _a.onPrimaryAction, onPrimaryAction = _u === void 0 ? props_1.ModalDefault.onPrimaryAction : _u, _v = _a.onSecondaryAction, onSecondaryAction = _v === void 0 ? props_1.ModalDefault.onSecondaryAction : _v, _w = _a.buttonsAlignment, buttonsAlignment = _w === void 0 ? props_1.ModalDefault.buttonsAlignment : _w, _x = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _x === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _x, _y = _a.primaryButtonText, primaryButtonText = _y === void 0 ? props_1.ModalDefault.primaryButtonText : _y, _z = _a.secondaryButtonText, secondaryButtonText = _z === void 0 ? props_1.ModalDefault.secondaryButtonText : _z, _0 = _a.showHeaderBorder, showHeaderBorder = _0 === void 0 ? props_1.ModalDefault.showHeaderBorder : _0, _1 = _a.showFooterBorder, showFooterBorder = _1 === void 0 ? props_1.ModalDefault.showFooterBorder : _1, _2 = _a.autoHeight, autoHeight = _2 === void 0 ? props_1.ModalDefault.autoHeight : _2, _3 = _a.titleAlignment, titleAlignment = _3 === void 0 ? props_1.ModalDefault.titleAlignment : _3, _4 = _a.titleDescription, titleDescription = _4 === void 0 ? props_1.ModalDefault.titleDescription : _4, _5 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _5, _6 = _a.primaryButtonIcon, primaryButtonIcon = _6 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _6, _7 = _a.secondaryButtonIcon, secondaryButtonIcon = _7 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _7, _8 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _8 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _8, _9 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _9 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _9, _10 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _10 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _10, _11 = _a.primaryButtonWidth, primaryButtonWidth = _11 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _11, _12 = _a.secondaryButtonWidth, secondaryButtonWidth = _12 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _12, _13 = _a.customContent, customContent = _13 === void 0 ? props_1.ModalDefault.customContent : _13, _14 = _a.showHeader, showHeader = _14 === void 0 ? props_1.ModalDefault.showHeader : _14, _15 = _a.id, id = _15 === void 0 ? props_1.ModalDefault.id : _15, _16 = _a.renderInDOM, renderInDOM = _16 === void 0 ? props_1.ModalDefault.renderInDOM : _16, _17 = _a.portalContainer, portalContainer = _17 === void 0 ? props_1.ModalDefault.portalContainer : _17, _18 = _a.hasHeaderMinHeight, hasHeaderMinHeight = _18 === void 0 ? props_1.ModalDefault.hasHeaderMinHeight : _18, other = __rest(_a, ["size", "showCloseIcon", "showSkipButton", "skipButtonText", "onSkip", "showBackIcon", "backIconType", "hasCloseOnOutsideClick", "onClose", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "secondaryButtonWidth", "customContent", "showHeader", "id", "renderInDOM", "portalContainer", "hasHeaderMinHeight"]);
+    var generatedId = (0, react_1.useId)();
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _18 = (0, react_1.useState)(show), showModal = _18[0], setShowModal = _18[1];
+    var _19 = (0, react_1.useState)(show), showModal = _19[0], setShowModal = _19[1];
+    var _20 = (0, react_1.useState)(null), uniqueId = _20[0], setUniqueId = _20[1];
+    var _21 = (0, react_1.useState)(null), defaultPortalContainer = _21[0], setDefaultPortalContainer = _21[1];
     (0, react_1.useEffect)(function () {
+        if (!uniqueId) {
+            setUniqueId(generatedId);
+        }
+    }, [uniqueId, generatedId]);
+    (0, react_1.useEffect)(function () {
+        setDefaultPortalContainer(document.body);
+    }, []);
+    var resolvedPortalContainer = portalContainer !== null && portalContainer !== void 0 ? portalContainer : defaultPortalContainer;
+    (0, react_1.useEffect)(function () {
+        if (!uniqueId)
+            return;
         setShowModal(show);
+        var modalClass = "modalActive_".concat(uniqueId);
         if (!show) {
-            //document.body.classList.remove('hasModal')
-            document.body.classList.remove("modalActive_".concat(uniqueId));
+            if (document.body.classList.contains(modalClass)) {
+                document.body.classList.remove(modalClass);
+            }
         }
-        else {
-            //document.body.classList.add('hasModal')
-            document.body.classList.add("modalActive_".concat(uniqueId));
+        else if (!document.body.classList.contains(modalClass)) {
+            document.body.classList.add(modalClass);
         }
-    }, [show]);
+    }, [show, uniqueId]);
     var handleClose = function () {
         if (onClose) {
             onClose();
@@ -71,10 +85,12 @@ var Modal = function (_a) {
     var modalRef = (0, react_1.useRef)();
     (0, useOnClickOutside_1.default)(modalRef, onClose, hasCloseOnOutsideClick);
     var modalContent = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id), "$show": renderInDOM ? showModal : true }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": size, "$autoHeight": autoHeight, "$showHeaderBorder": showHeaderBorder, "$titleAlignment": titleAlignment, "$customContent": customContent, "$showFooterBorder": showFooterBorder, "$buttonsAlignment": buttonsAlignment, "$showSecondaryButton": showSecondaryButton, "$showDivider": showDivider, "$showHeader": showHeader, "$buttonsAlignmentOnMobile": buttonsAlignmentOnMobile, id: id, "$hasHeaderMinHeight": hasHeaderMinHeight }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [showBackIcon ? (backIconType === 2 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "modalTextLinkWrapper" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onBack, icon: "ArrowSmallLeft" }, { children: t("back") })) }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeftBig" }) })))) : (titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [title && ((0, jsx_runtime_1.jsx)("h5", { children: title })), titleDescription && (0, jsx_runtime_1.jsx)("p", { children: titleDescription })] })), showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) }))) : showSkipButton ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "modalTextLinkWrapper skipButton" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleSkip }, { children: skipButtonText })) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: children })) })), modalFooter ? modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (showPrimaryButton || showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, width: primaryButtonWidth, icon: primaryButtonIcon }, { children: primaryButtonText }))), showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttonsAlignment === "vertical" && showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: isSecondaryButtonLoading, disabled: isSecondaryButtonDisabled, width: secondaryButtonWidth, icon: secondaryButtonIcon }, { children: secondaryButtonText }))] }))] })) })] })) })) }));
-    if (renderInDOM) {
-        return modalContent;
+    if (!resolvedPortalContainer) {
+        return null;
+    }
+    if (!renderInDOM && !showModal) {
+        return null;
     }
-    return (showModal &&
-        react_dom_1.default.createPortal(modalContent, document.body));
+    return react_dom_1.default.createPortal(modalContent, resolvedPortalContainer);
 };
 exports.default = Modal;

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

@@ -45,6 +45,8 @@ export interface Modal {
     showHeader?: boolean;
     id?: string;
     renderInDOM?: boolean;
+    /** Portal hedefi — varsayılan `document.body` */
+    portalContainer?: HTMLElement | null;
     showSkipButton?: boolean;
     skipButtonText?: string;
     onSkip?: () => void;

package/dist/components/Modal/props.js

@@ -44,6 +44,7 @@ exports.ModalDefault = {
     showHeader: true,
     id: null,
     renderInDOM: false,
+    portalContainer: null,
     showSkipButton: false,
     skipButtonText: 'Skip',
     onSkip: null,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, hasHeaderMinHeight, ...other }: import("../props").Modal) => React.JSX.Element;
+    component: ({ size, showCloseIcon, showSkipButton, skipButtonText, onSkip, showBackIcon, backIconType, hasCloseOnOutsideClick, onClose, onBack, show, showDivider, title, children, modalFooter, showPrimaryButton, showSecondaryButton, onPrimaryAction, onSecondaryAction, buttonsAlignment, buttonsAlignmentOnMobile, primaryButtonText, secondaryButtonText, showHeaderBorder, showFooterBorder, autoHeight, titleAlignment, titleDescription, isPrimaryButtonLoading, primaryButtonIcon, secondaryButtonIcon, isSecondaryButtonLoading, isPrimaryButtonDisabled, isSecondaryButtonDisabled, primaryButtonWidth, secondaryButtonWidth, customContent, showHeader, id, renderInDOM, portalContainer, hasHeaderMinHeight, ...other }: import("../props").Modal) => React.ReactPortal;
     tags: string[];
     argTypes: {
         showDivider: {

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const _default: React.MemoExoticComponent<({ title, description, price, priceSm, slug, period, image, component, imageComponent, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, hasBordeHover, hasTooltip, tooltipSelectorTitle, tooltipDescription, isDisabled, imageInnerWidth, imageInnerHeight, hasImageRounded, }: import("./props").ProductCardHorizontalSm) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, description, price, priceSm, slug, period, image, component, imageComponent, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, hasDescriptionHideMdDown, hasBordeHover, hasTooltip, tooltipSelectorTitle, tooltipDescription, isDisabled, imageInnerWidth, imageInnerHeight, hasImageRounded, }: import("./props").ProductCardHorizontalSm) => React.JSX.Element>;
 export default _default;

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js

@@ -40,7 +40,8 @@ var ImageContent = (0, react_1.memo)(function (_a) {
         prev.imageComponent === next.imageComponent;
 });
 var ProductCardHorizontalSm = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.description : _c, _d = _a.price, price = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _d, _e = _a.priceSm, priceSm = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _e, _f = _a.slug, slug = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _f, _g = _a.period, period = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _g, _h = _a.image, image = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _h, _j = _a.component, component = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _j, _k = _a.imageComponent, imageComponent = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageComponent : _k, _l = _a.hasImageBorder, hasImageBorder = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _l, _m = _a.imageWidth, imageWidth = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _m, _o = _a.imageHeight, imageHeight = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _o, _p = _a.infoPosition, infoPosition = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _p, _q = _a.hasButton, hasButton = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _q, _r = _a.buttonVariant, buttonVariant = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _r, _s = _a.buttonText, buttonText = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _t, _u = _a.isSelected, isSelected = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _u, _v = _a.hasTitleWrap, hasTitleWrap = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _v, _w = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _w, _x = _a.hasBordeHover, hasBordeHover = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _x, _y = _a.hasTooltip, hasTooltip = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _y, _z = _a.tooltipSelectorTitle, tooltipSelectorTitle = _z === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _z, _0 = _a.tooltipDescription, tooltipDescription = _0 === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _0, _1 = _a.isDisabled, isDisabled = _1 === void 0 ? props_1.ProductCardHorizontalSmDefault.isDisabled : _1, _2 = _a.imageInnerWidth, imageInnerWidth = _2 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerWidth : _2, _3 = _a.imageInnerHeight, imageInnerHeight = _3 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerHeight : _3, _4 = _a.hasImageRounded, hasImageRounded = _4 === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageRounded : _4;
-    return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$isDisabled": isDisabled }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$hasBorder": hasBorder }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ component: component, slug: slug }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ImageContent, { image: image, title: title, imageInnerWidth: imageInnerWidth, imageInnerHeight: imageInnerHeight, imageHeight: imageHeight, imageWidth: imageWidth, hasImageBorder: hasImageBorder, hasImageRounded: hasImageRounded, imageComponent: imageComponent }), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$period": period }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), description && (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Description, { children: description }), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ disabled: isDisabled, variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
+    var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.description : _c, _d = _a.price, price = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _d, _e = _a.priceSm, priceSm = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _e, _f = _a.slug, slug = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _f, _g = _a.period, period = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _g, _h = _a.image, image = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _h, _j = _a.component, component = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _j, _k = _a.imageComponent, imageComponent = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageComponent : _k, _l = _a.hasImageBorder, hasImageBorder = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _l, _m = _a.imageWidth, imageWidth = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _m, _o = _a.imageHeight, imageHeight = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _o, _p = _a.infoPosition, infoPosition = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _p, _q = _a.hasButton, hasButton = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _q, _r = _a.buttonVariant, buttonVariant = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _r, _s = _a.buttonText, buttonText = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _t, _u = _a.isSelected, isSelected = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _u, _v = _a.hasTitleWrap, hasTitleWrap = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _v, _w = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _w, _x = _a.hasDescriptionHideMdDown, hasDescriptionHideMdDown = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.hasDescriptionHideMdDown : _x, _y = _a.hasBordeHover, hasBordeHover = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _y, _z = _a.hasTooltip, hasTooltip = _z === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _z, _0 = _a.tooltipSelectorTitle, tooltipSelectorTitle = _0 === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _0, _1 = _a.tooltipDescription, tooltipDescription = _1 === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _1, _2 = _a.isDisabled, isDisabled = _2 === void 0 ? props_1.ProductCardHorizontalSmDefault.isDisabled : _2, _3 = _a.imageInnerWidth, imageInnerWidth = _3 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerWidth : _3, _4 = _a.imageInnerHeight, imageInnerHeight = _4 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerHeight : _4, _5 = _a.hasImageRounded, hasImageRounded = _5 === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageRounded : _5;
+    var hasPeriod = period != null && period !== "";
+    return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$isDisabled": isDisabled }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$hasBorder": hasBorder }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ component: component, slug: slug }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ImageContent, { image: image, title: title, imageInnerWidth: imageInnerWidth, imageInnerHeight: imageInnerHeight, imageHeight: imageHeight, imageWidth: imageWidth, hasImageBorder: hasImageBorder, hasImageRounded: hasImageRounded, imageComponent: imageComponent }), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$hasPeriod": hasPeriod }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), description && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Description, __assign({ "$hasDescriptionHideMdDown": hasDescriptionHideMdDown }, { children: description }))), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ disabled: isDisabled, variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
 };
 exports.default = (0, react_1.memo)(ProductCardHorizontalSm);

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ProductCardHorizontalSmStyledProps } from "./props";
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never>>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never>>> & string;
 export declare const Border: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never>>> & string;
 export declare const ProductCardHorizontalSmStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalSmStyledProps> & ProductCardHorizontalSmStyledProps, never>>> & string;
 export declare const HorizontalSmWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js

@@ -11,7 +11,10 @@ exports.RightContentWrapper = exports.Period = exports.Price = exports.PriceCont
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.Title = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--body-semi-bold-14-17);\n  transition: color 0.2s ease;\n"], ["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--body-semi-bold-14-17);\n  transition: color 0.2s ease;\n"])), function (props) { return (props.$hasTitleWrap ? "2" : "1"); });
-exports.Description = styled_components_1.default.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0.25rem 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--caption-medium-12-15);\n  color: var(--grey-50);\n"], ["\n  margin: 0.25rem 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--caption-medium-12-15);\n  color: var(--grey-50);\n"])));
+exports.Description = styled_components_1.default.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0.25rem 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--caption-medium-12-15);\n  color: var(--grey-50);\n\n  ", "\n"], ["\n  margin: 0.25rem 0 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n  font: var(--caption-medium-12-15);\n  color: var(--grey-50);\n\n  ", "\n"])), function (props) {
+    return props.$hasDescriptionHideMdDown &&
+        "\n      @media only screen and ".concat(devices_1.devices.md, " {\n        display: none;\n      }\n    ");
+});
 exports.Border = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  user-select: none;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  border: 1px solid transparent;\n  opacity: ", ";\n  transition: border-color 0.2s ease, opacity 0.2s ease;\n  border-color: ", ";\n  ", "\n"], ["\n  user-select: none;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  border: 1px solid transparent;\n  opacity: ", ";\n  transition: border-color 0.2s ease, opacity 0.2s ease;\n  border-color: ", ";\n  ", "\n"])), function (p) { return (p.$hasBorder ? 1 : 0); }, function (p) { return (p.$hasBorder ? "var(--grey-10)" : "transparent"); }, function (p) { return p.$isSelected && "border-color: var(--primary);border-width: 2px;"; });
 exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--dark);\n  padding: 0 0.5rem;\n  border-radius: 0.5rem;\n  position: relative;\n  transition: color 0.2s ease;\n\n  ", "\n\n  ", "\n\n  a {\n    text-decoration: none;\n    color: inherit;\n\n    @media ((hover: hover) and (pointer: fine)) {\n      &:hover {\n        ", " {\n          color: var(--primary-hover);\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"], ["\n  color: var(--dark);\n  padding: 0 0.5rem;\n  border-radius: 0.5rem;\n  position: relative;\n  transition: color 0.2s ease;\n\n  ", "\n\n  ", "\n\n  a {\n    text-decoration: none;\n    color: inherit;\n\n    @media ((hover: hover) and (pointer: fine)) {\n      &:hover {\n        ", " {\n          color: var(--primary-hover);\n        }\n      }\n    }\n\n    &:active {\n      ", " {\n        color: var(--primary-hover);\n      }\n    }\n  }\n"])), function (props) {
     return props.$isDisabled &&
@@ -22,7 +25,7 @@ exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(template
 }, exports.Title, exports.Title);
 exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  min-height: 66px;\n  padding-right: 0.5rem;\n"], ["\n  text-decoration: none;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  min-height: 66px;\n  padding-right: 0.5rem;\n"])));
 exports.ImgWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"], ["\n  border: ", ";\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1rem;\n  background: white;\n  transform: translateZ(0);\n\n  img {\n    vertical-align: middle !important;\n    display: block !important;\n    object-fit: cover !important;\n    border-radius: ", " !important;\n  }\n"])), function (props) { return (props.$hasImageBorder ? "1px solid var(--dark-opacity-5)" : "none"); }, function (props) { return (props.$imageWidth ? props.$imageWidth : "71px"); }, function (props) { return (props.$imageHeight ? props.$imageHeight : "50px"); }, function (props) { return (props.$hasImageRounded ? "4px" : "0"); });
-exports.TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (props) { return (props.$period ? "1rem" : "0.5rem"); });
+exports.TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (props) { return (props.$hasPeriod ? "1rem" : "0.5rem"); });
 exports.PriceContent = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return (props === null || props === void 0 ? void 0 : props.$infoPosition) === "left"
         ? "\n        text-align: start;\n        display: flex;\n        align-items: flex-end;\n        margin-top: 8px;\n    "

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { variants } from "../Button/props";
 type VARIANT = typeof variants[number];
 export interface ProductCardHorizontalSm {
@@ -7,7 +7,7 @@ export interface ProductCardHorizontalSm {
     price?: string;
     priceSm?: string;
     slug?: string;
-    period?: string;
+    period?: React.ReactNode;
     image?: string;
     component?: React.ElementType | null;
     /** Örn. `import Image from "next/image"` → `imageComponent={Image}` */
@@ -23,6 +23,7 @@ export interface ProductCardHorizontalSm {
     isSelected?: boolean;
     hasTitleWrap?: boolean;
     hasButtonRemoveMdDown?: boolean;
+    hasDescriptionHideMdDown?: boolean;
     hasBordeHover?: boolean;
     hasTooltip?: boolean;
     tooltipSelectorTitle?: string;
@@ -33,7 +34,7 @@ export interface ProductCardHorizontalSm {
     hasImageRounded?: boolean;
 }
 export interface ProductCardHorizontalSmStyledProps {
-    $period?: string;
+    $hasPeriod?: boolean;
     $hasImageBorder?: boolean;
     $imageWidth?: string;
     $imageHeight?: string;
@@ -42,6 +43,7 @@ export interface ProductCardHorizontalSmStyledProps {
     $isSelected?: boolean;
     $hasTitleWrap?: boolean;
     $hasButtonRemoveMdDown?: boolean;
+    $hasDescriptionHideMdDown?: boolean;
     $hasBordeHover?: boolean;
     $isDisabled?: boolean;
     $hasImageRounded?: boolean;

package/dist/components/ProductCardHorizontalSm/props.js

@@ -22,6 +22,7 @@ exports.ProductCardHorizontalSmDefault = {
     isSelected: false,
     hasTitleWrap: true,
     hasButtonRemoveMdDown: false,
+    hasDescriptionHideMdDown: false,
     hasBordeHover: false,
     hasTooltip: false,
     tooltipSelectorTitle: null,