krl-alfred 2.20.0 → 2.20.1

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/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,

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

@@ -20,7 +20,7 @@ declare const _default: {
             control: string;
         };
         period: {
-            control: string;
+            control: boolean;
         };
         image: {
             control: string;
@@ -76,6 +76,9 @@ declare const _default: {
         hasButtonRemoveMdDown: {
             control: string;
         };
+        hasDescriptionHideMdDown: {
+            control: string;
+        };
         hasTooltip: {
             control: string;
         };
@@ -154,6 +157,39 @@ export declare const WithDescription: {
         isDisabled: boolean;
     };
 };
+export declare const DescriptionHideMdDown: {
+    args: {
+        description: string;
+        hasDescriptionHideMdDown: boolean;
+        title: string;
+        price: string;
+        priceSm: string;
+        slug: string;
+        period: string;
+        image: string;
+        component: ({ children }: {
+            children: any;
+        }) => React.JSX.Element;
+        hasImageBorder: boolean;
+        imageWidth: string;
+        imageHeight: string;
+        imageInnerWidth: number;
+        imageInnerHeight: number;
+        infoPosition: string;
+        hasButton: boolean;
+        buttonVariant: string;
+        buttonText: string;
+        hasBorder: boolean;
+        hasBordeHover: boolean;
+        isSelected: boolean;
+        hasTitleWrap: boolean;
+        hasButtonRemoveMdDown: boolean;
+        hasTooltip: boolean;
+        tooltipSelectorTitle: string;
+        tooltipDescription: string;
+        isDisabled: boolean;
+    };
+};
 export declare const WithButton: {
     args: {
         hasButton: boolean;
@@ -216,6 +252,37 @@ export declare const RightAlignedInfo: {
         isDisabled: boolean;
     };
 };
+export declare const CustomPeriod: {
+    args: {
+        infoPosition: string;
+        period: React.JSX.Element;
+        title: string;
+        price: string;
+        priceSm: string;
+        slug: string;
+        image: string;
+        component: ({ children }: {
+            children: any;
+        }) => React.JSX.Element;
+        hasImageBorder: boolean;
+        imageWidth: string;
+        imageHeight: string;
+        imageInnerWidth: number;
+        imageInnerHeight: number;
+        hasButton: boolean;
+        buttonVariant: string;
+        buttonText: string;
+        hasBorder: boolean;
+        hasBordeHover: boolean;
+        isSelected: boolean;
+        hasTitleWrap: boolean;
+        hasButtonRemoveMdDown: boolean;
+        hasTooltip: boolean;
+        tooltipSelectorTitle: string;
+        tooltipDescription: string;
+        isDisabled: boolean;
+    };
+};
 export declare const WithImageBorder: {
     args: {
         hasImageBorder: boolean;

package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.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.WithBorderHover = exports.WithImageRounded = exports.WithoutBorder = exports.WithoutTooltip = exports.Selected = exports.Disabled = exports.WithImageBorder = exports.RightAlignedInfo = exports.WithButton = exports.WithDescription = exports.Default = void 0;
+exports.WithBorderHover = exports.WithImageRounded = exports.WithoutBorder = exports.WithoutTooltip = exports.Selected = exports.Disabled = exports.WithImageBorder = exports.CustomPeriod = exports.RightAlignedInfo = exports.WithButton = exports.DescriptionHideMdDown = exports.WithDescription = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardHorizontalSm_1 = __importDefault(require("../ProductCardHorizontalSm"));
 var props_1 = require("../../Button/props");
@@ -28,7 +28,7 @@ exports.default = {
         price: { control: "text" },
         priceSm: { control: "text" },
         slug: { control: "text" },
-        period: { control: "text" },
+        period: { control: false },
         image: { control: "text" },
         component: { control: "none" },
         imageComponent: {
@@ -55,6 +55,7 @@ exports.default = {
         isSelected: { control: "boolean" },
         hasTitleWrap: { control: "boolean" },
         hasButtonRemoveMdDown: { control: "boolean" },
+        hasDescriptionHideMdDown: { control: "boolean" },
         hasTooltip: { control: "boolean" },
         tooltipSelectorTitle: { control: "text" },
         tooltipDescription: { control: "text" },
@@ -97,12 +98,18 @@ exports.Default = {
 exports.WithDescription = {
     args: __assign(__assign({}, exports.Default.args), { description: "İki ayda bir gönderim" }),
 };
+exports.DescriptionHideMdDown = {
+    args: __assign(__assign({}, exports.Default.args), { description: "İki ayda bir gönderim", hasDescriptionHideMdDown: true }),
+};
 exports.WithButton = {
     args: __assign(__assign({}, exports.Default.args), { hasButton: true, buttonText: "Kirala", buttonVariant: "secondary" }),
 };
 exports.RightAlignedInfo = {
     args: __assign(__assign({}, exports.Default.args), { infoPosition: "right" }),
 };
+exports.CustomPeriod = {
+    args: __assign(__assign({}, exports.Default.args), { infoPosition: "right", period: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "period-mobile" }, { children: "/ay" })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "period-desktop" }, { children: "/hafta" }))] })) }),
+};
 exports.WithImageBorder = {
     args: __assign(__assign({}, exports.Default.args), { hasImageBorder: true }),
 };

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioGroupProps } from "./props";
-declare const RadioGroup: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength }: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength, isHorizontalOnMobile, }: RadioGroupProps) => React.JSX.Element;
 export default RadioGroup;

