krl-alfred 1.56.0 → 1.58.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.
Files changed (34) hide show
  1. package/dist/components/Divider/Divider.js +39 -0
  2. package/dist/components/Divider/Divider.styled.js +14 -0
  3. package/dist/components/Divider/index.js +8 -0
  4. package/dist/components/Divider/props.js +7 -0
  5. package/dist/components/Divider/stories/Divider.stories.js +22 -0
  6. package/dist/components/Icon/WaveArrowDown.js +40 -0
  7. package/dist/components/Icon/WaveArrowUp.js +40 -0
  8. package/dist/components/Icon/index.js +13 -1
  9. package/dist/components/Modal/Modal.js +2 -1
  10. package/dist/components/Modal/Modal.styled.js +10 -1
  11. package/dist/components/ProductCard/ProductCard.js +7 -4
  12. package/dist/components/ProductCard/ProductCard.styled.js +3 -2
  13. package/dist/components/ProductCard/layouts/Horizontal.js +29 -0
  14. package/dist/components/ProductCard/props.js +3 -3
  15. package/dist/components/ProductCard/stories/ProductCard.stories.js +2 -2
  16. package/dist/components/SearchBox/SearchBox.js +22 -0
  17. package/dist/components/SearchBox/SearchBox.styled.js +15 -0
  18. package/dist/components/SearchBox/index.js +8 -0
  19. package/dist/components/SearchBox/props.js +2 -0
  20. package/dist/components/SearchBox/stories/SearchBox.stories.js +23 -0
  21. package/dist/components/ValueProposition/ValueProposition.js +42 -0
  22. package/dist/components/ValueProposition/index.js +8 -0
  23. package/dist/components/ValueProposition/layouts/horizontal/Horizontal.styled.js +18 -0
  24. package/dist/components/ValueProposition/layouts/horizontal/index.js +24 -0
  25. package/dist/components/ValueProposition/layouts/square/Square.styled.js +18 -0
  26. package/dist/components/ValueProposition/layouts/square/index.js +24 -0
  27. package/dist/components/ValueProposition/layouts/vertical/Vertical.styled.js +19 -0
  28. package/dist/components/ValueProposition/layouts/vertical/index.js +25 -0
  29. package/dist/components/ValueProposition/props.js +8 -0
  30. package/dist/components/ValueProposition/stories/ValueProposition.stories.js +44 -0
  31. package/dist/index.js +7 -1
  32. package/package.json +1 -2
  33. /package/dist/components/ProductCard/{types → layouts}/Checklist.js +0 -0
  34. /package/dist/components/ProductCard/{types → layouts}/Standart.js +0 -0
