krl-alfred 1.12.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Breadcrumbs/Breadcrumbs.js +17 -12
- package/dist/components/Button/Button.js +2 -2
- package/dist/components/Button/Button.styled.js +4 -4
- package/dist/components/Checkbox/Checkbox.js +1 -1
- package/dist/components/Checkbox/Checkbox.styled.js +2 -2
- package/dist/components/Icon/ArrowMediumRight.js +40 -0
- package/dist/components/Icon/ArrowSmallDown.js +1 -1
- package/dist/components/Icon/ArrowSmallRight.js +40 -0
- package/dist/components/Icon/ArrowSmallUp.js +1 -1
- package/dist/components/Icon/Baby.js +1 -1
- package/dist/components/Icon/Call.js +1 -1
- package/dist/components/Icon/Campaign.js +1 -1
- package/dist/components/Icon/Discovery.js +1 -1
- package/dist/components/Icon/Game.js +1 -1
- package/dist/components/Icon/Heart.js +1 -1
- package/dist/components/Icon/House.js +1 -1
- package/dist/components/Icon/Laptop.js +1 -1
- package/dist/components/Icon/Watch.js +1 -1
- package/dist/components/Icon/index.js +13 -1
- package/dist/components/ProductCard/ProductCard.js +48 -0
- package/dist/components/ProductCard/ProductCard.styled.js +14 -0
- package/dist/components/ProductCard/index.js +8 -0
- package/dist/components/ProductCard/props.js +10 -0
- package/dist/components/ProductCard/stories/ProductCard.stories.js +27 -0
- package/package.json +2 -1
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
var react_1 = require("react");
|
|
7
8
|
var prop_types_1 = __importDefault(require("prop-types"));
|
|
8
9
|
var Breadcrumbs_styled_1 = require("./Breadcrumbs.styled");
|
|
9
10
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
@@ -22,13 +23,18 @@ var Breadcrumbs = function (props) {
|
|
|
22
23
|
var item = _a.item, children = _a.children;
|
|
23
24
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
24
25
|
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
(0, react_1.useEffect)(function () {
|
|
27
|
+
setTimeout(function () {
|
|
28
|
+
var _a, _b;
|
|
29
|
+
if (window && typeof window !== "undefined") {
|
|
30
|
+
var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".breadcrumbSm");
|
|
31
|
+
var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".breadcrumbSm li.active");
|
|
32
|
+
if (activeItem && elem) {
|
|
33
|
+
elem.scrollLeft = activeItem.offsetLeft;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}, 100);
|
|
37
|
+
}, []);
|
|
32
38
|
var SubMenu = function (_a) {
|
|
33
39
|
var data = _a.data, item = _a.item;
|
|
34
40
|
var rowLength = subMenuRowLength;
|
|
@@ -45,15 +51,14 @@ var Breadcrumbs = function (props) {
|
|
|
45
51
|
var SubMenuMobile = function () {
|
|
46
52
|
var _a;
|
|
47
53
|
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileWrapper, { className: "breadcrumbSm", children: (_a = getSubData()) === null || _a === void 0 ? void 0 : _a.map(function (item) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
_a)), children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: item.name }) }, item.id));
|
|
54
|
+
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, { isActive: item.isActive, className: (0, classnames_1.default)("caption-bold-12-15", {
|
|
55
|
+
"active": item.isActive,
|
|
56
|
+
}), children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: item.name }) }, item.id));
|
|
52
57
|
}) }));
|
|
53
58
|
};
|
|
54
59
|
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) {
|
|
55
60
|
var _a;
|
|
56
|
-
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft" }) }), ((_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: "ArrowRight" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] },
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft" }) }), ((_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: "ArrowRight" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRight" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] }, key));
|
|
57
62
|
}) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
|
|
58
63
|
};
|
|
59
64
|
exports.default = Breadcrumbs;
|
|
@@ -10,12 +10,12 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
10
10
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
11
11
|
var Children = function (props) {
|
|
12
12
|
var children = props.children, icon = props.icon;
|
|
13
|
-
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, icon && (0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }) })] });
|
|
13
|
+
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, icon && (0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "16px", height: "16px" }) })] });
|
|
14
14
|
};
|
|
15
15
|
var Button = function (props) {
|
|
16
16
|
var _a;
|
|
17
17
|
var isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children;
|
|
18
|
-
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)(
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)((_a = {}, _a["loading"] = isLoading, _a), (size === 'xsmall' ? "caption-bold-12-15" : "body-bold-14-17")), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, children: isLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
|
|
19
19
|
(0, jsx_runtime_1.jsx)(Children, { icon: icon, children: children }) }));
|
|
20
20
|
};
|
|
21
21
|
exports.default = Button;
|
|
@@ -29,10 +29,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
30
|
exports.IconStyled = exports.ButtonStyled = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
|
-
var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary);\n color: white;\n border: none;\n\n &:hover {\n background-color: var(--primary-hover);\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: var(--primary);\n color: white;\n border: none;\n\n &:hover {\n background-color: var(--primary-hover);\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"])));
|
|
33
|
-
var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n\n &:hover {\n color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n\n &:hover {\n color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"])));
|
|
34
|
-
var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: white;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n }\n"], ["\n background-color: white;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n }\n"])));
|
|
35
|
-
exports.ButtonStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: 0 24px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n
|
|
32
|
+
var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path , circle{\n stroke : white;\n }\n }\n\n &:hover {\n background-color: var(--primary-hover);\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path , circle{\n stroke : var(--dark-opacity-25);\n }\n }\n }\n"], ["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path , circle{\n stroke : white;\n }\n }\n\n &:hover {\n background-color: var(--primary-hover);\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path , circle{\n stroke : var(--dark-opacity-25);\n }\n }\n }\n"])));
|
|
33
|
+
var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path , circle{\n stroke : var(--primary);\n }\n }\n\n &:hover {\n color: var(--primary-hover);\n svg{\n path , circle{\n stroke : var(--primary-hover);\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n svg{\n path , circle{\n stroke : var(--primary-press);\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path , circle{\n stroke : var(--dark-opacity-25);\n }\n }\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path , circle{\n stroke : var(--primary);\n }\n }\n\n &:hover {\n color: var(--primary-hover);\n svg{\n path , circle{\n stroke : var(--primary-hover);\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n svg{\n path , circle{\n stroke : var(--primary-press);\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path , circle{\n stroke : var(--dark-opacity-25);\n }\n }\n }\n"])));
|
|
34
|
+
var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: white;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path , circle{\n stroke : var(--primary);\n }\n }\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path , circle{\n stroke : var(--primary-hover);\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path , circle{\n stroke : var(--primary-press);\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path , circle{\n stroke : var(--dark-opacity-25);\n }\n }\n }\n"], ["\n background-color: white;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path , circle{\n stroke : var(--primary);\n }\n }\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path , circle{\n stroke : var(--primary-hover);\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path , circle{\n stroke : var(--primary-press);\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path , circle{\n stroke : var(--dark-opacity-25);\n }\n }\n }\n"])));
|
|
35
|
+
exports.ButtonStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: 0 24px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: 0 24px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width; }, function (props) {
|
|
36
36
|
switch (props.variant) {
|
|
37
37
|
case 'primary':
|
|
38
38
|
return primary;
|
|
@@ -10,7 +10,7 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
10
10
|
var Checkbox = function (props) {
|
|
11
11
|
var _a, _b, _c, _d;
|
|
12
12
|
var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid;
|
|
13
|
-
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [(0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id, children: label }), (0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id, children: description })] })] }));
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["body-medium-14-17"] = size === "small", _a), (_b = {}, _b["title-medium-16-19"] = size === "medium", _b)), htmlFor: id, children: label })), description && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", (_c = {}, _c["body-regular-13-16"] = size === "small", _c), (_d = {}, _d["body-regular-13-16"] = size === "medium", _d)), htmlFor: id, children: description }))] }))] }));
|
|
14
14
|
};
|
|
15
15
|
exports.default = Checkbox;
|
|
16
16
|
Checkbox.propTypes = {
|
|
@@ -12,7 +12,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
15
|
-
exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n display:flex;\n align-items:flex-start;\n justify-content:flex-start;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: inline-block;\n cursor: ", ";\n margin: ", ";\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"], ["\n flex:1;\n position:relative;\n display:flex;\n align-items:flex-start;\n justify-content:flex-start;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: inline-block;\n cursor: ", ";\n margin: ", ";\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) {
|
|
15
|
+
exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n display:flex;\n align-items:flex-start;\n justify-content:flex-start;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: ", ";\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: inline-block;\n cursor: ", ";\n margin: ", ";\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"], ["\n flex:1;\n position:relative;\n display:flex;\n align-items:flex-start;\n justify-content:flex-start;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n margin: ", ";\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: inline-block;\n cursor: ", ";\n margin: ", ";\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) { return (props.size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
|
|
16
16
|
switch (props.size) {
|
|
17
17
|
case 'small':
|
|
18
18
|
return "16px";
|
|
@@ -30,5 +30,5 @@ exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (
|
|
|
30
30
|
default:
|
|
31
31
|
return "16px";
|
|
32
32
|
}
|
|
33
|
-
}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.size === "small" ? "0 0 0
|
|
33
|
+
}, function (props) { return (props.disabled ? "not-allowed" : "pointer"); }, function (props) { return (props.size === "small" ? "0 0 0 0" : "2px 0 0 0"); }, function (props) { return props.valid ? '#000000' : 'var(--red)'; });
|
|
34
34
|
var templateObject_1;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgArrowMediumRight = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.5 5L15.5 12L8.5 19", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
|
+
exports.default = SvgArrowMediumRight;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgArrowSmallDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10.668 6.66797L8.0013 9.33464L5.33464 6.66797", stroke:
|
|
39
|
+
var SvgArrowSmallDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10.668 6.66797L8.0013 9.33464L5.33464 6.66797", stroke: "#9763F6", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
40
|
exports.default = SvgArrowSmallDown;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgArrowSmallRight = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10 8L14 12L10 16", stroke: "#0A103D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
|
+
exports.default = SvgArrowSmallRight;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgArrowSmallUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.33398 9.33594L8.00065 6.66927L10.6673 9.33594", stroke:
|
|
39
|
+
var SvgArrowSmallUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.33398 9.33594L8.00065 6.66927L10.6673 9.33594", stroke: "#9763F6", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
40
|
exports.default = SvgArrowSmallUp;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgBaby = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M9 12H9.01M15 12H15.01", stroke:
|
|
39
|
+
var SvgBaby = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M9 12H9.01M15 12H15.01", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M19.0005 6.3C19.9065 7.43567 20.524 8.77378 20.8005 10.2C21.1386 10.3638 21.4238 10.6195 21.6233 10.9378C21.8229 11.2562 21.9287 11.6243 21.9287 12C21.9287 12.3757 21.8229 12.7438 21.6233 13.0622C21.4238 13.3805 21.1386 13.6362 20.8005 13.8C20.3688 15.8135 19.2597 17.618 17.6582 18.9125C16.0567 20.207 14.0597 20.9132 12.0005 20.9132C9.94124 20.9132 7.94428 20.207 6.3428 18.9125C4.74132 17.618 3.63219 15.8135 3.20049 13.8C2.86234 13.6362 2.57717 13.3805 2.37763 13.0622C2.1781 12.7438 2.07227 12.3757 2.07227 12C2.07227 11.6243 2.1781 11.2562 2.37763 10.9378C2.57717 10.6195 2.86234 10.3638 3.20049 10.2C3.61475 8.1705 4.71638 6.34602 6.31951 5.03437C7.92264 3.72271 9.92915 3.00418 12.0005 3C14.0005 3 15.5005 4.1 15.5005 5.5C15.5005 6.9 14.6005 8 13.5005 8C12.7005 8 12.0005 7.6 12.0005 7", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 15V15C10.6846 16.643 12.9532 16.7944 13.8501 15.257L14 15", stroke: "#474C6D", strokeWidth: 1.5, strokeLinecap: "round" })] }))); };
|
|
40
40
|
exports.default = SvgBaby;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgCall = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.99033 4.87254C3.30665 4.34878 5.0495 2.44376 6.29322 2.50127C6.665 2.53208 6.99364 2.75699 7.26067 3.01784C7.87379 3.61656 9.62897 5.88101 9.72859 6.35753C9.97096 7.52621 8.57833 8.1999 9.00454 9.37783C10.0911 12.0366 11.9634 13.9088 14.6233 14.9943C15.8003 15.4205 16.474 14.0279 17.6428 14.2713C18.1183 14.3709 20.3839 16.126 20.9826 16.7391C21.2425 17.0051 21.4684 17.3347 21.4992 17.7065C21.5454 19.0159 19.5222 20.7833 19.1278 21.0092C18.1974 21.6747 16.9834 21.6634 15.5035 20.9753C11.3739 19.2572 4.77426 12.7822 3.02422 8.49669C2.35461 7.02505 2.30839 5.80297 2.99033 4.87254Z", stroke:
|
|
39
|
+
var SvgCall = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.99033 4.87254C3.30665 4.34878 5.0495 2.44376 6.29322 2.50127C6.665 2.53208 6.99364 2.75699 7.26067 3.01784C7.87379 3.61656 9.62897 5.88101 9.72859 6.35753C9.97096 7.52621 8.57833 8.1999 9.00454 9.37783C10.0911 12.0366 11.9634 13.9088 14.6233 14.9943C15.8003 15.4205 16.474 14.0279 17.6428 14.2713C18.1183 14.3709 20.3839 16.126 20.9826 16.7391C21.2425 17.0051 21.4684 17.3347 21.4992 17.7065C21.5454 19.0159 19.5222 20.7833 19.1278 21.0092C18.1974 21.6747 16.9834 21.6634 15.5035 20.9753C11.3739 19.2572 4.77426 12.7822 3.02422 8.49669C2.35461 7.02505 2.30839 5.80297 2.99033 4.87254Z", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
40
|
exports.default = SvgCall;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgCampaign = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.58605 13.2871L14.5705 15.8116C14.9313 16.0356 15.4672 16.2068 15.8479 16.1999C16.6506 16.2172 17.3944 15.7883 17.6788 15.087C17.8575 14.595 17.881 14.1194 17.9609 13.6361C18.0226 13.2721 18.0604 13.0226 18.0823 12.0003M8.58605 13.2871V5.91306M8.58605 13.2871H7.46884M8.58605 5.91306H5.20251C4.07317 5.91306 3.31048 6.55379 3.15653 7.36659C2.95793 8.54342 2.93795 10.6273 3.15653 11.7808C3.31048 12.7181 4.07317 13.2871 5.20251 13.2871H7.46884M8.58605 5.91306L14.4835 3.43284C14.8443 3.20716 15.4672 2.99445 15.8479 3.0005C16.6506 2.98321 17.3944 3.41296 17.6788 4.11335C17.8375 4.56125 17.881 5.08179 17.9609 5.56515C17.996 5.77221 17.9386 6.13638 17.9609 6.6001M7.46884 13.2871L9.70326 21H6.35163L4.11721 13.0661M17.9609 6.6001C18.0209 7.85219 18.1161 10.43 18.0823 12.0003M17.9609 6.6001C21.9926 6.6001 21.9926 12.0003 18.0823 12.0003", stroke:
|
|
39
|
+
var SvgCampaign = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.58605 13.2871L14.5705 15.8116C14.9313 16.0356 15.4672 16.2068 15.8479 16.1999C16.6506 16.2172 17.3944 15.7883 17.6788 15.087C17.8575 14.595 17.881 14.1194 17.9609 13.6361C18.0226 13.2721 18.0604 13.0226 18.0823 12.0003M8.58605 13.2871V5.91306M8.58605 13.2871H7.46884M8.58605 5.91306H5.20251C4.07317 5.91306 3.31048 6.55379 3.15653 7.36659C2.95793 8.54342 2.93795 10.6273 3.15653 11.7808C3.31048 12.7181 4.07317 13.2871 5.20251 13.2871H7.46884M8.58605 5.91306L14.4835 3.43284C14.8443 3.20716 15.4672 2.99445 15.8479 3.0005C16.6506 2.98321 17.3944 3.41296 17.6788 4.11335C17.8375 4.56125 17.881 5.08179 17.9609 5.56515C17.996 5.77221 17.9386 6.13638 17.9609 6.6001M7.46884 13.2871L9.70326 21H6.35163L4.11721 13.0661M17.9609 6.6001C18.0209 7.85219 18.1161 10.43 18.0823 12.0003M17.9609 6.6001C21.9926 6.6001 21.9926 12.0003 18.0823 12.0003", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
40
|
exports.default = SvgCampaign;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgDiscovery = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.27051 14.9515L9.86319 9.86221L14.9524 8.26953L13.3598 13.3588L8.27051 14.9515Z", stroke:
|
|
39
|
+
var SvgDiscovery = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.27051 14.9515L9.86319 9.86221L14.9524 8.26953L13.3598 13.3588L8.27051 14.9515Z", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("circle", { cx: 11.611, cy: 11.611, r: 9.61098, stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
40
|
exports.default = SvgDiscovery;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgGame = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M8.84819 12.3125V16.0575", stroke:
|
|
39
|
+
var SvgGame = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M8.84819 12.3125V16.0575", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.7586 14.1872H6.9375", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.3665 12.4294H15.2595", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.179 16.0036H17.072", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.07227 2C8.07227 2.74048 8.68475 3.34076 9.44029 3.34076H10.4968C11.6624 3.34492 12.6065 4.27026 12.6118 5.41266V6.08771", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.4283 21.9642C13.4231 22.0151 10.473 22.013 7.57275 21.9642C4.3535 21.9642 2 19.668 2 16.5129V11.8633C2 8.70822 4.3535 6.412 7.57275 6.412C10.4889 6.36215 13.4411 6.36319 16.4283 6.412C19.6476 6.412 22 8.70926 22 11.8633V16.5129C22 19.668 19.6476 21.9642 16.4283 21.9642Z", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
40
|
exports.default = SvgGame;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgHeart = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.261 21.8538C10.0904 20.5179 8.07111 18.9456 6.23929 17.1652C4.95144 15.8829 3.97101 14.3198 3.3731 12.5954C2.29714 9.25031 3.55393 5.42083 7.07112 4.28752C8.91961 3.69243 10.9384 4.03255 12.4961 5.20148C14.0543 4.03398 16.0725 3.69398 17.9211 4.28752C21.4383 5.42083 22.7041 9.25031 21.6281 12.5954C21.0302 14.3198 20.0498 15.8829 18.7619 17.1652C16.9301 18.9456 14.9108 20.5179 12.7402 21.8538L12.5051 22L12.261 21.8538Z", stroke:
|
|
39
|
+
var SvgHeart = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.261 21.8538C10.0904 20.5179 8.07111 18.9456 6.23929 17.1652C4.95144 15.8829 3.97101 14.3198 3.3731 12.5954C2.29714 9.25031 3.55393 5.42083 7.07112 4.28752C8.91961 3.69243 10.9384 4.03255 12.4961 5.20148C14.0543 4.03398 16.0725 3.69398 17.9211 4.28752C21.4383 5.42083 22.7041 9.25031 21.6281 12.5954C21.0302 14.3198 20.0498 15.8829 18.7619 17.1652C16.9301 18.9456 14.9108 20.5179 12.7402 21.8538L12.5051 22L12.261 21.8538Z", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.2393 8.05469C17.3046 8.39499 18.0615 9.35139 18.1561 10.4767", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
40
|
exports.default = SvgHeart;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgHouse = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 22V11.6636C3 11.1263 3.21619 10.6116 3.59986 10.2354L12 2", stroke:
|
|
39
|
+
var SvgHouse = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 22V11.6636C3 11.1263 3.21619 10.6116 3.59986 10.2354L12 2", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 22V11.6636C21 11.1263 20.7838 10.6116 20.4001 10.2354L12 2", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M1 22L23 22", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 21.3V16C9 15.4477 9.44772 15 10 15H14C14.5523 15 15 15.4477 15 16V22", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round" })] }))); };
|
|
40
40
|
exports.default = SvgHouse;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgLaptop = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M3.41304 16.3636V6C3.41304 4.89543 4.30848 4 5.41305 4H19.587C20.6915 4 21.587 4.89543 21.587 6V16.3636M3.41304 16.3636H21.587M3.41304 16.3636H2.45652V16.3636C1.92825 16.3636 1.5 16.7919 1.5 17.3202V18.5C1.5 19.3284 2.17157 20 3 20H12.5H22C22.8284 20 23.5 19.3284 23.5 18.5V17.8636C23.5 17.0352 22.8284 16.3636 22 16.3636H21.587M10.5 7H14.3913", stroke:
|
|
39
|
+
var SvgLaptop = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 25, height: 24, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_16056_16640)", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.41304 16.3636V6C3.41304 4.89543 4.30848 4 5.41305 4H19.587C20.6915 4 21.587 4.89543 21.587 6V16.3636M3.41304 16.3636H21.587M3.41304 16.3636H2.45652V16.3636C1.92825 16.3636 1.5 16.7919 1.5 17.3202V18.5C1.5 19.3284 2.17157 20 3 20H12.5H22C22.8284 20 23.5 19.3284 23.5 18.5V17.8636C23.5 17.0352 22.8284 16.3636 22 16.3636H21.587M10.5 7H14.3913", stroke: "#474C6D", strokeWidth: 2, strokeLinecap: "round" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_16056_16640", children: (0, jsx_runtime_1.jsx)("rect", { width: 24, height: 24, fill: "white", transform: "translate(0.5)" }) }) })] }))); };
|
|
40
40
|
exports.default = SvgLaptop;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgWatch = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.75 5.25H8.25C6.59315 5.25 5.25 6.59315 5.25 8.25V15.75C5.25 17.4069 6.59315 18.75 8.25 18.75H15.75C17.4069 18.75 18.75 17.4069 18.75 15.75V8.25C18.75 6.59315 17.4069 5.25 15.75 5.25Z", stroke:
|
|
39
|
+
var SvgWatch = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.75 5.25H8.25C6.59315 5.25 5.25 6.59315 5.25 8.25V15.75C5.25 17.4069 6.59315 18.75 8.25 18.75H15.75C17.4069 18.75 18.75 17.4069 18.75 15.75V8.25C18.75 6.59315 17.4069 5.25 15.75 5.25Z", stroke: "#474C6D", strokeWidth: 2, strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.25 5.25V1.875C8.25 1.77554 8.28951 1.68016 8.35983 1.60984C8.43016 1.53951 8.52554 1.5 8.625 1.5H15.375C15.4745 1.5 15.5698 1.53951 15.6402 1.60984C15.7105 1.68016 15.75 1.77554 15.75 1.875V5.25M15.75 18.75V22.125C15.75 22.2245 15.7105 22.3198 15.6402 22.3902C15.5698 22.4605 15.4745 22.5 15.375 22.5H8.625C8.52554 22.5 8.43016 22.4605 8.35983 22.3902C8.28951 22.3198 8.25 22.2245 8.25 22.125V18.75", stroke: "#474C6D", strokeWidth: 2, strokeLinejoin: "round" })] }))); };
|
|
40
40
|
exports.default = SvgWatch;
|
|
@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
exports.iconList = exports.Watch = exports.SwitchPassive = exports.Show = exports.Laptop = exports.KeyboardClose = exports.InfoSquare = exports.House = exports.Hide = exports.Heart = exports.Game = exports.Discovery = exports.Danger = exports.CloseHover = exports.Close = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Campaign = exports.Call = exports.Baby = exports.ArrowSmallUp = exports.ArrowSmallDown = exports.ArrowRight = exports.ArrowMedium = exports.ArrowLeft = exports.ArrowDown = exports.Again = void 0;
|
|
28
|
+
exports.iconList = exports.Watch = exports.SwitchPassive = exports.Show = exports.Laptop = exports.KeyboardClose = exports.InfoSquare = exports.House = exports.Hide = exports.Heart = exports.Game = exports.Discovery = exports.Danger = exports.CloseHover = exports.Close = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Campaign = exports.Call = exports.Baby = exports.ArrowSmallUp = exports.ArrowSmallRight = exports.ArrowSmallDown = exports.ArrowRight = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeft = exports.ArrowDown = exports.Again = void 0;
|
|
29
29
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
30
30
|
var Again_1 = __importDefault(require("./Again"));
|
|
31
31
|
Object.defineProperty(exports, "Again", { enumerable: true, get: function () { return Again_1.default; } });
|
|
@@ -35,10 +35,14 @@ var ArrowLeft_1 = __importDefault(require("./ArrowLeft"));
|
|
|
35
35
|
Object.defineProperty(exports, "ArrowLeft", { enumerable: true, get: function () { return ArrowLeft_1.default; } });
|
|
36
36
|
var ArrowMedium_1 = __importDefault(require("./ArrowMedium"));
|
|
37
37
|
Object.defineProperty(exports, "ArrowMedium", { enumerable: true, get: function () { return ArrowMedium_1.default; } });
|
|
38
|
+
var ArrowMediumRight_1 = __importDefault(require("./ArrowMediumRight"));
|
|
39
|
+
Object.defineProperty(exports, "ArrowMediumRight", { enumerable: true, get: function () { return ArrowMediumRight_1.default; } });
|
|
38
40
|
var ArrowRight_1 = __importDefault(require("./ArrowRight"));
|
|
39
41
|
Object.defineProperty(exports, "ArrowRight", { enumerable: true, get: function () { return ArrowRight_1.default; } });
|
|
40
42
|
var ArrowSmallDown_1 = __importDefault(require("./ArrowSmallDown"));
|
|
41
43
|
Object.defineProperty(exports, "ArrowSmallDown", { enumerable: true, get: function () { return ArrowSmallDown_1.default; } });
|
|
44
|
+
var ArrowSmallRight_1 = __importDefault(require("./ArrowSmallRight"));
|
|
45
|
+
Object.defineProperty(exports, "ArrowSmallRight", { enumerable: true, get: function () { return ArrowSmallRight_1.default; } });
|
|
42
46
|
var ArrowSmallUp_1 = __importDefault(require("./ArrowSmallUp"));
|
|
43
47
|
Object.defineProperty(exports, "ArrowSmallUp", { enumerable: true, get: function () { return ArrowSmallUp_1.default; } });
|
|
44
48
|
var Baby_1 = __importDefault(require("./Baby"));
|
|
@@ -100,6 +104,10 @@ exports.iconList = {
|
|
|
100
104
|
var props = __rest(_a, []);
|
|
101
105
|
return (0, jsx_runtime_1.jsx)(ArrowMedium_1.default, __assign({}, props));
|
|
102
106
|
},
|
|
107
|
+
ArrowMediumRight: function (_a) {
|
|
108
|
+
var props = __rest(_a, []);
|
|
109
|
+
return (0, jsx_runtime_1.jsx)(ArrowMediumRight_1.default, __assign({}, props));
|
|
110
|
+
},
|
|
103
111
|
ArrowRight: function (_a) {
|
|
104
112
|
var props = __rest(_a, []);
|
|
105
113
|
return (0, jsx_runtime_1.jsx)(ArrowRight_1.default, __assign({}, props));
|
|
@@ -108,6 +116,10 @@ exports.iconList = {
|
|
|
108
116
|
var props = __rest(_a, []);
|
|
109
117
|
return (0, jsx_runtime_1.jsx)(ArrowSmallDown_1.default, __assign({}, props));
|
|
110
118
|
},
|
|
119
|
+
ArrowSmallRight: function (_a) {
|
|
120
|
+
var props = __rest(_a, []);
|
|
121
|
+
return (0, jsx_runtime_1.jsx)(ArrowSmallRight_1.default, __assign({}, props));
|
|
122
|
+
},
|
|
111
123
|
ArrowSmallUp: function (_a) {
|
|
112
124
|
var props = __rest(_a, []);
|
|
113
125
|
return (0, jsx_runtime_1.jsx)(ArrowSmallUp_1.default, __assign({}, props));
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
29
|
+
var ProductCard_styled_1 = require("./ProductCard.styled");
|
|
30
|
+
var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
31
|
+
var prop_types_1 = __importDefault(require("prop-types"));
|
|
32
|
+
var react_device_detect_1 = require("react-device-detect");
|
|
33
|
+
var ProductCard = function (props) {
|
|
34
|
+
var name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, other = __rest(props, ["name", "productCardOnChange", "title", "content", "value"]);
|
|
35
|
+
return (0, jsx_runtime_1.jsx)(ProductCard_styled_1.ProductCardStyled, __assign({}, other, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ProductCardInner", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "ProductCardCheckboxContent", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: props.checkboxId, size: react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: props.productCardOnChange, value: props.value, name: props.name }) }), props.image && ((0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "ProductCardImg", children: props.image })), (0, jsx_runtime_1.jsxs)("div", { className: "ProductCardText", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: props.checkboxId, className: "ProductCardTitle title-semi-bold-16-19", children: props.title }), props.contentAlignment === "center" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "ProductCardContent", children: props.content })] }), props.contentAlignment === "left" && props.content && (0, jsx_runtime_1.jsx)("div", { className: "ProductCardContent", children: props.content })] }) }));
|
|
36
|
+
};
|
|
37
|
+
exports.default = ProductCard;
|
|
38
|
+
ProductCard.propTypes = {
|
|
39
|
+
productChecked: prop_types_1.default.bool,
|
|
40
|
+
disabled: prop_types_1.default.bool,
|
|
41
|
+
checkboxId: prop_types_1.default.string,
|
|
42
|
+
value: prop_types_1.default.string
|
|
43
|
+
};
|
|
44
|
+
ProductCard.defaultProps = {
|
|
45
|
+
productChecked: false,
|
|
46
|
+
disabled: false,
|
|
47
|
+
checkboxId: "productCheckBox_".concat((Math.random() + 1).toString(36).substring(2))
|
|
48
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.ProductCardStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var devices_1 = require("../../constants/devices");
|
|
13
|
+
exports.ProductCardStyled = 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 .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\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: 8px;\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: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\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 .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\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: 8px;\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: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm);
|
|
14
|
+
var templateObject_1;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var ProductCard_1 = require("./ProductCard");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ProductCard_1).default; } });
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.contentAlignments = void 0;
|
|
4
|
+
exports.contentAlignments = ['left', 'center'];
|
|
5
|
+
var ProductCardDefault = {
|
|
6
|
+
hasCheckbox: false,
|
|
7
|
+
contentAlignment: exports.contentAlignments[0],
|
|
8
|
+
productChecked: false,
|
|
9
|
+
disabled: false,
|
|
10
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Default = void 0;
|
|
7
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
var ProductCard_1 = __importDefault(require("../ProductCard"));
|
|
9
|
+
var props_1 = require("../props");
|
|
10
|
+
exports.default = {
|
|
11
|
+
title: "Components/ProductCard",
|
|
12
|
+
component: ProductCard_1.default,
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
argTypes: {
|
|
15
|
+
contentAlignment: { control: 'select', options: props_1.contentAlignments },
|
|
16
|
+
disabled: { control: 'boolean' },
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
exports.Default = {
|
|
20
|
+
args: {
|
|
21
|
+
title: "Product Name",
|
|
22
|
+
content: "Content",
|
|
23
|
+
contentAlignment: "left",
|
|
24
|
+
productCardOnChange: function () { return console.log("test"); },
|
|
25
|
+
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
|
|
26
|
+
},
|
|
27
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "krl-alfred",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
"css-loader": "^6.7.3",
|
|
26
26
|
"plop": "^3.1.2",
|
|
27
27
|
"react": "^18.2.0",
|
|
28
|
+
"react-device-detect": "^2.2.3",
|
|
28
29
|
"react-dom": "^18.2.0",
|
|
29
30
|
"react-router-dom": "^6.10.0",
|
|
30
31
|
"react-scripts": "^5.0.1",
|