krl-alfred 1.76.43 → 1.76.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CouponCode/CouponCode.js +1 -1
- package/dist/components/Modal/Modal.styled.js +2 -2
- package/dist/components/RadioButton/layouts/basic/Basic.js +2 -2
- package/dist/components/RadioButton/layouts/basic/Basic.styled.js +5 -5
- package/dist/components/RadioButton/props.js +1 -0
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +1 -1
- package/dist/components/Stepper/Stepper.js +4 -4
- package/dist/components/Stepper/Stepper.styled.js +2 -2
- package/package.json +2 -1
|
@@ -41,7 +41,7 @@ var CouponCode = function (props) {
|
|
|
41
41
|
setIsExpanded(expanded);
|
|
42
42
|
}, [expanded]);
|
|
43
43
|
var toggleExpand = function () { return setIsExpanded(function (prevState) { return !prevState; }); };
|
|
44
|
-
return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded":
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({ "$expanded": isExpanded }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ onClick: toggleExpand, className: "header" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title })), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: props.placeholder, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant }, { children: props.buttonText }))] }))] })));
|
|
45
45
|
};
|
|
46
46
|
CouponCode.defaultProps = {
|
|
47
47
|
title: "Title",
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.OverlayStyled = exports.ModalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n
|
|
13
|
+
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n [data-simplebar] {\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n [data-simplebar] {\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"])), function (props) {
|
|
14
14
|
switch (props.$size) {
|
|
15
15
|
case 'xxsmall':
|
|
16
16
|
return "311px";
|
|
@@ -25,7 +25,7 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
25
25
|
default:
|
|
26
26
|
return "462px";
|
|
27
27
|
}
|
|
28
|
-
}, function (props) { return !props.$autoHeight
|
|
28
|
+
}, function (props) { return !props.$autoHeight ? "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n @media screen and (max-height: 900px) {\n @media screen and (min-width: ").concat(devices_1.breakpoints.sm, ") {\n max-height: calc(100dvh - 50px);\n }\n }\n ") : "\n @media screen and (max-height: 900px) {\n max-height: calc(100dvh - 50px);\n }\n "; }, function (props) { return props.$showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.$customContent ? '0' : '0 24px'; }, function (props) { return props.$showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
|
|
29
29
|
switch (props.$buttonsAlignment) {
|
|
30
30
|
case 'horizontal':
|
|
31
31
|
return "\n justify-content: flex-start;\n flex-direction: row-reverse;\n gap: 0;\n button {\n + button{\n margin-right: ".concat((props.$size === 'small' ? '16px' : '24px'), ";\n @media only screen and ").concat(devices_1.devices.sm, " {\n margin-right: 16px;\n }\n }\n }\n @media only screen and ").concat(devices_1.devices.sm, " {\n button {\n flex: 1 1 0;\n &:is(:nth-child(1)) {\n min-width: ").concat((props.$showSecondaryButton ? 'initial' : 'calc(100% - 3rem)'), ";\n white-space: nowrap;\n box-sizing: content-box;\n }\n + button {\n margin-right: 1rem;\n }\n }\n }\n ");
|
|
@@ -18,8 +18,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var prop_types_1 = __importDefault(require("prop-types"));
|
|
19
19
|
var Basic_styled_1 = require("./Basic.styled");
|
|
20
20
|
var Basic = function (props) {
|
|
21
|
-
var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset, hasNoneClick = props.hasNoneClick;
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid,
|
|
21
|
+
var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset, hasNoneClick = props.hasNoneClick, isWrapText = props.isWrapText;
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$hasNoneClick": hasNoneClick, "$isWrapText": isWrapText }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description })))] })))] })));
|
|
23
23
|
};
|
|
24
24
|
exports.default = Basic;
|
|
25
25
|
Basic.propTypes = {
|
|
@@ -12,8 +12,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
|
-
exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n ", "\n label.label {\n display: block;\n cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\n }\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n ", "\n label.label {\n display: block;\n cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\n }\n }\n"])), function (props) { return props
|
|
16
|
-
switch (props
|
|
15
|
+
exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n ", "\n label.label {\n display: block;\n cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\n }\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n ", "\n label.label {\n display: block;\n cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\n }\n }\n"])), function (props) { return props.$hasNoneClick && "\n user-select:none;\n pointer-events:none;\n "; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementChecked" })), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
|
|
16
|
+
switch (props.$size) {
|
|
17
17
|
case 'xsmall':
|
|
18
18
|
return "16px";
|
|
19
19
|
case 'small':
|
|
@@ -24,7 +24,7 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
24
24
|
return "16px";
|
|
25
25
|
}
|
|
26
26
|
}, function (props) {
|
|
27
|
-
switch (props
|
|
27
|
+
switch (props.$size) {
|
|
28
28
|
case 'xsmall':
|
|
29
29
|
return "16px";
|
|
30
30
|
case 'small':
|
|
@@ -34,8 +34,8 @@ exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
34
34
|
default:
|
|
35
35
|
return "16px";
|
|
36
36
|
}
|
|
37
|
-
}, function (props) { return (props
|
|
38
|
-
switch (props
|
|
37
|
+
}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? '#000000' : 'var(--red)'; }, function (props) { return !props.$isWrapText && "\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n display: -webkit-inline-box;\n "; }, function (props) {
|
|
38
|
+
switch (props.$size) {
|
|
39
39
|
case 'xsmall':
|
|
40
40
|
return "var(--body-medium-14-17)";
|
|
41
41
|
case 'small':
|
|
@@ -24,7 +24,7 @@ var ShoppingCartProduct = function (props) {
|
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
26
26
|
};
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({ "$discountRate": props.discountRate, "$hasDisableActions": props.hasDisableActions }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: props.image })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, __assign({ item: props }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: props.title })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", props.discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: props.oldPrice })), props.oldPricePeriod && (0, jsx_runtime_1.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 &&
|
|
27
|
+
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 &&
|
|
28
28
|
(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" }) })))) })))] })))] })));
|
|
29
29
|
};
|
|
30
30
|
ShoppingCartProduct.defaultProps = {
|
|
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
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-12-15);\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n }\n .period {\n font:var(--body-regular-13-16);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor:
|
|
12
|
+
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-12-15);\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n }\n .period {\n font:var(--body-regular-13-16);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n 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-12-15);\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n }\n .period {\n font:var(--body-regular-13-16);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n 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'; });
|
|
13
13
|
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"])));
|
|
14
14
|
var templateObject_1, templateObject_2;
|
|
@@ -31,13 +31,13 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
31
31
|
var classnames_1 = __importDefault(require("classnames"));
|
|
32
32
|
var Stepper = function (props) {
|
|
33
33
|
var steps = props.steps, etc = __rest(props, ["steps"]);
|
|
34
|
-
return (0, jsx_runtime_1.jsx)(Stepper_styled_1.StepperStyled,
|
|
34
|
+
return (0, jsx_runtime_1.jsx)(Stepper_styled_1.StepperStyled, { children: props.steps && props.steps.map(function (step) {
|
|
35
35
|
var _a;
|
|
36
|
-
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Stepper_styled_1.StepStyled, __assign({ activeStep: props.activeStep, index: step.index, onClick: function () { return props.hasClickAction && props.activeStep > step.index && props.setStep(props.activeStep - 1); }, hasClickAction: props.hasClickAction && step.index < props.activeStep, className: (0, classnames_1.default)((_a = {},
|
|
36
|
+
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Stepper_styled_1.StepStyled, __assign({ "$activeStep": props.activeStep, "$index": step.index, onClick: function () { return props.hasClickAction && props.activeStep > step.index && props.setStep(props.activeStep - 1); }, "$hasClickAction": props.hasClickAction && step.index < props.activeStep, className: (0, classnames_1.default)((_a = {},
|
|
37
37
|
_a["done"] = props.activeStep > step.index,
|
|
38
38
|
_a["active"] = props.activeStep === step.index,
|
|
39
|
-
_a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "circle" }, { children: (props.activeStep > step.index || props.activeStep === props.steps.length) ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckMark" }) : step.index })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: step.text }))] })), step.index !== steps.length && (0, jsx_runtime_1.jsx)(Stepper_styled_1.DividerStyled, { activeStep: props.activeStep, index: step.index })] });
|
|
40
|
-
}) })
|
|
39
|
+
_a)) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "circle" }, { children: (props.activeStep > step.index || props.activeStep === props.steps.length) ? (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckMark" }) : step.index })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: step.text }))] })), step.index !== steps.length && (0, jsx_runtime_1.jsx)(Stepper_styled_1.DividerStyled, { "$activeStep": props.activeStep, "$index": step.index })] });
|
|
40
|
+
}) });
|
|
41
41
|
};
|
|
42
42
|
Stepper.defaultProps = {
|
|
43
43
|
steps: [],
|
|
@@ -11,6 +11,6 @@ exports.StepStyled = exports.DividerStyled = exports.StepperStyled = void 0;
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.StepperStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
14
|
-
exports.DividerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 112px;\n height: 1px;\n background: ", ";\n margin: 0 24px;\n @media only screen and ", " {\n width: 25px;\n }\n"], ["\n width: 112px;\n height: 1px;\n background: ", ";\n margin: 0 24px;\n @media only screen and ", " {\n width: 25px;\n }\n"])), function (props) { return props
|
|
15
|
-
exports.StepStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: ", ";\n div.circle {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: ", ";\n font : var(--headline-extra-bold-24-29);\n @media only screen and ", " {\n width: 40px;\n height: 40px;\n }\n\n svg {\n path {\n fill: white;\n }\n }\n\n }\n\n div.text {\n color: ", ";\n margin-left: 16px;\n font : var(--headline-semi-bold-24-29);\n @media only screen and ", " {\n display: ", ";\n }\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: ", ";\n div.circle {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: ", ";\n font : var(--headline-extra-bold-24-29);\n @media only screen and ", " {\n width: 40px;\n height: 40px;\n }\n\n svg {\n path {\n fill: white;\n }\n }\n\n }\n\n div.text {\n color: ", ";\n margin-left: 16px;\n font : var(--headline-semi-bold-24-29);\n @media only screen and ", " {\n display: ", ";\n }\n }\n"])), function (props) { return props
|
|
14
|
+
exports.DividerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 112px;\n height: 1px;\n background: ", ";\n margin: 0 24px;\n @media only screen and ", " {\n width: 25px;\n }\n"], ["\n width: 112px;\n height: 1px;\n background: ", ";\n margin: 0 24px;\n @media only screen and ", " {\n width: 25px;\n }\n"])), function (props) { return props.$activeStep > props.$index ? 'var(--primary)' : 'var(--grey-10)'; }, devices_1.devices.xl);
|
|
15
|
+
exports.StepStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: ", ";\n div.circle {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: ", ";\n font : var(--headline-extra-bold-24-29);\n @media only screen and ", " {\n width: 40px;\n height: 40px;\n }\n\n svg {\n path {\n fill: white;\n }\n }\n\n }\n\n div.text {\n color: ", ";\n margin-left: 16px;\n font : var(--headline-semi-bold-24-29);\n @media only screen and ", " {\n display: ", ";\n }\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: ", ";\n div.circle {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: ", ";\n font : var(--headline-extra-bold-24-29);\n @media only screen and ", " {\n width: 40px;\n height: 40px;\n }\n\n svg {\n path {\n fill: white;\n }\n }\n\n }\n\n div.text {\n color: ", ";\n margin-left: 16px;\n font : var(--headline-semi-bold-24-29);\n @media only screen and ", " {\n display: ", ";\n }\n }\n"])), function (props) { return props.$hasClickAction ? 'pointer' : 'initial'; }, function (props) { return props.$activeStep >= props.$index ? 'var(--primary)' : 'var(--grey-10)'; }, function (props) { return props.$activeStep >= props.$index ? 'white' : 'var(--grey-40)'; }, devices_1.devices.xl, function (props) { return props.$activeStep >= props.$index ? 'var(--dark)' : 'var(--grey-30)'; }, devices_1.devices.xl, function (props) { return props.$activeStep === props.$index ? 'block' : 'none'; });
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "krl-alfred",
|
|
3
|
-
"version": "1.76.
|
|
3
|
+
"version": "1.76.45",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"@storybook/addon-outline": "^7.2.1",
|
|
14
14
|
"@storybook/addon-viewport": "^7.2.1",
|
|
15
15
|
"@storybook/preset-scss": "^1.0.3",
|
|
16
|
+
"@swc/core": "1.5.7",
|
|
16
17
|
"@testing-library/jest-dom": "^5.16.5",
|
|
17
18
|
"@testing-library/react": "^14.0.0",
|
|
18
19
|
"@testing-library/user-event": "^14.4.3",
|