package/dist/components/Divider/Divider.js ADDED
@@ -0,0 +1,39 @@
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 __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var props_1 = require("./props");
19
+ var Divider_styled_1 = require("./Divider.styled");
20
+ var Icon_1 = __importDefault(require("../Icon/Icon"));
21
+ var Divider = function (props) {
22
+ var type = props.type, text = props.text, hasText = props.hasText;
23
+ switch (type) {
24
+ case 'horizontal':
25
+ return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: (0, jsx_runtime_1.jsxs)(Divider_styled_1.Horizontal, __assign({}, props, { className: "caption-medium-12-15", 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
+ 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" }) }));
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" }) }));
30
+ default:
31
+ return ((0, jsx_runtime_1.jsx)(Divider_styled_1.DividerStyled, { children: "default" }));
32
+ }
33
+ };
34
+ Divider.defaultProps = {
35
+ type: props_1.types[0],
36
+ text: "veya",
37
+ hasText: true,
38
+ };
39
+ exports.default = Divider;
package/dist/components/Divider/Divider.styled.js ADDED
@@ -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.Horizontal = exports.DividerStyled = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ exports.DividerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
13
+ exports.Horizontal = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n align-items: center;\n justify-content: space-between;\n grid-template-columns: ", ";\n color: var(--grey-30);\n\n > div:not(:nth-child(2)) {\n height: 1px;\n background: var(--dark-opacity-10);\n }\n\n > div:nth-child(2) {\n padding: 8px;\n }\n"], ["\n display: grid;\n align-items: center;\n justify-content: space-between;\n grid-template-columns: ", ";\n color: var(--grey-30);\n\n > div:not(:nth-child(2)) {\n height: 1px;\n background: var(--dark-opacity-10);\n }\n\n > div:nth-child(2) {\n padding: 8px;\n }\n"])), function (props) { return props.hasText ? '1fr auto 1fr' : '1fr'; });
14
+ var templateObject_1, templateObject_2;
package/dist/components/Divider/index.js ADDED
@@ -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 Divider_1 = require("./Divider");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });
package/dist/components/Divider/props.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.types = void 0;
4
+ exports.types = ['horizontal', 'waveArrowUp', 'waveArrowDown'];
5
+ var DividerDefault = {
6
+ type: exports.types[0],
7
+ };
package/dist/components/Divider/stories/Divider.stories.js ADDED
@@ -0,0 +1,22 @@
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 Divider_1 = __importDefault(require("../Divider"));
8
+ var props_1 = require("../props");
9
+ exports.default = {
10
+ title: 'Components/Divider',
11
+ component: Divider_1.default,
12
+ tags: ['autodocs'],
13
+ argTypes: {
14
+ type: { control: 'select', options: props_1.types },
15
+ }
16
+ };
17
+ exports.Default = {
18
+ args: {
19
+ type: props_1.types[0],
20
+ text: "veya",
21
+ },
22
+ };
package/dist/components/Icon/WaveArrowDown.js ADDED
@@ -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 SvgWaveArrowDown = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 100, height: 49, viewBox: "0 0 100 49", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0.131846 1.4963C-0.14225 1.01683 0.024237 0.405941 0.503705 0.131847C0.983174 -0.14225 1.59406 0.0242386 1.86815 0.503704L0.131846 1.4963ZM52.5601 23.7629L52.3296 22.7898L52.5601 23.7629ZM100 48.5L88.5228 47.2324L95.3592 37.9266L100 48.5ZM2.82334 2.11739C3.1119 2.5883 2.96407 3.20397 2.49316 3.49252C2.02225 3.78107 1.40658 3.63325 1.11803 3.16234L2.82334 2.11739ZM3.24619 6.4016C2.92824 5.95002 3.03656 5.32619 3.48814 5.00823C3.93971 4.69028 4.56354 4.7986 4.8815 5.25018L3.24619 6.4016ZM7.13925 8.23759C7.48726 8.66644 7.42172 9.2962 6.99287 9.64421C6.56402 9.99221 5.93425 9.92667 5.58625 9.49782L7.13925 8.23759ZM8.14284 12.4249C7.76434 12.0227 7.78354 11.3898 8.18573 11.0113C8.58791 10.6328 9.22079 10.652 9.59929 11.0542L8.14284 12.4249ZM12.2618 13.6712C12.6708 14.0423 12.7015 14.6747 12.3304 15.0837C11.9593 15.4927 11.3268 15.5234 10.9178 15.1523L12.2618 13.6712ZM13.9097 17.6476C13.4709 17.3122 13.387 16.6846 13.7224 16.2458C14.0577 15.807 14.6853 15.7232 15.1241 16.0585L13.9097 17.6476ZM18.1786 18.1857C18.6456 18.4806 18.7851 19.0982 18.4902 19.5652C18.1953 20.0321 17.5777 20.1716 17.1107 19.8767L18.1786 18.1857ZM20.505 21.8065C20.0126 21.5563 19.8163 20.9544 20.0665 20.462C20.3167 19.9697 20.9187 19.7733 21.411 20.0235L20.505 21.8065ZM24.8002 21.5476C25.3142 21.7498 25.5669 22.3303 25.3647 22.8443C25.1625 23.3582 24.582 23.6109 24.068 23.4087L24.8002 21.5476ZM27.7677 24.6635C27.2368 24.5113 26.9299 23.9575 27.0822 23.4266C27.2344 22.8957 27.7882 22.5888 28.3191 22.7411L27.7677 24.6635ZM31.9367 23.5969C32.4794 23.6989 32.8367 24.2216 32.7347 24.7644C32.6327 25.3072 32.1099 25.6645 31.5672 25.5625L31.9367 23.5969ZM35.429 26.1091C34.8792 26.0561 34.4766 25.5674 34.5296 25.0177C34.5827 24.468 35.0713 24.0653 35.6211 24.1184L35.429 26.1091ZM39.3435 24.3179C39.8958 24.3245 40.3381 24.7776 40.3315 25.3298C40.325 25.882 39.8719 26.3244 39.3197 26.3178L39.3435 24.3179ZM43.2136 26.21C42.6625 26.2465 42.1861 25.8294 42.1496 25.2784C42.113 24.7273 42.5302 24.2509 43.0812 24.2144L43.2136 26.21ZM46.7962 23.8326C47.3433 23.7569 47.8482 24.139 47.9239 24.686C47.9996 25.2331 47.6175 25.738 47.0704 25.8137L46.7962 23.8326ZM50.892 25.1558C50.351 25.2668 49.8224 24.9182 49.7114 24.3772C49.6004 23.8362 49.949 23.3076 50.49 23.1966L50.892 25.1558ZM54.3636 22.3406C54.9047 22.2301 55.4329 22.5792 55.5434 23.1203C55.6539 23.6615 55.3048 24.1897 54.7636 24.3002L54.3636 22.3406ZM58.7136 23.6468C58.1654 23.714 57.6665 23.3241 57.5993 22.7759C57.5321 22.2278 57.922 21.7289 58.4701 21.6617L58.7136 23.6468ZM62.6435 21.3704C63.1958 21.3642 63.6485 21.8068 63.6547 22.3591C63.6609 22.9113 63.2183 23.364 62.666 23.3703L62.6435 21.3704ZM66.5719 23.6094C66.0251 23.5316 65.645 23.0253 65.7228 22.4785C65.8007 21.9317 66.307 21.5516 66.8538 21.6294L66.5719 23.6094ZM71.0039 22.6253C71.5256 22.8065 71.8016 23.3764 71.6204 23.8981C71.4392 24.4198 70.8693 24.6958 70.3476 24.5146L71.0039 22.6253ZM73.8586 26.1467C73.3827 25.8665 73.2241 25.2535 73.5043 24.7776C73.7846 24.3017 74.3976 24.1431 74.8734 24.4234L73.8586 26.1467ZM78.3274 26.8587C78.7546 27.2087 78.8173 27.8388 78.4673 28.266C78.1174 28.6933 77.4873 28.7559 77.0601 28.406L78.3274 26.8587ZM80.0124 31.0856C79.6187 30.6982 79.6136 30.0651 80.0009 29.6714C80.3883 29.2777 81.0214 29.2726 81.4151 29.66L80.0124 31.0856ZM84.2825 32.6105C84.6615 33.0122 84.643 33.6451 84.2412 34.0241C83.8395 34.4031 83.2066 34.3846 82.8276 33.9829L84.2825 32.6105ZM85.6215 36.9582C85.2423 36.5566 85.2604 35.9237 85.662 35.5445C86.0635 35.1654 86.6964 35.1835 87.0756 35.585L85.6215 36.9582ZM89.8882 38.4987C90.2773 38.8905 90.2752 39.5237 89.8833 39.9129C89.4914 40.3021 88.8583 40.2999 88.4691 39.908L89.8882 38.4987ZM91.4264 42.7732C91.0217 42.3974 90.9983 41.7647 91.3742 41.36C91.75 40.9553 92.3827 40.9319 92.7874 41.3077L91.4264 42.7732ZM95.8048 43.9782C96.2273 44.3338 96.2816 44.9647 95.926 45.3872C95.5704 45.8098 94.9396 45.8641 94.517 45.5084L95.8048 43.9782ZM97.7491 48.0871C97.3084 47.7542 97.221 47.1271 97.5539 46.6864C97.8868 46.2458 98.5139 46.1584 98.9546 46.4913L97.7491 48.0871ZM1.86815 0.503704C2.17683 1.04366 2.49519 1.58185 2.82334 2.11739L1.11803 3.16234C0.779074 2.60917 0.450393 2.05352 0.131846 1.4963L1.86815 0.503704ZM4.8815 5.25018C5.59596 6.26489 6.34825 7.26283 7.13925 8.23759L5.58625 9.49782C4.76539 8.48627 3.98573 7.45193 3.24619 6.4016L4.8815 5.25018ZM9.59929 11.0542C10.4488 11.9568 11.336 12.8311 12.2618 13.6712L10.9178 15.1523C9.95157 14.2755 9.0269 13.3642 8.14284 12.4249L9.59929 11.0542ZM15.1241 16.0585C16.1044 16.8077 17.1223 17.5186 18.1786 18.1857L17.1107 19.8767C16.0024 19.1768 14.9357 18.4317 13.9097 17.6476L15.1241 16.0585ZM21.411 20.0235C22.5037 20.5788 23.6331 21.0884 24.8002 21.5476L24.068 23.4087C22.8407 22.9259 21.6533 22.3901 20.505 21.8065L21.411 20.0235ZM28.3191 22.7411C29.49 23.0769 30.6956 23.3636 31.9367 23.5969L31.5672 25.5625C30.2648 25.3176 28.9985 25.0165 27.7677 24.6635L28.3191 22.7411ZM35.6211 24.1184C36.8305 24.2351 38.0711 24.3028 39.3435 24.3179L39.3197 26.3178C37.9918 26.302 36.695 26.2313 35.429 26.1091L35.6211 24.1184ZM43.0812 24.2144C44.2925 24.1341 45.5307 24.0077 46.7962 23.8326L47.0704 25.8137C45.7588 25.9952 44.4733 26.1265 43.2136 26.21L43.0812 24.2144ZM50.49 23.1966C51.0973 23.072 51.7105 22.9365 52.3296 22.7898L52.7906 24.736C52.1521 24.8872 51.5193 25.0271 50.892 25.1558L50.49 23.1966ZM52.3296 22.7898C53.0246 22.6252 53.7023 22.4756 54.3636 22.3406L54.7636 24.3002C54.1237 24.4308 53.4663 24.5759 52.7906 24.736L52.3296 22.7898ZM58.4701 21.6617C59.9466 21.4806 61.3337 21.3851 62.6435 21.3704L62.666 23.3703C61.4374 23.3841 60.1244 23.4738 58.7136 23.6468L58.4701 21.6617ZM66.8538 21.6294C68.3384 21.8407 69.7131 22.1769 71.0039 22.6253L70.3476 24.5146C69.1815 24.1095 67.9325 23.8031 66.5719 23.6094L66.8538 21.6294ZM74.8734 24.4234C76.0857 25.1373 77.2257 25.9564 78.3274 26.8587L77.0601 28.406C76.0225 27.5561 74.9666 26.7993 73.8586 26.1467L74.8734 24.4234ZM81.4151 29.66C82.3641 30.5938 83.3131 31.5829 84.2825 32.6105L82.8276 33.9829C81.8641 32.9614 80.935 31.9934 80.0124 31.0856L81.4151 29.66ZM87.0756 35.585C87.973 36.5354 88.9048 37.5086 89.8882 38.4987L88.4691 39.908C87.4695 38.9015 86.5251 37.9151 85.6215 36.9582L87.0756 35.585ZM92.7874 41.3077C93.7394 42.1918 94.7417 43.0836 95.8048 43.9782L94.517 45.5084C93.4267 44.5909 92.4 43.6774 91.4264 42.7732L92.7874 41.3077Z", fill: "#9763F6" }) }))); };
40
+ exports.default = SvgWaveArrowDown;
package/dist/components/Icon/WaveArrowUp.js ADDED
@@ -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 SvgWaveArrowUp = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 97, height: 53, viewBox: "0 0 97 53", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "Shape", children: (0, jsx_runtime_1.jsx)("path", { id: "Vector 48", d: "M0.131846 51.5037C-0.14225 51.9832 0.024237 52.5941 0.503705 52.8682C0.983174 53.1423 1.59406 52.9758 1.86815 52.4963L0.131846 51.5037ZM44 29L43.7695 29.9731L44 29ZM97 4L85.9916 0.514655L88.4774 11.7909L97 4ZM2.827 50.819C3.10143 50.3397 2.93537 49.7287 2.45609 49.4543C1.97682 49.1799 1.36582 49.3459 1.09138 49.8252L2.827 50.819ZM3.03849 46.47C2.75708 46.9452 2.9142 47.5585 3.38941 47.8399C3.86463 48.1213 4.47799 47.9642 4.75939 47.489L3.03849 46.47ZM6.76009 44.225C7.05748 43.7597 6.92131 43.1413 6.45594 42.8439C5.99056 42.5465 5.37221 42.6827 5.07482 43.1481L6.76009 44.225ZM7.2725 39.9001C6.94933 40.3479 7.05043 40.973 7.49829 41.2961C7.94616 41.6193 8.5712 41.5182 8.89437 41.0703L7.2725 39.9001ZM11.2229 38.0935C11.5817 37.6737 11.5323 37.0425 11.1124 36.6836C10.6926 36.3248 10.0614 36.3742 9.70255 36.7941L11.2229 38.0935ZM12.4401 33.9147C12.0371 34.2924 12.0167 34.9252 12.3944 35.3282C12.7721 35.7311 13.4049 35.7516 13.8079 35.3739L12.4401 33.9147ZM16.6872 33.0136C17.138 32.6944 17.2446 32.0703 16.9254 31.6196C16.6063 31.1689 15.9821 31.0622 15.5314 31.3814L16.6872 33.0136ZM18.9749 29.318C18.4805 29.5641 18.2792 30.1644 18.5254 30.6588C18.7715 31.1533 19.3718 31.3545 19.8662 31.1084L18.9749 29.318ZM23.2985 29.724C23.8251 29.5576 24.1171 28.9958 23.9507 28.4692C23.7843 27.9426 23.2225 27.6506 22.6959 27.817L23.2985 29.724ZM26.5899 26.8921C26.045 26.9819 25.676 27.4964 25.7658 28.0414C25.8556 28.5863 26.3702 28.9553 26.9151 28.8654L26.5899 26.8921ZM30.638 28.4899C31.1898 28.4669 31.6185 28.0009 31.5955 27.4491C31.5726 26.8973 31.1066 26.4686 30.5548 26.4916L30.638 28.4899ZM34.5145 26.531C33.9632 26.4989 33.4902 26.9198 33.4581 27.4712C33.426 28.0225 33.847 28.4955 34.3983 28.5276L34.5145 26.531ZM38.1559 28.9043C38.7029 28.9808 39.2082 28.5993 39.2846 28.0523C39.361 27.5054 38.9796 27 38.4326 26.9236L38.1559 28.9043ZM42.3057 27.5991C41.7649 27.4871 41.2357 27.8346 41.1236 28.3754C41.0115 28.9162 41.3591 29.4455 41.8999 29.5575L42.3057 27.5991ZM45.7053 30.3901C46.2476 30.4947 46.772 30.1399 46.8766 29.5977C46.9813 29.0554 46.6264 28.531 46.0842 28.4263L45.7053 30.3901ZM49.7788 28.9419C49.2282 28.8981 48.7464 29.3089 48.7026 29.8595C48.6588 30.41 49.0696 30.8918 49.6202 30.9356L49.7788 28.9419ZM53.6122 30.9467C54.1626 30.9006 54.5714 30.4171 54.5253 29.8668C54.4792 29.3164 53.9957 28.9076 53.4453 28.9537L53.6122 30.9467ZM56.9766 28.274C56.4499 28.4403 56.1578 29.0021 56.3241 29.5288C56.4905 30.0554 57.0522 30.3475 57.5789 30.1812L56.9766 28.274ZM61.2837 28.4897C61.7554 28.2025 61.905 27.5872 61.6178 27.1155C61.3305 26.6438 60.7153 26.4942 60.2436 26.7814L61.2837 28.4897ZM63.1644 24.5881C62.7512 24.9545 62.7132 25.5865 63.0797 25.9998C63.4461 26.413 64.0781 26.4509 64.4913 26.0845L63.1644 24.5881ZM67.2948 23.3341C67.6749 22.9334 67.658 22.3004 67.2573 21.9204C66.8565 21.5404 66.2236 21.5572 65.8436 21.958L67.2948 23.3341ZM68.4434 19.1553C68.068 19.5605 68.0921 20.1932 68.4973 20.5685C68.9024 20.9439 69.5351 20.9197 69.9105 20.5146L68.4434 19.1553ZM72.5376 17.7699C72.9285 17.3798 72.9293 16.7466 72.5392 16.3556C72.1491 15.9647 71.516 15.9639 71.125 16.354L72.5376 17.7699ZM73.9843 13.6869C73.5666 14.0482 73.5209 14.6798 73.8823 15.0974C74.2436 15.5151 74.8751 15.5608 75.2928 15.1994L73.9843 13.6869ZM78.2303 12.8704C78.6779 12.5468 78.7785 11.9217 78.4549 11.4741C78.1314 11.0265 77.5063 10.9259 77.0587 11.2495L78.2303 12.8704ZM80.3421 9.09862C79.8667 9.37972 79.7092 9.99298 79.9903 10.4684C80.2714 10.9438 80.8847 11.1013 81.3601 10.8202L80.3421 9.09862ZM84.6727 9.05693C85.1711 8.81901 85.3823 8.2221 85.1444 7.72369C84.9065 7.22527 84.3095 7.0141 83.8111 7.25202L84.6727 9.05693ZM87.4102 5.71212C86.8942 5.90909 86.6356 6.48705 86.8326 7.00301C87.0296 7.51898 87.6075 7.77757 88.1235 7.58059L87.4102 5.71212ZM91.696 6.36447C92.2247 6.20487 92.5239 5.64688 92.3643 5.11816C92.2047 4.58944 91.6467 4.2902 91.118 4.4498L91.696 6.36447ZM94.8719 3.44524C94.3343 3.57182 94.0011 4.11023 94.1277 4.64782C94.2543 5.1854 94.7927 5.51858 95.3303 5.39199L94.8719 3.44524ZM1.86815 52.4963C2.18939 51.9344 2.50814 51.3759 2.827 50.819L1.09138 49.8252C0.77212 50.3828 0.452081 50.9435 0.131846 51.5037L1.86815 52.4963ZM4.75939 47.489C5.41813 46.3766 6.08194 45.2862 6.76009 44.225L5.07482 43.1481C4.38114 44.2336 3.70513 45.3442 3.03849 46.47L4.75939 47.489ZM8.89437 41.0703C9.64324 40.0325 10.4161 39.0374 11.2229 38.0935L9.70255 36.7941C8.85484 37.7858 8.04825 38.8249 7.2725 39.9001L8.89437 41.0703ZM13.8079 35.3739C14.7183 34.5204 15.6746 33.7307 16.6872 33.0136L15.5314 31.3814C14.4379 32.1557 13.4113 33.0043 12.4401 33.9147L13.8079 35.3739ZM19.8662 31.1084C20.9439 30.572 22.0847 30.1076 23.2985 29.724L22.6959 27.817C21.3825 28.232 20.1451 28.7355 18.9749 29.318L19.8662 31.1084ZM26.9151 28.8654C28.0905 28.6717 29.3293 28.5443 30.638 28.4899L30.5548 26.4916C29.1689 26.5493 27.8492 26.6845 26.5899 26.8921L26.9151 28.8654ZM34.3983 28.5276C35.5972 28.5974 36.8485 28.7217 38.1559 28.9043L38.4326 26.9236C37.0753 26.734 35.7704 26.6041 34.5145 26.531L34.3983 28.5276ZM41.8999 29.5575C42.5119 29.6844 43.135 29.8228 43.7695 29.9731L44.2305 28.0269C43.5782 27.8724 42.9367 27.7299 42.3057 27.5991L41.8999 29.5575ZM43.7695 29.9731C44.4342 30.1305 45.0791 30.2693 45.7053 30.3901L46.0842 28.4263C45.4869 28.3111 44.8694 28.1783 44.2305 28.0269L43.7695 29.9731ZM49.6202 30.9356C51.0537 31.0497 52.3782 31.0501 53.6122 30.9467L53.4453 28.9537C52.3306 29.047 51.1156 29.0483 49.7788 28.9419L49.6202 30.9356ZM57.5789 30.1812C58.9299 29.7545 60.1504 29.1797 61.2837 28.4897L60.2436 26.7814C59.2364 27.3946 58.162 27.8996 56.9766 28.274L57.5789 30.1812ZM64.4913 26.0845C65.4536 25.2312 66.3763 24.3028 67.2948 23.3341L65.8436 21.958C64.9436 22.9071 64.0654 23.7891 63.1644 24.5881L64.4913 26.0845ZM69.9105 20.5146C70.7476 19.611 71.6132 18.6921 72.5376 17.7699L71.125 16.354C70.1733 17.3035 69.2871 18.2446 68.4434 19.1553L69.9105 20.5146ZM75.2928 15.1994C76.204 14.4111 77.1774 13.6314 78.2303 12.8704L77.0587 11.2495C75.9542 12.0477 74.9352 12.8642 73.9843 13.6869L75.2928 15.1994ZM81.3601 10.8202C82.3909 10.2107 83.4916 9.62074 84.6727 9.05693L83.8111 7.25202C82.5762 7.84151 81.4234 8.45931 80.3421 9.09862L81.3601 10.8202ZM88.1235 7.58059C89.2478 7.15137 90.4365 6.74464 91.696 6.36447L91.118 4.4498C89.814 4.84342 88.5801 5.26549 87.4102 5.71212L88.1235 7.58059Z", fill: "#9763F6" }) }) }))); };
40
+ exports.default = SvgWaveArrowUp;
package/dist/components/Icon/index.js CHANGED
@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.Call = exports.Calendar = exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
29
29
  exports.KeyboardClose = exports.Keyboard = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Grid = exports.Graph = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.Danger = exports.CloseSquare = exports.CloseMiniHover = exports.Closemini = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckMark = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Chat = exports.Chart = exports.Category = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.CallSilent = exports.CallMissed = exports.Calling = void 0;
