krl-alfred 1.76.17 → 1.76.19

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.
@@ -24,15 +24,12 @@ var classnames_1 = __importDefault(require("classnames"));
24
24
  var Breadcrumbs = function (props) {
25
25
  var data = props.data, subMenuRowLength = props.subMenuRowLength, onClickBackIcon = props.onClickBackIcon;
26
26
  var getSubData = function () {
27
- var refactorData = data === null || data === void 0 ? void 0 : data.find(function (dataItem) { var _a; return ((_a = dataItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0; });
28
- if (refactorData && refactorData.children) {
29
- return refactorData === null || refactorData === void 0 ? void 0 : refactorData.children;
30
- }
31
- return [];
27
+ var refactorData = data === null || data === void 0 ? void 0 : data.find(function (dataItem) { var _a; return ((_a = dataItem === null || dataItem === void 0 ? void 0 : dataItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0; });
28
+ return (refactorData === null || refactorData === void 0 ? void 0 : refactorData.children) || [];
32
29
  };
33
30
  var ButtonLinkComponent = function (_a) {
34
31
  var item = _a.item, children = _a.children;
35
- return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
32
+ return item.component ? (0, jsx_runtime_1.jsx)(item.component, { children: children }) : (0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children }));
36
33
  };
37
34
  (0, react_1.useEffect)(function () {
38
35
  var _a, _b;
@@ -46,28 +43,26 @@ var Breadcrumbs = function (props) {
46
43
  }, [data]);
47
44
  var SubMenu = function (_a) {
48
45
  var data = _a.data, item = _a.item;
49
- var rowLength = subMenuRowLength;
50
- if (item.subMenuRowLength)
51
- rowLength = item.subMenuRowLength;
46
+ var rowLength = item.subMenuRowLength || subMenuRowLength;
52
47
  var grid = rowLength && Math.ceil(data.length / rowLength);
53
48
  var dataWithColumn = (0, refactorColumn_1.default)(data, rowLength || 0);
54
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList, __assign({ gridTemplateColumns: grid }, { children: dataWithColumn === null || dataWithColumn === void 0 ? void 0 : dataWithColumn.map(function (childColumn, key) {
49
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList, __assign({ "$gridTemplateColumns": grid }, { children: dataWithColumn === null || dataWithColumn === void 0 ? void 0 : dataWithColumn.map(function (childColumn, key) {
55
50
  return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemList, { children: childColumn === null || childColumn === void 0 ? void 0 : childColumn.map(function (child) {
56
- return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, __assign({ isActive: child.isActive, isSeeAll: child.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: child }, { children: child.name })) }), child.id));
51
+ return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, __assign({ "$isActive": child.isActive, "$isSeeAll": child.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: child }, { children: child.name })) }), child.id));
57
52
  }) }) }, key));
58
53
  }) })) }));
59
54
  };
60
55
  var SubMenuMobile = function () {
61
- var _a;
62
- return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, __assign({ className: "breadcrumbSm" }, { children: (_a = getSubData()) === null || _a === void 0 ? void 0 : _a.map(function (item) {
63
- return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, __assign({ isActive: item.isActive, className: (0, classnames_1.default)({
56
+ var _a, _b;
57
+ return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, __assign({ className: "breadcrumbSm" }, { children: (_b = (_a = getSubData()) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !item.isHideMobile; })) === null || _b === void 0 ? void 0 : _b.map(function (item) {
58
+ return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, __assign({ "$isActive": item.isActive, className: (0, classnames_1.default)({
64
59
  "active": item.isActive,
65
60
  }) }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: item.name })) }), item.id));
66
61
  }) })));
67
62
  };
68
63
  return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
69
64
  var _a;
70
- return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "3px", name: "ArrowLeftBig", width: "16px", height: "16px" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, __assign({ item: breadCrumbItem }, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { children: breadCrumbItem.name })] })))] }, key));
65
+ return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "3px", name: "ArrowLeftBig", width: "16px", height: "16px" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children.filter(function (item) { return !item.isHideDesktop; }) })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, __assign({ item: breadCrumbItem }, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { children: breadCrumbItem.name })] })))] }, key));
71
66
  }) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
72
67
  };
73
68
  exports.default = Breadcrumbs;
@@ -18,11 +18,11 @@ exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templa
18
18
  exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 0;\n margin-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n div {\n display: block;\n }\n"], ["\n margin-left: 0;\n margin-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n div {\n display: block;\n }\n"])), devices_1.devices.xl);
19
19
  exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n\n"])));
20
20
  exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 4px;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n font:var(--caption-bold-12-15);\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 4px;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n font:var(--caption-bold-12-15);\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n transition: all 0.2s ease-in-out;\n }\n"])));
21
- exports.DropdownList = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 55px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"], ["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 55px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"])), function (props) { return props.gridTemplateColumns || "3"; });
21
+ exports.DropdownList = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 55px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"], ["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 55px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"])), function (props) { return props.$gridTemplateColumns || "3"; });
22
22
  exports.SubCategoryItem = styled_components_1.default.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
23
23
  exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"], ["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"])));
