krl-alfred 1.76.34 → 1.76.36

package/dist/components/AddressCard/AddressCard.js

@@ -18,8 +18,10 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var AddressCard_styled_1 = require("./AddressCard.styled");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var TextLink_1 = __importDefault(require("../TextLink"));
+var react_i18next_1 = require("react-i18next");
 var AddressCard = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: props.id, checked: props.checked, "$minHeight": props.minHeight }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", label: props.title, name: props.name, value: props.value, disabled: props.disabled }), (props === null || props === void 0 ? void 0 : props.isShowEditBtn) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.handleUpdate }, { children: "D\u00FCzenle" })) })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props.description }))] })));
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: props.id, checked: props.checked, "$minHeight": props.minHeight }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", label: props.title, name: props.name, value: props.value, disabled: props.disabled }), (props === null || props === void 0 ? void 0 : props.isShowEditBtn) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.handleUpdate }, { children: t("edit") })) })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: props.description }))] })));
 };
 AddressCard.defaultProps = {
     isShowEditBtn: true,

package/dist/components/CouponCode/CouponCode.js

@@ -29,7 +29,7 @@ var CouponCode = function (props) {
         setExpanded(props.expanded);
     }, [props.expanded]);
     var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
-    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "1.5px", name: "ArrowSmallDown", width: "24px", height: "24px" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant }, { children: props.buttonText }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant }, { children: props.buttonText }))] }))] })));
 };
 CouponCode.defaultProps = {
     title: "Title",

package/dist/components/Icon/ArrowSmallDown.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 SvgArrowSmallDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10.668 6.66797L8.0013 9.33464L5.33464 6.66797", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+var SvgArrowSmallDown = function (props) { return ((0, jsx_runtime_1.jsx)("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)("path", { d: "M16 10L12 14L8 10", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
 exports.default = SvgArrowSmallDown;

package/dist/components/Icon/ArrowSmallRight.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 SvgArrowSmallRight = function (props) { return ((0, jsx_runtime_1.jsx)("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)("path", { d: "M10 8L14 12L10 16", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+var SvgArrowSmallRight = 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)("path", { d: "M10 8L14 12L10 16", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8L14 12L10 16", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8L14 12L10 16", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
 exports.default = SvgArrowSmallRight;

package/dist/components/Icon/ArrowSmallUp.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 SvgArrowSmallUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.33398 9.33594L8.00065 6.66927L10.6673 9.33594", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
+var SvgArrowSmallUp = function (props) { return ((0, jsx_runtime_1.jsx)("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)("path", { d: "M8 14L12 10L16 14", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
 exports.default = SvgArrowSmallUp;

package/dist/components/Icon/RadioButtonElementInvalid.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 SvgRadioButtonElementInvalid = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5ZM8 14.5C11.3137 14.5 14 11.8137 14 8.5C14 5.18629 11.3137 2.5 8 2.5C4.68629 2.5 2 5.18629 2 8.5C2 11.8137 4.68629 14.5 8 14.5Z", fill: "currentColor" }) }))); };
+var SvgRadioButtonElementInvalid = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16.5C12.4183 16.5 16 12.9183 16 8.5C16 4.08172 12.4183 0.5 8 0.5C3.58172 0.5 0 4.08172 0 8.5C0 12.9183 3.58172 16.5 8 16.5ZM8 14.5C11.3137 14.5 14 11.8137 14 8.5C14 5.18629 11.3137 2.5 8 2.5C4.68629 2.5 2 5.18629 2 8.5C2 11.8137 4.68629 14.5 8 14.5Z", fill: "currentColor" }) }))); };
 exports.default = SvgRadioButtonElementInvalid;

package/dist/components/Input/Input.js

@@ -35,7 +35,7 @@ var react_number_format_1 = require("react-number-format");
 var react_i18next_1 = require("react-i18next");
 var Input = function (props) {
     var _a;
-    var type = props.type, other = __rest(props, ["type"]);
+    var type = props.type, hasError = props.hasError, other = __rest(props, ["type", "hasError"]);
     var _b = (0, react_1.useState)(type), inputType = _b[0], setInputType = _b[1];
     var _c = (0, react_1.useState)(false), alert = _c[0], setAlert = _c[1];
     var inputRef = (0, react_1.useRef)(null);
@@ -61,7 +61,7 @@ var Input = function (props) {
         inputRef.current.blur();
     };
     return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ width: props.width }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick }, { children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(props.mask && props.format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({}, props, { format: props.format, mask: props.mask, customInput: Input_styled_1.InputStyled })))
-                        : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) })), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ visible: alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
+                        : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) })), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ visible: alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
 };
 Input.defaultValues = {
     hasError: false,

package/dist/components/Input/Input.styled.js

@@ -11,5 +11,5 @@ exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"], ["\n  position: absolute;\n  right: 8px;\n  top: -20px;\n  height: 28px;\n  border-radius: 8px;\n  background-color: white;\n  box-shadow: 0 6px 30px 0 #EAE9F0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1rem;\n  user-select: none;\n  pointer-events: none;\n  transition: opacity .4s ease;\n  opacity: ", ";\n  font:var(--caption-medium-10-12);\n"])), function (props) { return props.visible ? '1' : '0'; });
 exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    font: var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n\n    /*a {\n      margin: 0;\n      color: var(--primary);\n      text-decoration: none;\n      cursor: pointer;\n      &:hover,:focus,:active{\n        color: var(--primary-hover) !important;\n      }\n    }*/\n  }\n\n  .input {\n    position: relative;\n\n    .inputIcon {\n      position: absolute;\n      width: 24px;\n      height: 24px;\n      top: 16px;\n      right: 16px;\n      cursor: pointer;\n      &:hover{\n        background-color: var(--primary-opacity-5);\n      }\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n    svg {\n      margin-right: 8px;\n    }\n\n    p {\n      margin: 0;\n      font:var(--caption-semi-bold-11-13);\n    }\n  }\n"])), function (props) { return props.width || '370px'; });
-exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
+exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  height: 56px;\n  background: ", ";\n  border-radius: 8px;\n  border: ", ";\n  padding: ", ";\n  color: ", ";\n  font: var(--body-semi-bold-14-17);\n  outline: none;\n  user-select: ", ";\n  pointer-events: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    padding: 18.5px 23px;\n    border: 2px solid ", ";\n    color: ", ";\n    background: white;\n  }\n  &:is([disabled]){\n    color: var(--dark-opacity-25);\n  }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Modal/Modal.js