30
30
  exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.ProfilNamePassive = exports.ProfilName = exports.Profile = exports.PriceTag = exports.Pointinghand = exports.PointFinger = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.More = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading = exports.Live = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = void 0;
31
- exports.iconList = exports.Youtube = exports.Work = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TickSquare = exports.TicketStar = exports.Ticket = exports.ThreeUser = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = void 0;
31
+ exports.iconList = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TickSquare = exports.TicketStar = exports.Ticket = exports.ThreeUser = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = void 0;
32
32
  var jsx_runtime_1 = require("react/jsx-runtime");
33
33
  var Activity_1 = __importDefault(require("./Activity"));
34
34
  Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -396,6 +396,10 @@ var Wallet_1 = __importDefault(require("./Wallet"));
396
396
  Object.defineProperty(exports, "Wallet", { enumerable: true, get: function () { return Wallet_1.default; } });
397
397
  var Watch_1 = __importDefault(require("./Watch"));
398
398
  Object.defineProperty(exports, "Watch", { enumerable: true, get: function () { return Watch_1.default; } });
399
+ var WaveArrowDown_1 = __importDefault(require("./WaveArrowDown"));
400
+ Object.defineProperty(exports, "WaveArrowDown", { enumerable: true, get: function () { return WaveArrowDown_1.default; } });
401
+ var WaveArrowUp_1 = __importDefault(require("./WaveArrowUp"));
402
+ Object.defineProperty(exports, "WaveArrowUp", { enumerable: true, get: function () { return WaveArrowUp_1.default; } });
399
403
  var Work_1 = __importDefault(require("./Work"));
