krl-alfred 1.71.9 → 1.72.0

package/dist/components/Agreement/Agreement.js

@@ -19,7 +19,7 @@ var react_1 = require("react");
 var Agreement_styled_1 = require("./Agreement.styled");
 var Checkbox_1 = __importDefault(require("../Checkbox"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
-var Spinner_1 = __importDefault(require("../Spinner"));
+var Loader_1 = __importDefault(require("../Loader"));
 var Agreement = function (props) {
     var _a = (0, react_1.useState)(props.expanded), expanded = _a[0], setExpanded = _a[1];
     (0, react_1.useEffect)(function () {
@@ -36,7 +36,7 @@ var Agreement = function (props) {
     var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
     return (0, jsx_runtime_1.jsxs)(Agreement_styled_1.AgreementStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "agreement", children: [(0, jsx_runtime_1.jsxs)("div", { className: "top", children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: props.title, name: props.name, valid: !props.hasError, size: "medium", checked: props.checked, disabled: props.disabled, onChange: onCheckBoxChange, value: props.value }), (0, jsx_runtime_1.jsx)("div", { className: "icon", onClick: toggleExpand, children: expanded ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowUp" }) :
                                     (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "AgreementArrowDown" }) })] }), expanded && (0, jsx_runtime_1.jsx)("div", { className: "content body-regular-14-17", children: props.content ? (0, jsx_runtime_1.jsx)("div", { className: "text", dangerouslySetInnerHTML: { __html: props.content } }) :
-                            (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "24px", height: "24px" }) })] }), props.hasError && props.errorMessage && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), " ", (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] }));
+                            (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) })] }), props.hasError && props.errorMessage && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), " ", (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] }));
 };
 Agreement.defaultProps = {
     title: "Title",

package/dist/components/Button/Button.js

@@ -16,9 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Button_styled_1 = require("./Button.styled");
-var Spinner_1 = __importDefault(require("../Spinner"));
 var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Loader_1 = __importDefault(require("../Loader"));
 var Children = function (props) {
     var children = props.children, icon = props.icon;
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "children", children: children }), icon && (0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "16px", height: "16px" }) }))] });
@@ -26,7 +26,7 @@ var Children = function (props) {
 var Button = function (props) {
     var _a, _b, _c, _d, _e, _f;
     var isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children;
-    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)((_a = {}, _a["loading"] = isLoading, _a), (_b = {}, _b["caption-bold-12-15"] = size === 'xsmall' && variant !== 'ghost', _b), (_c = {}, _c["body-bold-13-16"] = size === 'xsmall' && variant === 'ghost', _c), (_d = {}, _d["body-bold-13-16"] = size === 'small', _d), (_e = {}, _e["body-bold-14-17"] = size === 'big', _e), (_f = {}, _f["body-bold-14-17"] = size === 'medium', _f)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, children: isLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
+    return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)((_a = {}, _a["loading"] = isLoading, _a), (_b = {}, _b["caption-bold-12-15"] = size === 'xsmall' && variant !== 'ghost', _b), (_c = {}, _c["body-bold-13-16"] = size === 'xsmall' && variant === 'ghost', _c), (_d = {}, _d["body-bold-13-16"] = size === 'small', _d), (_e = {}, _e["body-bold-14-17"] = size === 'big', _e), (_f = {}, _f["body-bold-14-17"] = size === 'medium', _f)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
             (0, jsx_runtime_1.jsx)(Children, { icon: icon, children: children }) }));
 };
 exports.default = Button;