@@ -35,6 +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 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];
@@ -54,11 +55,10 @@ var Modal = function (props) {
         setShowModal(false);
         (props === null || props === void 0 ? void 0 : props.onClose) && props.onClose();
     };
-    var onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, onBack = props.onBack, other = __rest(props, ["onPrimaryAction", "onSecondaryAction", "onBack"]);
     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 }, 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)(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));
 };
 exports.default = Modal;
 Modal.defaultProps = {

package/dist/components/Modal/Modal.styled.js

@@ -11,7 +11,7 @@ exports.OverlayStyled = exports.ModalStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    scrollbar-color: var(--dark-opacity-10) white;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n\n    [data-simplebar] {\n      .simplebar-track.simplebar-vertical {\n        width: 9px !important;\n      }\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n      color: var(--dark);\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        font : ", ";\n      }\n      p {\n        margin: 8px 0 0;\n        font:var(--body-regular-14-17);\n      }\n    }\n   \n  }\n\n  div.content {\n    padding : ", ";\n    overflow: auto;\n    position: relative;\n    scrollbar-color: var(--dark-opacity-10) white;\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n\n    [data-simplebar] {\n      .simplebar-track.simplebar-vertical {\n        width: 9px !important;\n      }\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    box-sizing: border-box;\n    border-top: ", ";\n    ", "\n\n    @media only screen and ", " {\n      ", "\n    }\n    \n  }\n"])), function (props) {
-    switch (props.size) {
+    switch (props.$size) {
         case 'xxsmall':
             return "311px";
         case 'xsmall':
@@ -25,15 +25,15 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
         default:
             return "462px";
     }
-}, function (props) { return !props.autoHeight && "\n      @media only screen and ".concat(devices_1.devices.sm, " {\n        display: grid;\n        height: 100dvh;\n        align-content: space-between;\n        border-radius: 0;\n        width: 100%;\n        max-width: 100%;\n        max-height: initial;\n      }\n  "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.customContent ? '0' : '0 24px'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
-    switch (props.buttonsAlignment) {
+}, function (props) { return !props.$autoHeight && "\n      @media only screen and ".concat(devices_1.devices.sm, " {\n        display: grid;\n        height: 100dvh;\n        align-content: space-between;\n        border-radius: 0;\n        width: 100%;\n        max-width: 100%;\n        max-height: initial;\n      }\n  "); }, function (props) { return props.$showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.$customContent ? '0' : '0 24px'; }, function (props) { return props.$showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
+    switch (props.$buttonsAlignment) {
         case 'horizontal':
-            return "\n            justify-content: flex-start;\n            flex-direction: row-reverse;\n            gap: 0;\n            button {\n              + button{\n                margin-right: ".concat((props.size === 'small' ? '16px' : '24px'), ";\n                @media only screen and ").concat(devices_1.devices.sm, " {\n                  margin-right: 16px;\n                }\n              }\n            }\n            @media only screen and ").concat(devices_1.devices.sm, " {\n              button {\n                flex: 1 1 0;\n                &:is(:nth-child(1)) {\n                  min-width: ").concat((props.showSecondaryButton ? 'initial' : 'calc(100% - 3rem)'), ";\n                  white-space: nowrap;\n                  box-sizing: content-box;\n                }\n                + button {\n                  margin-right: 1rem;\n                }\n              }\n            }\n          ");
+            return "\n            justify-content: flex-start;\n            flex-direction: row-reverse;\n            gap: 0;\n            button {\n              + button{\n                margin-right: ".concat((props.$size === 'small' ? '16px' : '24px'), ";\n                @media only screen and ").concat(devices_1.devices.sm, " {\n                  margin-right: 16px;\n                }\n              }\n            }\n            @media only screen and ").concat(devices_1.devices.sm, " {\n              button {\n                flex: 1 1 0;\n                &:is(:nth-child(1)) {\n                  min-width: ").concat((props.$showSecondaryButton ? 'initial' : 'calc(100% - 3rem)'), ";\n                  white-space: nowrap;\n                  box-sizing: content-box;\n                }\n                + button {\n                  margin-right: 1rem;\n                }\n              }\n            }\n          ");
         case 'vertical':
-            return "\n            justify-content: space-between;\n            flex-direction: column;\n            gap: ".concat(props.showDivider ? '0.5rem' : '1rem', ";\n          ");
+            return "\n            justify-content: space-between;\n            flex-direction: column;\n            gap: ".concat(props.$showDivider ? '0.5rem' : '1rem', ";\n          ");
         default:
             return "";
     }
-}, devices_1.devices.md, function (props) { return props.buttonsAlignmentOnMobile === 'vertical' ? "\n        flex-direction : column;\n        button {\n          margin : 0 !important;\n          + button {\n            margin-top:1rem !important;\n          }\n        }\n    " : " "; });
+}, devices_1.devices.md, function (props) { return props.$buttonsAlignmentOnMobile === 'vertical' ? "\n        flex-direction : column;\n        button {\n          margin : 0 !important;\n          + button {\n            margin-top:1rem !important;\n          }\n        }\n    " : " "; });
 exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"], ["\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #a3a5ad40;\n  overflow: auto;\n  left: 0;\n  top: 0;\n  z-index: 999999;\n"])));
 var templateObject_1, templateObject_2;

