krl-alfred 1.84.1 → 2.17.4
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/ActionButton/ActionButton.styled.js +2 -1
- package/dist/components/Icon/iconList/Pause.d.ts +2 -0
- package/dist/components/Icon/iconList/Pause.js +40 -0
- package/dist/components/Icon/iconList/Play.js +1 -1
- package/dist/components/Icon/iconList/VolumeOffSm.d.ts +2 -0
- package/dist/components/Icon/iconList/VolumeOffSm.js +40 -0
- package/dist/components/Icon/iconList/VolumeUpSm.d.ts +2 -0
- package/dist/components/Icon/iconList/VolumeUpSm.js +40 -0
- package/dist/components/Icon/iconList/index.d.ts +15 -3
- package/dist/components/Icon/iconList/index.js +24 -6
- package/dist/components/ProductCardHorizontal/props.d.ts +11 -6
- package/dist/components/ReviewCard/ReviewCard.styled.js +2 -2
- package/dist/components/SearchBox/SearchBox.d.ts +3 -2
- package/dist/components/SearchBox/SearchBox.js +111 -36
- package/dist/components/SearchBox/SearchBox.styled.d.ts +1 -1
- package/dist/components/SearchBox/SearchBox.styled.js +27 -6
- package/dist/components/SearchBox/props.d.ts +35 -13
- package/dist/components/SearchBox/props.js +11 -7
- package/dist/components/SearchBox/stories/SearchBox.stories.d.ts +3 -2
- package/dist/components/Tabs/Tabs.js +3 -3
- package/dist/components/Tabs/Tabs.styled.js +2 -2
- package/dist/components/VideoCard/VideoCard.d.ts +1 -4
- package/dist/components/VideoCard/VideoCard.js +38 -2
- package/dist/components/VideoCard/VideoCard.styled.d.ts +3 -0
- package/dist/components/VideoCard/VideoCard.styled.js +7 -4
- package/dist/components/VideoCard/props.d.ts +1 -2
- package/dist/components/VideoCard/stories/VideoCard.stories.d.ts +1 -1
- package/dist/components/VideoCard/stories/VideoCard.stories.js +2 -2
- package/dist/hooks/useDebounce.d.ts +2 -0
- package/dist/hooks/useDebounce.js +16 -0
- package/dist/hooks/useVideoPlayer.d.ts +6 -0
- package/dist/hooks/useVideoPlayer.js +63 -0
- package/dist/style/style.min.css +1 -1
- package/dist/style/style.min.css.map +1 -1
- package/package.json +1 -1
|
@@ -9,5 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ActionButtonStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
|
|
12
|
+
var devices_1 = require("../../constants/devices");
|
|
13
|
+
exports.ActionButtonStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-5);\n padding: 1rem 1.5rem;\n width: ", ";\n align-items: center;\n justify-content: space-between;\n color: var(--dark);\n box-sizing: border-box;\n cursor: pointer;\n @media only screen and ", " {\n &:hover {\n button {\n background-color: var(--primary-hover);\n }\n }\n }\n \n &:active {\n button {\n background-color: var(--primary-press);\n @media only screen and ", " {\n background-color: var(--primary-hover);\n }\n }\n }\n\n .top, .bottom {\n display: grid;\n grid-template-columns: ", ";\n align-content: center;\n align-items: center;\n }\n\n .top {\n .icon {\n margin-right: 1rem;\n\n * {\n display: block !important;\n }\n }\n\n .title {\n display: block;\n font: var(--body-bold-14-17);\n }\n }\n\n .bottom {\n margin-top: 0.5rem;\n\n > div {\n display: grid;\n grid-template-columns: 1fr auto;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n\n .timer {\n display: grid;\n grid-template-columns: repeat(5, auto);\n align-items: center;\n justify-content: start;\n\n .box {\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 0.25rem;\n text-align: center;\n display: grid;\n align-items: center;\n align-content: center;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n .timerTitle {\n font: var(--title-extra-bold-16-19);\n }\n\n .timerDescription {\n font: var(--caption-regular-10-12);\n }\n }\n\n .dots {\n margin: 0 4px;\n width: 4px;\n font: var(--caption-bold-12-15);\n }\n }\n }\n }\n"], ["\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-5);\n padding: 1rem 1.5rem;\n width: ", ";\n align-items: center;\n justify-content: space-between;\n color: var(--dark);\n box-sizing: border-box;\n cursor: pointer;\n @media only screen and ", " {\n &:hover {\n button {\n background-color: var(--primary-hover);\n }\n }\n }\n \n &:active {\n button {\n background-color: var(--primary-press);\n @media only screen and ", " {\n background-color: var(--primary-hover);\n }\n }\n }\n\n .top, .bottom {\n display: grid;\n grid-template-columns: ", ";\n align-content: center;\n align-items: center;\n }\n\n .top {\n .icon {\n margin-right: 1rem;\n\n * {\n display: block !important;\n }\n }\n\n .title {\n display: block;\n font: var(--body-bold-14-17);\n }\n }\n\n .bottom {\n margin-top: 0.5rem;\n\n > div {\n display: grid;\n grid-template-columns: 1fr auto;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n\n .timer {\n display: grid;\n grid-template-columns: repeat(5, auto);\n align-items: center;\n justify-content: start;\n\n .box {\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 0.25rem;\n text-align: center;\n display: grid;\n align-items: center;\n align-content: center;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n\n .timerTitle {\n font: var(--title-extra-bold-16-19);\n }\n\n .timerDescription {\n font: var(--caption-regular-10-12);\n }\n }\n\n .dots {\n margin: 0 4px;\n width: 4px;\n font: var(--caption-bold-12-15);\n }\n }\n }\n }\n"])), function (props) { return props.$width; }, devices_1.devices.mdUp, devices_1.devices.md, function (props) { return props.$hasTimer ? "61px 1fr" : "61px 1fr auto"; });
|
|
13
14
|
var templateObject_1;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgPause = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsxs)("g", __assign({ clipPath: "url(#clip0_34405_190035)" }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: 8, cy: 8, r: 7.2, stroke: "currentColor", strokeWidth: 1.6 }), (0, jsx_runtime_1.jsx)("rect", { x: 5.6, y: 5.6, width: 1.8, height: 4.8, rx: 0.6, stroke: "currentColor", strokeWidth: 0.8 }), (0, jsx_runtime_1.jsx)("rect", { x: 8.6, y: 5.6, width: 1.8, height: 4.8, rx: 0.6, stroke: "currentColor", strokeWidth: 0.8 })] })), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", __assign({ id: "clip0_34405_190035" }, { children: (0, jsx_runtime_1.jsx)("rect", { width: 16, height: 16, fill: "currentColor" }) })) })] }))); };
|
|
40
|
+
exports.default = SvgPause;
|
|
@@ -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 SvgPlay = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgPlay = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M13.5515 5.33234L5.35368 0.407431C4.91008 0.139103 4.4066 -0.00146235 3.89436 1.14714e-05C3.38212 0.00148529 2.87938 0.144946 2.4372 0.415822C1.99502 0.686699 1.62915 1.07534 1.37676 1.54227C1.12437 2.0092 0.994443 2.53779 1.00018 3.07435V12.9597C1.00018 13.766 1.30596 14.5394 1.85025 15.1095C2.39455 15.6797 3.13277 16 3.90251 16C4.41206 15.9991 4.91246 15.8581 5.35368 15.5911L13.5515 10.6662C13.992 10.3991 14.3577 10.0154 14.6119 9.55356C14.8662 9.09171 15 8.56795 15 8.03481C15 7.50167 14.8662 6.97791 14.6119 6.51606C14.3577 6.05421 13.992 5.67051 13.5515 5.40345V5.33234ZM12.7029 9.05713L4.50504 14.0532C4.3213 14.1622 4.11371 14.2196 3.90251 14.2196C3.69132 14.2196 3.48372 14.1622 3.29998 14.0532C3.11676 13.9423 2.96462 13.7829 2.85885 13.591C2.75308 13.3991 2.69742 13.1813 2.69745 12.9597V3.03879C2.69742 2.81716 2.75308 2.59944 2.85885 2.4075C2.96462 2.21555 3.11676 2.05616 3.29998 1.94535C3.48448 1.83793 3.69145 1.77991 3.90251 1.77645C4.11343 1.78098 4.32016 1.83893 4.50504 1.94535L12.7029 6.90582C12.8861 7.01658 13.0384 7.17595 13.1442 7.36789C13.25 7.55984 13.3057 7.77759 13.3057 7.99925C13.3057 8.22091 13.25 8.43866 13.1442 8.63061C13.0384 8.82255 12.8861 8.98192 12.7029 9.09269V9.05713Z", fill: "currentColor" }) }))); };
|
|
40
40
|
exports.default = SvgPlay;
|
|
@@ -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 SvgVolumeOffSm = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M5.26046 10.9216H3.85222C3.17387 10.9216 2.71646 10.4578 2.62399 9.69261C2.49199 8.75097 2.50469 7.04979 2.62399 6.08838C2.71646 5.42485 3.17387 4.9025 3.85222 4.9025H5.26046L7.73599 2.87732C7.95269 2.69308 8.32752 2.51944 8.55552 2.52438C9.03764 2.50955 9.48446 2.86038 9.65599 3.43285C9.75058 3.79779 9.7767 4.22344 9.8247 4.61732C9.8727 5.00061 9.90093 4.96602 9.9087 6.12155", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.90659 9.46094C9.89388 10.3518 9.86353 10.8939 9.82471 11.2066C9.77671 11.6005 9.76259 11.9894 9.656 12.3903C9.48447 12.9635 9.03765 13.3136 8.55553 13.2988C8.32753 13.3045 8.00494 13.1654 7.78824 12.9819L6.85718 12.2223", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.9971 2.1958L2.56534 13.6276", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
|
+
exports.default = SvgVolumeOffSm;
|
|
@@ -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 SvgVolumeUpSm = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.31429 11.4281C8.26661 11.8187 8.25258 12.2029 8.14599 12.6005C7.9763 13.1672 7.53242 13.5137 7.05348 13.4998C6.82628 13.5053 6.50652 13.367 6.29124 13.186L3.78014 11.1465H2.38119C1.70661 11.1465 1.25222 10.6867 1.16035 9.92933C1.02922 8.99725 1.04185 7.31335 1.16035 6.3624C1.25222 5.70561 1.70661 5.18787 2.38119 5.18787H3.78014L6.23935 3.18326C6.45463 3.00089 6.82628 2.82901 7.05348 2.8339C7.53242 2.81993 7.9763 3.16719 8.14599 3.73315C8.24066 4.09508 8.26661 4.5157 8.31429 4.90629C8.42859 5.8195 8.42859 10.5149 8.31429 11.4281Z", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.9623 4.70703C11.5676 5.5777 11.9309 6.7457 11.9309 8.0457C11.9309 9.3457 11.5676 10.513 10.9623 11.3837", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.2497 2.6665C14.225 4.06917 14.8103 5.9505 14.8103 8.04517C14.8103 10.1398 14.225 12.0218 13.2497 13.4245", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
|
+
exports.default = SvgVolumeUpSm;
|
|
@@ -446,7 +446,7 @@ export namespace iconList {
|
|
|
446
446
|
function Password({ ...props }: {
|
|
447
447
|
[x: string]: any;
|
|
448
448
|
}): import("react/jsx-runtime").JSX.Element;
|
|
449
|
-
function
|
|
449
|
+
function Pause({ ...props }: {
|
|
450
450
|
[x: string]: any;
|
|
451
451
|
}): import("react/jsx-runtime").JSX.Element;
|
|
452
452
|
function PlusBig({ ...props }: {
|
|
@@ -611,9 +611,15 @@ export namespace iconList {
|
|
|
611
611
|
function VolumeOff({ ...props }: {
|
|
612
612
|
[x: string]: any;
|
|
613
613
|
}): import("react/jsx-runtime").JSX.Element;
|
|
614
|
+
function VolumeOffSm({ ...props }: {
|
|
615
|
+
[x: string]: any;
|
|
616
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
614
617
|
function VolumeUp({ ...props }: {
|
|
615
618
|
[x: string]: any;
|
|
616
619
|
}): import("react/jsx-runtime").JSX.Element;
|
|
620
|
+
function VolumeUpSm({ ...props }: {
|
|
621
|
+
[x: string]: any;
|
|
622
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
617
623
|
function Wallet({ ...props }: {
|
|
618
624
|
[x: string]: any;
|
|
619
625
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -698,6 +704,9 @@ export namespace iconList {
|
|
|
698
704
|
function NewYear({ ...props }: {
|
|
699
705
|
[x: string]: any;
|
|
700
706
|
}): import("react/jsx-runtime").JSX.Element;
|
|
707
|
+
function Play({ ...props }: {
|
|
708
|
+
[x: string]: any;
|
|
709
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
701
710
|
function RotateRight({ ...props }: {
|
|
702
711
|
[x: string]: any;
|
|
703
712
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -869,7 +878,7 @@ import { default as PaperNegative } from "./PaperNegative";
|
|
|
869
878
|
import { default as PaperPlus } from "./PaperPlus";
|
|
870
879
|
import { default as PaperUpload } from "./PaperUpload";
|
|
871
880
|
import { default as Password } from "./Password";
|
|
872
|
-
import { default as
|
|
881
|
+
import { default as Pause } from "./Pause";
|
|
873
882
|
import { default as PlusBig } from "./PlusBig";
|
|
874
883
|
import { default as PlusCircle } from "./PlusCircle";
|
|
875
884
|
import { default as PlusSmall } from "./PlusSmall";
|
|
@@ -924,7 +933,9 @@ import { default as Voice } from "./Voice";
|
|
|
924
933
|
import { default as Voice2 } from "./Voice2";
|
|
925
934
|
import { default as VolumeDown } from "./VolumeDown";
|
|
926
935
|
import { default as VolumeOff } from "./VolumeOff";
|
|
936
|
+
import { default as VolumeOffSm } from "./VolumeOffSm";
|
|
927
937
|
import { default as VolumeUp } from "./VolumeUp";
|
|
938
|
+
import { default as VolumeUpSm } from "./VolumeUpSm";
|
|
928
939
|
import { default as Wallet } from "./Wallet";
|
|
929
940
|
import { default as Wallet2 } from "./Wallet2";
|
|
930
941
|
import { default as Watch } from "./Watch";
|
|
@@ -953,6 +964,7 @@ import { default as List } from "./List";
|
|
|
953
964
|
import { default as Live } from "./Live";
|
|
954
965
|
import { default as More } from "./More";
|
|
955
966
|
import { default as NewYear } from "./NewYear";
|
|
967
|
+
import { default as Play } from "./Play";
|
|
956
968
|
import { default as RotateRight } from "./RotateRight";
|
|
957
969
|
import { default as TextLoading } from "./TextLoading";
|
|
958
970
|
import { default as Tiktok } from "./Tiktok";
|
|
@@ -960,4 +972,4 @@ import { default as UserPlus } from "./UserPlus";
|
|
|
960
972
|
import { default as Wphk } from "./Wphk";
|
|
961
973
|
import { default as Youtubehk } from "./Youtubehk";
|
|
962
974
|
import { default as Youtubewithfooter } from "./Youtubewithfooter";
|
|
963
|
-
export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Completed, Copy, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, Dublearrrowrightbig, Edit, EditSquare, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password,
|
|
975
|
+
export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Completed, Copy, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, Dublearrrowrightbig, Edit, EditSquare, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PlusBig, PlusCircle, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Swap, SwitchPassive, Tamamlarsin, Tick, TickSquare, TicketStar, Ticket, TimeCircle, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, TextLoading, Tiktok, UserPlus, Wphk, Youtubehk, Youtubewithfooter };
|
|
@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
exports.CallMissed = exports.Call = exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = 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.ArrowSmallLeft = exports.ArrowSmallDownStroke = exports.ArrowSmallDown = exports.ArrowSharemini = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGoSmall = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.Announcement = exports.Activity = void 0;
|
|
29
29
|
exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.Folder = exports.Flash = exports.FilterUp = exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Completed = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = void 0;
|
|
30
|
-
exports.
|
|
30
|
+
exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = void 0;
|
|
31
31
|
exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusCircle = exports.PlusBig = void 0;
|
|
32
|
-
exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.RotateRight = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = void 0;
|
|
32
|
+
exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = void 0;
|
|
33
33
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
34
34
|
var Activity_1 = __importDefault(require("./Activity"));
|
|
35
35
|
Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
|
|
@@ -329,8 +329,8 @@ var PaperUpload_1 = __importDefault(require("./PaperUpload"));
|
|
|
329
329
|
Object.defineProperty(exports, "PaperUpload", { enumerable: true, get: function () { return PaperUpload_1.default; } });
|
|
330
330
|
var Password_1 = __importDefault(require("./Password"));
|
|
331
331
|
Object.defineProperty(exports, "Password", { enumerable: true, get: function () { return Password_1.default; } });
|
|
332
|
-
var
|
|
333
|
-
Object.defineProperty(exports, "
|
|
332
|
+
var Pause_1 = __importDefault(require("./Pause"));
|
|
333
|
+
Object.defineProperty(exports, "Pause", { enumerable: true, get: function () { return Pause_1.default; } });
|
|
334
334
|
var PlusBig_1 = __importDefault(require("./PlusBig"));
|
|
335
335
|
Object.defineProperty(exports, "PlusBig", { enumerable: true, get: function () { return PlusBig_1.default; } });
|
|
336
336
|
var PlusCircle_1 = __importDefault(require("./PlusCircle"));
|
|
@@ -439,8 +439,12 @@ var VolumeDown_1 = __importDefault(require("./VolumeDown"));
|
|
|
439
439
|
Object.defineProperty(exports, "VolumeDown", { enumerable: true, get: function () { return VolumeDown_1.default; } });
|
|
440
440
|
var VolumeOff_1 = __importDefault(require("./VolumeOff"));
|
|
441
441
|
Object.defineProperty(exports, "VolumeOff", { enumerable: true, get: function () { return VolumeOff_1.default; } });
|
|
442
|
+
var VolumeOffSm_1 = __importDefault(require("./VolumeOffSm"));
|
|
443
|
+
Object.defineProperty(exports, "VolumeOffSm", { enumerable: true, get: function () { return VolumeOffSm_1.default; } });
|
|
442
444
|
var VolumeUp_1 = __importDefault(require("./VolumeUp"));
|
|
443
445
|
Object.defineProperty(exports, "VolumeUp", { enumerable: true, get: function () { return VolumeUp_1.default; } });
|
|
446
|
+
var VolumeUpSm_1 = __importDefault(require("./VolumeUpSm"));
|
|
447
|
+
Object.defineProperty(exports, "VolumeUpSm", { enumerable: true, get: function () { return VolumeUpSm_1.default; } });
|
|
444
448
|
var Wallet_1 = __importDefault(require("./Wallet"));
|
|
445
449
|
Object.defineProperty(exports, "Wallet", { enumerable: true, get: function () { return Wallet_1.default; } });
|
|
446
450
|
var Wallet2_1 = __importDefault(require("./Wallet2"));
|
|
@@ -497,6 +501,8 @@ var More_1 = __importDefault(require("./More"));
|
|
|
497
501
|
Object.defineProperty(exports, "More", { enumerable: true, get: function () { return More_1.default; } });
|
|
498
502
|
var NewYear_1 = __importDefault(require("./NewYear"));
|
|
499
503
|
Object.defineProperty(exports, "NewYear", { enumerable: true, get: function () { return NewYear_1.default; } });
|
|
504
|
+
var Play_1 = __importDefault(require("./Play"));
|
|
505
|
+
Object.defineProperty(exports, "Play", { enumerable: true, get: function () { return Play_1.default; } });
|
|
500
506
|
var RotateRight_1 = __importDefault(require("./RotateRight"));
|
|
501
507
|
Object.defineProperty(exports, "RotateRight", { enumerable: true, get: function () { return RotateRight_1.default; } });
|
|
502
508
|
var TextLoading_1 = __importDefault(require("./TextLoading"));
|
|
@@ -1108,9 +1114,9 @@ exports.iconList = {
|
|
|
1108
1114
|
var props = __rest(_a, []);
|
|
1109
1115
|
return (0, jsx_runtime_1.jsx)(Password_1.default, __assign({}, props));
|
|
1110
1116
|
},
|
|
1111
|
-
|
|
1117
|
+
Pause: function (_a) {
|
|
1112
1118
|
var props = __rest(_a, []);
|
|
1113
|
-
return (0, jsx_runtime_1.jsx)(
|
|
1119
|
+
return (0, jsx_runtime_1.jsx)(Pause_1.default, __assign({}, props));
|
|
1114
1120
|
},
|
|
1115
1121
|
PlusBig: function (_a) {
|
|
1116
1122
|
var props = __rest(_a, []);
|
|
@@ -1328,10 +1334,18 @@ exports.iconList = {
|
|
|
1328
1334
|
var props = __rest(_a, []);
|
|
1329
1335
|
return (0, jsx_runtime_1.jsx)(VolumeOff_1.default, __assign({}, props));
|
|
1330
1336
|
},
|
|
1337
|
+
VolumeOffSm: function (_a) {
|
|
1338
|
+
var props = __rest(_a, []);
|
|
1339
|
+
return (0, jsx_runtime_1.jsx)(VolumeOffSm_1.default, __assign({}, props));
|
|
1340
|
+
},
|
|
1331
1341
|
VolumeUp: function (_a) {
|
|
1332
1342
|
var props = __rest(_a, []);
|
|
1333
1343
|
return (0, jsx_runtime_1.jsx)(VolumeUp_1.default, __assign({}, props));
|
|
1334
1344
|
},
|
|
1345
|
+
VolumeUpSm: function (_a) {
|
|
1346
|
+
var props = __rest(_a, []);
|
|
1347
|
+
return (0, jsx_runtime_1.jsx)(VolumeUpSm_1.default, __assign({}, props));
|
|
1348
|
+
},
|
|
1335
1349
|
Wallet: function (_a) {
|
|
1336
1350
|
var props = __rest(_a, []);
|
|
1337
1351
|
return (0, jsx_runtime_1.jsx)(Wallet_1.default, __assign({}, props));
|
|
@@ -1444,6 +1458,10 @@ exports.iconList = {
|
|
|
1444
1458
|
var props = __rest(_a, []);
|
|
1445
1459
|
return (0, jsx_runtime_1.jsx)(NewYear_1.default, __assign({}, props));
|
|
1446
1460
|
},
|
|
1461
|
+
Play: function (_a) {
|
|
1462
|
+
var props = __rest(_a, []);
|
|
1463
|
+
return (0, jsx_runtime_1.jsx)(Play_1.default, __assign({}, props));
|
|
1464
|
+
},
|
|
1447
1465
|
RotateRight: function (_a) {
|
|
1448
1466
|
var props = __rest(_a, []);
|
|
1449
1467
|
return (0, jsx_runtime_1.jsx)(RotateRight_1.default, __assign({}, props));
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const sizes:
|
|
3
|
-
type
|
|
2
|
+
export declare const sizes: readonly ["medium", "small"];
|
|
3
|
+
type Size = typeof sizes[number];
|
|
4
4
|
export interface ProductCardHorizontal {
|
|
5
|
-
size?:
|
|
5
|
+
size?: Size;
|
|
6
6
|
title?: string;
|
|
7
7
|
description?: string;
|
|
8
8
|
price?: string;
|
|
@@ -12,11 +12,16 @@ export interface ProductCardHorizontal {
|
|
|
12
12
|
component?: React.ReactNode;
|
|
13
13
|
onClick?(): void;
|
|
14
14
|
hasLoading?: boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
tabIndex?: number;
|
|
17
|
+
'data-id'?: string;
|
|
18
|
+
'data-role'?: string;
|
|
19
|
+
'data-selected'?: boolean;
|
|
15
20
|
}
|
|
16
21
|
export interface ProductCardHorizontalStyledProps {
|
|
17
22
|
$hasLoading?: boolean;
|
|
18
|
-
$size?:
|
|
23
|
+
$size?: Size;
|
|
19
24
|
}
|
|
20
|
-
export declare const ProductCardHorizontalDefault: ProductCardHorizontal
|
|
21
|
-
export type ProductCardHorizontalProps =
|
|
25
|
+
export declare const ProductCardHorizontalDefault: Required<Omit<ProductCardHorizontal, 'className' | 'tabIndex' | 'data-id' | 'data-role' | 'data-selected'>>;
|
|
26
|
+
export type ProductCardHorizontalProps = ProductCardHorizontal;
|
|
22
27
|
export {};
|
|
@@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.Date = exports.CustomerName = exports.HorizontalLine = exports.Logo = exports.Bottom = exports.Line = exports.Description = exports.Stars = exports.Title = exports.Detail = exports.ImgWrapper = exports.ReviewCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.ReviewCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n"])));
|
|
13
|
-
exports.ImgWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items:
|
|
13
|
+
exports.ImgWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n justify-content: flex-start;\n .img{\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 0 auto;\n max-width: 64px;\n * {\n display: block !important;\n }\n }\n"], ["\n display: flex;\n align-items: flex-end;\n justify-content: flex-start;\n .img{\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 0 auto;\n max-width: 64px;\n * {\n display: block !important;\n }\n }\n"])));
|
|
14
14
|
exports.Detail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n"], ["\n"])));
|
|
15
|
-
exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n color: var(--dark-opacity-75);\n font : var(--body-bold-14-17);\n"], ["\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n color: var(--dark-opacity-75);\n font : var(--body-bold-14-17);\n"])));
|
|
15
|
+
exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n color: var(--dark-opacity-75);\n font : var(--body-bold-14-17);\n min-height: 34px;\n"], ["\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n color: var(--dark-opacity-75);\n font : var(--body-bold-14-17);\n min-height: 34px;\n"])));
|
|
16
16
|
exports.Stars = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .star{\n + .star{\n margin-left: -2px;\n }\n div{\n display: block;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .star{\n + .star{\n margin-left: -2px;\n }\n div{\n display: block;\n }\n }\n"])));
|
|
17
17
|
exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-75);\n margin: 1rem 0 1.5rem 0;\n overflow: hidden;\n position: relative;\n min-height: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n"], ["\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-75);\n margin: 1rem 0 1.5rem 0;\n overflow: hidden;\n position: relative;\n min-height: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n"])));
|
|
18
18
|
exports.Line = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-bottom: 1px solid var(--icon-shadow-color);\n margin-bottom: 1rem;\n"], ["\n border-bottom: 1px solid var(--icon-shadow-color);\n margin-bottom: 1rem;\n"])));
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { SearchBoxProps } from "./props";
|
|
2
|
-
declare const
|
|
3
|
-
export default
|
|
3
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<SearchBoxProps & React.RefAttributes<HTMLInputElement>>>;
|
|
4
|
+
export default _default;
|
|
@@ -10,68 +10,143 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
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
|
+
};
|
|
13
36
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
37
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
38
|
};
|
|
16
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
40
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
-
var react_1 = require("react");
|
|
41
|
+
var react_1 = __importStar(require("react"));
|
|
19
42
|
var props_1 = require("./props");
|
|
20
43
|
var SearchBox_styled_1 = require("./SearchBox.styled");
|
|
21
44
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
22
45
|
var simplebar_react_1 = __importDefault(require("simplebar-react"));
|
|
23
46
|
var react_i18next_1 = require("react-i18next");
|
|
24
47
|
var ProductCardHorizontal_1 = __importDefault(require("../ProductCardHorizontal"));
|
|
25
|
-
var SearchBox = function (_a) {
|
|
26
|
-
var _b
|
|
48
|
+
var SearchBox = react_1.default.forwardRef(function (_a, ref) {
|
|
49
|
+
var _b;
|
|
50
|
+
var _c = _a.onKeyUp, onKeyUp = _c === void 0 ? props_1.SearchBoxDefault.onKeyUp : _c, _d = _a.onBlur, onBlur = _d === void 0 ? props_1.SearchBoxDefault.onBlur : _d, _e = _a.onFocus, onFocus = _e === void 0 ? props_1.SearchBoxDefault.onFocus : _e, _f = _a.onChange, onChange = _f === void 0 ? props_1.SearchBoxDefault.onChange : _f, _g = _a.onButtonClick, onButtonClick = _g === void 0 ? props_1.SearchBoxDefault.onButtonClick : _g, children = _a.children, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.SearchBoxDefault.isLoading : _h, _j = _a.showResultList, showResultList = _j === void 0 ? props_1.SearchBoxDefault.showResultList : _j, _k = _a.placeholder, placeholder = _k === void 0 ? props_1.SearchBoxDefault.placeholder : _k, _l = _a.size, size = _l === void 0 ? props_1.SearchBoxDefault.size : _l, _m = _a.value, value = _m === void 0 ? props_1.SearchBoxDefault.value : _m, _o = _a.maxResultHeight, maxResultHeight = _o === void 0 ? props_1.SearchBoxDefault.maxResultHeight : _o, _p = _a.minSearchLength, minSearchLength = _p === void 0 ? props_1.SearchBoxDefault.minSearchLength : _p, _q = _a.ariaLabel, ariaLabel = _q === void 0 ? props_1.SearchBoxDefault.ariaLabel : _q, _r = _a.id, id = _r === void 0 ? "searchbox" : _r, _s = _a.disabled, disabled = _s === void 0 ? props_1.SearchBoxDefault.disabled : _s, className = _a.className;
|
|
27
51
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
28
|
-
var resultRef = (0, react_1.useRef)();
|
|
52
|
+
var resultRef = (0, react_1.useRef)(null);
|
|
29
53
|
var simplebarRef = (0, react_1.useRef)(null);
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
54
|
+
var innerRef = (0, react_1.useRef)(null);
|
|
55
|
+
var _t = (0, react_1.useState)(null), selectedIndex = _t[0], setSelectedIndex = _t[1];
|
|
56
|
+
// Forward the ref while maintaining internal ref
|
|
57
|
+
var handleRef = function (element) {
|
|
58
|
+
innerRef.current = element;
|
|
59
|
+
if (typeof ref === 'function') {
|
|
60
|
+
ref(element);
|
|
36
61
|
}
|
|
37
|
-
else {
|
|
38
|
-
|
|
62
|
+
else if (ref) {
|
|
63
|
+
ref.current = element;
|
|
39
64
|
}
|
|
40
65
|
};
|
|
41
|
-
var
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var charCode = e.keyCode || e.which;
|
|
45
|
-
if ([38, 40].includes(charCode)) {
|
|
46
|
-
e.preventDefault();
|
|
47
|
-
// 38 up , 40 down
|
|
48
|
-
var list_1 = (_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
|
|
49
|
-
if (list_1.length > 0) {
|
|
50
|
-
setSelectedIndex(function (prev) { return charCode === 38 ? prev === 0 ? 0 : prev - 1 : prev === list_1.length - 1 ? list_1.length - 1 : prev === null ? 0 : prev + 1; });
|
|
51
|
-
}
|
|
66
|
+
var handleKeyUp = (0, react_1.useCallback)(function (e) {
|
|
67
|
+
if (![38, 40, 13].includes(e.keyCode)) {
|
|
68
|
+
onKeyUp(e);
|
|
52
69
|
}
|
|
53
70
|
else {
|
|
54
|
-
|
|
71
|
+
e.preventDefault();
|
|
55
72
|
}
|
|
56
|
-
};
|
|
73
|
+
}, [onKeyUp]);
|
|
74
|
+
var handleKeyDown = (0, react_1.useCallback)(function (e) {
|
|
75
|
+
var _a, _b;
|
|
76
|
+
if (!showResultList)
|
|
77
|
+
return;
|
|
78
|
+
var list = (_a = resultRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".productCard");
|
|
79
|
+
if (!(list === null || list === void 0 ? void 0 : list.length))
|
|
80
|
+
return;
|
|
81
|
+
switch (e.keyCode) {
|
|
82
|
+
case 38: // up
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
setSelectedIndex(function (prev) {
|
|
85
|
+
return prev === null ? list.length - 1 :
|
|
86
|
+
prev === 0 ? 0 : prev - 1;
|
|
87
|
+
});
|
|
88
|
+
break;
|
|
89
|
+
case 40: // down
|
|
90
|
+
e.preventDefault();
|
|
91
|
+
setSelectedIndex(function (prev) {
|
|
92
|
+
return prev === null ? 0 :
|
|
93
|
+
prev === list.length - 1 ? list.length - 1 : prev + 1;
|
|
94
|
+
});
|
|
95
|
+
break;
|
|
96
|
+
case 13: // enter
|
|
97
|
+
e.preventDefault();
|
|
98
|
+
if (selectedIndex !== null) {
|
|
99
|
+
list[selectedIndex].click();
|
|
100
|
+
}
|
|
101
|
+
break;
|
|
102
|
+
case 27: // escape
|
|
103
|
+
e.preventDefault();
|
|
104
|
+
(_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.blur();
|
|
105
|
+
break;
|
|
106
|
+
default:
|
|
107
|
+
setSelectedIndex(null);
|
|
108
|
+
}
|
|
109
|
+
}, [showResultList, selectedIndex]);
|
|
57
110
|
(0, react_1.useEffect)(function () {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
111
|
+
if (!resultRef.current || selectedIndex === null)
|
|
112
|
+
return;
|
|
113
|
+
var list = resultRef.current.querySelectorAll(".productCard");
|
|
114
|
+
list.forEach(function (el, index) {
|
|
61
115
|
var _a;
|
|
62
116
|
if (index === selectedIndex) {
|
|
63
117
|
el.classList.add("selected");
|
|
64
|
-
(_a = simplebarRef.current
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
118
|
+
var scrollContainer = (_a = simplebarRef.current) === null || _a === void 0 ? void 0 : _a.el.querySelector('.simplebar-content-wrapper');
|
|
119
|
+
if (scrollContainer) {
|
|
120
|
+
var elementTop = el.offsetTop;
|
|
121
|
+
var elementHeight = el.offsetHeight;
|
|
122
|
+
var containerHeight = scrollContainer.clientHeight;
|
|
123
|
+
var scrollTop = scrollContainer.scrollTop;
|
|
124
|
+
if (elementTop < scrollTop) {
|
|
125
|
+
scrollContainer.scrollTo({
|
|
126
|
+
top: elementTop,
|
|
127
|
+
behavior: 'smooth'
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
else if (elementTop + elementHeight > scrollTop + containerHeight) {
|
|
131
|
+
scrollContainer.scrollTo({
|
|
132
|
+
top: elementTop + elementHeight - containerHeight,
|
|
133
|
+
behavior: 'smooth'
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
}
|
|
69
137
|
}
|
|
70
138
|
else {
|
|
71
139
|
el.classList.remove("selected");
|
|
72
140
|
}
|
|
73
141
|
});
|
|
74
142
|
}, [selectedIndex]);
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
143
|
+
var shouldShowResults = showResultList &&
|
|
144
|
+
(!minSearchLength || ((_b = value === null || value === void 0 ? void 0 : value.length) !== null && _b !== void 0 ? _b : 0) >= minSearchLength);
|
|
145
|
+
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": shouldShowResults, "$size": size, "$disabled": disabled, className: className }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadowBox" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { ref: handleRef, type: "text", id: id, "aria-label": ariaLabel, "aria-expanded": shouldShowResults, "aria-controls": shouldShowResults ? "".concat(id, "-results") : undefined, "aria-activedescendant": selectedIndex !== null ? "".concat(id, "-result-").concat(selectedIndex) : undefined, role: "combobox", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange, disabled: disabled, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH"), disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Searchsmall" }) }))] })), shouldShowResults && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList", id: "".concat(id, "-results"), role: "listbox" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "resultListInner" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false, style: { maxHeight: maxResultHeight } }, { children: isLoading ? (Array.from({ length: 4 }, function (_, index) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard", "data-id": "".concat(id, "-result-").concat(index), "data-role": "option", "data-selected": selectedIndex === index }, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontal_1.default, { hasLoading: true }) }), index)); })) : (react_1.default.Children.map(children, function (child, index) {
|
|
146
|
+
if (!react_1.default.isValidElement(child))
|
|
147
|
+
return child;
|
|
148
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard", "data-id": "".concat(id, "-result-").concat(index), "data-role": "option", "data-selected": selectedIndex === index, tabIndex: -1 }, { children: child }), index));
|
|
149
|
+
})) })) })) })))] })));
|
|
150
|
+
});
|
|
151
|
+
SearchBox.displayName = 'SearchBox';
|
|
152
|
+
exports.default = react_1.default.memo(SearchBox);
|