24
- exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n padding: 0;\n font:var(--caption-medium-12-15);\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"], ["\n display: block;\n padding: 0;\n font:var(--caption-medium-12-15);\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"])), function (props) { return (props.isActive ? "" : "&:hover{"); }, function (props) { return (props.isActive ? "" : "}"); }, function (props) { return (props.isSeeAll ? "font-weight: 700;" : ""); });
24
+ exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n padding: 0;\n font:var(--caption-medium-12-15);\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"], ["\n display: block;\n padding: 0;\n font:var(--caption-medium-12-15);\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"])), function (props) { return (props.$isActive ? "" : "&:hover{"); }, function (props) { return (props.$isActive ? "" : "}"); }, function (props) { return (props.$isSeeAll ? "font-weight: 700;" : ""); });
25
25
  exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
26
26
  exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem 15px 2rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 2rem 15px 0.5rem 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"], ["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem 15px 2rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 2rem 15px 0.5rem 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"])), devices_1.devices.xl);
27
- exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px #eae9f0;\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"], ["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px #eae9f0;\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"])), function (props) { return (props.isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
27
+ exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px #eae9f0;\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"], ["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px #eae9f0;\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
28
28
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var react_1 = require("react");
18
19
  var Button_styled_1 = require("./Button.styled");
19
20
  var classnames_1 = __importDefault(require("classnames"));
20
21
  var Icon_1 = __importDefault(require("../Icon/Icon"));
@@ -24,10 +25,10 @@ var Children = function (props) {
24
25
  var children = props.children, icon = props.icon, iconStrokeWidth = props.iconStrokeWidth;
25
26
  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "children" }, { children: children })), icon && ((0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, width: "16px", height: "16px" }) })))] });
26
27
  };
27
- var Button = function (props) {
28
+ var Button = (0, react_1.forwardRef)(function (props, ref) {
28
29
  var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children, iconStrokeWidth = props.iconStrokeWidth;
29
- return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' })) : (0, jsx_runtime_1.jsx)(Children, __assign({ iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: children })) })));
30
- };
30
+ return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type, ref: ref }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' })) : (0, jsx_runtime_1.jsx)(Children, __assign({ iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: children })) })));
31
+ });
31
32
  Button.propTypes = {
32
33
  iconStrokeWidth: prop_types_1.default.string,
33
34
  };
@@ -38,7 +38,7 @@ var CategoryMenu = function (props) {
38
38
  };
39
39
  var MenuButton = function (_a) {
40
40
  var item = __rest(_a, []);
41
- return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ isActiveCategory: item.isActive }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon }) }), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, { children: item.name })] }) })), item.children] })));
41
+ return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ "$isActiveCategory": item.isActive }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: item.icon }) }), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, { children: item.name })] }) })), item.children] })));
42
42
  };
43
43
  var CategorySubMenu = function (_a) {
44
44
  var item = _a.item, children = _a.children;
@@ -47,8 +47,8 @@ var CategoryMenu = function (props) {
47
47
  rowLength = item.subMenuRowLength;
48
48
  var grid = rowLength && Math.ceil(children.length / rowLength);
49
49
  var dataWithColumn = (0, refactorColumn_1.default)(children, rowLength || 0);
50
- return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, __assign({ gridTemplateColumns: grid }, { children: dataWithColumn.map(function (item, key) {
51
- return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItem, __assign({ isSeeAll: subItem.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: subItem }, { children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItemButtonInner, { children: subItem.name }) })) }), subItem.id)); }) }) }, key));
50
+ return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, __assign({ "$gridTemplateColumns": grid }, { children: dataWithColumn.map(function (item, key) {
51
+ return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItem, __assign({ "$isSeeAll": subItem.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: subItem }, { children: (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubCategoryInnerItemButtonInner, { children: subItem.name }) })) }), subItem.id)); }) }) }, key));
52
52
  }) })));
53
53
  };
54
54
  return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
@@ -31,13 +31,13 @@ exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports
31
31
  var styled_components_1 = __importStar(require("styled-components"));
32
32
  exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none;\n &:not([href]){\n cursor: initial;\n *{\n cursor: initial;\n }\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none;\n &:not([href]){\n cursor: initial;\n *{\n cursor: initial;\n }\n }\n }\n"])));
33
33
  var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n"], ["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n"])));
