krl-alfred 1.77.3 → 1.77.5

package/dist/components/InsuranceBox/InsuranceBox.js

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

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

@@ -19,8 +19,8 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var Boxed_styled_1 = require("./Boxed.styled");
 var Badges_1 = __importDefault(require("../../../Badges"));
 var Boxed = function (props) {
-    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, image = props.image, labelOffset = props.labelOffset, hasBadge = props.hasBadge, badgeText = props.badgeText, badgeVariant = props.badgeVariant;
-    return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __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 || image) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: image })))] }))), hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "boxedBadgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "belt", variant: badgeVariant, hasResponsive: true }) })))] })));
+    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, image = props.image, labelOffset = props.labelOffset, hasBadge = props.hasBadge, badgeText = props.badgeText, badgeVariant = props.badgeVariant, labelSm = props.labelSm;
+    return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __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 || image) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, labelSm && (0, jsx_runtime_1.jsx)("span", __assign({ className: "labelSm" }, { children: labelSm }))] }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: image })))] }))), hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "boxedBadgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "belt", variant: badgeVariant, hasResponsive: true }) })))] })));
 };
 exports.default = Boxed;
 Boxed.propTypes = {

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('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          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n      \n    &:checked {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n    &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 1px solid var(--primary-hover);\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  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\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          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n      \n    &:checked {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n    &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 1px solid var(--primary-hover);\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  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\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) {
+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          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n      \n    &:checked {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n    &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 1px solid var(--primary-hover);\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      .labelSm{\n        font:var(--title-regular-16-19);\n          margin-left: 0.25rem;\n      }\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  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\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          user-select: none;\n          pointer-events: none;\n        }\n      }\n    }\n      \n    &:checked {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 2px solid var(--primary) !important;\n        }\n      }\n    }\n    &:hover {\n      ~ div.labelsWrapper {\n        &:before {\n          border: 1px solid var(--primary-hover);\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      .labelSm{\n        font:var(--title-regular-16-19);\n          margin-left: 0.25rem;\n      }\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  .boxedBadgesWrapper{\n      position: absolute;\n      right: -9px;\n      top: -8px;\n      transform: rotate(90deg);\n      @media only screen and ", " {\n          right: -6px;\n          top: -6px;\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/RadioButton/stories/RadioButton.stories.js

@@ -50,6 +50,7 @@ exports.Basic = {
 exports.Boxed = {
     args: {
         label: "99.999,99 TL",
+        labelSm: "/ay",
         description: "1 hafta",
         valid: true,
         layout: "boxed",

package/dist/components/SelectBox/SelectBox.js

@@ -74,7 +74,7 @@ var SelectBox = (0, react_1.forwardRef)(function (props, ref) {
                 });
             }, 50);
         }
-        return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, __assign({ innerRef: innerRef, innerProps: innerProps, label: label, type: type, data: data, isDisabled: isDisabled, isFocused: isFocused, isSelected: isSelected, clearValue: clearValue, cx: cx, getStyles: getStyles, getClassNames: getClassNames, getValue: getValue, hasValue: hasValue, isMulti: isMulti, isRtl: isRtl, options: options, selectOption: selectOption, selectProps: selectProps, setValue: setValue, theme: theme, className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b), (_c = {}, _c["fixedBottom"] = data.isFixedBottom, _c), (_d = {}, _d["secondary"] = data.isSecondary, _d)) }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [data.label && (0, jsx_runtime_1.jsx)("strong", { children: data.label }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] }) })));
+        return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, __assign({ innerRef: innerRef, innerProps: innerProps, label: label, type: type, data: data, isDisabled: isDisabled, isFocused: isFocused, isSelected: isSelected, clearValue: clearValue, cx: cx, getStyles: getStyles, getClassNames: getClassNames, getValue: getValue, hasValue: hasValue, isMulti: isMulti, isRtl: isRtl, options: options, selectOption: selectOption, selectProps: selectProps, setValue: setValue, theme: theme, className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b), (_c = {}, _c["fixedBottom"] = data.isFixedBottom, _c), (_d = {}, _d["secondary"] = data.isSecondary, _d)) }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "left" }, { children: [data.label && (0, jsx_runtime_1.jsx)("strong", { children: data.label }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { children: data.labelBottom })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "right" }, { children: [data.price && (0, jsx_runtime_1.jsx)("strong", { children: data.price }), data.period && (0, jsx_runtime_1.jsx)("span", { children: data.period })] }))] }) })));
     };
     var Input = function (props) { return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, __assign({}, props, { autoComplete: autoComplete })); };
     var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", strokeWidth: "3px", name: "ArrowDown", width: "16px", height: "16px" }) })); };

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    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\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  .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: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\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%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%23", "%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%23", "%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');\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: var(--body-medium-14-17);\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          max-height: initial !important;\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,&:is(.customSelect__option--is-focused) {\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 {\n              display: block;\n              font:var(--title-bold-16-19);\n            }\n\n            span {\n              display: block;\n              font:var(--body-medium-13-16);\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    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\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  .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: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\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%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%23", "%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%23", "%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');\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: var(--body-medium-14-17);\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          max-height: initial !important;\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,&:is(.customSelect__option--is-focused) {\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 {\n              display: block;\n              font:var(--title-bold-16-19);\n            }\n\n            span {\n              display: block;\n              font:var(--body-medium-13-16);\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.$maxOptionListHeight && props.$maxOptionListHeight; }, 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)"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, 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", hasWrapper: false, 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    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\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  .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: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\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%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%23", "%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%23", "%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');\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: var(--body-medium-14-17);\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          max-height: initial !important;\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,&:is(.customSelect__option--is-focused) {\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              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-14-17);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\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    font:var(--caption-bold-12-15);\n    &.justify-between {\n      justify-content: space-between;\n    }\n    p {\n      margin: 0;\n      color: var(--dark-opacity-50);\n    }\n  }\n\n  [data-simplebar] {\n    max-height: ", " !important;\n      height: auto !important;\n      padding: 0 !important;\n      .simplebar-track.simplebar-vertical {\n          width: 9px !important;\n      }\n  }\n\n  .error {\n    display: flex;\n    align-items: center;\n    margin-top: 8px;\n    color: var(--red);\n\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  .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: var(--body-semi-bold-14-17);\n            color: ", ";\n            margin: 0;\n          }\n\n          .customSelect__single-value {\n            margin: 0;\n            padding: 0;\n            font: var(--body-semi-bold-14-17);\n            color: ", ";\n          }\n\n          .customSelect__input-container {\n            margin: 0;\n            padding: 0;\n            grid-template-columns: 0;\n            input {\n              font: var(--body-semi-bold-14-17) !important;\n            }\n          }\n        }\n\n        .customSelect__indicator {\n          padding: 0;\n          margin: 0 0 0 1rem;\n          width: 16px;\n          height: 16px;\n          transition: all .2s ease;\n          &:is(.customSelect__dropdown-indicator){\n              ", ";   \n          }\n          &:is(.customSelect__clear-indicator){\n              background-image: url('", "');\n          }\n          div{\n            display: block;\n          }\n        }\n        .customSelect__indicator-separator {\n          display: none;\n        }\n      }\n\n      &:is(.isSearchable) {\n        .customSelect__value-container {\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%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%23", "%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%23", "%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');\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: var(--body-medium-14-17);\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          max-height: initial !important;\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,&:is(.customSelect__option--is-focused) {\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              >div{\n                  display: flex;\n                  align-items: center;\n                  justify-content: space-between;\n                  width: 100%;\n                  .left{\n                      strong {\n                          display: block;\n                          font:var(--title-bold-16-19);\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-medium-13-16);\n                      }\n                  }\n                  .right{\n                      display: flex;\n                      align-items: end;\n                      justify-content: flex-end;\n                      strong {\n                          display: block;\n                          font:var(--title-extra-bold-16-19);\n                          line-height: 17px;\n                      }\n\n                      span {\n                          display: block;\n                          font:var(--body-regular-14-17);\n                          margin-left: 0.2rem;\n                      }\n                  }\n              }\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.$maxOptionListHeight && props.$maxOptionListHeight; }, 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)"; }, function (props) { return props.$hasShowDropdownIcon ? "display:inline-block" : "display:none"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", hasWrapper: false, width: "16px", height: "16px" })), function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, function (props) { return props.$hasError ? "FF1F1F" : "84879E"; }, 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", hasWrapper: false, width: "16px", height: "16px" })));
 var templateObject_1;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

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

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

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

package/dist/jsons/SelectValues.json

@@ -1,7 +1,9 @@
 [
     {
         "value": "chocolate",
-        "label": "Chocolate"
+        "label": "Chocolate",
+        "price": "1.250,00",
+        "period": "/ay"
     },
     {
         "value": "strawberry",

package/package.json

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