400
404
  Object.defineProperty(exports, "Work", { enumerable: true, get: function () { return Work_1.default; } });
401
405
  var Youtube_1 = __importDefault(require("./Youtube"));
@@ -1133,6 +1137,14 @@ exports.iconList = {
1133
1137
  var props = __rest(_a, []);
1134
1138
  return (0, jsx_runtime_1.jsx)(Watch_1.default, __assign({}, props));
1135
1139
  },
1140
+ WaveArrowDown: function (_a) {
1141
+ var props = __rest(_a, []);
1142
+ return (0, jsx_runtime_1.jsx)(WaveArrowDown_1.default, __assign({}, props));
1143
+ },
1144
+ WaveArrowUp: function (_a) {
1145
+ var props = __rest(_a, []);
1146
+ return (0, jsx_runtime_1.jsx)(WaveArrowUp_1.default, __assign({}, props));
1147
+ },
1136
1148
  Work: function (_a) {
1137
1149
  var props = __rest(_a, []);
1138
1150
  return (0, jsx_runtime_1.jsx)(Work_1.default, __assign({}, props));
package/dist/components/Modal/Modal.js CHANGED
@@ -32,6 +32,7 @@ var Modal_styled_1 = require("./Modal.styled");
32
32
  var Icon_1 = __importDefault(require("../Icon/Icon"));
33
33
  var Button_1 = __importDefault(require("../Button"));
34
34
  var react_device_detect_1 = require("react-device-detect");
35
+ var Divider_1 = __importDefault(require("../Divider"));
35
36
  var Modal = function (props) {
36
37
  var _a = (0, react_1.useState)(props.show), showModal = _a[0], setShowModal = _a[1];
37
38
  (0, react_1.useEffect)(function () {
@@ -50,7 +51,7 @@ var Modal = function (props) {
50
51
  };
51
52
  var onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, onBack = props.onBack, other = __rest(props, ["onPrimaryAction", "onSecondaryAction", "onBack"]);
52
53
  return (showModal &&
53
- react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({}, other, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "header", children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onBack, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) })) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", { className: "title", children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { className: props.titleAlignment === "left" ? (react_device_detect_1.isMobile ? "title-semi-bold-16-19" : "headline-semi-bold-18-22") : "headline-semi-bold-20-24", children: props.title })), props.titleDescription && ((0, jsx_runtime_1.jsx)("p", { className: "body-regular-14-17", children: props.titleDescription }))] }), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onClose, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "content", children: (0, jsx_runtime_1.jsx)("div", { className: "contentInner", children: props.children }) }), (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", { className: "buttons", children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, children: props.primaryButtonText })), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && ((0, jsx_runtime_1.jsx)("div", { className: "divider caption-medium-12-15", children: "veya" })), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, children: props.secondaryButtonText })] }))] })] })) }), document.body));
54
+ react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({}, other, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "header", children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onBack, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) })) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", { className: "title", children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { className: props.titleAlignment === "left" ? (react_device_detect_1.isMobile ? "title-semi-bold-16-19" : "headline-semi-bold-18-22") : "headline-semi-bold-20-24", children: props.title })), props.titleDescription && ((0, jsx_runtime_1.jsx)("p", { className: "body-regular-14-17", children: props.titleDescription }))] }), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onClose, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "content", children: (0, jsx_runtime_1.jsx)("div", { className: "contentInner", children: props.children }) }), (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", { className: "buttons", children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, children: props.primaryButtonText })), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && ((0, jsx_runtime_1.jsx)(Divider_1.default, {})), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, children: props.secondaryButtonText })] }))] })] })) }), document.body));
54
55
  };