34
- exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n &:not(:last-child):not(:nth-last-child(2)){\n path, circle, rect {\n color : var(--dark-opacity-75)\n }\n }\n &:hover{\n &:not(:last-child):not(:nth-last-child(2)){\n path , circle, rect {\n color : var(--dark);\n }\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n &:last-child , &:nth-last-child(2){\n ul{\n left: auto;\n right: 0;\n }\n }\n ", "\n"], ["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n &:not(:last-child):not(:nth-last-child(2)){\n path, circle, rect {\n color : var(--dark-opacity-75)\n }\n }\n &:hover{\n &:not(:last-child):not(:nth-last-child(2)){\n path , circle, rect {\n color : var(--dark);\n }\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n &:last-child , &:nth-last-child(2){\n ul{\n left: auto;\n right: 0;\n }\n }\n ", "\n"])), hoverAndActive, function (props) { return props.isActiveCategory ? "\n > a > span{\n ".concat(hoverAndActive, "\n }\n ") : ""; });
34
+ exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n &:not(:last-child):not(:nth-last-child(2)){\n path, circle, rect {\n color : var(--dark-opacity-75)\n }\n }\n &:hover{\n &:not(:last-child):not(:nth-last-child(2)){\n path , circle, rect {\n color : var(--dark);\n }\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n &:last-child , &:nth-last-child(2){\n ul{\n left: auto;\n right: 0;\n }\n }\n ", "\n"], ["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n &:not(:last-child):not(:nth-last-child(2)){\n path, circle, rect {\n color : var(--dark-opacity-75)\n }\n }\n &:hover{\n &:not(:last-child):not(:nth-last-child(2)){\n path , circle, rect {\n color : var(--dark);\n }\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n &:last-child , &:nth-last-child(2){\n ul{\n left: auto;\n right: 0;\n }\n }\n ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n > a > span{\n ".concat(hoverAndActive, "\n }\n ") : ""; });
35
35
  exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n color: var(--dark-opacity-75);\n background-color: white;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n color: var(--dark-opacity-75);\n background-color: white;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"])));
36
36
  exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 24px;\n display:block;\n"], ["\n height: 24px;\n display:block;\n"])));
37
37
  exports.CategoryItemButtonTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-top: 8px;\n display:block;\n font:var(--caption-semi-bold-12-15);\n"], ["\n margin-top: 8px;\n display:block;\n font:var(--caption-semi-bold-12-15);\n"])));
38
- exports.SubMenu = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n position: absolute;\n left: 0;\n border-radius: 8px;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", 154px);\n transition-delay: 0s;\n"], ["\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n position: absolute;\n left: 0;\n border-radius: 8px;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", 154px);\n transition-delay: 0s;\n"])), function (props) { return props.gridTemplateColumns || '3'; });
38
+ exports.SubMenu = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n position: absolute;\n left: 0;\n border-radius: 8px;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", 154px);\n transition-delay: 0s;\n"], ["\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n position: absolute;\n left: 0;\n border-radius: 8px;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", 154px);\n transition-delay: 0s;\n"])), function (props) { return props.$gridTemplateColumns || '3'; });
39
39
  exports.SubCategoryItem = styled_components_1.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n padding: 0;\n"], ["\n display: block;\n padding: 0;\n"])));
40
40
  exports.SubCategoryInner = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n display: grid;\n gap:4px 0;\n"], ["\n padding: 0;\n display: grid;\n gap:4px 0;\n"])));
41
- exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a > span {\n font-weight: ", ";\n }\n"], ["\n padding: 0;\n display: block;\n a > span {\n font-weight: ", ";\n }\n"])), function (props) { return props.isSeeAll ? '600' : '500'; });
41
+ exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a > span {\n font-weight: ", ";\n }\n"], ["\n padding: 0;\n display: block;\n a > span {\n font-weight: ", ";\n }\n"])), function (props) { return props.$isSeeAll ? '600' : '500'; });
42
42
  exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n cursor:pointer;\n box-sizing: border-box;\n font:var(--caption-medium-12-15);\n &:hover {\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 600;\n }\n"], ["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n cursor:pointer;\n box-sizing: border-box;\n font:var(--caption-medium-12-15);\n &:hover {\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 600;\n }\n"])));
43
43
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
@@ -24,9 +24,9 @@ var Divider = function (props) {
24
24
  case 'horizontal':
25
25
  return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsxs)(Divider_styled_1.Horizontal, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("div", {}), hasText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: text }), (0, jsx_runtime_1.jsx)("div", {})] }))] })) }));
26
26
  case 'waveArrowUp':
27
- return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowUp", width: "97px", height: "53px" }) }));
27
+ return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowUp", width: "97px", height: "53px", color: "var(--primary)" }) }));
28
28
  case 'waveArrowDown':
29
- return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowDown", width: "97px", height: "53px" }) }));
29
+ return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "WaveArrowDown", width: "97px", height: "53px", color: "var(--primary)" }) }));
30
30
  default:
31
31
  return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: "default" }));
32
32
  }
@@ -16,7 +16,7 @@ var index_1 = require("./index");
16
16
  var Icon_styled_1 = require("./Icon.styled");
17
17
  var Icon = function (props) {
18
18
  var width = props.width, height = props.height, hasWrapper = props.hasWrapper, strokeWidth = props.strokeWidth, color = props.color;
19
- return hasWrapper ? ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconWrapper, __assign({ width: width, height: height, strokeWidth: strokeWidth, color: color }, { children: index_1.iconList[props.name]({}) || (0, jsx_runtime_1.jsx)("div", {}) }))) : (index_1.iconList[props.name](__assign({}, props)) || (0, jsx_runtime_1.jsx)("div", {}));
19
+ return hasWrapper ? ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconWrapper, __assign({ width: width, height: height, strokeWidth: strokeWidth, color: color }, { children: index_1.iconList[props.name]({}) || (0, jsx_runtime_1.jsx)("div", {}) }))) : (index_1.iconList[props.name]({ width: width, height: height, color: color }) || (0, jsx_runtime_1.jsx)("div", {}));
20
20
  };
