krl-alfred 1.77.25 → 1.77.26

package/dist/components/BannerCard/BannerCard.js

@@ -19,7 +19,7 @@ var BannerCard_styled_1 = require("./BannerCard.styled");
 var Button_1 = __importDefault(require("../Button"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var BannerCard = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(BannerCard_styled_1.BannerCardStyled, __assign({ "$hasDarkTheme": props.hasDarkTheme, "$hasShadow": props.hasShadow }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(props === null || props === void 0 ? void 0 : props.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.title } }), (props === null || props === void 0 ? void 0 : props.description) && (0, jsx_runtime_1.jsx)("p", { className: "description", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.description } }), (props === null || props === void 0 ? void 0 : props.buttonText) &&
+    return ((0, jsx_runtime_1.jsxs)(BannerCard_styled_1.BannerCardStyled, __assign({ "$hasDarkTheme": props.hasDarkTheme, "$hasShadow": props.hasShadow }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "mobileLink", onClick: props === null || props === void 0 ? void 0 : props.onClick }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(props === null || props === void 0 ? void 0 : props.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.title } }), (props === null || props === void 0 ? void 0 : props.description) && (0, jsx_runtime_1.jsx)("p", { className: "description", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.description } }), (props === null || props === void 0 ? void 0 : props.buttonText) &&
                         (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: props === null || props === void 0 ? void 0 : props.onClick }, { children: props === null || props === void 0 ? void 0 : props.buttonText }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props === null || props === void 0 ? void 0 : props.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "textMobile", onClick: props === null || props === void 0 ? void 0 : props.onClick }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.shortDesc } }), props.hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] }))] })));
 };
 BannerCard.defaultProps = {};

package/dist/components/BannerCard/BannerCard.styled.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
+exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"], ["\n\n    ", "\n    padding: 0 5rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    height: 420px;\n    background-color: ", ";\n    border-radius: 0.5rem;\n    position: relative;\n    @media only screen and ", " {\n      padding: 0;\n      display: block;\n      height: auto;\n    }\n\n    .text {\n      @media only screen and ", " {\n        display: none;\n      }\n      max-width: 478px;\n\n      .title {\n        margin-bottom: 1.5rem;\n        display: block;\n        color: ", ";\n        font:var(--headline-extra-bold-32-39);\n      }\n\n      .description {\n        margin: 0;\n        display: block;\n        color: ", ";\n        font:var(--title-regular-16-19);\n      }\n      button{\n        margin-top: 1.5rem;\n      }\n    }\n    .mobileLink{\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        @media only screen and ", " {\n            display: none;\n        }\n    }\n\n    .textMobile {\n      display: none;\n      background-color: var(--primary-shades-dark);\n      padding: 0 1rem;\n      color: white;\n      align-items: center;\n      justify-content: space-between;\n      border-radius: 0 0 8px 8px;\n      height: 70px;\n      font:var(--title-medium-16-19);\n      svg {\n        margin-left: 1rem;\n      }\n\n      b {\n        display: block;\n      }\n\n      @media only screen and ", " {\n        display: flex;\n      }\n    }\n\n    .img {\n      text-align: end;\n      *{\n        display: block !important;\n      }\n      img {\n        max-height: 100%;\n        max-width: 100%;\n        @media only screen and ", " {\n          height: auto;\n        }\n      }\n\n      @media only screen and ", " {\n        padding: 0;\n        text-align: center;\n        height: 228px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ", ";\n        border-radius: 0.5rem;\n        * {\n          height: 174px !important;\n          max-height: 174px !important;\n        }\n      }\n    }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
 var templateObject_1;

package/dist/components/Modal/Modal.js

@@ -35,7 +35,7 @@ var Divider_1 = __importDefault(require("../Divider"));
 var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
 var react_i18next_1 = require("react-i18next");
 var Modal = function (props) {
-    var size = props.size, showCloseIcon = props.showCloseIcon, showBackIcon = props.showBackIcon, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, onBack = props.onBack, show = props.show, showDivider = props.showDivider, title = props.title, children = props.children, modalFooter = props.modalFooter, showPrimaryButton = props.showPrimaryButton, showSecondaryButton = props.showSecondaryButton, onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, buttonsAlignment = props.buttonsAlignment, buttonsAlignmentOnMobile = props.buttonsAlignmentOnMobile, primaryButtonText = props.primaryButtonText, secondaryButtonText = props.secondaryButtonText, showHeaderBorder = props.showHeaderBorder, showFooterBorder = props.showFooterBorder, autoHeight = props.autoHeight, titleAlignment = props.titleAlignment, titleDescription = props.titleDescription, isPrimaryButtonLoading = props.isPrimaryButtonLoading, primaryButtonIcon = props.primaryButtonIcon, secondaryButtonIcon = props.secondaryButtonIcon, isSecondaryButtonLoading = props.isSecondaryButtonLoading, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isSecondaryButtonDisabled = props.isSecondaryButtonDisabled, primaryButtonWidth = props.primaryButtonWidth, primaryButtonIconStrokeWidth = props.primaryButtonIconStrokeWidth, secondaryButtonWidth = props.secondaryButtonWidth, secondaryButtonIconStrokeWidth = props.secondaryButtonIconStrokeWidth, customContent = props.customContent, other = __rest(props, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "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", "primaryButtonIconStrokeWidth", "secondaryButtonWidth", "secondaryButtonIconStrokeWidth", "customContent"]);
+    var size = props.size, showCloseIcon = props.showCloseIcon, showBackIcon = props.showBackIcon, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, onBack = props.onBack, show = props.show, showDivider = props.showDivider, title = props.title, children = props.children, modalFooter = props.modalFooter, showPrimaryButton = props.showPrimaryButton, showSecondaryButton = props.showSecondaryButton, onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, buttonsAlignment = props.buttonsAlignment, buttonsAlignmentOnMobile = props.buttonsAlignmentOnMobile, primaryButtonText = props.primaryButtonText, secondaryButtonText = props.secondaryButtonText, showHeaderBorder = props.showHeaderBorder, showFooterBorder = props.showFooterBorder, autoHeight = props.autoHeight, titleAlignment = props.titleAlignment, titleDescription = props.titleDescription, isPrimaryButtonLoading = props.isPrimaryButtonLoading, primaryButtonIcon = props.primaryButtonIcon, secondaryButtonIcon = props.secondaryButtonIcon, isSecondaryButtonLoading = props.isSecondaryButtonLoading, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isSecondaryButtonDisabled = props.isSecondaryButtonDisabled, primaryButtonWidth = props.primaryButtonWidth, primaryButtonIconStrokeWidth = props.primaryButtonIconStrokeWidth, secondaryButtonWidth = props.secondaryButtonWidth, secondaryButtonIconStrokeWidth = props.secondaryButtonIconStrokeWidth, customContent = props.customContent, id = props.id, other = __rest(props, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "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", "primaryButtonIconStrokeWidth", "secondaryButtonWidth", "secondaryButtonIconStrokeWidth", "customContent", "id"]);
     var uniqueId = (0, react_1.useId)();
     var t = (0, react_i18next_1.useTranslation)().t;
     var _a = (0, react_1.useState)(props.show), showModal = _a[0], setShowModal = _a[1];