55
56
  exports.default = Modal;
56
57
  Modal.defaultProps = {
package/dist/components/Modal/Modal.styled.js CHANGED
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.OverlayStyled = exports.ModalStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\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\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\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\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n gap: ", ";\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\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\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n gap: ", ";\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"])), function (props) {
14
14
  switch (props.size) {
15
15
  case 'small':
16
16
  return "375px";
@@ -30,6 +30,15 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
30
30
  default:
31
31
  return 'column';
32
32
  }
33
+ }, function (props) {
34
+ switch (props.buttonsAlignment) {
35
+ case 'vertical':
36
+ return '8px';
37
+ case 'horizontal':
38
+ return '0';
39
+ default:
40
+ return '0';
41
+ }
33
42
  }, function (props) { return props.buttonsAlignment === 'horizontal' ? (props.size === 'small' ? '16px' : '24px') : '0'; }, devices_1.devices.sm);
34
43
  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"])));
35
44
  var templateObject_1, templateObject_2;
package/dist/components/ProductCard/ProductCard.js CHANGED
@@ -17,14 +17,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
17
17
  var jsx_runtime_1 = require("react/jsx-runtime");
18
18
  var props_1 = require("./props");
19
19
  var prop_types_1 = __importDefault(require("prop-types"));
20
- var Checklist_1 = __importDefault(require("./types/Checklist"));
21
- var Standart_1 = __importDefault(require("./types/Standart"));
20
+ var Checklist_1 = __importDefault(require("./layouts/Checklist"));
21
+ var Standart_1 = __importDefault(require("./layouts/Standart"));
22
+ var Horizontal_1 = __importDefault(require("./layouts/Horizontal"));
22
23
  var ProductCard = function (props) {
23
- switch (props.type) {
24
+ switch (props.layout) {
24
25
  case 'checklist':
25
26
  return (0, jsx_runtime_1.jsx)(Checklist_1.default, __assign({}, props));
26
27
  case 'standart':
27
28
  return (0, jsx_runtime_1.jsx)(Standart_1.default, __assign({}, props));
29
+ case 'horizontal':
30
+ return (0, jsx_runtime_1.jsx)(Horizontal_1.default, __assign({}, props));
28
31
  default:
29
32
  return (0, jsx_runtime_1.jsx)(Checklist_1.default, __assign({}, props));
30
33
  }
@@ -42,6 +45,6 @@ ProductCard.defaultProps = {
42
45
  description: "10.9” Retina Display, 12MP Rear Camera, Touch ID,...",
43
46
  productChecked: false,
44
47
  disabled: false,
45
- type: props_1.types[0],
48
+ layout: props_1.layouts[0],
46
49
  //checkboxId : `productCheckBox_${(Math.random() + 1).toString(36).substring(2)}`
47
50
  };
package/dist/components/ProductCard/ProductCard.styled.js CHANGED
@@ -7,9 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.StandartStyled = exports.ChecklistStyled = void 0;
10
+ 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
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 .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: 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 @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 .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: 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, devices_1.devices.sm, devices_1.devices.sm);
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 width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .discount{\n position: absolute;\n left: 9px;\n top: 12px;\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: 90px;\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: 27px;\n left: -7px;\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 padding-bottom: 148px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\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 }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 32px;\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: end;\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\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 }\n .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\n \n }\n }\n }\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .discount{\n position: absolute;\n left: 9px;\n top: 12px;\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: 90px;\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: 27px;\n left: -7px;\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 padding-bottom: 148px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\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 }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 32px;\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: end;\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\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 }\n .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\n \n }\n }\n }\n"])), function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
15
- var templateObject_1, templateObject_2;
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 &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\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 width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\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 }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{\n \n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\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 width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\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 }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{\n \n }\n }\n }\n"])), devices_1.devices.sm);
16
+ var templateObject_1, templateObject_2, templateObject_3;
package/dist/components/ProductCard/layouts/Horizontal.js ADDED
@@ -0,0 +1,29 @@
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 __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var ProductCard_styled_1 = require("../ProductCard.styled");
19
+ var react_device_detect_1 = require("react-device-detect");
20
+ var classnames_1 = __importDefault(require("classnames"));
21
+ var Horizontal = function (props) {
22
+ var discountRate = props.discountRate, image = props.image, hasDiscount = props.hasDiscount, title = props.title, description = props.description, oldPrice = props.oldPrice, oldPricePeriod = props.oldPricePeriod, price = props.price, period = props.period;
23
+ var LinkComponent = function (_a) {
24
+ var item = _a.item, children = _a.children;
25
+ return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
26
+ };
27
+ return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.HorizontalStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsxs)("div", { className: "horizontalWrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', (react_device_detect_1.isMobile ? 'caption-semi-bold-11-13' : 'title-semi-bold-16-19')), children: title }), !react_device_detect_1.isMobile && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', 'body-medium-14-17'), children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "priceContent", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("price", (react_device_detect_1.isMobile ? 'caption-extra-bold-12-15' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("period", (react_device_detect_1.isMobile ? 'caption-regular-12-15' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] }) }) })));
28
+ };
29
+ exports.default = Horizontal;
package/dist/components/ProductCard/props.js CHANGED
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.types = exports.contentAlignments = void 0;
3
+ exports.layouts = exports.contentAlignments = void 0;
4
4
  exports.contentAlignments = ['left', 'center'];
5
- exports.types = ['checklist', 'standart'];
5
+ exports.layouts = ['checklist', 'standart', 'horizontal'];
6
6
  var ProductCardDefault = {
7
7
  hasCheckbox: false,
8
8
  contentAlignment: exports.contentAlignments[0],
9
- type: exports.types[0],
9
+ layout: exports.layouts[0],
10
10
  productChecked: false,
11
11
  disabled: false,
12
12
  };
package/dist/components/ProductCard/stories/ProductCard.stories.js CHANGED
@@ -13,7 +13,7 @@ exports.default = {
13
13
  tags: ['autodocs'],
14
14
  argTypes: {
15
15
  contentAlignment: { control: 'select', options: props_1.contentAlignments },
16
- type: { control: 'select', options: props_1.types },
16
+ layout: { control: 'select', options: props_1.layouts },
17
17
  disabled: { control: 'boolean' },
18
18
  hasDiscount: { control: 'boolean' },
19
19
  }
@@ -33,7 +33,7 @@ exports.Default = {
33
33
  period: "hafta",
34
34
  content: "Content",
35
35
  contentAlignment: "left",
36
- type: "checklist",
36
+ layout: "checklist",
37
37
  productCardOnChange: function () { return console.log("test"); },
38
38
  image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
39
39
  },
package/dist/components/SearchBox/SearchBox.js ADDED
@@ -0,0 +1,22 @@
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
+ var jsx_runtime_1 = require("react/jsx-runtime");
7
+ var SearchBox_styled_1 = require("./SearchBox.styled");
8
+ var Icon_1 = __importDefault(require("../Icon/Icon"));
9
+ var Spinner_1 = __importDefault(require("../Spinner"));
10
+ var SearchBox = function (props) {
11
+ var onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder;
12
+ var LoadingContent = function () {
13
+ return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "32px", height: "32px" }) });
14
+ };
15
+ return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inputWrapper", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus }), (0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) })] }), showResultList && ((0, jsx_runtime_1.jsx)("div", { className: "resultList", children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children }))] }));
16
+ };
17
+ SearchBox.defaultProps = {
18
+ showResultList: false,
19
+ isLoading: false,
20
+ placeholder: "Teknolojik ürün ara...",
21
+ };
22
+ exports.default = SearchBox;
package/dist/components/SearchBox/SearchBox.styled.js ADDED
@@ -0,0 +1,15 @@
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.LoadingStyled = exports.SearchBoxStyled = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ var devices_1 = require("../../constants/devices");
13
+ exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 56px;\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-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\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\n svg {\n path, circle {\n stroke: var(--primary);\n }\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: 536px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"], ["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 56px;\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-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\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\n svg {\n path, circle {\n stroke: var(--primary);\n }\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: 536px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"])), devices_1.devices.md, devices_1.devices.md);
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
+ var templateObject_1, templateObject_2;
package/dist/components/SearchBox/index.js ADDED
@@ -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 SearchBox_1 = require("./SearchBox");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SearchBox_1).default; } });
package/dist/components/SearchBox/props.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/dist/components/SearchBox/stories/SearchBox.stories.js ADDED
@@ -0,0 +1,23 @@
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 SearchBox_1 = __importDefault(require("../SearchBox"));
8
+ exports.default = {
9
+ title: 'Components/SearchBox',
10
+ component: SearchBox_1.default,
11
+ tags: ['autodocs'],
12
+ argTypes: {}
13
+ };
14
+ exports.Default = {
15
+ args: {
16
+ onBlur: function (e) { return console.log(e, "onBlur"); },
17
+ onFocus: function (e) { return console.log(e, "onFocus"); },
18
+ onKeyUp: function (e) { return console.log(e.target.value, "onKeyUp"); },
19
+ placeholder: "Teknolojik ürün ara...",
20
+ isLoading: false,
21
+ showResultList: false,
22
+ },
23
+ };
package/dist/components/ValueProposition/ValueProposition.js ADDED
@@ -0,0 +1,42 @@
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 __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var horizontal_1 = __importDefault(require("./layouts/horizontal"));
19
+ var vertical_1 = __importDefault(require("./layouts/vertical"));
20
+ var square_1 = __importDefault(require("./layouts/square"));
21
+ var ValueProposition = function (props) {
22
+ switch (props.layout) {
23
+ case 'vertical':
24
+ return (0, jsx_runtime_1.jsx)(vertical_1.default, __assign({}, props));
25
+ case 'horizontal':
26
+ return (0, jsx_runtime_1.jsx)(horizontal_1.default, __assign({}, props));
27
+ case 'square':
28
+ return (0, jsx_runtime_1.jsx)(square_1.default, __assign({}, props));
29
+ default:
30
+ return (0, jsx_runtime_1.jsx)(horizontal_1.default, __assign({}, props));
31
+ }
32
+ };
33
+ ValueProposition.defaultProps = {
34
+ layout: 'vertical',
35
+ title: 'Kurye ile eve teslim',
36
+ isInverted: false,
37
+ hasNumber: false,
38
+ hasDivider: false,
39
+ dividerType: 'horizontal',
40
+ number: 1,
41
+ };
42
+ exports.default = ValueProposition;
package/dist/components/ValueProposition/index.js ADDED
@@ -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 ValueProposition_1 = require("./ValueProposition");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ValueProposition_1).default; } });
package/dist/components/ValueProposition/layouts/horizontal/Horizontal.styled.js ADDED
@@ -0,0 +1,18 @@
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.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.HorizontalStyled = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ var devices_1 = require("../../../../constants/devices");
13
+ exports.HorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 2rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n @media only screen and ", " {\n aspect-ratio: 1/1;\n padding: 1rem;\n text-align: center;\n }\n"], ["\n padding: 2rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n @media only screen and ", " {\n aspect-ratio: 1/1;\n padding: 1rem;\n text-align: center;\n }\n"])), devices_1.devices.md);
14
+ exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1rem;\n"], ["\n margin-top: 1rem;\n"])));
15
+ exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n @media only screen and ", " {\n min-height: 38px;\n color: var(--primary);\n }\n"], ["\n display: block;\n @media only screen and ", " {\n min-height: 38px;\n color: var(--primary);\n }\n"])), devices_1.devices.md);
16
+ exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n min-height: 76px;\n @media only screen and ", " {\n display: none;\n }\n"], ["\n margin: 1rem 0 0 0;\n min-height: 76px;\n @media only screen and ", " {\n display: none;\n }\n"])), devices_1.devices.md);
17
+ exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
18
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/components/ValueProposition/layouts/horizontal/index.js ADDED
@@ -0,0 +1,24 @@
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 __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var Horizontal_styled_1 = require("./Horizontal.styled");
19
+ var classnames_1 = __importDefault(require("classnames"));
20
+ var Horizontal = function (props) {
21
+ var image = props.image, title = props.title, description = props.description, isMobile = props.isMobile;
22
+ return ((0, jsx_runtime_1.jsxs)(Horizontal_styled_1.HorizontalStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Horizontal_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Horizontal_styled_1.Title, { className: (0, classnames_1.default)((isMobile ? 'title-bold-16-19' : 'headline-bold-20-24')), dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(Horizontal_styled_1.Description, { className: (0, classnames_1.default)('title-regular-16-19'), children: description })] })] })));
23
+ };
24
+ exports.default = Horizontal;
package/dist/components/ValueProposition/layouts/square/Square.styled.js ADDED
@@ -0,0 +1,18 @@
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.SquareDivider = exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.SquareStyled = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ exports.SquareStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 250px;\n color: var(--dark);\n text-align: center;\n align-content: center;\n position: relative; \n"], ["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 250px;\n color: var(--dark);\n text-align: center;\n align-content: center;\n position: relative; \n"])));
13
+ exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1.5rem;\n"], ["\n margin-top: 1.5rem;\n"])));
14
+ exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n min-height: 38px;\n"], ["\n display: block;\n min-height: 38px;\n"])));
15
+ exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n min-height: 76px;\n"], ["\n margin: 1rem 0 0 0;\n min-height: 76px;\n"])));
16
+ exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n text-align: center;\n"], ["\n display: block;\n text-align: center;\n"])));
17
+ exports.SquareDivider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n"])));
18
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/components/ValueProposition/layouts/square/index.js ADDED
@@ -0,0 +1,24 @@
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 __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var Square_styled_1 = require("./Square.styled");
19
+ var Divider_1 = __importDefault(require("../../../Divider"));
20
+ var Square = function (props) {
21
+ var image = props.image, title = props.title, dividerType = props.dividerType, hasDivider = props.hasDivider;
22
+ return ((0, jsx_runtime_1.jsxs)(Square_styled_1.SquareStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Square_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsx)(Square_styled_1.TextWrapper, { children: (0, jsx_runtime_1.jsx)(Square_styled_1.Title, { className: 'title-semi-bold-16-19', dangerouslySetInnerHTML: { __html: title } }) }), hasDivider && (0, jsx_runtime_1.jsx)(Square_styled_1.SquareDivider, { children: (0, jsx_runtime_1.jsx)(Divider_1.default, { type: dividerType }) })] })));
23
+ };
24
+ exports.default = Square;
package/dist/components/ValueProposition/layouts/vertical/Vertical.styled.js ADDED
@@ -0,0 +1,19 @@
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.Number = exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.VerticalStyled = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ var devices_1 = require("../../../../constants/devices");
13
+ exports.VerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 4.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n max-width: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n min-height: 333px;\n @media only screen and ", " {\n grid-template-columns: 1fr;\n min-height: initial;\n padding: 3.5rem 3rem;\n }\n"], ["\n padding: 0 4.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n max-width: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n min-height: 333px;\n @media only screen and ", " {\n grid-template-columns: 1fr;\n min-height: initial;\n padding: 3.5rem 3rem;\n }\n"])), devices_1.devices.md);
14
+ exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1rem;\n"], ["\n margin-top: 1rem;\n"])));
15
+ exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
16
+ exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n"], ["\n margin: 1rem 0 0 0;\n"])));
17
+ exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: 2rem;\n @media only screen and ", " {\n display: none;\n }\n"], ["\n margin-right: 2rem;\n @media only screen and ", " {\n display: none;\n }\n"])), devices_1.devices.md);
18
+ exports.Number = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 30px 0 #eae9f0;\n text-shadow: 4px 4px 15px 0 rgba(151,99,246,.5);\n color: var(--primary-opacity-75);\n width: 124px;\n height: 124px;\n align-items: center;\n justify-content: center;\n display: flex;\n left: ", ";\n right: ", ";\n top: -3rem;\n @media only screen and ", " {\n width:80px;\n height: 80px;\n left: 0!important;\n right: auto!important;\n top: -2.5rem\n }\n"], ["\n position: absolute;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 30px 0 #eae9f0;\n text-shadow: 4px 4px 15px 0 rgba(151,99,246,.5);\n color: var(--primary-opacity-75);\n width: 124px;\n height: 124px;\n align-items: center;\n justify-content: center;\n display: flex;\n left: ", ";\n right: ", ";\n top: -3rem;\n @media only screen and ", " {\n width:80px;\n height: 80px;\n left: 0!important;\n right: auto!important;\n top: -2.5rem\n }\n"])), function (props) { return props.numberAlignment === "left" ? '-2rem' : 'auto'; }, function (props) { return props.numberAlignment === "left" ? 'auto' : '-2rem'; }, devices_1.devices.md);
19
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/components/ValueProposition/layouts/vertical/index.js ADDED
@@ -0,0 +1,25 @@
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 __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var Vertical_styled_1 = require("../vertical/Vertical.styled");
19
+ var classnames_1 = __importDefault(require("classnames"));
20
+ var react_device_detect_1 = require("react-device-detect");
21
+ var Vertical = function (props) {
22
+ var image = props.image, title = props.title, description = props.description, numberAlignment = props.numberAlignment, hasNumber = props.hasNumber, number = props.number;
23
+ return ((0, jsx_runtime_1.jsxs)(Vertical_styled_1.VerticalStyled, __assign({}, props, { children: [hasNumber && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Number, { numberAlignment: numberAlignment, className: (react_device_detect_1.isMobile ? 'headline-black-48-58' : 'display-black-72-87'), children: number }), (0, jsx_runtime_1.jsx)(Vertical_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Vertical_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Vertical_styled_1.Title, { className: (0, classnames_1.default)((react_device_detect_1.isMobile ? 'title-bold-16-19' : 'headline-bold-20-24')), children: title }), description && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Description, { className: (0, classnames_1.default)((react_device_detect_1.isMobile ? 'body-regular-13-16' : 'title-regular-16-19')), children: description })] })] })));
24
+ };
25
+ exports.default = Vertical;
package/dist/components/ValueProposition/props.js ADDED
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.alignments = exports.layouts = void 0;
4
+ exports.layouts = ['vertical', 'horizontal', 'square'];
5
+ exports.alignments = ['left', 'right'];
6
+ var ValuePropositionDefault = {
7
+ layout: exports.layouts[0],
8
+ };
package/dist/components/ValueProposition/stories/ValueProposition.stories.js ADDED
@@ -0,0 +1,44 @@
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 __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.Default = void 0;
18
+ var jsx_runtime_1 = require("react/jsx-runtime");
19
+ var ValueProposition_1 = __importDefault(require("../ValueProposition"));
20
+ var props_1 = require("../props");
21
+ var props_2 = require("../../Divider/props");
22
+ exports.default = {
23
+ title: 'Components/ValueProposition',
24
+ component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "3rem" }, children: (0, jsx_runtime_1.jsx)(ValueProposition_1.default, __assign({}, props)) }); },
25
+ tags: ['autodocs'],
26
+ argTypes: {
27
+ layout: { control: 'select', options: props_1.layouts },
28
+ dividerType: { control: 'select', options: props_2.types },
29
+ numberAlignment: { control: 'select', options: props_1.alignments },
30
+ }
31
+ };
32
+ exports.Default = {
33
+ args: {
34
+ image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/logo.svg", width: 164, height: 164 }),
35
+ title: 'Kurye ile eve teslim',
36
+ description: 'Kargoya gitmene hiç gerek yok! Cihazı istediğin gün adresine teslim ediyoruz ve tekrar adresinden teslim alıyoruz.',
37
+ hasNumber: false,
38
+ isInverted: false,
39
+ layout: 'horizontal',
40
+ number: 1,
41
+ numberAlignment: 'left',
42
+ hasDivider: false,
43
+ },
44
+ };
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
6
+ exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
7
7
  var Button_1 = __importDefault(require("./components/Button"));