21
21
  Icon.defaultProps = {
22
22
  hasWrapper: true
@@ -3,35 +3,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
- if (k2 === undefined) k2 = k;
8
- var desc = Object.getOwnPropertyDescriptor(m, k);
9
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
10
- desc = { enumerable: true, get: function() { return m[k]; } };
11
- }
12
- Object.defineProperty(o, k2, desc);
13
- }) : (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- o[k2] = m[k];
16
- }));
17
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
18
- Object.defineProperty(o, "default", { enumerable: true, value: v });
19
- }) : function(o, v) {
20
- o["default"] = v;
21
- });
22
- var __importStar = (this && this.__importStar) || function (mod) {
23
- if (mod && mod.__esModule) return mod;
24
- var result = {};
25
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
26
- __setModuleDefault(result, mod);
27
- return result;
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
28
8
  };
29
9
  Object.defineProperty(exports, "__esModule", { value: true });
30
10
  exports.OverlayStyled = exports.ModalStyled = void 0;
31
- var styled_components_1 = __importStar(require("styled-components"));
11
+ var styled_components_1 = __importDefault(require("styled-components"));
32
12
  var devices_1 = require("../../constants/devices");
33
- var mobileHorizontalButton = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n button {\n padding: 0;\n &:is(:nth-child(1)) {\n width: 50%;\n }\n &:is(:nth-child(2)) {\n width: 50%;\n }\n }\n"], ["\n button {\n padding: 0;\n &:is(:nth-child(1)) {\n width: 50%;\n }\n &:is(:nth-child(2)) {\n width: 50%;\n }\n }\n"])));
34
- exports.ModalStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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 scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .contentInner{\n //height: 100%;\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 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 scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .contentInner{\n //height: 100%;\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) {
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 scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .contentInner{\n //height: 100%;\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 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 scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .contentInner{\n //height: 100%;\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) {
35
14
  switch (props.size) {
36
15
  case 'xxsmall':
37
16
  return "311px";
@@ -49,12 +28,12 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_2 || (templ
49
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 "); }, 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) {
50
29
  switch (props.buttonsAlignment) {
51
30
  case 'horizontal':
52
- 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 &:is(:nth-child(1)) {\n width: ").concat((props.showSecondaryButton ? '50%' : '100%'), ";\n white-space: nowrap;\n box-sizing: content-box;\n }\n + button {\n width: 50%;\n margin-right: 1rem;\n }\n }\n }\n ");
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 &:is(:nth-child(1)) {\n min-width: ").concat((props.showSecondaryButton ? 'calc(50% - 3rem)' : '100%'), ";\n white-space: nowrap;\n box-sizing: content-box;\n }\n + button {\n flex: 1 0 auto;\n margin-right: 1rem;\n }\n }\n }\n ");
53
32
  case 'vertical':
54
33
  return "\n justify-content: space-between;\n flex-direction: column;\n gap: ".concat(props.showDivider ? '0.5rem' : '1rem', ";\n ");
55
34
  default:
56
35
  return "";
57
36
  }
58
37
  }, devices_1.devices.md, function (props) { return props.buttonsAlignmentOnMobile === 'vertical' ? "\n flex-direction : column;\n button {\n margin : 0 !important;\n + button {\n margin-top:1rem !important;\n }\n }\n " : " "; });
59
- exports.OverlayStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"])));
60
- var templateObject_1, templateObject_2, templateObject_3;
38
+ exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"])));
39
+ var templateObject_1, templateObject_2;
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.HorizontalSmStyled = exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n }\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n }\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.lg);
13
+ exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n width: 100%;\n }\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n width: 100%;\n }\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.isContentOffset ? '128px' : '0'; }, function (props) { return props.isContentOffset ? 'calc(100% - 128px)' : '100%'; }, devices_1.devices.md);
14
14
  exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\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 .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\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 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 }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\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 .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\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: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price, .period {\n text-decoration: line-through;\n }\n .price{\n font: var(--caption-semi-bold-12-15);\n }\n .period{\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\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\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 .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\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 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 }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\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 .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\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: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price, .period {\n text-decoration: line-through;\n }\n .price{\n font: var(--caption-semi-bold-12-15);\n }\n .period{\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\n ", "\n"])), function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, 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 }\n .img {\n height: 215px;\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 "); });
15
15
  exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:", ";\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n font:", ";\n }\n\n .period {\n font:", ";\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:", ";\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n font:", ";\n }\n\n .period {\n font:", ";\n }\n }\n }\n"])), devices_1.devices.sm, function (props) { return (props.isMobile ? 'var(--caption-semi-bold-12-15)' : 'var(--title-semi-bold-16-19)'); }, function (props) { return (props.isMobile ? 'var(--caption-extra-bold-12-15)' : 'var(--body-extra-bold-14-17)'); }, function (props) { return (props.isMobile ? 'var(--caption-regular-12-15)' : 'var(--body-regular-13-16)'); });
