krl-alfred 1.72.0 → 1.72.2
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/Button/Button.styled.js +1 -1
- package/dist/components/Icon/BoxDown.js +40 -0
- package/dist/components/Icon/BoxLeft.js +40 -0
- package/dist/components/Icon/CargoBack.js +40 -0
- package/dist/components/Icon/Confetti.js +44 -0
- package/dist/components/Icon/Search.js +1 -1
- package/dist/components/Icon/index.js +29 -4
- package/dist/components/InfoBox/InfoBox.js +31 -1
- package/dist/components/InfoBox/InfoBox.styled.js +7 -4
- package/dist/components/InfoBox/stories/InfoBox.stories.js +3 -2
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/SelectBox/SelectBox.js +3 -2
- package/dist/components/SelectBox/SelectBox.styled.js +1 -1
- package/dist/components/SelectBox/stories/SelectBox.stories.js +5 -1
- package/dist/components/Toast/Toast.js +5 -2
- package/package.json +1 -1
|
@@ -34,7 +34,7 @@ var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
|
|
|
34
34
|
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, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\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, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\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, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
35
35
|
var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\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, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\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, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
36
|
var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n }\n\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n }\n\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
37
|
-
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\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 .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\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 .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
|
|
37
|
+
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\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 .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n svg{\n path[stroke-width], rect[stroke-width]{ \n stroke-width: 3px;\n }\n circle[stroke-width]{ \n stroke-width: 3px;\n ~ path[stroke-width]{ \n stroke-width: 3px;\n }\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\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 .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n svg{\n path[stroke-width], rect[stroke-width]{ \n stroke-width: 3px;\n }\n circle[stroke-width]{ \n stroke-width: 3px;\n ~ path[stroke-width]{ \n stroke-width: 3px;\n }\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
|
|
38
38
|
switch (props.variant) {
|
|
39
39
|
case 'primary':
|
|
40
40
|
return primary;
|
|
@@ -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 SvgBoxDown = 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.99805 8V19C3.99805 20 4.79805 21.5 5.99805 21.5H17.998C19.198 21.5 19.998 20 19.998 19V8M3.99805 8L5.99805 4C6.49805 3 6.79805 2.5 7.99805 2.5H11.998M3.99805 8H11.998M19.998 8L17.998 4C17.498 3 17.198 2.5 15.998 2.5H11.998M19.998 8H11.998M11.998 2.5V8", stroke: "#0FDF7B", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 18V11M12 18L9 15M12 18L15 15", stroke: "#0FDF7B", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
|
+
exports.default = SvgBoxDown;
|
|
@@ -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 SvgBoxLeft = 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.jsxs)("g", { id: "iaden al\u00C4\u00B1nd\u00C4\u00B1", children: [(0, jsx_runtime_1.jsx)("path", { id: "Vector", d: "M13.0054 14C12.4531 13.9992 12.0047 14.4462 12.0039 14.9985C12.0031 15.5508 12.4501 15.9992 13.0024 16L13.0054 14ZM20.0024 16.0104C20.5547 16.0112 21.0031 15.5642 21.0039 15.0119C21.0047 14.4596 20.5577 14.0112 20.0054 14.0104L20.0024 16.0104ZM16.7158 12.7121C17.1069 12.3221 17.1079 11.689 16.7179 11.2978C16.328 10.9067 15.6948 10.9058 15.3037 11.2958L16.7158 12.7121ZM15.2918 18.708C15.6818 19.0991 16.315 19.1001 16.7061 18.7101C17.0972 18.3202 17.0981 17.687 16.7082 17.2959L15.2918 18.708ZM13.7126 14.2914C13.3227 13.9003 12.6895 13.8994 12.2984 14.2894C11.9073 14.6793 11.9064 15.3125 12.2963 15.7036L13.7126 14.2914ZM13.0024 16L20.0024 16.0104L20.0054 14.0104L13.0054 14L13.0024 16ZM15.3037 11.2958L12.2993 14.2913L13.7114 15.7076L16.7158 12.7121L15.3037 11.2958ZM16.7082 17.2959L13.7126 14.2914L12.2963 15.7036L15.2918 18.708L16.7082 17.2959Z", fill: "#FFCE1F" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 77", d: "M4 8V19.5C4 20.6046 4.89543 21.5 6 21.5H18C19.1046 21.5 20 20.6046 20 19.5V18M4 8H20M4 8L6.43148 3.5423C6.78194 2.89977 7.45538 2.5 8.18727 2.5H15.8127C16.5446 2.5 17.2181 2.89977 17.5685 3.5423L20 8M20 8V12", stroke: "#FFCE1F", strokeWidth: 2, strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 78", d: "M12 2V7.5", stroke: "#FFCE1F", strokeWidth: 2 })] }) }))); };
|
|
40
|
+
exports.default = SvgBoxLeft;
|
|
@@ -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 SvgCargoBack = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 23, height: 17, viewBox: "0 0 23 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "Cargo", children: (0, jsx_runtime_1.jsx)("path", { id: "Stroke 1", d: "M19 14C19 12.8954 18.1044 12 17 12C15.8956 12 15 12.8954 15 14M19 14C19 15.1044 18.1044 16 17 16C15.8956 16 15 15.1044 15 14M19 14H20C20.6667 13.8333 22 13.2 22 12L22 2C22 1.66667 21.8 1 21 1L10.5 1C9.7 1 9.5 1.66667 9.5 2V3M15 14H9.5M7 14C7 12.8954 6.10443 12 5 12C3.89557 12 3 12.8954 3 14M7 14C7 15.1044 6.10443 16 5 16C3.89557 16 3 15.1044 3 14M7 14H9.5M3 14H1L1 8L3 7M9.5 14V7M9.5 3L5.5 3C5 3 4 3.5 4 4L3 7M9.5 3L9.5 7M3 7L9.5 7", stroke: "#FFCE1F", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }))); };
|
|
40
|
+
exports.default = SvgCargoBack;
|
|
@@ -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 __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 SvgConfetti = 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: "M13.8602 18.1468L2.30013 23.2641C1.95669 23.2656 1.62676 23.1306 1.38294 22.889C1.13911 22.6474 1.00136 22.319 1 21.9759L6.15948 10.5142L13.8602 18.1468ZM11.6677 12.6852C13.8064 14.8078 14.8757 17.1888 14.0551 18.0034C13.2345 18.818 10.8317 17.7577 8.69049 15.6354C6.54926 13.5131 5.48249 11.1321 6.30308 10.3175C7.12367 9.50291 9.52647 10.5624 11.6677 12.6847V12.6852Z", fill: "url(#paint0_linear_19146_183541)", style: {
|
|
40
|
+
mixBlendMode: "darken",
|
|
41
|
+
} }), (0, jsx_runtime_1.jsx)("path", { opacity: 0.4, fillRule: "evenodd", clipRule: "evenodd", d: "M4.09285 22.4696C4.54161 22.2882 6.32803 21.4999 6.4306 21.4374C4.3304 19.8958 3.59956 18.1529 3.13285 17.2363C3.04053 17.4484 2.28932 19.1453 1.88672 19.9947C2.14315 20.5888 3.20046 21.998 4.09285 22.4696Z", fill: "#CFC8FF" }), (0, jsx_runtime_1.jsx)("path", { opacity: 0.4, fillRule: "evenodd", clipRule: "evenodd", d: "M8.5952 20.478C9.04396 20.2969 10.8996 19.4773 11.0047 19.4153C8.11726 17.1485 6.17721 14.2301 6.08746 10.6641C5.99514 10.8757 4.64284 13.9306 4.24023 14.7803C4.91209 16.7847 7.23353 19.5991 8.5952 20.478Z", fill: "#CFC8FF" }), (0, jsx_runtime_1.jsx)("path", { opacity: 0.05, fillRule: "evenodd", clipRule: "evenodd", d: "M13.6521 18.2528L2.27276 23.2892C1.94608 23.29 1.63108 23.1678 1.39062 22.9469C3.5216 20.8165 11.6991 12.8627 11.7709 12.8047C11.9262 12.9304 15.1954 16.2784 14.1316 17.9411L13.8329 18.1718L13.6521 18.2528Z", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6686 12.6832C13.8072 14.8057 14.8766 17.1867 14.056 18.0013C13.2354 18.8159 10.8326 17.7557 8.69134 15.6334C6.55011 13.5111 5.48334 11.1301 6.30393 10.3155C7.12452 9.50089 9.52732 10.5609 11.6686 12.6832Z", fill: "url(#paint1_linear_19146_183541)", style: {
|
|
42
|
+
mixBlendMode: "darken",
|
|
43
|
+
} }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.0393 6.99234C13.1678 4.18046 9.8521 3.85232 9.71875 0.948985C9.71875 0.948985 9.93382 0.925781 10.4073 0.925781C10.6007 3.49614 14.0093 4.32361 10.4992 7.4982", fill: "#9085DE" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.7587 13.8451C18.385 10.5826 17.6347 13.5798 14.7514 13.2982C14.7514 13.2982 14.7562 13.0975 14.817 12.663C17.3794 12.8432 18.6345 9.83032 21.3172 13.4934", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.6914 9.63322C18.2004 11.005 16.4477 6.30981 21.0735 3.46047C21.0735 3.46047 21.198 3.63791 21.4276 4.05329C16.9671 6.72227 18.943 11.8224 14.4733 10.282", fill: "#FF7BA2" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.4888 6.83562C8.84074 6.83562 9.12604 6.55062 9.12604 6.19906C9.12604 5.8475 8.84074 5.5625 8.4888 5.5625C8.13687 5.5625 7.85156 5.8475 7.85156 6.19906C7.85156 6.55062 8.13687 6.83562 8.4888 6.83562Z", fill: "#FF4F83" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.7193 3.64812C13.0712 3.64812 13.3565 3.36312 13.3565 3.01156C13.3565 2.66 13.0712 2.375 12.7193 2.375C12.3673 2.375 12.082 2.66 12.082 3.01156C12.082 3.36312 12.3673 3.64812 12.7193 3.64812Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.6432 8.09161C13.993 8.09161 14.2766 7.80833 14.2766 7.45889C14.2766 7.10945 13.993 6.82617 13.6432 6.82617C13.2933 6.82617 13.0098 7.10945 13.0098 7.45889C13.0098 7.80833 13.2933 8.09161 13.6432 8.09161Z", fill: "#0A103D" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.093 3.10399L16.5724 4.1394L17.3725 4.97653C17.4021 5.00637 17.4093 5.05172 17.3905 5.08924C17.3694 5.1266 17.3279 5.14762 17.2853 5.14252L16.1314 4.97807L15.5698 5.99144C15.5494 6.02825 15.5081 6.04824 15.4666 6.04133C15.4251 6.03442 15.3924 6.00211 15.3851 5.9607L15.1902 4.82386L14.044 4.61201C14.0025 4.60478 13.9704 4.57168 13.9645 4.53004C13.9567 4.48828 13.9777 4.44645 14.0158 4.42758L15.0492 3.88964L14.903 2.74562C14.8968 2.7034 14.9185 2.66198 14.9569 2.64316C14.9953 2.62448 15.0413 2.63152 15.0723 2.66083L15.9057 3.46544L16.9596 2.96925C16.9982 2.95068 17.0444 2.95864 17.0745 2.98907C17.1046 3.01949 17.112 3.06567 17.093 3.10399Z", fill: "#FF4F83" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.4108 15.1157L17.6442 15.8916C17.6534 15.9197 17.643 15.9505 17.6185 15.9672C17.5938 15.9842 17.5612 15.9842 17.5365 15.9672L16.8672 15.501L16.1902 15.9587C16.1665 15.9759 16.1344 15.9759 16.1107 15.9587C16.085 15.9424 16.0743 15.9103 16.085 15.8819L16.3261 15.1085L15.6773 14.6149C15.653 14.5975 15.6426 14.5665 15.6517 14.5381C15.6615 14.5096 15.6882 14.4905 15.7183 14.4904L16.5389 14.4791L16.8107 13.716C16.8215 13.6885 16.8479 13.6703 16.8774 13.6699C16.9074 13.67 16.934 13.6889 16.9441 13.7171L17.2082 14.4835L18.0288 14.505C18.0581 14.5057 18.0838 14.5248 18.0929 14.5527C18.1037 14.5814 18.093 14.6138 18.0673 14.6305L17.4108 15.1157Z", fill: "#FF4F83" }), (0, jsx_runtime_1.jsx)("path", { d: "M19.8248 10.6912C20.1746 10.6912 20.4582 10.4079 20.4582 10.0585C20.4582 9.70906 20.1746 9.42578 19.8248 9.42578C19.475 9.42578 19.1914 9.70906 19.1914 10.0585C19.1914 10.4079 19.475 10.6912 19.8248 10.6912Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.1665 17.7399C20.5185 17.7399 20.8038 17.4549 20.8038 17.1034C20.8038 16.7518 20.5185 16.4668 20.1665 16.4668C19.8146 16.4668 19.5293 16.7518 19.5293 17.1034C19.5293 17.4549 19.8146 17.7399 20.1665 17.7399Z", fill: "#CFC8FF" }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_19146_183541", x1: 11.0681, y1: 13.5855, x2: 5.70253, y2: 14.8812, gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#FF3370" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "#6B57EC" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint1_linear_19146_183541", x1: 12.2993, y1: 12.2474, x2: 8.95689, y2: 13.0547, gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#FF3370" }), (0, jsx_runtime_1.jsx)("stop", { offset: 1, stopColor: "#6B57EC" })] })] })] }))); };
|
|
44
|
+
exports.default = SvgConfetti;
|
|
@@ -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 SvgSearch = 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.jsxs)("g", { id: "Search", children: [(0, jsx_runtime_1.jsx)("circle", { id: "Ellipse_739", cx: 7.33203, cy: 7.33398, r: 6, stroke: "#
|
|
39
|
+
var SvgSearch = 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.jsxs)("g", { id: "Search", children: [(0, jsx_runtime_1.jsx)("circle", { id: "Ellipse_739", cx: 7.33203, cy: 7.33398, r: 6, stroke: "#84879E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Line_181", d: "M12 12L14.6667 14.6667", stroke: "#84879E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))); };
|
|
40
40
|
exports.default = SvgSearch;
|
|
@@ -25,10 +25,11 @@ 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.
|
|
29
|
-
exports.
|
|
30
|
-
exports.
|
|
31
|
-
exports.
|
|
28
|
+
exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.BoxLeft = exports.BoxDown = 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
|
+
exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = 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.DarkBadge = exports.Danger = exports.Copy = exports.Closemini = exports.CloseSquare = exports.CloseMiniHover = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.CargoBack = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = exports.Calendar = void 0;
|
|
30
|
+
exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = exports.PoweredByQnbLogo = 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.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = void 0;
|
|
31
|
+
exports.Pointinghand = exports.PointFinger = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Grid = exports.FacebookStroke = exports.Confetti = 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.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = 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 = exports.Securitywithtik = exports.Search = exports.Scan = void 0;
|
|
32
|
+
exports.iconList = exports.Visa = exports.TwitterStroke = void 0;
|
|
32
33
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
33
34
|
var Activity_1 = __importDefault(require("./Activity"));
|
|
34
35
|
Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
|
|
@@ -120,6 +121,10 @@ var Bookmark_1 = __importDefault(require("./Bookmark"));
|
|
|
120
121
|
Object.defineProperty(exports, "Bookmark", { enumerable: true, get: function () { return Bookmark_1.default; } });
|
|
121
122
|
var Box_1 = __importDefault(require("./Box"));
|
|
122
123
|
Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.default; } });
|
|
124
|
+
var BoxDown_1 = __importDefault(require("./BoxDown"));
|
|
125
|
+
Object.defineProperty(exports, "BoxDown", { enumerable: true, get: function () { return BoxDown_1.default; } });
|
|
126
|
+
var BoxLeft_1 = __importDefault(require("./BoxLeft"));
|
|
127
|
+
Object.defineProperty(exports, "BoxLeft", { enumerable: true, get: function () { return BoxLeft_1.default; } });
|
|
123
128
|
var ButtonIcon_1 = __importDefault(require("./ButtonIcon"));
|
|
124
129
|
Object.defineProperty(exports, "ButtonIcon", { enumerable: true, get: function () { return ButtonIcon_1.default; } });
|
|
125
130
|
var Buy_1 = __importDefault(require("./Buy"));
|
|
@@ -146,6 +151,8 @@ var Cargo_1 = __importDefault(require("./Cargo"));
|
|
|
146
151
|
Object.defineProperty(exports, "Cargo", { enumerable: true, get: function () { return Cargo_1.default; } });
|
|
147
152
|
var Cargo2_1 = __importDefault(require("./Cargo2"));
|
|
148
153
|
Object.defineProperty(exports, "Cargo2", { enumerable: true, get: function () { return Cargo2_1.default; } });
|
|
154
|
+
var CargoBack_1 = __importDefault(require("./CargoBack"));
|
|
155
|
+
Object.defineProperty(exports, "CargoBack", { enumerable: true, get: function () { return CargoBack_1.default; } });
|
|
149
156
|
var Category_1 = __importDefault(require("./Category"));
|
|
150
157
|
Object.defineProperty(exports, "Category", { enumerable: true, get: function () { return Category_1.default; } });
|
|
151
158
|
var Chart_1 = __importDefault(require("./Chart"));
|
|
@@ -406,6 +413,8 @@ var Work_1 = __importDefault(require("./Work"));
|
|
|
406
413
|
Object.defineProperty(exports, "Work", { enumerable: true, get: function () { return Work_1.default; } });
|
|
407
414
|
var Youtube_1 = __importDefault(require("./Youtube"));
|
|
408
415
|
Object.defineProperty(exports, "Youtube", { enumerable: true, get: function () { return Youtube_1.default; } });
|
|
416
|
+
var Confetti_1 = __importDefault(require("./Confetti"));
|
|
417
|
+
Object.defineProperty(exports, "Confetti", { enumerable: true, get: function () { return Confetti_1.default; } });
|
|
409
418
|
var FacebookStroke_1 = __importDefault(require("./FacebookStroke"));
|
|
410
419
|
Object.defineProperty(exports, "FacebookStroke", { enumerable: true, get: function () { return FacebookStroke_1.default; } });
|
|
411
420
|
var Grid_1 = __importDefault(require("./Grid"));
|
|
@@ -607,6 +616,14 @@ exports.iconList = {
|
|
|
607
616
|
var props = __rest(_a, []);
|
|
608
617
|
return (0, jsx_runtime_1.jsx)(Box_1.default, __assign({}, props));
|
|
609
618
|
},
|
|
619
|
+
BoxDown: function (_a) {
|
|
620
|
+
var props = __rest(_a, []);
|
|
621
|
+
return (0, jsx_runtime_1.jsx)(BoxDown_1.default, __assign({}, props));
|
|
622
|
+
},
|
|
623
|
+
BoxLeft: function (_a) {
|
|
624
|
+
var props = __rest(_a, []);
|
|
625
|
+
return (0, jsx_runtime_1.jsx)(BoxLeft_1.default, __assign({}, props));
|
|
626
|
+
},
|
|
610
627
|
ButtonIcon: function (_a) {
|
|
611
628
|
var props = __rest(_a, []);
|
|
612
629
|
return (0, jsx_runtime_1.jsx)(ButtonIcon_1.default, __assign({}, props));
|
|
@@ -659,6 +676,10 @@ exports.iconList = {
|
|
|
659
676
|
var props = __rest(_a, []);
|
|
660
677
|
return (0, jsx_runtime_1.jsx)(Cargo2_1.default, __assign({}, props));
|
|
661
678
|
},
|
|
679
|
+
CargoBack: function (_a) {
|
|
680
|
+
var props = __rest(_a, []);
|
|
681
|
+
return (0, jsx_runtime_1.jsx)(CargoBack_1.default, __assign({}, props));
|
|
682
|
+
},
|
|
662
683
|
Category: function (_a) {
|
|
663
684
|
var props = __rest(_a, []);
|
|
664
685
|
return (0, jsx_runtime_1.jsx)(Category_1.default, __assign({}, props));
|
|
@@ -1179,6 +1200,10 @@ exports.iconList = {
|
|
|
1179
1200
|
var props = __rest(_a, []);
|
|
1180
1201
|
return (0, jsx_runtime_1.jsx)(Youtube_1.default, __assign({}, props));
|
|
1181
1202
|
},
|
|
1203
|
+
Confetti: function (_a) {
|
|
1204
|
+
var props = __rest(_a, []);
|
|
1205
|
+
return (0, jsx_runtime_1.jsx)(Confetti_1.default, __assign({}, props));
|
|
1206
|
+
},
|
|
1182
1207
|
FacebookStroke: function (_a) {
|
|
1183
1208
|
var props = __rest(_a, []);
|
|
1184
1209
|
return (0, jsx_runtime_1.jsx)(FacebookStroke_1.default, __assign({}, props));
|
|
@@ -15,11 +15,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var react_1 = require("react");
|
|
18
19
|
var InfoBox_styled_1 = require("./InfoBox.styled");
|
|
19
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
20
21
|
var InfoBox = function (props) {
|
|
21
22
|
var title = props.title, description = props.description, radius = props.radius;
|
|
22
|
-
|
|
23
|
+
var descriptionRef = (0, react_1.useRef)(null);
|
|
24
|
+
var inputRef = (0, react_1.useRef)(null);
|
|
25
|
+
var _a = (0, react_1.useState)(false), alert = _a[0], setAlert = _a[1];
|
|
26
|
+
var _b = (0, react_1.useState)(0), alertLeft = _b[0], setAlertLeft = _b[1];
|
|
27
|
+
var _c = (0, react_1.useState)(0), alertTop = _c[0], setAlertTop = _c[1];
|
|
28
|
+
(0, react_1.useEffect)(function () {
|
|
29
|
+
if (alert) {
|
|
30
|
+
setTimeout(function () {
|
|
31
|
+
setAlert(false);
|
|
32
|
+
}, 2000);
|
|
33
|
+
}
|
|
34
|
+
}, [alert]);
|
|
35
|
+
var copyToClipboard = function (text) {
|
|
36
|
+
inputRef.current.value = text;
|
|
37
|
+
inputRef.current.select();
|
|
38
|
+
document.execCommand('copy');
|
|
39
|
+
setAlert(true);
|
|
40
|
+
};
|
|
41
|
+
(0, react_1.useEffect)(function () {
|
|
42
|
+
var _a;
|
|
43
|
+
var copiedElem = (_a = descriptionRef === null || descriptionRef === void 0 ? void 0 : descriptionRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('span');
|
|
44
|
+
if (copiedElem) {
|
|
45
|
+
copiedElem.addEventListener("click", function (e) {
|
|
46
|
+
setAlertLeft(e.pageX);
|
|
47
|
+
setAlertTop(e.pageY);
|
|
48
|
+
copyToClipboard(copiedElem.innerHTML.replace(/[^\d]/g, ""));
|
|
49
|
+
}, false);
|
|
50
|
+
}
|
|
51
|
+
}, []);
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: "24px", height: "24px" }) }), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { className: "caption-bold-12-15", children: title }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { ref: descriptionRef, className: "caption-medium-12-15", dangerouslySetInnerHTML: { __html: description } }), alert && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, { alertLeft: alertLeft, alertTop: alertTop, className: "caption-medium-10-12", children: "Kopyaland\u0131" }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] })] })));
|
|
23
53
|
};
|
|
24
54
|
InfoBox.defaultProps = {};
|
|
25
55
|
exports.default = InfoBox;
|
|
@@ -7,10 +7,13 @@ 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.Description = exports.Title = exports.IconWrapper = exports.InfoBoxStyled = void 0;
|
|
10
|
+
exports.Input = exports.AlertStyled = exports.Description = exports.Title = exports.TextWrapper = exports.IconWrapper = exports.InfoBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.InfoBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: ", ";\n background: var(--primary-opacity-10);\n padding: 1rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: ", ";\n background: var(--primary-opacity-10);\n padding: 1rem;\n"])), function (props) { return props.radius ? props.radius : "8px"; });
|
|
13
13
|
exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n margin-right: 1rem;\n svg{\n display: block;\n path[stroke]{\n stroke-width: 1.5;\n }\n }\n"], ["\n display: block;\n margin-right: 1rem;\n svg{\n display: block;\n path[stroke]{\n stroke-width: 1.5;\n }\n }\n"])));
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
var
|
|
14
|
+
exports.TextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
15
|
+
exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n margin: 0;\n"], ["\n display: block;\n margin: 0;\n"])));
|
|
16
|
+
exports.Description = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin: 0;\n b{\n font-weight: 700;\n }\n span{\n font-weight: 700;\n color: var(--primary);\n cursor: pointer;\n display: block;\n }\n"], ["\n display: block;\n margin: 0;\n b{\n font-weight: 700;\n }\n span{\n font-weight: 700;\n color: var(--primary);\n cursor: pointer;\n display: block;\n }\n"])));
|
|
17
|
+
exports.AlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: fixed;\n left: ", "px;\n top: ", "px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transform: translateY(-100%) translateX(-100%);\n"], ["\n position: fixed;\n left: ", "px;\n top: ", "px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transform: translateY(-100%) translateX(-100%);\n"])), function (props) { return props.alertLeft + 20; }, function (props) { return props.alertTop; });
|
|
18
|
+
exports.Input = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n"], ["\n position: absolute;\n opacity: 0;\n"])));
|
|
19
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -19,13 +19,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
19
19
|
var InfoBox_1 = __importDefault(require("../InfoBox"));
|
|
20
20
|
exports.default = {
|
|
21
21
|
title: 'Components/InfoBox',
|
|
22
|
-
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { width: "
|
|
22
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { width: "674px" }, children: (0, jsx_runtime_1.jsx)(InfoBox_1.default, __assign({}, props)) }); },
|
|
23
23
|
tags: ['autodocs'],
|
|
24
24
|
argTypes: {}
|
|
25
25
|
};
|
|
26
26
|
exports.Default = {
|
|
27
27
|
args: {
|
|
28
28
|
title: "Info text",
|
|
29
|
-
description:
|
|
29
|
+
//description:"Body text",
|
|
30
|
+
description: "İade günün kiralama bitiş günündür, daha erken bir tarihte kargolaman gerekmez. Eğer planlarında bir değişiklik olursa, kiralamanı bitiş tarihinden önce sonlandırmak için <b>info@kiralarsin.com</b>’a e-mail atabilirsin. <span>Yurtiçi Kargo iade kodun: 567890678</span>",
|
|
30
31
|
},
|
|
31
32
|
};
|
|
@@ -11,5 +11,5 @@ exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 8px;\n background-color: white;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n"])));
|
|
13
13
|
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"])), function (props) { return props.width || '370px'; });
|
|
14
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
14
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -18,15 +18,16 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var SelectBox_styled_1 = require("./SelectBox.styled");
|
|
19
19
|
var classnames_1 = __importDefault(require("classnames"));
|
|
20
20
|
var react_select_1 = __importDefault(require("react-select"));
|
|
21
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
22
|
var SelectBox = function (props) {
|
|
22
23
|
var _a, _b;
|
|
23
|
-
var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg;
|
|
24
|
+
var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId, lightBg = props.lightBg, hasError = props.hasError, errorMessage = props.errorMessage;
|
|
24
25
|
var formatOptionLabel = function (_a) {
|
|
25
26
|
var _b;
|
|
26
27
|
var innerProps = _a.innerProps, isDisabled = _a.isDisabled, data = _a.data;
|
|
27
28
|
return ((0, jsx_runtime_1.jsx)("div", __assign({}, innerProps, { className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b)), children: (0, jsx_runtime_1.jsxs)("div", { children: [data.label && (0, jsx_runtime_1.jsx)("strong", { className: "title-bold-16-19", children: data.label }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { className: "body-medium-13-16", children: data.labelBottom })] }) })));
|
|
28
29
|
};
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props)) })] }));
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, hasError: hasError, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({ components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a), (_b = {}, _b['lightBg'] = lightBg, _b)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }, props)) }), hasError && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: errorMessage })] })] }));
|
|
30
31
|
};
|
|
31
32
|
SelectBox.defaultValues = {
|
|
32
33
|
hasError: false,
|
|
@@ -12,5 +12,5 @@ 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.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n border-color: var(--dark-opacity-10);\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: var(--dark-opacity-50);\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: var(--dark);\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: 200px;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n\n &:hover {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: 51px;\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n transform: rotate(180deg);\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n border-color: var(--dark-opacity-10);\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: var(--dark-opacity-50);\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: var(--dark);\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: 200px;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n\n &:hover {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: 51px;\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n transform: rotate(180deg);\n }\n }\n }\n }\n"])), function (props) { return props.width || '370px'; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
|
|
15
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: 200px;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n\n &:hover {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: 51px;\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n transform: rotate(180deg);\n }\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n \n .top {\n display: flex;\n margin-bottom: 16px;\n &.justify-between {\n justify-content: space-between;\n }\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n\n .select {\n position: relative;\n .customSelect{\n &:is(.lightBg){\n .customSelect__control {\n background-color: white;\n }\n }\n .customSelect__control {\n height: 56px;\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n &:before{\n content: \"\";\n position: absolute;\n inset:0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 8px;\n border-color: ", ";\n }\n\n &:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n\n .customSelect__value-container {\n padding: 0;\n .customSelect__placeholder {\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n margin: 0;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 17px;\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n line-height: 17px !important;\n }\n }\n }\n\n .customSelect__indicator {\n padding: 0 0;\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n transition: all .2s ease;\n svg {\n display: none;\n }\n }\n .customSelect__indicator-separator {\n display: none;\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n .customSelect__menu-list {\n padding: 0;\n max-height: 200px;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n\n &:hover {\n background-color: var(--dark-opacity-3);\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n }\n\n &:is(.optionSm) {\n height: 51px;\n }\n\n strong, span {\n display: block;\n }\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n box-shadow: none;\n .customSelect__indicator{\n transform: rotate(180deg);\n }\n }\n }\n }\n"])), function (props) { return props.width || '370px'; }, function (props) { return props.hasError ? "2px" : "1px"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark-opacity-50)"; }, function (props) { return props.hasError ? "var(--red)" : "var(--dark)"; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })));
|
|
16
16
|
var templateObject_1;
|
|
@@ -10,7 +10,9 @@ exports.default = {
|
|
|
10
10
|
title: 'Components/SelectBox',
|
|
11
11
|
component: SelectBox_1.default,
|
|
12
12
|
tags: ['autodocs'],
|
|
13
|
-
argTypes: {
|
|
13
|
+
argTypes: {
|
|
14
|
+
hasError: { control: 'boolean' },
|
|
15
|
+
}
|
|
14
16
|
};
|
|
15
17
|
exports.Default = {
|
|
16
18
|
args: {
|
|
@@ -22,5 +24,7 @@ exports.Default = {
|
|
|
22
24
|
//menuIsOpen: true,
|
|
23
25
|
options: SelectValues_json_1.default,
|
|
24
26
|
width: "400px",
|
|
27
|
+
hasError: false,
|
|
28
|
+
errorMessage: "Error message.",
|
|
25
29
|
},
|
|
26
30
|
};
|
|
@@ -35,8 +35,11 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
35
35
|
var Toast = function (props) {
|
|
36
36
|
var timer = props.timer, primaryButtonText = props.primaryButtonText, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isPrimaryButtonLoading = props.isPrimaryButtonLoading, showPrimaryButton = props.showPrimaryButton, children = props.children, icon = props.icon, show = props.show, setShow = props.setShow, onPrimaryAction = props.onPrimaryAction, title = props.title, other = __rest(props, ["timer", "primaryButtonText", "isPrimaryButtonDisabled", "isPrimaryButtonLoading", "showPrimaryButton", "children", "icon", "show", "setShow", "onPrimaryAction", "title"]);
|
|
37
37
|
(0, react_1.useEffect)(function () {
|
|
38
|
-
setTimeout(function () {
|
|
39
|
-
|
|
38
|
+
setTimeout(function () {
|
|
39
|
+
setShow(false);
|
|
40
|
+
document.body.style.overflow = "auto";
|
|
41
|
+
}, timer);
|
|
42
|
+
document.body.style.overflow = "hidden";
|
|
40
43
|
}, [show]);
|
|
41
44
|
return (show &&
|
|
42
45
|
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "24px", height: "24px" }) })), title && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)("title", "title-extra-bold-16-19"), children: title })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("content", "body-regular-14-17"), children: children }), showPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { className: "bottom", children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", width: "100%", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, children: primaryButtonText }) }))] }) })) }), document.body));
|