8
8
  exports.Button = Button_1.default;
9
9
  var Spinner_1 = __importDefault(require("./components/Spinner"));
@@ -38,3 +38,9 @@ var ActionButton_1 = __importDefault(require("./components/ActionButton/ActionBu
38
38
  exports.ActionButton = ActionButton_1.default;
39
39
  var Textarea_1 = __importDefault(require("./components/Textarea"));
40
40
  exports.Textarea = Textarea_1.default;
41
+ var ValueProposition_1 = __importDefault(require("./components/ValueProposition"));
42
+ exports.ValueProposition = ValueProposition_1.default;
43
+ var SearchBox_1 = __importDefault(require("./components/SearchBox"));
44
+ exports.SearchBox = SearchBox_1.default;
45
+ var Divider_1 = __importDefault(require("./components/Divider"));
46
+ exports.Divider = Divider_1.default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "1.56.0",
3
+ "version": "1.58.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -23,7 +23,6 @@
23
23
  "@types/styled-components": "^5.0.1",
24
24
  "classnames": "^2.3.2",
25
25
  "css-loader": "^6.7.3",
26
- "events": "^3.3.0",
27
26
  "plop": "^3.1.2",
28
27
  "react": "^18.2.0",
29
28
  "react-circular-progressbar": "^2.1.0",