krl-alfred 1.75.2 → 1.75.4

package/dist/components/InstallmentBox/InstallmentBox.js

@@ -18,7 +18,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var InstallmentBox_styled_1 = require("./InstallmentBox.styled");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var InstallmentBox = function (props) {
-    return ((0, jsx_runtime_1.jsx)(InstallmentBox_styled_1.InstallmentBoxStyled, __assign({ checked: props.checked }, { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "leftContent" }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onClick: props.onClick, onChange: props.onChange, layout: "basic", label: ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "installmentLabelWrapper" }, { children: [props.label, (0, jsx_runtime_1.jsx)("div", __assign({ className: "titlesWrapper" }, { children: props.isEqualPrice && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "advance " }, { children: "Pe\u015Fin fiyat\u0131na" })) }))] }))), checked: props.checked, name: props.name, labelOffset: "1rem" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightContent" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "price" }, { children: [(props.installmentCount !== 1 ? "".concat(props.installmentCount, " x") : null), " ", props.installmentPrice] })), (0, jsx_runtime_1.jsxs)("strong", __assign({ className: "totalPrice" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "total" }, { children: "Toplam:" })), " ", props.totalPrice] }))] }))] })) }) })));
+    return ((0, jsx_runtime_1.jsx)(InstallmentBox_styled_1.InstallmentBoxStyled, __assign({ checked: props.checked }, { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "leftContent" }, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onClick: props.onClick, onChange: props.onChange, layout: "basic", hasNoneClick: true, label: ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "installmentLabelWrapper" }, { children: [props.label, (0, jsx_runtime_1.jsx)("div", __assign({ className: "titlesWrapper" }, { children: props.isEqualPrice && (0, jsx_runtime_1.jsx)("strong", __assign({ className: "advance " }, { children: "Pe\u015Fin fiyat\u0131na" })) }))] }))), checked: props.checked, name: props.name, labelOffset: "1rem" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightContent" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "price" }, { children: [(props.installmentCount !== 1 ? "".concat(props.installmentCount, " x") : null), " ", props.installmentPrice] })), (0, jsx_runtime_1.jsxs)("strong", __assign({ className: "totalPrice" }, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "total" }, { children: "Toplam:" })), " ", props.totalPrice] }))] }))] })) }) })));
 };
 InstallmentBox.defaultProps = {};
 exports.default = InstallmentBox;

package/dist/components/RadioButton/layouts/basic/Basic.js

