krl-alfred 2.17.44 → 2.17.48
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/Icon/iconList/InfoSquareSmall.js +1 -1
- package/dist/components/Input/Input.js +2 -2
- package/dist/components/Input/Input.styled.js +2 -2
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.js +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +1 -1
- package/package.json +1 -1
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgInfoSquareSmall = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.
|
|
39
|
+
var SvgInfoSquareSmall = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.9342 2H5.23259C3.24568 2 2 3.40682 2 5.39767V10.7698C2 12.7606 3.23976 14.1674 5.23259 14.1674H10.9335C12.927 14.1674 14.1674 12.7606 14.1674 10.7698V5.39767C14.1674 3.40682 12.927 2 10.9342 2Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.07688 10.5801V7.67383", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.07652 5.58665H8.0831", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
40
|
exports.default = SvgInfoSquareSmall;
|
|
@@ -151,7 +151,7 @@ var Input = function (_a) {
|
|
|
151
151
|
}, 10);
|
|
152
152
|
}, selected: startDate, ref: inputRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}),
|
|
153
153
|
//customInput={<InputStyled $hasError={hasError} id={id}/>}
|
|
154
|
-
inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate,
|
|
154
|
+
inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, onCalendarOpen: function () {
|
|
155
155
|
setIsCalendarOpen(true);
|
|
156
156
|
if (onCalendarOpen) {
|
|
157
157
|
onCalendarOpen();
|
|
@@ -162,6 +162,6 @@ var Input = function (_a) {
|
|
|
162
162
|
} }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
|
|
163
163
|
onChange(e);
|
|
164
164
|
setInputValue(e.currentTarget.value);
|
|
165
|
-
}, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
|
|
165
|
+
}, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
|
|
166
166
|
};
|
|
167
167
|
exports.default = Input;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.DatePickerWrapperStyled = exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
|
|
13
|
-
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\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 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\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\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"])), function (props) { return props.$width || '370px'; });
|
|
13
|
+
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n &.hasNoCursor {\n user-select: none;\n pointer-events: none;\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\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 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\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n &.hasNoCursor {\n user-select: none;\n pointer-events: none;\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\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"])), function (props) { return props.$width || '370px'; });
|
|
14
14
|
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) {
|
|
15
15
|
if (props.disabled)
|
|
16
16
|
return 'var(--dark-opacity-5)';
|
|
@@ -27,5 +27,5 @@ exports.InputStyled = styled_components_1.default.input(templateObject_3 || (tem
|
|
|
27
27
|
return '18.5px 23px';
|
|
28
28
|
return '19.5px 24px';
|
|
29
29
|
}, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
30
|
-
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], [";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
|
|
30
|
+
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], [";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
|
|
31
31
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -15,7 +15,7 @@ exports.Border = styled_components_1.default.div(templateObject_2 || (templateOb
|
|
|
15
15
|
exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n ", "\n ", "\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n ", "\n ", "\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"])), function (props) { return props.$isDisabled && "\n user-select: none;\n pointer-events: none;\n cursor: not-allowed;\n "; }, function (props) { return props.$hasBordeHover && "\n cursor: pointer;\n &:hover {\n ".concat(exports.Border, " {\n border: 1px solid var(--primary);\n }\n }\n "); }, devices_1.devices.mdUp, exports.Title, exports.Title);
|
|
16
16
|
exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 0.5rem;\n"], ["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 0.5rem;\n"])));
|
|
17
17
|
exports.ImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: 4px !important;\n }\n"], ["\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: 4px !important;\n }\n"])), function (props) { return props.$hasImageBorder ? '1px solid var(--dark-opacity-5)' : 'none'; }, function (props) { return props.$imageWidth ? props.$imageWidth : '71px'; }, function (props) { return props.$imageHeight ? props.$imageHeight : '50px'; });
|
|
18
|
-
exports.TextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (props) { return props.$period ? "1rem" : "0"; });
|
|
18
|
+
exports.TextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (props) { return props.$period ? "1rem" : "0.5rem"; });
|
|
19
19
|
exports.PriceContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return (props === null || props === void 0 ? void 0 : props.$infoPosition) === 'left' ? "\n text-align: start;\n display: flex;\n align-items: flex-end;\n margin-top: 8px;\n " : "\n text-align: end;\n "; });
|
|
20
20
|
exports.Price = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n font:var(--title-extra-bold-16-19);\n small {\n font: var(--body-bold-14-17);\n }\n"], ["\n display: block;\n font:var(--title-extra-bold-16-19);\n small {\n font: var(--body-bold-14-17);\n }\n"])));
|
|
21
21
|
exports.Period = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n ", "\n font:var(--body-regular-14-17);\n"], ["\n display: block;\n ", "\n font:var(--body-regular-14-17);\n"])), function (props) { return (props === null || props === void 0 ? void 0 : props.$infoPosition) === 'left' ? "\n margin-bottom: 0;\n margin-left: 4px;\n " : "\n margin-bottom: 4px;\n "; });
|
|
@@ -34,6 +34,6 @@ var Badges_1 = __importDefault(require("../Badges"));
|
|
|
34
34
|
var ProductCardVertical = function (_a) {
|
|
35
35
|
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, _w = _a.imageInfoTextVariant, imageInfoTextVariant = _w === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _w, _x = _a.isShowOldPrice, isShowOldPrice = _x === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _x, _y = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _y === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _y, _z = _a.hasImageOffset, hasImageOffset = _z === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _z, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock", "hasBeltBadge", "beltBadgeVariant", "beltBadgeTitle", "imageInfoText", "imageInfoTextVariant", "isShowOldPrice", "isOldPricePeriodUnderline", "hasImageOffset"]);
|
|
36
36
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
37
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline, "$hasImageOffset": hasImageOffset }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline, "$hasImageOffset": hasImageOffset }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
|
|
38
38
|
};
|
|
39
39
|
exports.default = (0, react_1.memo)(ProductCardVertical);
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardVerticalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n ", "\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\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 font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n ", "\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\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 font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$hasImageOffset ? "\n padding: 0.5rem;\n " : "\n padding: 0;\n "; }, function (props) { return props.$hasNewImageType ? "\n *{\n height: 100% !important;\n object-fit: contain;\n max-width: 100%;\n }\n " : "\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n "; }, function (props) { return props.$imageInfoTextVariant === "secondary" ? "\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n " : "\n background: linear-gradient(360deg, #411590 0%, #9760FC 100%);\n color: white;\n "; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$isOldPricePeriodUnderline ? "text-decoration: line-through;" : ""; }, function (props) { return props.$isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n &:is(.hasInset){\n left: 15px;\n top: 8px;\n }\n }\n .img {\n height: 215px;\n .imageInfoText{\n font:var(--body-semi-bold-13-16);\n height: 32px !important;\n strong{\n font:var(--body-bold-13-16);\n }\n }\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
|
|
13
|
+
exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n ", "\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\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 font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n ", "\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\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 font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$hasImageOffset ? "\n padding: 0.5rem;\n " : "\n padding: 0;\n background-color:var(--dark-opacity-5);\n "; }, function (props) { return props.$hasNewImageType ? "\n *{\n height: 100% !important;\n object-fit: contain;\n max-width: 100%;\n }\n " : "\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n "; }, function (props) { return props.$imageInfoTextVariant === "secondary" ? "\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n " : "\n background: linear-gradient(360deg, #411590 0%, #9760FC 100%);\n color: white;\n "; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$isOldPricePeriodUnderline ? "text-decoration: line-through;" : ""; }, function (props) { return props.$isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n &:is(.hasInset){\n left: 15px;\n top: 8px;\n }\n }\n .img {\n height: 215px;\n .imageInfoText{\n font:var(--body-semi-bold-13-16);\n height: 32px !important;\n strong{\n font:var(--body-bold-13-16);\n }\n }\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
|
|
14
14
|
var templateObject_1;
|