package/dist/components/Loader/Loader.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Loader_styled_1 = require("./Loader.styled");
+var SpinnerIcon_1 = __importDefault(require("../../assets/svg/SpinnerIcon"));
+var Loader = function (props) {
+    var width = props.width, height = props.height, variant = props.variant, type = props.type;
+    switch (props.type) {
+        case 'spinner':
+            return ((0, jsx_runtime_1.jsx)(Loader_styled_1.SpinnerStyled, { width: width, height: height, variant: variant, children: (0, jsx_runtime_1.jsx)(SpinnerIcon_1.default, { width: width, height: height }) }));
+        case 'wave':
+            return ((0, jsx_runtime_1.jsxs)(Loader_styled_1.WaveStyled, { children: [(0, jsx_runtime_1.jsx)("span", { className: "dot" }), (0, jsx_runtime_1.jsx)("span", { className: "dot" }), (0, jsx_runtime_1.jsx)("span", { className: "dot" })] }));
+        default:
+            return ((0, jsx_runtime_1.jsx)(Loader_styled_1.SpinnerStyled, { width: width, height: height, variant: variant, children: (0, jsx_runtime_1.jsx)(SpinnerIcon_1.default, { width: width, height: height }) }));
+    }
+};
+Loader.defaultProps = {
+    type: "spinner"
+};
+exports.default = Loader;

package/dist/components/{Spinner/Spinner.styled.js → Loader/Loader.styled.js}

@@ -27,8 +27,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpinnerStyled = void 0;
+exports.WaveStyled = exports.SpinnerStyled = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform:rotate(0deg);\n  }\n  to {\n    transform:rotate(360deg);\n  }\n"], ["\n  from {\n    transform:rotate(0deg);\n  }\n  to {\n    transform:rotate(360deg);\n  }\n"])));
-exports.SpinnerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    animation-name: ", ";\n    animation-duration: 500ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear; \n\n    * {\n      fill: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    animation-name: ", ";\n    animation-duration: 500ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear; \n\n    * {\n      fill: ", ";\n    }\n  }\n"])), function (props) { return props.width; }, function (props) { return props.height; }, spin, function (props) { return props.variant === 'primary' ? 'var(--primary)' : 'white'; });
-var templateObject_1, templateObject_2;
+var wave = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    transform: scale(0.5);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.5);\n  }\n"], ["\n  0% {\n    transform: scale(0.5);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.5);\n  }\n"])));
+exports.SpinnerStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    animation-name: ", ";\n    animation-duration: 500ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear; \n\n    * {\n      fill: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    animation-name: ", ";\n    animation-duration: 500ms;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear; \n\n    * {\n      fill: ", ";\n    }\n  }\n"])), function (props) { return props.width; }, function (props) { return props.height; }, spin, function (props) { return props.variant === 'primary' ? 'var(--primary)' : 'white'; });
+exports.WaveStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  span {\n    border-radius: 50%;\n    display: inline-block;\n    margin: 0 2px;\n    vertical-align: middle;\n    width: 7px;\n    height: 7px;\n    &:first-child {\n      background-color: var(--grey-20);\n      animation: ", " 0.5s 0.1s linear infinite;\n    }\n    &:nth-child(2) {\n      background-color: var(--grey-30);\n      animation: ", " 0.5s 0.2s linear infinite;\n    }\n    &:nth-child(3) {\n      background-color: var(--grey-40);\n      animation: ", " 0.5s 0.3s linear infinite;\n    }\n  }\n"], ["\n  span {\n    border-radius: 50%;\n    display: inline-block;\n    margin: 0 2px;\n    vertical-align: middle;\n    width: 7px;\n    height: 7px;\n    &:first-child {\n      background-color: var(--grey-20);\n      animation: ", " 0.5s 0.1s linear infinite;\n    }\n    &:nth-child(2) {\n      background-color: var(--grey-30);\n      animation: ", " 0.5s 0.2s linear infinite;\n    }\n    &:nth-child(3) {\n      background-color: var(--grey-40);\n      animation: ", " 0.5s 0.3s linear infinite;\n    }\n  }\n"])), wave, wave, wave);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/{Spinner → Loader}/index.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
-var Spinner_1 = require("./Spinner");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Spinner_1).default; } });
+var Loader_1 = require("./Loader");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Loader_1).default; } });

package/dist/components/Loader/props.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.types = exports.variants = void 0;
+exports.variants = ['primary', 'secondary'];
+exports.types = ['spinner', 'wave'];
+var LoaderDefault = {
+    width: '16px',
+    height: '16px',
+    variant: 'primary',
+    type: 'spinner',
+};