package/dist/components/RadioButton/layouts/boxed/Boxed.styled.js

@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
 var devices_1 = require("../../../../constants/devices");
-exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: pointer;\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          border: 2px solid var(--primary);\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0;\n    display: block;\n    text-align: center;\n\n    @media only screen and ", " {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        &:before{\n          content: \" / \";\n          display: inline;\n        }\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: pointer;\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('", "');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          border: 2px solid var(--primary);\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0;\n    display: block;\n    text-align: center;\n\n    @media only screen and ", " {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        &:before{\n          content: \" / \";\n          display: inline;\n        }\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n"])), devices_1.devices.lg, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
+exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: pointer;\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          border: 2px solid var(--primary);\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0;\n    display: block;\n    text-align: center;\n\n    @media only screen and ", " {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        &:before{\n          content: \" / \";\n          display: inline;\n        }\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  position: relative;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 128px;\n  cursor: pointer;\n  @media only screen and ", " {\n    height: 69px;\n  }\n\n  input[type=\"radio\"] {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n\n    &:checked ~ .indicator {\n      background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n    }\n\n    &:checked , &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          content: \"\";\n          position: absolute;\n          inset: -1px;\n          border-radius: 8px;\n          border: 2px solid var(--primary);\n          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n  }\n\n  div.indicator {\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    margin: ", ";\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    padding: 0;\n    display: block;\n    text-align: center;\n\n    @media only screen and ", " {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    label.label {\n      display: block;\n      margin: 0 0 4px 0;\n      vertical-align: middle;\n      cursor: pointer;\n      font:var(--title-bold-16-19);\n      @media only screen and ", " {\n        margin: 0;\n      }\n    }\n\n    label.description {\n      display: block;\n      vertical-align: middle;\n      margin: 0;\n      cursor: pointer;\n      font:var(--body-regular-14-17);\n      @media only screen and ", " {\n        &:before{\n          content: \" / \";\n          display: inline;\n        }\n        margin: 0 0 0 4px;\n      }\n    }\n  }\n"])), devices_1.devices.lg, function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
     switch (props.size) {
         case 'small':
             return "16px";

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -24,7 +24,7 @@ var ShoppingCartProduct = function (props) {
         var item = _a.item, children = _a.children;
         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({}, props, { 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText &&
+    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": props.discountRate, "$hasDisableActions": props.hasDisableActions }, { 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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" }) })))) })))] })))] })));
 };
 ShoppingCartProduct.defaultProps = {

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    }\n    .text{\n      padding-right: 0.5rem;\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        &:hover{\n          color: var(--primary-hover);\n        }\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: 2px;\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-12-15);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-12-15);\n          }\n        }\n\n        .newPrice {\n            .price {\n                font:var(--body-extra-bold-14-17);\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\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    &: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    }\n    .text{\n      padding-right: 0.5rem;\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        &:hover{\n          color: var(--primary-hover);\n        }\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: 2px;\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-12-15);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-12-15);\n          }\n        }\n\n        .newPrice {\n            .price {\n                font:var(--body-extra-bold-14-17);\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\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    &: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)'; });
+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    }\n    .text{\n      padding-right: 0.5rem;\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        &:hover{\n          color: var(--primary-hover);\n        }\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: 2px;\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-12-15);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-12-15);\n          }\n        }\n\n        .newPrice {\n            .price {\n                font:var(--body-extra-bold-14-17);\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\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    &: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    }\n    .text{\n      padding-right: 0.5rem;\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        &:hover{\n          color: var(--primary-hover);\n        }\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: 2px;\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-12-15);\n          }\n\n          .period {\n            text-decoration: line-through;\n            font:var(--caption-regular-12-15);\n          }\n        }\n\n        .newPrice {\n            .price {\n                font:var(--body-extra-bold-14-17);\n            }\n\n            .period {\n                font:var(--body-regular-13-16);\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    &: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)'; });
 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/dist/i18n/locales/english.json

@@ -5,5 +5,6 @@
     "or": "or",
     "next step": "Next step",
     "discount": "Discount",
-    "copied": "Copied"
+    "copied": "Copied",
+    "edit": "Edit"
 }

package/dist/i18n/locales/turkish.json

@@ -5,5 +5,6 @@
     "or": "veya",
     "next step": "Sonraki adım",
     "discount": "İndirimli",
-    "copied": "Kopyalandı"
+    "copied": "Kopyalandı",
+    "edit": "Düzenle"
 }

package/package.json

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