krl-alfred 1.77.2 → 1.77.4

package/dist/components/InsuranceBox/InsuranceBox.js

@@ -22,7 +22,7 @@ var Tooltip_1 = __importDefault(require("../Tooltip"));
 var Loader_1 = __importDefault(require("../Loader"));
 var InsuranceBox = function (props) {
     var hasClickAction = props.hasClickAction, popupSize = props.popupSize, size = props.size, popupRight = props.popupRight, popupWidth = props.popupWidth, disabled = props.disabled, hasBorder = props.hasBorder, hasBgColor = props.hasBgColor, priceText = props.priceText, onChange = props.onChange, width = props.width, checked = props.checked, height = props.height, tooltipTitle = props.tooltipTitle, tooltipDescription = props.tooltipDescription, tooltipPosition = props.tooltipPosition, isTitleWrap = props.isTitleWrap, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, isLoading = props.isLoading;
-    return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, __assign({ "$hasBorder": hasBorder, "$hasBgColor": hasBgColor, "$width": width, "$height": height, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.CheckboxWrapper, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "large" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Description, __assign({ "$size": size }, { children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave" }) : (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: "Hasar g\u00FCvenceni %100\u2019e ".concat(isTitleWrap && "<br/>", "tamamlars\u0131n! <b>").concat(priceText, "</b>") } }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: popupSize, title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: hasClickAction, popupWidth: popupWidth, popupRight: popupRight, iconWidth: "24px", iconHeight: "24px" }, { children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: props.insuranceText })) }))] }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, __assign({ "$hasBorder": hasBorder, "$hasBgColor": hasBgColor, "$width": width, "$height": height, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.CheckboxWrapper, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "large" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Description, __assign({ "$size": size }, { children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave" }) : (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: "Hasar g\u00FCvenceni %100\u2019e ".concat(isTitleWrap ? "<br/>" : '', "tamamlars\u0131n! <b>").concat(priceText, "</b>") } }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: popupSize, title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: hasClickAction, popupWidth: popupWidth, popupRight: popupRight, iconWidth: "24px", iconHeight: "24px" }, { children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: props.insuranceText })) }))] }))] }))] })));
 };
 InsuranceBox.defaultProps = {
     height: "90px",

package/dist/components/ListGroup/ListGroup.js

@@ -12,18 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var ListGroup_styled_1 = require("./ListGroup.styled");
 var ListGroup = function (props) {
     var data = props.data;
-    var _a = (0, react_1.useState)(''), link = _a[0], setLink = _a[1];
-    (0, react_1.useEffect)(function () {
-        var _a;
-        setLink((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href);
-    }, []);
     return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
-            var _a;
-            return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, __assign({ "$isActive": (_a = link === null || link === void 0 ? void 0 : link.split('/')) === null || _a === void 0 ? void 0 : _a.includes(item["slug"]), onClick: item.onClick, "$hasNotification": item.hasNotification }, { children: item.title })) }, key);
+            return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, __assign({ "$isActive": item.isActive, onClick: item.onClick, "$hasNotification": item.hasNotification }, { children: item.title })) }, key);
         }) }));
 };
 ListGroup.defaultProps = {};

package/dist/components/ListGroup/ListGroup.styled.js

@@ -11,5 +11,5 @@ exports.ListGroupItemButton = exports.ListGroupItem = exports.ListGroupStyled =
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ListGroupStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  padding: 0;\n  margin: 0;\n"], ["\n  display: block;\n  padding: 0;\n  margin: 0;\n"])));
 exports.ListGroupItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0; \n  display: block;\n  + li {\n    margin-top: 1rem;\n  }\n"], ["\n  padding: 0;\n  margin: 0; \n  display: block;\n  + li {\n    margin-top: 1rem;\n  }\n"])));
-exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  transition: all .2s ease;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", ";\n    transition: all .2s ease;\n  }\n  ", "\n  ", "\n"], ["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  transition: all .2s ease;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", ";\n    transition: all .2s ease;\n  }\n  ", "\n  ", "\n"])), function (props) { return props.$isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.$isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return !props.$isActive && "\n    &:hover{\n      background-color:  var(--primary-opacity-5);\n      color: var(--primary);\n    }\n  "; }, function (props) { return props.$hasNotification && "\n  \n  &:after{\n    content: \"\";\n    position: absolute;\n    right : 1.5rem;\n    top:50%;\n    transform:translateY(-50%);\n    width:16px;\n    height:16px;\n    background-color:var(--primary);\n    border-radius:50%;\n  }\n  "; });
+exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  transition: all .2s ease;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", ";\n  }\n  ", "\n  ", "\n"], ["\n  padding: 0 1.5rem;\n  margin: 0;\n  height: 67px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: 0.5rem;\n  background-color: ", ";\n  cursor: pointer;\n  color: ", ";\n  border: 0;\n  width: 100%;\n  position: relative;\n  outline: none;\n  font:var(--title-bold-16-19);\n  transition: all .2s ease;\n  &:before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    user-select: none;\n    pointer-events: none;\n    border-radius: inherit;\n    border: ", ";\n  }\n  ", "\n  ", "\n"])), function (props) { return props.$isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.$isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.$isActive ? "2px solid var(--primary)" : "none"; }, function (props) { return !props.$isActive && "\n    &:hover{\n      background-color:  var(--primary-opacity-5);\n      color: var(--primary);\n    }\n  "; }, function (props) { return props.$hasNotification && "\n  \n  &:after{\n    content: \"\";\n    position: absolute;\n    right : 1.5rem;\n    top:50%;\n    transform:translateY(-50%);\n    width:16px;\n    height:16px;\n    background-color:var(--primary);\n    border-radius:50%;\n  }\n  "; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -25,7 +25,7 @@ var ShoppingCartProduct = function (props) {
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
     };
     return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": props.discountRate, "$hasDisableActions": props.hasDisableActions, "$hasInsurance": !props.hasLoading && props.toggleInsurance }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: props.image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(props.oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.price })), props.period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(props.period) }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText &&
-                                            (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price" }, { children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
+                                            (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price" }, { children: [(0, jsx_runtime_1.jsx)("b", { dangerouslySetInnerHTML: { __html: props.insurancePrice } }), (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
 };
 ShoppingCartProduct.defaultProps = {
     insuranceText: "Tamamlayıcı ek güvence ekle",

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js

@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      &:hover{\n        ~ .text{\n          .productCardTitle{\n            color: var(--primary-hover);\n          }\n        }\n      }\n    }\n    .text{\n      padding-right: 0.5rem;\n        a{\n          &:hover{\n            .productCardTitle{\n              color: var(--primary-hover);\n            }\n          }\n        }\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        font:var(--title-semi-bold-16-19);\n        transition: all .2s ease;\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: var(--grey-40);\n        display: block;\n        overflow: hidden;\n        font:var(--body-medium-13-16);\n        .productCardDeliveryDanger{\n          display: block;\n          color: var(--red);\n        }\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font:var(--body-extra-bold-13-16);\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 4px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price {\n            text-decoration: line-through;\n            font:var(--caption-semi-bold-11-13);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-11-13);\n          }\n        }\n\n        .newPrice {\n          .price {\n            font:var(--body-extra-bold-14-17);\n          }\n          .period {\n            font:var(--caption-regular-12-15);\n          }\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: ", ";\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        color: ", ";\n        font:var(--body-extra-bold-13-16);\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      font:var(--caption-semi-bold-12-15);\n      .price{\n        display: block;\n        margin: 0;\n        font:var(--caption-extra-bold-12-15);\n        .quantity{\n          display: inline-block;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n    .actions{\n      width: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"], ["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      &:hover{\n        ~ .text{\n          .productCardTitle{\n            color: var(--primary-hover);\n          }\n        }\n      }\n    }\n    .text{\n      padding-right: 0.5rem;\n        a{\n          &:hover{\n            .productCardTitle{\n              color: var(--primary-hover);\n            }\n          }\n        }\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        font:var(--title-semi-bold-16-19);\n        transition: all .2s ease;\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: var(--grey-40);\n        display: block;\n        overflow: hidden;\n        font:var(--body-medium-13-16);\n        .productCardDeliveryDanger{\n          display: block;\n          color: var(--red);\n        }\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font:var(--body-extra-bold-13-16);\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 4px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price {\n            text-decoration: line-through;\n            font:var(--caption-semi-bold-11-13);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-11-13);\n          }\n        }\n\n        .newPrice {\n          .price {\n            font:var(--body-extra-bold-14-17);\n          }\n          .period {\n            font:var(--caption-regular-12-15);\n          }\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: ", ";\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        color: ", ";\n        font:var(--body-extra-bold-13-16);\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      font:var(--caption-semi-bold-12-15);\n      .price{\n        display: block;\n        margin: 0;\n        font:var(--caption-extra-bold-12-15);\n        .quantity{\n          display: inline-block;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n    .actions{\n      width: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
+exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      &:hover{\n        ~ .text{\n          .productCardTitle{\n            color: var(--primary-hover);\n          }\n        }\n      }\n    }\n    .text{\n      padding-right: 0.5rem;\n        a{\n          &:hover{\n            .productCardTitle{\n              color: var(--primary-hover);\n            }\n          }\n        }\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        font:var(--title-semi-bold-16-19);\n        transition: all .2s ease;\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: var(--grey-40);\n        display: block;\n        overflow: hidden;\n        font:var(--body-medium-13-16);\n        .productCardDeliveryDanger{\n          display: block;\n          color: var(--red);\n        }\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font:var(--body-extra-bold-13-16);\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 4px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price {\n            text-decoration: line-through;\n            font:var(--caption-semi-bold-11-13);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-11-13);\n          }\n        }\n\n        .newPrice {\n          .price {\n            font:var(--body-extra-bold-14-17);\n          }\n          .period {\n            font:var(--caption-regular-12-15);\n          }\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: ", ";\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        color: ", ";\n        font:var(--body-extra-bold-13-16);\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      font:var(--caption-semi-bold-12-15);\n      .price{\n        display: block;\n        margin: 0;\n        font:var(--caption-extra-bold-12-15);\n        b{\n          span{\n            font-weight: 400;\n          }\n        }\n        .quantity{\n          display: inline-block;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n    .actions{\n      width: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"], ["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n      &:hover{\n        ~ .text{\n          .productCardTitle{\n            color: var(--primary-hover);\n          }\n        }\n      }\n    }\n    .text{\n      padding-right: 0.5rem;\n        a{\n          &:hover{\n            .productCardTitle{\n              color: var(--primary-hover);\n            }\n          }\n        }\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        font:var(--title-semi-bold-16-19);\n        transition: all .2s ease;\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: var(--grey-40);\n        display: block;\n        overflow: hidden;\n        font:var(--body-medium-13-16);\n        .productCardDeliveryDanger{\n          display: block;\n          color: var(--red);\n        }\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font:var(--body-extra-bold-13-16);\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 4px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price {\n            text-decoration: line-through;\n            font:var(--caption-semi-bold-11-13);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-11-13);\n          }\n        }\n\n        .newPrice {\n          .price {\n            font:var(--body-extra-bold-14-17);\n          }\n          .period {\n            font:var(--caption-regular-12-15);\n          }\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: ", ";\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        color: ", ";\n        font:var(--body-extra-bold-13-16);\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    cursor: ", ";\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      font:var(--caption-semi-bold-12-15);\n      .price{\n        display: block;\n        margin: 0;\n        font:var(--caption-extra-bold-12-15);\n        b{\n          span{\n            font-weight: 400;\n          }\n        }\n        .quantity{\n          display: inline-block;\n          margin-left: 0.5rem;\n        }\n      }\n    }\n    .actions{\n      width: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
 exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border:0;\n  padding: 0;\n  outline: none;\n  box-shadow: none;\n  width: 24px;\n  height: 24px;\n  background: white;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all .1s ease;\n  cursor: pointer;\n  position: relative;\n  color : var(--primary);\n  /*&:hover{\n    .popup{\n      opacity: 1;\n    }\n  }*/\n  &:disabled{\n    cursor: no-drop;\n  }\n  .popup{\n    position: absolute;\n    width: 139px;\n    padding: 10px;\n    border-radius: 0.5rem;\n    background-color: var(--red);\n    z-index: 99999;\n    box-sizing: border-box;\n    right: calc(100% + 11px);\n    top: -8px;\n    color: white;\n    //opacity: 0;\n    opacity: 1;\n    user-select: none;\n    pointer-events: none;\n    transition: all .1s ease;\n    text-align: center;\n    font:var(--caption-semi-bold-12-15);\n    &:before {\n      content: '';\n      position: absolute;\n      top: 14px;\n      left: calc(100% - 7px);\n      transform: rotate(45deg);\n      background-color: var(--red);\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n    }\n  }\n  &:hover{\n    background-color : var(--primary);\n    color : white;\n  }\n"], ["\n  border:0;\n  padding: 0;\n  outline: none;\n  box-shadow: none;\n  width: 24px;\n  height: 24px;\n  background: white;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all .1s ease;\n  cursor: pointer;\n  position: relative;\n  color : var(--primary);\n  /*&:hover{\n    .popup{\n      opacity: 1;\n    }\n  }*/\n  &:disabled{\n    cursor: no-drop;\n  }\n  .popup{\n    position: absolute;\n    width: 139px;\n    padding: 10px;\n    border-radius: 0.5rem;\n    background-color: var(--red);\n    z-index: 99999;\n    box-sizing: border-box;\n    right: calc(100% + 11px);\n    top: -8px;\n    color: white;\n    //opacity: 0;\n    opacity: 1;\n    user-select: none;\n    pointer-events: none;\n    transition: all .1s ease;\n    text-align: center;\n    font:var(--caption-semi-bold-12-15);\n    &:before {\n      content: '';\n      position: absolute;\n      top: 14px;\n      left: calc(100% - 7px);\n      transform: rotate(45deg);\n      background-color: var(--red);\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n    }\n  }\n  &:hover{\n    background-color : var(--primary);\n    color : white;\n  }\n"])));
 var templateObject_1, templateObject_2;

package/package.json

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