16
16
  exports.HorizontalSmStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n border: 1px solid var(--grey-10);\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalSmWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n\n .img {\n border: ", ";\n border-radius: 8px;\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\n > * {\n vertical-align: middle !important;\n }\n }\n\n .text {\n padding-right: ", ";\n .title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n }\n }\n\n .priceContent {\n text-align: end;\n\n .period {\n display: block;\n margin-bottom: 4px;\n font:var(--body-regular-14-17);\n }\n\n .price {\n display: block;\n font:var(--title-extra-bold-16-19);\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n border: 1px solid var(--grey-10);\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalSmWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n\n .img {\n border: ", ";\n border-radius: 8px;\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\n > * {\n vertical-align: middle !important;\n }\n }\n\n .text {\n padding-right: ", ";\n .title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n }\n }\n\n .priceContent {\n text-align: end;\n\n .period {\n display: block;\n margin-bottom: 4px;\n font:var(--body-regular-14-17);\n }\n\n .price {\n display: block;\n font:var(--title-extra-bold-16-19);\n }\n }\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'; }, function (props) { return props.period ? "2rem" : "0"; });
@@ -32,6 +32,6 @@ var react_device_detect_1 = require("react-device-detect");
32
32
  var classnames_1 = __importDefault(require("classnames"));
33
33
  var Checklist = function (props) {
34
34
  var hasCheckbox = props.hasCheckbox, checked = props.checked, name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, other = __rest(props, ["hasCheckbox", "checked", "name", "productCardOnChange", "title", "content", "value"]);
35
- return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name }) })), props.image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardImg" }, { children: props.image }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardText" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardTitle" }, { children: props.title })), props.contentAlignment === "center" && props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })), props.contentAlignment === "left" && props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })) }));
35
+ return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ChecklistStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name }) })), props.image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardImg" }, { children: props.image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: props.checkboxId, className: "productCardTitle" }, { children: props.title })) })), props.content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: props.content }))] })) }));
36
36
  };
37
37
  exports.default = Checklist;
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.layouts = exports.contentAlignments = void 0;
4
- exports.contentAlignments = ['left', 'center'];
3
+ exports.layouts = void 0;
5
4
  exports.layouts = ['checklist', 'standart', 'horizontal', 'horizontalSm'];
6
5
  var ProductCardDefault = {
7
6
  hasCheckbox: true,
8
- contentAlignment: exports.contentAlignments[0],
7
+ isContentOffset: false,
9
8
  layout: exports.layouts[0],
10
9
  productChecked: false,
11
10
  disabled: false,
@@ -34,7 +34,6 @@ exports.default = {
34
34
  },
35
35
  tags: ['autodocs'],
36
36
  argTypes: {
37
- contentAlignment: { control: 'select', options: props_1.contentAlignments },
38
37
  layout: { control: 'select', options: props_1.layouts },
39
38
  disabled: { control: 'boolean' },
40
39
  hasDiscount: { control: 'boolean' },
@@ -54,7 +53,6 @@ exports.Default = {
54
53
  oldPricePeriod: "hafta",
55
54
  period: "hafta",
56
55
  content: "Content",
57
- contentAlignment: "left",
58
56
  isMobile: false,
59
57
  productCardOnChange: function () { return console.log("test"); },
60
58
  image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
@@ -36,7 +36,7 @@ var SearchBox = function (props) {
36
36
  setShadowHeight("48px");
37
37
  }
38
38
  }, [(_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, showResultList, isLoading, children]);
39
- return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ shadowHeight: shadowHeight }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children })))] })));
39
+ return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$shadowHeight": shadowHeight }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children })))] })));
40
40
  };
41
41
  SearchBox.defaultProps = {
42
42
  showResultList: false,
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.LoadingStyled = exports.SearchBoxStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n }\n }\n"], ["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n }\n }\n"])), function (props) { return props.shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
13
+ exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n }\n }\n"], ["\n position: relative;\n .shadow{\n height: ", ";\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n }\n }\n"])), function (props) { return props.$shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
14
14
  exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
15
15
  var templateObject_1, templateObject_2;
@@ -24,7 +24,8 @@ 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({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props.image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: props }, { children: (0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText && (0, jsx_runtime_1.jsx)("span", __assign({ className: "productCardDeliveryDanger" }, { children: props.deliveryDangerText })), props.deliveryText] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "actions" }, { children: [!props.hasDisableActions && ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "16px", height: "16px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", __assign({ className: "popup" }, { children: props.errorText }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "quantity" }, { children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity })), !props.hasDisableActions && (props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))))] }))] })), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: !props.hasLoading && props.toggleInsurance, className: "insurance" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "insuranceImg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin", width: "80px", height: "9.14px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsxs)("p", __assign({ className: "price" }, { children: [props.insurancePrice, (0, jsx_runtime_1.jsx)("span", __assign({ className: "quantity" }, { children: props.insuranceQuantity }))] }))] })), props.hasInsuranceActions && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "actions" }, { children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupRight: "-16px", hasClickAction: props.hasInsuranceTooltipClickAction, popupWidth: props.insuranceTooltipWidth, position: "bottomRight" }, { children: props.insuranceTooltipText }))) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) }))) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, __assign({ disabled: props.hasLoading, className: "actionButton" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) })))) })))] })))] })));
27
+ return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "inner" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", 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.jsxs)("div", __assign({ className: "period" }, { children: ["/ ", props.period] }))] }))] })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "productCardDeliveryText" }, { children: [props.deliveryDangerText &&
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" }) })))) })))] })))] })));
28
29
  };