@@ -58,7 +58,7 @@ var Modal = function (props) {
     var modalRef = (0, react_1.useRef)();
     (0, useOnClickOutside_1.default)(modalRef, props.onClose, props.hasCloseOnOutsideClick);
     return (showModal &&
-        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": props.size, "$autoHeight": props.autoHeight, "$showHeaderBorder": props.showHeaderBorder, "$titleAlignment": props.titleAlignment, "$customContent": props.customContent, "$showFooterBorder": props.showFooterBorder, "$buttonsAlignment": props.buttonsAlignment, "$showSecondaryButton": props.showSecondaryButton, "$showDivider": props.showDivider, "$buttonsAlignmentOnMobile": props.buttonsAlignmentOnMobile }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) }))) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { children: props.title })), props.titleDescription && (0, jsx_runtime_1.jsx)("p", { children: props.titleDescription })] })), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) }))) : ((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: props.children })) })), props.modalFooter ? props.modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, icon: props.primaryButtonIcon, iconStrokeWidth: props.primaryButtonIconStrokeWidth }, { children: props.primaryButtonText }))), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && props.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: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, icon: props.secondaryButtonIcon, iconStrokeWidth: props.secondaryButtonIconStrokeWidth }, { children: props.secondaryButtonText }))] }))] })) })] })) }), document.body));
+        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id) }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": props.size, "$autoHeight": props.autoHeight, "$showHeaderBorder": props.showHeaderBorder, "$titleAlignment": props.titleAlignment, "$customContent": props.customContent, "$showFooterBorder": props.showFooterBorder, "$buttonsAlignment": props.buttonsAlignment, "$showSecondaryButton": props.showSecondaryButton, "$showDivider": props.showDivider, "$buttonsAlignmentOnMobile": props.buttonsAlignmentOnMobile, id: id }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) }))) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { children: props.title })), props.titleDescription && (0, jsx_runtime_1.jsx)("p", { children: props.titleDescription })] })), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) }))) : ((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: props.children })) })), props.modalFooter ? props.modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, icon: props.primaryButtonIcon, iconStrokeWidth: props.primaryButtonIconStrokeWidth }, { children: props.primaryButtonText }))), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && props.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: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, icon: props.secondaryButtonIcon, iconStrokeWidth: props.secondaryButtonIconStrokeWidth }, { children: props.secondaryButtonText }))] }))] })) })] })) })) }), document.body));
 };
 exports.default = Modal;
 Modal.defaultProps = {
@@ -66,7 +66,7 @@ Modal.defaultProps = {
     showBackIcon: true,
     showDivider: true,
     showCloseIcon: true,
-    hasCloseOnOutsideClick: false,
+    hasCloseOnOutsideClick: true,
     show: true,
     buttonsAlignment: "vertical",
     primaryButtonText: "Primary",

package/dist/components/Modal/stories/Modal.stories.js

@@ -39,10 +39,14 @@ exports.Default = {
         title: 'Title',
         showPrimaryButton: true,
         showSecondaryButton: true,
-        hasCloseOnOutsideClick: false,
+        hasCloseOnOutsideClick: true,
         primaryButtonText: 'Primary Action',
         secondaryButtonText: 'Other',
-        children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
+        children: (0, jsx_runtime_1.jsx)("div", { children: "Content" }),
+        id: "myModal",
+        onClose: function (e) {
+            console.log(e);
+        },
     },
 };
 exports.Type1 = {

package/dist/hooks/useOnClickOutside.js

@@ -5,7 +5,12 @@ function useOnClickOutside(ref, handler, status) {
     (0, react_1.useEffect)(function () {
         if (status) {
             var listener_1 = function (event) {
-                if (!ref.current || ref.current.contains(event.target)) {
+                var _a, _b;
+                var modalBackdrop = document.querySelector("#modalBackdrop_".concat((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.id));
+                if (!(ref === null || ref === void 0 ? void 0 : ref.current) || ((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.contains(event === null || event === void 0 ? void 0 : event.target))) {
+                    return;
+                }
+                if (modalBackdrop && !(modalBackdrop === null || modalBackdrop === void 0 ? void 0 : modalBackdrop.contains(event === null || event === void 0 ? void 0 : event.target))) {
                     return;
                 }
                 handler(event);

package/package.json

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