@@ -19,9 +19,9 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var Basic_styled_1 = require("./Basic.styled");
 var Basic = function (props) {
-    var _a, _b, _c, _d;
-    var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset;
-    return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, layout: layout, labelOffset: labelOffset }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id }, { children: description })))] })))] })));
+    var _a, _b, _c, _d, _e, _f;
+    var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset, hasNoneClick = props.hasNoneClick;
+    return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, layout: layout, labelOffset: labelOffset, hasNoneClick: hasNoneClick }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "xsmall", _a), (_b = {}, _b["body-semi-bold-14-17"] = size === "small", _b), (_c = {}, _c["title-medium-16-19"] = size === "medium", _c)), htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: (0, classnames_1.default)("description", (_d = {}, _d["body-regular-13-16"] = size === "xsmall", _d), (_e = {}, _e["body-regular-13-16"] = size === "small", _e), (_f = {}, _f["body-regular-13-16"] = size === "medium", _f)), htmlFor: id }, { children: description })))] })))] })));
 };
 exports.default = Basic;
 Basic.propTypes = {
@@ -33,10 +33,12 @@ Basic.propTypes = {
     valid: prop_types_1.default.bool,
     disabled: prop_types_1.default.bool,
     checked: prop_types_1.default.bool,
+    hasNoneClick: prop_types_1.default.bool,
 };
 Basic.defaultProps = {
     id: "styledChecbox_".concat(Math.floor(Math.random() * (99999999999 - 11111111111) + 11111111111)),
     size: "small",
     valid: true,
     labelOffset: "0.5rem",
+    hasNoneClick: false
 };

package/dist/components/RadioButton/layouts/basic/Basic.styled.js

@@ -12,8 +12,10 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../../../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
-exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\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\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\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\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementInvalid" }))); }, function (props) { return props.labelOffset; }, function (props) {
+exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\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\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\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\n  div.indicator {\n    flex: 0 0 auto;\n    background-image: url('", "');\n    background-size: 100% 100%;\n    display: block;\n    position: relative;\n    margin: 0 ", " 0 0;\n    width: ", ";\n    height: ", ";\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  div.labelsWrapper {\n    position: relative;\n    display: grid;\n    row-gap: 8px;\n    cursor: ", ";\n    margin: 0;\n    color: ", ";\n    ", "\n    label.label {\n      display: block;\n      cursor: inherit;\n    }\n\n    label.description {\n      display: block;\n      margin: 0;\n    }\n  }\n"])), function (props) { return props.hasNoneClick && "\n    user-select:none;\n    pointer-events:none;\n  "; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "RadioButtonElementInvalid" }))); }, function (props) { return props.labelOffset; }, function (props) {
     switch (props.size) {
+        case 'xsmall':
+            return "16px";
         case 'small':
             return "16px";
         case 'medium':
@@ -23,6 +25,8 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
     }
 }, function (props) {
     switch (props.size) {
+        case 'xsmall':
+            return "16px";
         case 'small':
             return "16px";
         case 'medium':

package/dist/components/RadioButton/props.js

@@ -10,4 +10,5 @@ var RadioButtonDefault = {
     valid: true,
     isWrapText: true,
     labelOffset: '0.5rem',
+    hasNoneClick: false
 };

package/dist/components/SelectBox/SelectBox.styled.js

@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
-exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: ", ";\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font-size: 14px;\n        font-weight: 500;\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: ", ";\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\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          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: ", ";\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font-size: 14px;\n        font-weight: 500;\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: ", ";\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\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          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), function (props) { return props.hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", width: "16px", height: "16px" })), function (props) { return props.hasError ? "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%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23FF1F1F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23FF1F1F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')" : "url('".concat((0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })), "')"); }, function (props) { return props.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: ", ";\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font-size: 14px;\n        font-weight: 500;\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: ", ";\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\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          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  \n  .top {\n    display: flex;\n    margin-bottom: 16px;\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n\n    svg {\n      margin-right: 8px;\n      margin-left: 4px;\n    }\n\n    p {\n      margin: 0;\n      color: var(--red);\n    }\n  }\n\n  .select {\n    position: relative;\n    .customSelect{\n      &:is(.lightBg){\n        .customSelect__control {\n          background-color: white;\n        }\n      }\n      .customSelect__control {\n        height: 56px;\n        background-color: var(--dark-opacity-3);\n        border: 0;\n        padding: 0 1.5rem;\n        cursor: pointer;\n        &:before{\n          content: \"\";\n          position: absolute;\n          inset:0;\n          user-select: none;\n          pointer-events: none;\n          border-width: ", ";\n          border-style: solid;\n          border-radius: 8px;\n          border-color: ", ";\n        }\n\n        &:hover {\n          &:before{\n            border-color: var(--primary);\n            border-width: 2px;\n          }\n        }\n\n        .customSelect__value-container {\n          padding: 0;\n          .customSelect__placeholder {\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font-size: 14px;\n            font-weight: 600;\n            line-height: 17px;\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            input {\n              font-size: 14px !important;\n              font-weight: 600 !important;\n              line-height: 17px !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0 0;\n          width: 16px;\n          height: 100%;\n          background-image: url('", "');\n          background-repeat: no-repeat;\n          background-position: center center;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          svg {\n            display: none;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\n          background-image: ", ";\n          background-repeat: no-repeat;\n          background-position: 0 center;\n          padding: 11px 24px 11px 2rem;\n            &.customSelect__value-container--has-value{\n                background-image: ", ";\n            }\n        }\n      }\n\n      .customSelect__control--is-focused {\n        border-color: var(--primary);\n        box-shadow: none;\n      }\n      .customSelect__menu-notice{\n        text-align: start;\n        padding: 1rem 1.5rem;\n        font-size: 14px;\n        font-weight: 500;\n        color:var(--dark-opacity-50);\n      }\n\n      .customSelect__menu {\n        margin: 0;\n        border-radius: 0 0 8px 8px;\n        box-shadow: none;\n        border: 1px solid var(--dark-opacity-10);\n        overflow: hidden;\n        .customSelect__menu-list {\n          padding: 0;\n          max-height: ", ";\n          //scroll-margin: 0 10px 30px 0;\n          //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n          //scrollbar-width: thin;\n\n          &::-webkit-scrollbar {\n            width: 4px;\n            background-color: #ffffff;\n          }\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          .option {\n            height: 70px;\n            padding: 0 1.5rem;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background-color: #fff;\n            position: relative;\n            color: var(--dark);\n            cursor: pointer;\n            box-sizing: border-box;\n\n            &:hover {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:active {\n              background-color: var(--dark-opacity-3);\n            }\n\n            &:is(.optionSm) {\n              height: auto;\n              min-height: 51px;\n              padding: 1rem 1.5rem;\n            }\n\n            &:is(.fixedBottom) {\n              position: sticky;\n              bottom: 0;\n              left: 0;\n              right: 0;\n              z-index: 4;\n              strong{\n                color: var(--dark-opacity-50);\n              }\n            }\n\n            strong, span {\n              display: block;\n            }\n          }\n        }\n      }\n\n      &:is(.isSearchable) {\n          .customSelect__control--menu-is-open {\n              .customSelect__value-container {\n                  background-image: url('", "') !important;\n              }\n          }\n      }\n      .customSelect__control--menu-is-open {\n        &:before{\n          border-color: var(--primary);\n          border-width: 2px;\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        box-shadow: none;\n        .customSelect__indicator{\n          &:is(.customSelect__dropdown-indicator){\n            transform: rotate(180deg);\n          }\n        }\n\n        .customSelect__value-container {\n          .customSelect__placeholder {\n            color: var(--dark-opacity-50);\n          }\n        }\n\n\n        .customSelect__single-value, .customSelect__clear-indicator  {\n          display: none !important;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), function (props) { return props.hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", width: "16px", height: "16px" })), function (props) { return props.hasError ? "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%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23FF1F1F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23FF1F1F%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')" : "url('".concat((0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })), "')"); }, function (props) { return !props.hasError && "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%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%230A103D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E')"; }, function (props) { return props.maxOptionListHeight; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
 var templateObject_1;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -25,7 +25,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: props.image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle title-semi-bold-16-19" }, { 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 body-extra-bold-13-16" }, { 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 caption-semi-bold-12-15" }, { children: props.oldPrice })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period caption-regular-12-15" }, { children: ["/ ", props.oldPricePeriod] }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price body-extra-bold-14-17" }, { children: props.price })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period body-regular-13-16" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText body-medium-13-16" }, { 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: (0, classnames_1.default)("popup", "caption-semi-bold-12-15") }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity body-extra-bold-13-16" }, { 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, { name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text caption-semi-bold-12-15" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price caption-extra-bold-12-15" }, { 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" }) })))) })))] })))] })));
+    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: props.image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle title-semi-bold-16-19" }, { 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 body-extra-bold-13-16" }, { 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 caption-semi-bold-12-15" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period caption-regular-12-15" }, { children: ["/ ", props.oldPricePeriod] }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price body-extra-bold-14-17" }, { children: props.price })), props.period && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "period body-regular-13-16" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText body-medium-13-16" }, { 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: (0, classnames_1.default)("popup", "caption-semi-bold-12-15") }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity body-extra-bold-13-16" }, { 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, { name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text caption-semi-bold-12-15" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price caption-extra-bold-12-15" }, { 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 = {
     insuranceText: "Tamamlayıcı ek güvence ekle",

