krl-alfred 1.74.4 → 1.74.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
13
|
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
exports.ThumbnailItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n background-color: ", ";\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n background-color: ", ";\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n"])), function (props) { return props.hasDarkTheme ? "var(--dark)" : "#fff"; });
|
|
15
|
-
exports.BannerItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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 }\n\n .description {\n margin
|
|
15
|
+
exports.BannerItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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 }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\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 svg {\n margin-left: 1rem;\n path {\n stroke: white;\n }\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 img {\n display: inline-block !important;\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 span {\n height: 174px !important;\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 }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\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 svg {\n margin-left: 1rem;\n path {\n stroke: white;\n }\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 img {\n display: inline-block !important;\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 span {\n height: 174px !important;\n }\n }\n }\n"])), 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"; });
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -56,7 +56,7 @@ var Modal = function (props) {
|
|
|
56
56
|
};
|
|
57
57
|
var onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, onBack = props.onBack, other = __rest(props, ["onPrimaryAction", "onSecondaryAction", "onBack"]);
|
|
58
58
|
var modalRef = (0, react_1.useRef)();
|
|
59
|
-
(0, useOnClickOutside_1.default)(modalRef,
|
|
59
|
+
(0, useOnClickOutside_1.default)(modalRef, props.onClose, props.hasCloseOnOutsideClick);
|
|
60
60
|
return (showModal &&
|
|
61
61
|
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 }, 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", __assign({ className: props.titleAlignment === "left" ? (["small", "xsmall"].includes(props.size) ? "title-semi-bold-16-19" : "headline-semi-bold-18-22") : "headline-semi-bold-20-24" }, { children: props.title }))), props.titleDescription && ((0, jsx_runtime_1.jsx)("p", __assign({ className: "body-regular-14-17" }, { 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 }, { 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 }, { children: props.secondaryButtonText }))] }))] })) })] })) }), document.body));
|
|
62
62
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "krl-alfred",
|
|
3
|
-
"version": "1.74.
|
|
3
|
+
"version": "1.74.6",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"@storybook/react-webpack5": "7.2.1",
|
|
92
92
|
"@svgr/cli": "^7.0.0",
|
|
93
93
|
"@svgr/webpack": "^7.0.0",
|
|
94
|
-
"semantic-release": "^21.
|
|
94
|
+
"semantic-release": "^21.1.2",
|
|
95
95
|
"storybook": "7.2.1",
|
|
96
96
|
"storybook-addon-locale": "^0.3.6"
|
|
97
97
|
}
|