package/dist/components/RadioGroup/RadioGroup.js

@@ -21,13 +21,13 @@ var RadioGroup_styled_1 = require("./RadioGroup.styled");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var RadioGroup = function (_a) {
-    var _b = _a.options, options = _b === void 0 ? props_1.RadioGroupDefault.options : _b, _c = _a.value, value = _c === void 0 ? props_1.RadioGroupDefault.value : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.RadioGroupDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.RadioGroupDefault.name : _e, _f = _a.label, label = _f === void 0 ? props_1.RadioGroupDefault.label : _f, _g = _a.disabled, disabled = _g === void 0 ? props_1.RadioGroupDefault.disabled : _g, _h = _a.size, size = _h === void 0 ? props_1.RadioGroupDefault.size : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.RadioGroupDefault.textSize : _j, _k = _a.layout, layout = _k === void 0 ? props_1.RadioGroupDefault.layout : _k, _l = _a.radioLayout, radioLayout = _l === void 0 ? props_1.RadioGroupDefault.radioLayout : _l, _m = _a.valid, valid = _m === void 0 ? props_1.RadioGroupDefault.valid : _m, _o = _a.labelOffset, labelOffset = _o === void 0 ? props_1.RadioGroupDefault.labelOffset : _o, _p = _a.color, color = _p === void 0 ? props_1.RadioGroupDefault.color : _p, _q = _a.verticalAlign, verticalAlign = _q === void 0 ? props_1.RadioGroupDefault.verticalAlign : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.RadioGroupDefault.readOnly : _r, _s = _a.gap, gap = _s === void 0 ? props_1.RadioGroupDefault.gap : _s, _t = _a.isFilled, isFilled = _t === void 0 ? props_1.RadioGroupDefault.isFilled : _t, _u = _a.showIndicator, showIndicator = _u === void 0 ? props_1.RadioGroupDefault.showIndicator : _u, _v = _a.hasInfo, hasInfo = _v === void 0 ? props_1.RadioGroupDefault.hasInfo : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.RadioGroupDefault.infoText : _w, _x = _a.infoIcon, infoIcon = _x === void 0 ? props_1.RadioGroupDefault.infoIcon : _x, _y = _a.gridColumnLength, gridColumnLength = _y === void 0 ? props_1.RadioGroupDefault.gridColumnLength : _y;
+    var _b = _a.options, options = _b === void 0 ? props_1.RadioGroupDefault.options : _b, _c = _a.value, value = _c === void 0 ? props_1.RadioGroupDefault.value : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.RadioGroupDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.RadioGroupDefault.name : _e, _f = _a.label, label = _f === void 0 ? props_1.RadioGroupDefault.label : _f, _g = _a.disabled, disabled = _g === void 0 ? props_1.RadioGroupDefault.disabled : _g, _h = _a.size, size = _h === void 0 ? props_1.RadioGroupDefault.size : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.RadioGroupDefault.textSize : _j, _k = _a.layout, layout = _k === void 0 ? props_1.RadioGroupDefault.layout : _k, _l = _a.radioLayout, radioLayout = _l === void 0 ? props_1.RadioGroupDefault.radioLayout : _l, _m = _a.valid, valid = _m === void 0 ? props_1.RadioGroupDefault.valid : _m, _o = _a.labelOffset, labelOffset = _o === void 0 ? props_1.RadioGroupDefault.labelOffset : _o, _p = _a.color, color = _p === void 0 ? props_1.RadioGroupDefault.color : _p, _q = _a.verticalAlign, verticalAlign = _q === void 0 ? props_1.RadioGroupDefault.verticalAlign : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.RadioGroupDefault.readOnly : _r, _s = _a.gap, gap = _s === void 0 ? props_1.RadioGroupDefault.gap : _s, _t = _a.isFilled, isFilled = _t === void 0 ? props_1.RadioGroupDefault.isFilled : _t, _u = _a.showIndicator, showIndicator = _u === void 0 ? props_1.RadioGroupDefault.showIndicator : _u, _v = _a.hasInfo, hasInfo = _v === void 0 ? props_1.RadioGroupDefault.hasInfo : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.RadioGroupDefault.infoText : _w, _x = _a.infoIcon, infoIcon = _x === void 0 ? props_1.RadioGroupDefault.infoIcon : _x, _y = _a.gridColumnLength, gridColumnLength = _y === void 0 ? props_1.RadioGroupDefault.gridColumnLength : _y, _z = _a.isHorizontalOnMobile, isHorizontalOnMobile = _z === void 0 ? props_1.RadioGroupDefault.isHorizontalOnMobile : _z;
     var handleRadioChange = function (optionValue) {
         if (!onChange)
             return;
         onChange(optionValue);
     };
-    return ((0, jsx_runtime_1.jsxs)(RadioGroup_styled_1.RadioGroupStyled, { children: [label && ((0, jsx_runtime_1.jsx)(RadioGroup_styled_1.GroupLabelWrapper, __assign({ "$emphasizedLabel": hasInfo }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.GroupLabel, __assign({ "$emphasizedLabel": hasInfo }, { children: label })) }))), hasInfo && infoText && ((0, jsx_runtime_1.jsxs)(RadioGroup_styled_1.InfoArea, { children: [(0, jsx_runtime_1.jsx)(RadioGroup_styled_1.InfoIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: (infoIcon || props_1.RadioGroupDefault.infoIcon), width: "24", height: "24", hasWrapper: false }) }), (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.InfoText, { children: infoText })] })), (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.RadioButtonsWrapper, __assign({ "$layout": layout, "$gap": gap, "$isFilled": isFilled, "$gridColumnLength": gridColumnLength }, { children: options.map(function (option, index) {
+    return ((0, jsx_runtime_1.jsxs)(RadioGroup_styled_1.RadioGroupStyled, { children: [label && ((0, jsx_runtime_1.jsx)(RadioGroup_styled_1.GroupLabelWrapper, __assign({ "$emphasizedLabel": hasInfo }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.GroupLabel, __assign({ "$emphasizedLabel": hasInfo }, { children: label })) }))), hasInfo && infoText && ((0, jsx_runtime_1.jsxs)(RadioGroup_styled_1.InfoArea, { children: [(0, jsx_runtime_1.jsx)(RadioGroup_styled_1.InfoIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: (infoIcon || props_1.RadioGroupDefault.infoIcon), width: "24", height: "24", hasWrapper: false }) }), (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.InfoText, { children: infoText })] })), (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.RadioButtonsWrapper, __assign({ "$layout": layout, "$gap": gap, "$isFilled": isFilled, "$gridColumnLength": gridColumnLength, "$isHorizontalOnMobile": isHorizontalOnMobile }, { children: options.map(function (option, index) {
                     var radioId = option.id || "".concat(name, "_").concat(index);
                     var isChecked = value === option.value;
                     return ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, name: name, value: option.value, checked: isChecked, onChange: function (e) { return handleRadioChange(option.value); }, label: option.label, description: option.description, image: option.image, disabled: disabled || option.disabled, alignment: option.alignment, isWrapText: option.isWrapText, size: size, textSize: textSize, layout: radioLayout, valid: valid, labelOffset: labelOffset, color: option.color || color, verticalAlign: verticalAlign, readOnly: readOnly, showIndicator: showIndicator, titleBadgePosition: option.titleBadgePosition, hasTitleBadge: option.hasTitleBadge, titleBadgeLayout: option.titleBadgeLayout, titleBadgeText: option.titleBadgeText }, radioId));

package/dist/components/RadioGroup/RadioGroup.styled.js

@@ -9,14 +9,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupStyled = exports.RadioButtonsWrapper = exports.InfoText = exports.InfoIconWrapper = exports.InfoArea = exports.GroupLabel = exports.GroupLabelWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
 exports.GroupLabelWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    margin-bottom: ", ";\n"], ["\n    display: flex;\n    margin-bottom: ", ";\n"])), function (props) { return props.$emphasizedLabel ? "0.5rem" : "1rem"; });
 exports.GroupLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0;\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"])));
 exports.InfoArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0 0;\n    margin-bottom: 1rem;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0 0;\n    margin-bottom: 1rem;\n"])));
 exports.InfoIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--dark-opacity-50);\n"], ["\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--dark-opacity-50);\n"])));
 exports.InfoText = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: 0;\n    flex: 1;\n    font: var(--caption-medium-12-15);\n    color: var(--dark-opacity-50);\n"], ["\n    margin: 0;\n    flex: 1;\n    font: var(--caption-medium-12-15);\n    color: var(--dark-opacity-50);\n"])));
 exports.RadioButtonsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    gap: ", ";\n    width: 100%;\n\n    ", "\n"], ["\n    gap: ", ";\n    width: 100%;\n\n    ", "\n"])), function (props) { return props.$gap || "0.5rem"; }, function (props) { return props.$gridColumnLength
-    ? "\n        display: grid;\n        grid-template-columns: repeat(".concat(props.$gridColumnLength, ", minmax(0, 1fr));\n    ")
-    : "\n        display: flex;\n        flex-direction: ".concat(props.$layout === "horizontal" ? "row" : "column", ";\n        flex-wrap: ").concat(props.$layout === "horizontal" ? "wrap" : "nowrap", ";\n        ").concat(props.$isFilled
+    ? "\n        display: grid;\n        grid-template-columns: repeat(".concat(props.$gridColumnLength, ", minmax(0, 1fr));\n        ").concat(props.$isHorizontalOnMobile
+        ? "\n        @media only screen and ".concat(devices_1.devices.md, " {\n            grid-template-columns: 1fr;\n        }\n        ")
+        : "", "\n    ")
+    : "\n        display: flex;\n        ".concat(props.$isHorizontalOnMobile && props.$layout === "horizontal"
+        ? "\n        flex-direction: row;\n        flex-wrap: wrap;\n        @media only screen and ".concat(devices_1.devices.md, " {\n            flex-direction: column;\n            flex-wrap: nowrap;\n        }\n        ")
+        : "\n        flex-direction: ".concat(props.$layout === "horizontal" ? "row" : "column", ";\n        flex-wrap: ").concat(props.$layout === "horizontal" ? "wrap" : "nowrap", ";\n        "), "\n        ").concat(props.$isFilled
         ? "\n            > * {\n                flex: 1 1 0;\n            }\n        "
         : "", "\n    "); });
 exports.RadioGroupStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n"], ["\n    display: flex;\n    flex-direction: column;\n"])));

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

@@ -49,6 +49,8 @@ export interface RadioGroup {
     infoIcon?: string;
     /** Satır başına sütun sayısı — verildiğinde flex yerine grid kullanılır */
     gridColumnLength?: number;
+    /** Mobilde layout uyarlaması: flex vertical → row; grid → tek sütun (alt alta) */
+    isHorizontalOnMobile?: boolean;
 }
 export declare const RadioGroupDefault: RadioGroup;
 export interface RadioGroupStyledProps {
@@ -57,6 +59,7 @@ export interface RadioGroupStyledProps {
     $isFilled?: boolean;
     $emphasizedLabel?: boolean;
     $gridColumnLength?: number;
+    $isHorizontalOnMobile?: boolean;
 }
 export type RadioGroupProps = typeof RadioGroupDefault;
 export {};

package/dist/components/RadioGroup/props.js

@@ -28,5 +28,6 @@ exports.RadioGroupDefault = {
     hasInfo: false,
     infoText: null,
     infoIcon: "InfoSquare",
-    gridColumnLength: undefined
+    gridColumnLength: undefined,
+    isHorizontalOnMobile: false,
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength }: import("../props").RadioGroup) => React.JSX.Element;
+    component: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength, isHorizontalOnMobile, }: import("../props").RadioGroup) => React.JSX.Element;
     tags: string[];
     argTypes: {
         layout: {
@@ -49,6 +49,9 @@ declare const _default: {
             min: number;
             max: number;
         };
+        isHorizontalOnMobile: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -86,6 +89,24 @@ export declare const WithoutIndicator: {
         textSize: string;
     };
 };
+export declare const VerticalHorizontalOnMobile: {
+    args: {
+        layout: string;
+        isHorizontalOnMobile: boolean;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        name: string;
+        label: string;
+        value: string;
+        onChange: (value: any) => void;
+        radioLayout: string;
+        size: string;
+        textSize: string;
+        showIndicator: boolean;
+    };
+};
 export declare const Horizontal: {
     args: {
         name: string;
@@ -240,6 +261,25 @@ export declare const GridTwoColumns: {
     };
     render: (args: any) => React.JSX.Element;
 };
+export declare const GridStackedOnMobile: {
+    args: {
+        isHorizontalOnMobile: boolean;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        name: string;
+        label: string;
+        value: string;
+        onChange: (value: any) => void;
+        radioLayout: string;
+        size: string;
+        gridColumnLength: number;
+        gap: string;
+        showIndicator: boolean;
+    };
+    render: (args: any) => React.JSX.Element;
+};
 export declare const ColorPicker: {
     args: {
         name: string;

package/dist/components/RadioGroup/stories/RadioGroup.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.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.WithoutIndicator = exports.Default = void 0;
+exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var RadioGroup_1 = __importDefault(require("../RadioGroup"));
 var props_1 = require("../props");
@@ -36,6 +36,7 @@ exports.default = {
         infoText: { control: 'text' },
         infoIcon: { control: 'text' },
         gridColumnLength: { control: 'number', min: 1, max: 6 },
+        isHorizontalOnMobile: { control: 'boolean' },
     }
 };
 exports.Default = {
@@ -59,6 +60,14 @@ exports.Default = {
 exports.WithoutIndicator = {
     args: __assign(__assign({}, exports.Default.args), { showIndicator: false }),
 };
+exports.VerticalHorizontalOnMobile = {
+    args: __assign(__assign({}, exports.Default.args), { layout: "vertical", isHorizontalOnMobile: true, options: [
+            { label: "Option 1", value: "option1" },
+            { label: "Option 2", value: "option2" },
+            { label: "Option 3", value: "option3" },
+            { label: "Option 4", value: "option4" },
+        ] }),
+};
 exports.Horizontal = {
     args: {
         name: "horizontalRadioGroup",
@@ -204,6 +213,15 @@ exports.GridTwoColumns = {
     },
     render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, __assign({}, args)) }))); },
 };
+exports.GridStackedOnMobile = {
+    args: __assign(__assign({}, exports.GridTwoColumns.args), { isHorizontalOnMobile: true, options: [
+            { label: "Esnek", value: "flexible" },
+            { label: "Taahhütlü", value: "committed" },
+            { label: "Seçenek 3", value: "option3" },
+            { label: "Seçenek 4", value: "option4" },
+        ] }),
+    render: exports.GridTwoColumns.render,
+};
 exports.ColorPicker = {
     args: {
         name: "colorRadioGroup",

package/package.json

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