package/dist/components/TextLink/TextLink.js

@@ -18,13 +18,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var TextLink_styled_1 = require("./TextLink.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var TextLink = function (props) {
-    var onClick = props.onClick, children = props.children, href = props.href, target = props.target, icon = props.icon, iconWidth = props.iconWidth, iconHeight = props.iconHeight, size = props.size;
-    return ((0, jsx_runtime_1.jsx)(TextLink_styled_1.TextLinkStyled, __assign({ size: size, href: href, target: target, onClick: onClick }, props, { children: (0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: iconWidth, height: iconHeight }) })), children] }) })));
+    var onClick = props.onClick, children = props.children, href = props.href, target = props.target, icon = props.icon, iconWidth = props.iconWidth, iconHeight = props.iconHeight, size = props.size, iconDirection = props.iconDirection;
+    return ((0, jsx_runtime_1.jsx)(TextLink_styled_1.TextLinkStyled, __assign({ size: size, href: href, target: target, onClick: onClick }, props, { children: (0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, __assign({ iconDirection: iconDirection }, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, __assign({ iconDirection: iconDirection }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: iconWidth, height: iconHeight }) }))), children] })) })));
 };
 TextLink.defaultProps = {
     iconWidth: "24px",
     iconHeight: "24px",
     variant: "primary",
     size: "small",
+    iconDirection: "left",
 };
 exports.default = TextLink;