package/dist/components/{Spinner/stories/Spinner.stories.js → Loader/stories/Loader.stories.js}

@@ -4,20 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-var Spinner_1 = __importDefault(require("../Spinner"));
+var Loader_1 = __importDefault(require("../Loader"));
 var props_1 = require("../props");
 exports.default = {
-    title: 'Components/Spinner',
-    component: Spinner_1.default,
+    title: 'Components/Loader',
+    component: Loader_1.default,
     tags: ['autodocs'],
     argTypes: {
-        variant: { control: 'select', options: props_1.variants }
+        variant: { control: 'select', options: props_1.variants },
+        type: { control: 'select', options: props_1.types },
     }
 };
 exports.Default = {
     args: {
         variant: props_1.variants[0],
         width: "16px",
-        height: "16px"
+        height: "16px",
+        type: props_1.types[0]
     },
 };

package/dist/components/SearchBox/SearchBox.js

@@ -7,13 +7,13 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var SearchBox_styled_1 = require("./SearchBox.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
-var Spinner_1 = __importDefault(require("../Spinner"));
+var Loader_1 = __importDefault(require("../Loader"));
 var SearchBox = function (props) {
     var _a;
     var onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder;
     var _b = (0, react_1.useState)("48px"), shadowHeight = _b[0], setShadowHeight = _b[1];
     var LoadingContent = function () {
-        return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "32px", height: "32px" }) });
+        return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "32px", height: "32px" }) });
     };
     var resultRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -19,13 +19,13 @@ var ShoppingCartProduct_styled_1 = require("./ShoppingCartProduct.styled");
 var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Tooltip_1 = __importDefault(require("../Tooltip"));
-var Spinner_1 = __importDefault(require("../Spinner"));
+var Loader_1 = __importDefault(require("../Loader"));
 var ShoppingCartProduct = function (props) {
     var LinkComponent = function (_a) {
         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", { href: item.slug, children: children }));
     };
-    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-semi-bold-16-19", children: props.title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: "discountRate body-extra-bold-13-16", children: ["%", props.discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "oldPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price caption-semi-bold-12-15", children: props.oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "period caption-regular-12-15", children: ["/ ", props.oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price body-extra-bold-14-17", children: props.price }), (0, jsx_runtime_1.jsxs)("div", { className: "period body-regular-13-16", children: ["/ ", props.period] })] })] })] }), (0, jsx_runtime_1.jsxs)("p", { className: "productCardDeliveryText body-medium-13-16", children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", { className: "productCardDeliveryDanger", children: props.deliveryDangerText }), props.deliveryText] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "actions", children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, { 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", { className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15"), children: props.errorText })] }), (0, jsx_runtime_1.jsx)("div", { className: "quantity body-extra-bold-13-16", children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity }), props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { 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, { 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", { onClick: !props.hasLoading && props.toggleInsurance, className: "insurance", children: [(0, jsx_runtime_1.jsx)("div", { className: "insuranceImg", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "64.51px", height: "7.37px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text caption-semi-bold-12-15", children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", { className: "price caption-extra-bold-12-15", children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", { className: "quantity", children: props.insuranceQuantity })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "actions", children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight", children: props.insuranceTooltipText })) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { 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, { 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", { className: "inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-semi-bold-16-19", children: props.title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: "discountRate body-extra-bold-13-16", children: ["%", props.discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "oldPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price caption-semi-bold-12-15", children: props.oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "period caption-regular-12-15", children: ["/ ", props.oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price body-extra-bold-14-17", children: props.price }), (0, jsx_runtime_1.jsxs)("div", { className: "period body-regular-13-16", children: ["/ ", props.period] })] })] })] }), (0, jsx_runtime_1.jsxs)("p", { className: "productCardDeliveryText body-medium-13-16", children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", { className: "productCardDeliveryDanger", children: props.deliveryDangerText }), props.deliveryText] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "actions", children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, { 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", { className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15"), children: props.errorText })] }), (0, jsx_runtime_1.jsx)("div", { 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.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { 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, { 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", { onClick: !props.hasLoading && props.toggleInsurance, className: "insurance", children: [(0, jsx_runtime_1.jsx)("div", { className: "insuranceImg", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "80px", height: "9.14px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text caption-semi-bold-12-15", children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", { className: "price caption-extra-bold-12-15", children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", { className: "quantity", children: props.insuranceQuantity })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "actions", children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight", children: props.insuranceTooltipText })) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { 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, { 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,12 +18,13 @@ 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;
-    return ((0, jsx_runtime_1.jsx)(TextLink_styled_1.TextLinkStyled, __assign({ 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;
+    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] }) })));
 };
 TextLink.defaultProps = {
     iconWidth: "24px",
     iconHeight: "24px",
     variant: "primary",
+    size: "small",
 };
 exports.default = TextLink;

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

@@ -9,7 +9,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Inner = exports.IconStyled = exports.TextLinkStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"], ["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])), 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)" : "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.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  padding: ", ";\n  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"], ["\n  color: ", ";\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  display: inline-block;\n  text-decoration: none;\n  cursor: pointer;\n  padding: ", ";\n  svg{\n    display: block;\n    path, rect{\n      stroke : ", ";\n    }\n    circle{\n      fill : ", ";\n      ~ path{\n        stroke : white;\n      }\n    }\n  }\n  &:hover , :focus , :active {\n    color: ", ";\n    svg{\n      display: block;\n      path, rect{\n        stroke : ", ";\n      }\n      circle{\n        fill : ", ";\n        ~ path{\n          stroke : white;\n        }\n      }\n    }\n  }\n"])), function (props) { return props.variant === "primary" ? "var(--primary)" : "var(--grey-50)"; }, function (props) {
+    switch (props.size) {
+        case 'small':
+            return "0";
+        case 'medium':
+            return "0.5rem 0 0.5rem 0";
+        default:
+            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"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/TextLink/props.js

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

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

@@ -13,6 +13,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         variant: { control: 'select', options: props_1.variants },
+        size: { control: 'select', options: props_1.sizes },
         icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
     }
 };