29
30
  ShoppingCartProduct.defaultProps = {
30
31
  insuranceText: "Tamamlayıcı ek güvence ekle",
@@ -6,446 +6,123 @@
6
6
  "slug": "",
7
7
  "name": "Tümü",
8
8
  "children": [
9
+ {
10
+ "name": "Tümü",
11
+ "slug": "ses-kayit-ve-mikrofon",
12
+ "id": 999999,
13
+ "isSeeAll": true,
14
+ "isHideDesktop": true
15
+ },
9
16
  {
10
17
  "parentId": 33,
11
18
  "name": "Hoparlör",
12
- "code": null,
13
- "parentcode": null,
14
- "isShowHeader": false,
15
- "marketPlaceType": 0,
16
19
  "slug": "hoparlor",
17
- "displayname": null,
18
- "isVirtualCategory": false,
19
- "headerMediaUrl": null,
20
- "title": null,
21
- "medias": null,
22
- "metaKeyword": null,
23
- "metaDescription": null,
24
- "metaTitle": null,
25
- "description": null,
26
- "displayOrder": 0,
27
- "disableErpSync": false,
28
- "id": 20,
29
- "isActive": false,
30
- "createdAt": "0001-01-01T00:00:00",
31
- "createdByid": null,
32
- "updatedAt": "0001-01-01T00:00:00",
33
- "updatedByid": null,
34
- "deletedAt": null,
35
- "deletedByid": null,
36
- "isDeleted": false
20
+ "id": 20
37
21
  },
38
22
  {
39
23
  "parentId": 33,
40
24
  "name": "Konsollar ve Oyunlar",
41
- "code": null,
42
- "parentcode": null,
43
- "isShowHeader": false,
44
- "marketPlaceType": 0,
45
25
  "slug": "konsollar-ve-oyunlar",
46
- "displayname": null,
47
- "isVirtualCategory": false,
48
- "headerMediaUrl": null,
49
- "title": null,
50
- "medias": null,
51
- "metaKeyword": null,
52
- "metaDescription": null,
53
- "metaTitle": null,
54
- "description": null,
55
- "displayOrder": 0,
56
- "disableErpSync": false,
57
26
  "id": 43,
58
- "isActive": true,
59
- "createdAt": "0001-01-01T00:00:00",
60
- "createdByid": null,
61
- "updatedAt": "0001-01-01T00:00:00",
62
- "updatedByid": null,
63
- "deletedAt": null,
64
- "deletedByid": null,
65
- "isDeleted": false
27
+ "isActive": true
66
28
  },
67
29
  {
68
30
  "parentId": 33,
69
31
  "name": "VR Gözlükler",
70
- "code": null,
71
- "parentcode": null,
72
- "isShowHeader": false,
73
- "marketPlaceType": 0,
74
32
  "slug": "vr-gozlukler",
75
- "displayname": null,
76
- "isVirtualCategory": false,
77
- "headerMediaUrl": null,
78
- "title": null,
79
- "medias": null,
80
- "metaKeyword": null,
81
- "metaDescription": null,
82
- "metaTitle": null,
83
- "description": null,
84
- "displayOrder": 0,
85
- "disableErpSync": false,
86
33
  "id": 44,
87
- "isActive": false,
88
- "createdAt": "0001-01-01T00:00:00",
89
- "createdByid": null,
90
- "updatedAt": "0001-01-01T00:00:00",
91
- "updatedByid": null,
92
- "deletedAt": null,
93
- "deletedByid": null,
94
- "isDeleted": false
34
+ "isActive": false
95
35
  },
96
36
  {
97
37
  "parentId": 33,
98
38
  "name": "E-kitap Okuyucu",
99
- "code": null,
100
- "parentcode": null,
101
- "isShowHeader": false,
102
- "marketPlaceType": 0,
103
39
  "slug": "e-kitap-okuyucu",
104
- "displayname": null,
105
- "isVirtualCategory": false,
106
- "headerMediaUrl": null,
107
- "title": null,
108
- "medias": null,
109
- "metaKeyword": null,
110
- "metaDescription": null,
111
- "metaTitle": null,
112
- "description": null,
113
- "displayOrder": 0,
114
- "disableErpSync": false,
115
40
  "id": 45,
116
- "isActive": false,
117
- "createdAt": "0001-01-01T00:00:00",
118
- "createdByid": null,
119
- "updatedAt": "0001-01-01T00:00:00",
120
- "updatedByid": null,
121
- "deletedAt": null,
122
- "deletedByid": null,
123
- "isDeleted": false
41
+ "isActive": false
124
42
  },
125
43
  {
126
44
  "parentId": 33,
127
45
  "name": "Kamera",
128
- "code": null,
129
- "parentcode": null,
130
- "isShowHeader": false,
131
- "marketPlaceType": 0,
132
46
  "slug": "kamera",
133
- "displayname": null,
134
- "isVirtualCategory": false,
135
- "headerMediaUrl": null,
136
- "title": null,
137
- "medias": null,
138
- "metaKeyword": null,
139
- "metaDescription": null,
140
- "metaTitle": null,
141
- "description": null,
142
- "displayOrder": 0,
143
- "disableErpSync": false,
144
47
  "id": 46,
145
- "isActive": false,
146
- "createdAt": "0001-01-01T00:00:00",
147
- "createdByid": null,
148
- "updatedAt": "0001-01-01T00:00:00",
149
- "updatedByid": null,
150
- "deletedAt": null,
151
- "deletedByid": null,
152
- "isDeleted": false
48
+ "isActive": false
153
49
  },
154
50
  {
155
51
  "parentId": 33,
156
52
  "name": "3D Printer",
157
- "code": null,
158
- "parentcode": null,
159
- "isShowHeader": false,
160
- "marketPlaceType": 0,
161
53
  "slug": "3d-printer",
162
- "displayname": null,
163
- "isVirtualCategory": false,
164
- "headerMediaUrl": null,
165
- "title": null,
166
- "medias": null,
167
- "metaKeyword": null,
168
- "metaDescription": null,
169
- "metaTitle": null,
170
- "description": null,
171
- "displayOrder": 0,
172
- "disableErpSync": false,
173
54
  "id": 48,
174
- "isActive": false,
175
- "createdAt": "0001-01-01T00:00:00",
176
- "createdByid": null,
177
- "updatedAt": "0001-01-01T00:00:00",
178
- "updatedByid": null,
179
- "deletedAt": null,
180
- "deletedByid": null,
181
- "isDeleted": false
55
+ "isActive": false
182
56
  },
183
57
  {
184
58
  "parentId": 33,
185
59
  "name": "Dikiş Makineleri ",
186
- "code": null,
187
- "parentcode": null,
188
- "isShowHeader": false,
189
- "marketPlaceType": 0,
190
60
  "slug": "dikis-makineleri",
191
- "displayname": null,
192
- "isVirtualCategory": false,
193
- "headerMediaUrl": null,
194
- "title": null,
195
- "medias": null,
196
- "metaKeyword": null,
197
- "metaDescription": null,
198
- "metaTitle": null,
199
- "description": null,
200
- "displayOrder": 0,
201
- "disableErpSync": false,
202
61
  "id": 53,
203
- "isActive": false,
204
- "createdAt": "0001-01-01T00:00:00",
205
- "createdByid": null,
206
- "updatedAt": "0001-01-01T00:00:00",
207
- "updatedByid": null,
208
- "deletedAt": null,
209
- "deletedByid": null,
210
- "isDeleted": false
62
+ "isActive": false
211
63
  },
212
64
  {
213
65
  "parentId": 33,
214
66
  "name": "Drone",
215
- "code": null,
216
- "parentcode": null,
217
- "isShowHeader": false,
218
- "marketPlaceType": 0,
219
67
  "slug": "drone",
220
- "displayname": null,
221
- "isVirtualCategory": false,
222
- "headerMediaUrl": null,
223
- "title": null,
224
- "medias": null,
225
- "metaKeyword": null,
226
- "metaDescription": null,
227
- "metaTitle": null,
228
- "description": null,
229
- "displayOrder": 0,
230
- "disableErpSync": false,
231
68
  "id": 54,
232
- "isActive": false,
233
- "createdAt": "0001-01-01T00:00:00",
234
- "createdByid": null,
235
- "updatedAt": "0001-01-01T00:00:00",
236
- "updatedByid": null,
237
- "deletedAt": null,
238
- "deletedByid": null,
239
- "isDeleted": false
69
+ "isActive": false
240
70
  },
241
71
  {
242
72
  "parentId": 33,
243
73
  "name": "E-bisiklet",
244
- "code": null,
245
- "parentcode": null,
246
- "isShowHeader": false,
247
- "marketPlaceType": 0,
248
74
  "slug": "e-bisiklet",
249
- "displayname": null,
250
- "isVirtualCategory": false,
251
- "headerMediaUrl": null,
252
- "title": null,
253
- "medias": null,
254
- "metaKeyword": null,
255
- "metaDescription": null,
256
- "metaTitle": null,
257
- "description": null,
258
- "displayOrder": 0,
259
- "disableErpSync": false,
260
75
  "id": 55,
261
- "isActive": false,
262
- "createdAt": "0001-01-01T00:00:00",
263
- "createdByid": null,
264
- "updatedAt": "0001-01-01T00:00:00",
265
- "updatedByid": null,
266
- "deletedAt": null,
267
- "deletedByid": null,
268
- "isDeleted": false
76
+ "isActive": false
269
77
  },
270
78
  {
271
79
  "parentId": 33,
272
80
  "name": "Kamera Aksesuarları",
273
- "code": null,
274
- "parentcode": null,
275
- "isShowHeader": false,
276
- "marketPlaceType": 0,
277
81
  "slug": "kamera-aksesuarlari",
278
- "displayname": null,
279
- "isVirtualCategory": false,
280
- "headerMediaUrl": null,
281
- "title": null,
282
- "medias": null,
283
- "metaKeyword": null,
284
- "metaDescription": null,
285
- "metaTitle": null,
286
- "description": null,
287
- "displayOrder": 0,
288
- "disableErpSync": false,
289
82
  "id": 59,
290
- "isActive": false,
291
- "createdAt": "0001-01-01T00:00:00",
292
- "createdByid": null,
293
- "updatedAt": "0001-01-01T00:00:00",
294
- "updatedByid": null,
295
- "deletedAt": null,
296
- "deletedByid": null,
297
- "isDeleted": false
83
+ "isActive": false
298
84
  },
299
85
  {
300
86
  "parentId": 33,
301
87
  "name": "Kulaklık",
302
- "code": null,
303
- "parentcode": null,
304
- "isShowHeader": false,
305
- "marketPlaceType": 0,
306
88
  "slug": "kulaklik",
307
- "displayname": null,
308
- "isVirtualCategory": false,
309
- "headerMediaUrl": null,
310
- "title": null,
311
- "medias": null,
312
- "metaKeyword": null,
313
- "metaDescription": null,
314
- "metaTitle": null,
315
- "description": null,
316
- "displayOrder": 0,
317
- "disableErpSync": false,
318
89
  "id": 62,
319
- "isActive": false,
320
- "createdAt": "0001-01-01T00:00:00",
321
- "createdByid": null,
322
- "updatedAt": "0001-01-01T00:00:00",
323
- "updatedByid": null,
324
- "deletedAt": null,
325
- "deletedByid": null,
326
- "isDeleted": false
90
+ "isActive": false
327
91
  },
328
92
  {
329
93
  "parentId": 33,
330
94
  "name": "Müzik",
331
- "code": null,
332
- "parentcode": null,
333
- "isShowHeader": false,
334
- "marketPlaceType": 0,
335
95
  "slug": "muzik",
336
- "displayname": null,
337
- "isVirtualCategory": false,
338
- "headerMediaUrl": null,
339
- "title": null,
340
- "medias": null,
341
- "metaKeyword": null,
342
- "metaDescription": null,
343
- "metaTitle": null,
344
- "description": null,
345
- "displayOrder": 0,
346
- "disableErpSync": false,
347
96
  "id": 69,
348
- "isActive": false,
349
- "createdAt": "0001-01-01T00:00:00",
350
- "createdByid": null,
351
- "updatedAt": "0001-01-01T00:00:00",
352
- "updatedByid": null,
353
- "deletedAt": null,
354
- "deletedByid": null,
355
- "isDeleted": false
97
+ "isActive": false
356
98
  },
357
99
  {
358
100
  "parentId": 33,
359
101
  "name": "Optik Cihazlar",
360
- "code": null,
361
- "parentcode": null,
362
- "isShowHeader": false,
363
- "marketPlaceType": 0,
364
102
  "slug": "optik-cihazlar",
365
- "displayname": null,
366
- "isVirtualCategory": false,
367
- "headerMediaUrl": null,
368
- "title": null,
369
- "medias": null,
370
- "metaKeyword": null,
371
- "metaDescription": null,
372
- "metaTitle": null,
373
- "description": null,
374
- "displayOrder": 0,
375
- "disableErpSync": false,
376
103
  "id": 70,
377
- "isActive": false,
378
- "createdAt": "0001-01-01T00:00:00",
379
- "createdByid": null,
380
- "updatedAt": "0001-01-01T00:00:00",
381
- "updatedByid": null,
382
- "deletedAt": null,
383
- "deletedByid": null,
384
- "isDeleted": false
104
+ "isActive": false
385
105
  },
386
106
  {
387
107
  "parentId": 33,
388
108
  "name": "Scooter",
389
- "code": null,
390
- "parentcode": null,
391
- "isShowHeader": false,
392
- "marketPlaceType": 0,
393
109
  "slug": "scooter",
394
- "displayname": null,
395
- "isVirtualCategory": false,
396
- "headerMediaUrl": null,
397
- "title": null,
398
- "medias": null,
399
- "metaKeyword": null,
400
- "metaDescription": null,
401
- "metaTitle": null,
402
- "description": null,
403
- "displayOrder": 0,
404
- "disableErpSync": false,
405
110
  "id": 74,
406
- "isActive": false,
407
- "createdAt": "0001-01-01T00:00:00",
408
- "createdByid": null,
409
- "updatedAt": "0001-01-01T00:00:00",
410
- "updatedByid": null,
411
- "deletedAt": null,
412
- "deletedByid": null,
413
- "isDeleted": false
111
+ "isActive": false
414
112
  },
415
113
  {
416
114
  "parentId": 33,
417
115
  "name": "Ses Kayıt ve Mikrofon",
418
- "code": null,
419
- "parentcode": null,
420
- "isShowHeader": false,
421
- "marketPlaceType": 0,
422
116
  "slug": "ses-kayit-ve-mikrofon",
423
- "displayname": null,
424
- "isVirtualCategory": false,
425
- "headerMediaUrl": null,
426
- "title": null,
427
- "medias": null,
428
- "metaKeyword": null,
429
- "metaDescription": null,
430
- "metaTitle": null,
431
- "description": null,
432
- "displayOrder": 0,
433
- "disableErpSync": false,
434
117
  "id": 75,
435
- "isActive": false,
436
- "createdAt": "0001-01-01T00:00:00",
437
- "createdByid": null,
438
- "updatedAt": "0001-01-01T00:00:00",
439
- "updatedByid": null,
440
- "deletedAt": null,
441
- "deletedByid": null,
442
- "isDeleted": false
118
+ "isActive": false
443
119
  },
444
120
  {
445
121
  "name": "Tümünü Gör",
446
122
  "slug": "ses-kayit-ve-mikrofon",
447
123
  "id": 999999,
448
- "isSeeAll": true
124
+ "isSeeAll": true,
125
+ "isHideMobile": true
449
126
  }
450
127
  ]
451
128
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "1.76.17",
3
+ "version": "1.76.19",
4
4
  "files": [
5
5
  "dist"
6
6
  ],