package/dist/components/TextLink/TextLink.styled.js

@@ -19,6 +19,6 @@ exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (temp
             return "0";
     }
 }, function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; }, function (props) { return props.variant === "primary" ? "var(--primary-hover)" : "var(--grey-50)"; });
-exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 0.5rem;\n"], ["\n  margin-right: 0.5rem;\n"])));
-exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
+exports.IconStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n"], ["\n    ", ";\n"])), function (props) { return props.iconDirection === 'right' ? "margin-left: 0.5rem;" : 'margin-right: 0.5rem;'; });
+exports.Inner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction:", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction:", ";\n"])), function (props) { return props.iconDirection === 'right' ? "row-reverse" : 'row'; });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/TextLink/props.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconNames = exports.sizes = exports.variants = void 0;
+exports.iconNames = exports.iconDirections = exports.sizes = exports.variants = void 0;
 var Icon_1 = require("../Icon");
 exports.variants = ['primary', 'secondary'];
 exports.sizes = ['small', 'medium'];
+exports.iconDirections = ['left', 'right'];
 exports.iconNames = Object.keys(Icon_1.iconList);

package/dist/components/TextLink/stories/TextLink.stories.js

@@ -14,6 +14,7 @@ exports.default = {
     argTypes: {
         variant: { control: 'select', options: props_1.variants },
         size: { control: 'select', options: props_1.sizes },
+        iconDirection: { control: 'select', options: props_1.iconDirections },
         icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
     }
 };
@@ -22,5 +23,6 @@ exports.Default = {
         children: "Text Link",
         variant: "primary",
         size: "small",
+        iconDirection: "left",
     },
 };

package/dist/components/Tooltip/Tooltip.styled.js

@@ -11,7 +11,7 @@ exports.Popup = exports.Title = exports.Selector = exports.TooltipStyled = void
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n  vertical-align: middle;\n  color: var(--dark);\n  ", "\n"], ["\n  display: block;\n  position: relative;\n  vertical-align: middle;\n  color: var(--dark);\n  ", "\n"])), function (props) { return !props.hasClickAction && "\n      &:hover {\n        > div {\n          opacity: 1;\n          :before{\n            opacity:1;\n          }\n        }\n      }\n  "; });
-exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  cursor: ", ";\n  position: relative;\n  svg {\n    display: block;\n\n    path {\n      stroke: var(--primary);\n    }\n  }\n\n\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n    right: auto;\n    transition: all 0.15s ease;\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    opacity: ", ";\n    ", ";\n  }\n"], ["\n  display: block;\n  cursor: ", ";\n  position: relative;\n  svg {\n    display: block;\n\n    path {\n      stroke: var(--primary);\n    }\n  }\n\n\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n    right: auto;\n    transition: all 0.15s ease;\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    opacity: ", ";\n    ", ";\n  }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; }, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, function (props) {
+exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  cursor: ", ";\n  position: relative;\n  svg {\n    display: block;\n\n    path {\n      stroke: var(--primary);\n    }\n  }\n\n\n    &:hover{\n      &:before{\n        opacity: 1;\n      }\n    }\n  &:before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n    right: auto;\n    transition: all 0.15s ease;\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    opacity: ", ";\n    ", ";\n  }\n"], ["\n  display: block;\n  cursor: ", ";\n  position: relative;\n  svg {\n    display: block;\n\n    path {\n      stroke: var(--primary);\n    }\n  }\n\n\n    &:hover{\n      &:before{\n        opacity: 1;\n      }\n    }\n  &:before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n    right: auto;\n    transition: all 0.15s ease;\n    background-color: var(--primary-opacity-10);\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n    opacity: ", ";\n    ", ";\n  }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; }, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, function (props) {
     switch (props.position) {
         case 'bottomRight':
             return "\n            top: calc(100% + 4px);\n        ";

package/package.json

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