@@ -20,5 +21,6 @@ exports.Default = {
     args: {
         children: "Text Link",
         variant: "primary",
+        size: "small",
     },
 };

package/dist/index.js

@@ -3,11 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
+exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
 var Button_1 = __importDefault(require("./components/Button"));
 exports.Button = Button_1.default;
-var Spinner_1 = __importDefault(require("./components/Spinner"));
-exports.Spinner = Spinner_1.default;
 var Breadcrumbs_1 = __importDefault(require("./components/Breadcrumbs"));
 exports.Breadcrumbs = Breadcrumbs_1.default;
 var CategoryMenu_1 = __importDefault(require("./components/CategoryMenu"));
@@ -74,3 +72,5 @@ var CouponCode_1 = __importDefault(require("./components/CouponCode"));
 exports.CouponCode = CouponCode_1.default;
 var ShoppingCartProduct_1 = __importDefault(require("./components/ShoppingCartProduct"));
 exports.ShoppingCartProduct = ShoppingCartProduct_1.default;
+var Loader_1 = __importDefault(require("./components/Loader"));
+exports.Loader = Loader_1.default;

package/package.json

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

package/dist/components/Spinner/Spinner.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Spinner_styled_1 = require("./Spinner.styled");
-var SpinnerIcon_1 = __importDefault(require("../../assets/svg/SpinnerIcon"));
-var Spinner = function (props) {
-    var width = props.width, height = props.height, variant = props.variant;
-    return ((0, jsx_runtime_1.jsx)(Spinner_styled_1.SpinnerStyled, { width: width, height: height, variant: variant, children: (0, jsx_runtime_1.jsx)(SpinnerIcon_1.default, { width: width, height: height }) }));
-};
-exports.default = Spinner;

package/dist/components/Spinner/props.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.variants = void 0;
-exports.variants = ['primary', 'secondary'];
-var SpinnerDefault = { width: '16px', height: '16px', variant: 'primary' };