krl-alfred 1.76.53 → 1.77.1
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.js +7 -5
- package/dist/components/ActionButton/ActionButton.styled.js +1 -1
- package/dist/components/ActionButton/stories/ActionButton.stories.js +1 -0
- package/dist/components/Alert/Alert.styled.js +1 -1
- package/dist/components/Badges/Badges.js +3 -0
- package/dist/components/Badges/layouts/belt/belt.styled.js +4 -3
- package/dist/components/Badges/layouts/belt/index.js +1 -1
- package/dist/components/Badges/layouts/dark/dark.styled.js +1 -1
- package/dist/components/Badges/layouts/dark/index.js +1 -1
- package/dist/components/Badges/layouts/text/index.js +20 -0
- package/dist/components/Badges/layouts/text/text.styled.js +39 -0
- package/dist/components/Badges/props.js +3 -2
- package/dist/components/Badges/stories/Badges.stories.js +1 -0
- package/dist/components/Banner/layouts/layout1/layout1.styled.js +1 -1
- package/dist/components/BannerCard/BannerCard.styled.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.styled.js +1 -1
- package/dist/components/CategoryMenu/CategoryMenu.styled.js +1 -1
- package/dist/components/Dropdown/Dropdown.js +13 -4
- package/dist/components/Dropdown/Dropdown.styled.js +37 -1
- package/dist/components/Dropdown/props.js +2 -0
- package/dist/components/Icon/Twitter.js +1 -1
- package/dist/components/Icon/TwitterFilled.js +40 -0
- package/dist/components/Icon/index.js +8 -2
- package/dist/components/InfoBox/InfoBox.js +2 -2
- package/dist/components/InfoBox/InfoBox.styled.js +58 -8
- package/dist/components/InfoBox/props.js +3 -2
- package/dist/components/InfoBox/stories/InfoBox.stories.js +6 -1
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/InsuranceBox/InsuranceBox.js +3 -2
- package/dist/components/InsuranceBox/InsuranceBox.styled.js +1 -1
- package/dist/components/InsuranceBox/stories/InsuranceBox.stories.js +1 -0
- package/dist/components/ListGroup/ListGroup.styled.js +1 -1
- package/dist/components/Modal/Modal.styled.js +1 -1
- package/dist/components/PaymentCart/PaymentCart.js +63 -0
- package/dist/components/PaymentCart/PaymentCart.styled.js +23 -0
- package/dist/components/PaymentCart/index.js +8 -0
- package/dist/components/PaymentCart/props.js +3 -0
- package/dist/components/PaymentCart/stories/PaymentCart.stories.js +47 -0
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +1 -1
- package/dist/components/RadioButton/layouts/boxed/Boxed.js +3 -2
- package/dist/components/RadioButton/layouts/boxed/Boxed.styled.js +2 -2
- package/dist/components/RadioButton/stories/RadioButton.stories.js +3 -0
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +1 -1
- package/dist/components/SuggestBox/SuggestBox.styled.js +1 -1
- package/dist/components/Tabs/TabContext.js +13 -0
- package/dist/components/Tabs/TabItem.js +36 -0
- package/dist/components/Tabs/Tabs.js +74 -0
- package/dist/components/Tabs/Tabs.styled.js +17 -0
- package/dist/components/Tabs/index.js +8 -0
- package/dist/components/Tabs/props.js +2 -0
- package/dist/components/Tabs/stories/Tabs.stories.js +33 -0
- package/dist/components/ValueProposition/layouts/horizontal/Horizontal.styled.js +1 -1
- package/dist/components/ValueProposition/layouts/square/Square.styled.js +1 -1
- package/dist/components/ValueProposition/layouts/vertical/Vertical.styled.js +2 -2
- package/dist/i18n/locales/english.json +1 -0
- package/dist/i18n/locales/turkish.json +5 -1
- package/dist/index.js +5 -1
- package/package.json +1 -1
|
@@ -23,9 +23,10 @@ var date_fns_1 = require("date-fns");
|
|
|
23
23
|
var react_i18next_1 = require("react-i18next");
|
|
24
24
|
var ActionButton = function (props) {
|
|
25
25
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
26
|
-
var _a = (0, react_1.useState)(0),
|
|
27
|
-
var _b = (0, react_1.useState)(0),
|
|
28
|
-
var _c = (0, react_1.useState)(0),
|
|
26
|
+
var _a = (0, react_1.useState)(0), months = _a[0], setMonths = _a[1];
|
|
27
|
+
var _b = (0, react_1.useState)(0), days = _b[0], setDays = _b[1];
|
|
28
|
+
var _c = (0, react_1.useState)(0), minutes = _c[0], setMinutes = _c[1];
|
|
29
|
+
var _d = (0, react_1.useState)(0), hours = _d[0], setHours = _d[1];
|
|
29
30
|
//const [secounds,setSecounds] = useState(0);
|
|
30
31
|
var deadline = new Date(props.date).getTime();
|
|
31
32
|
var count = function () {
|
|
@@ -34,7 +35,8 @@ var ActionButton = function (props) {
|
|
|
34
35
|
start: deadline,
|
|
35
36
|
end: now
|
|
36
37
|
});
|
|
37
|
-
|
|
38
|
+
setMonths(deadline - now > 0 ? (0, date_fns_1.differenceInMonths)(deadline, now) : 0);
|
|
39
|
+
setDays(deadline - now > 0 ? props.isMonthVisible ? duration === null || duration === void 0 ? void 0 : duration.days : (0, date_fns_1.differenceInDays)(deadline, now) : 0);
|
|
38
40
|
setMinutes(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.minutes : 0);
|
|
39
41
|
setHours(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.hours : 0);
|
|
40
42
|
//setSecounds(deadline - now > 0 ? duration?.seconds : 0)
|
|
@@ -45,7 +47,7 @@ var ActionButton = function (props) {
|
|
|
45
47
|
(0, react_1.useEffect)(function () {
|
|
46
48
|
count();
|
|
47
49
|
}, [props.date]);
|
|
48
|
-
return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { iconStrokeWidth: "3px", size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] }))] })));
|
|
50
|
+
return ((0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "top" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: props.iconStrokeWidth, name: props.icon, color: "var(--primary)", width: "45px", height: "45px" }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: props.title }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "bottom" }, { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "timer" }, { children: [props.isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: months })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('month') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: days })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('day') }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: hours.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('hour') }))] })), !props.isMonthVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "dots" }, { children: ":" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "box" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "timerTitle" }, { children: minutes.toString().padStart(2, '0') })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "timerDescription" }, { children: t('minute') }))] }))] }))] })), (0, jsx_runtime_1.jsx)(Button_1.default, { iconStrokeWidth: "3px", size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] }))] })));
|
|
49
51
|
};
|
|
50
52
|
ActionButton.defaultProps = {
|
|
51
53
|
title: "Title",
|
|
@@ -9,5 +9,5 @@ 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
|
-
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 .top ,.bottom{\n display: grid;\n grid-template-columns: 61px 1fr;\n align-content: center;\n align-items: center;\n }\n .top{\n .icon{\n svg{\n display: block;\n }\n margin-right: 1rem;\n }\n .title{\n display: block;\n font:var(--body-bold-14-17);\n }\n }\n .bottom{\n margin-top: 0.5rem;\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 .timer{\n display: grid;\n grid-template-columns: repeat(5,auto);\n align-items:center;\n justify-content: start;\n .box{\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 4px;\n text-align: center;\n display: grid;\n align-items: center;\n align-content: center;\n box-shadow: 0 6px 30px 0
|
|
12
|
+
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 .top ,.bottom{\n display: grid;\n grid-template-columns: 61px 1fr;\n align-content: center;\n align-items: center;\n }\n .top{\n .icon{\n svg{\n display: block;\n }\n margin-right: 1rem;\n }\n .title{\n display: block;\n font:var(--body-bold-14-17);\n }\n }\n .bottom{\n margin-top: 0.5rem;\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 .timer{\n display: grid;\n grid-template-columns: repeat(5,auto);\n align-items:center;\n justify-content: start;\n .box{\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 4px;\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 .timerTitle{\n font:var(--title-extra-bold-16-19);\n }\n .timerDescription{\n font:var(--caption-regular-10-12);\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 .top ,.bottom{\n display: grid;\n grid-template-columns: 61px 1fr;\n align-content: center;\n align-items: center;\n }\n .top{\n .icon{\n svg{\n display: block;\n }\n margin-right: 1rem;\n }\n .title{\n display: block;\n font:var(--body-bold-14-17);\n }\n }\n .bottom{\n margin-top: 0.5rem;\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 .timer{\n display: grid;\n grid-template-columns: repeat(5,auto);\n align-items:center;\n justify-content: start;\n .box{\n width: 40px;\n height: 48px;\n background-color: white;\n border-radius: 4px;\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 .timerTitle{\n font:var(--title-extra-bold-16-19);\n }\n .timerDescription{\n font:var(--caption-regular-10-12);\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; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.AlertStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border-left: 8px solid ", ";\n box-shadow: 0 6px 30px 0
|
|
12
|
+
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border-left: 8px solid ", ";\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n width: ", ";\n display: flex;\n padding: 1rem;\n box-sizing: border-box;\n margin-top: ", ";\n margin-bottom: ", ";\n\n .left {\n padding-right: 1rem;\n > div {\n display: block;\n svg {\n display: block;\n } \n }\n }\n\n .right {\n display: flex;\n flex-direction: column;\n color: var(--dark);\n\n h1 {\n margin: 0;\n padding-top: 3px;\n font:var(--title-semi-bold-16-19);\n }\n\n p {\n margin: 0.5rem 0 0 0;\n font:var(--body-medium-14-17);\n }\n .description{\n font:var(--body-medium-14-17);\n ul{\n padding-left: 1.5rem;\n } \n }\n }\n"], ["\n border-radius: 8px;\n border-left: 8px solid ", ";\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n width: ", ";\n display: flex;\n padding: 1rem;\n box-sizing: border-box;\n margin-top: ", ";\n margin-bottom: ", ";\n\n .left {\n padding-right: 1rem;\n > div {\n display: block;\n svg {\n display: block;\n } \n }\n }\n\n .right {\n display: flex;\n flex-direction: column;\n color: var(--dark);\n\n h1 {\n margin: 0;\n padding-top: 3px;\n font:var(--title-semi-bold-16-19);\n }\n\n p {\n margin: 0.5rem 0 0 0;\n font:var(--body-medium-14-17);\n }\n .description{\n font:var(--body-medium-14-17);\n ul{\n padding-left: 1.5rem;\n } \n }\n }\n"])), function (props) {
|
|
13
13
|
switch (props.variant) {
|
|
14
14
|
case 'warning':
|
|
15
15
|
return "var(--yellow)";
|
|
@@ -17,12 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
18
|
var belt_1 = __importDefault(require("./layouts/belt"));
|
|
19
19
|
var dark_1 = __importDefault(require("./layouts/dark"));
|
|
20
|
+
var text_1 = __importDefault(require("./layouts/text"));
|
|
20
21
|
var Badges = function (props) {
|
|
21
22
|
switch (props.layout) {
|
|
22
23
|
case 'belt':
|
|
23
24
|
return (0, jsx_runtime_1.jsx)(belt_1.default, __assign({}, props));
|
|
24
25
|
case 'dark':
|
|
25
26
|
return (0, jsx_runtime_1.jsx)(dark_1.default, __assign({}, props));
|
|
27
|
+
case 'text':
|
|
28
|
+
return (0, jsx_runtime_1.jsx)(text_1.default, __assign({}, props));
|
|
26
29
|
default:
|
|
27
30
|
return (0, jsx_runtime_1.jsx)(belt_1.default, __assign({}, props));
|
|
28
31
|
}
|
|
@@ -9,12 +9,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.BadgesStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
var devices_1 = require("../../../../constants/devices");
|
|
13
|
+
exports.BadgesStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n position: relative;\n svg{\n display: block;\n ", "\n }\n .text{\n position: absolute;\n width: ", ";\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: ", ";\n left: ", ";\n font: ", ";\n ", "\n }\n"], ["\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n position: relative;\n svg{\n display: block;\n ", "\n }\n .text{\n position: absolute;\n width: ", ";\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: ", ";\n left: ", ";\n font: ", ";\n ", "\n }\n"])), function (props) { return props.$hasResponsive && "\n @media only screen and ".concat(devices_1.devices.lg, " {\n width: 60px;\n height: 60px;\n }\n "); }, function (props) { return props.$size === "small" ? "60px" : "90px"; }, function (props) { return props.$size === "small" ? "15px" : "27px"; }, function (props) { return props.$size === "small" ? "-5px" : "-7px"; }, function (props) {
|
|
14
|
+
switch (props.$size) {
|
|
14
15
|
case 'small':
|
|
15
16
|
return "var(--caption-bold-10-12)";
|
|
16
17
|
default:
|
|
17
18
|
return "var(--body-extra-bold-13-16)";
|
|
18
19
|
}
|
|
19
|
-
});
|
|
20
|
+
}, function (props) { return props.$hasResponsive && "\n @media only screen and ".concat(devices_1.devices.lg, " {\n width: 60px;\n top: 15px;\n left: -5px;\n font: var(--caption-bold-10-12);\n line-height: 15px;\n }\n "); });
|
|
20
21
|
var templateObject_1;
|
|
@@ -19,7 +19,7 @@ var belt_styled_1 = require("./belt.styled");
|
|
|
19
19
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
20
20
|
var Belt = function (props) {
|
|
21
21
|
var title = props.title, size = props.size;
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(belt_styled_1.BadgesStyled, __assign({ "$hasResponsive": props.hasResponsive, "$size": props.size }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: size === "small" ? "56px" : "90px", height: size === "small" ? "56px" : "90px" }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "text" }, { children: title }))] })));
|
|
23
23
|
};
|
|
24
24
|
Belt.defaultProps = {};
|
|
25
25
|
exports.default = Belt;
|
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.DarkStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.DarkStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n left: ", ";\n top: ", ";\n z-index: 2;\n svg{\n display: block;\n }\n"], ["\n position: relative;\n left: ", ";\n top: ", ";\n z-index: 2;\n svg{\n display: block;\n }\n"])), function (props) { return props
|
|
12
|
+
exports.DarkStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n left: ", ";\n top: ", ";\n z-index: 2;\n svg{\n display: block;\n }\n"], ["\n position: relative;\n left: ", ";\n top: ", ";\n z-index: 2;\n svg{\n display: block;\n }\n"])), function (props) { return props.$left ? props.$left : "0"; }, function (props) { return props.$top ? props.$top : "0"; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -40,7 +40,7 @@ var Belt = function (props) {
|
|
|
40
40
|
setHeight("80px");
|
|
41
41
|
}
|
|
42
42
|
}, [size]);
|
|
43
|
-
return ((0, jsx_runtime_1.jsx)(dark_styled_1.DarkStyled, __assign({
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(dark_styled_1.DarkStyled, __assign({ "$left": props.left, "$top": props.top }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DarkBadge", width: width, height: height }) })));
|
|
44
44
|
};
|
|
45
45
|
Belt.defaultProps = {};
|
|
46
46
|
exports.default = Belt;
|
|
@@ -0,0 +1,20 @@
|
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
|
+
var text_styled_1 = require("./text.styled");
|
|
16
|
+
var Belt = function (props) {
|
|
17
|
+
return ((0, jsx_runtime_1.jsx)(text_styled_1.TextStyled, __assign({ "$variant": props.variant }, { children: props.title })));
|
|
18
|
+
};
|
|
19
|
+
Belt.defaultProps = {};
|
|
20
|
+
exports.default = Belt;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.TextStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.TextStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: middle;\n font: var(--caption-semi-bold-10-12);\n border-radius: 3px;\n padding: 0 8px 0 8px;\n height: 17px;\n line-height: 17px;\n background-color: ", ";\n color: ", ";\n"], ["\n display: inline-block;\n vertical-align: middle;\n font: var(--caption-semi-bold-10-12);\n border-radius: 3px;\n padding: 0 8px 0 8px;\n height: 17px;\n line-height: 17px;\n background-color: ", ";\n color: ", ";\n"])), function (props) {
|
|
13
|
+
switch (props.$variant) {
|
|
14
|
+
case 'primary':
|
|
15
|
+
return "var(--primary)";
|
|
16
|
+
case 'secondary':
|
|
17
|
+
return "var(--primary-opacity-10)";
|
|
18
|
+
case 'danger':
|
|
19
|
+
return "var(--red)";
|
|
20
|
+
case 'disabled':
|
|
21
|
+
return "var(--dark-opacity-5)";
|
|
22
|
+
default:
|
|
23
|
+
return "var(--primary)";
|
|
24
|
+
}
|
|
25
|
+
}, function (props) {
|
|
26
|
+
switch (props.$variant) {
|
|
27
|
+
case 'primary':
|
|
28
|
+
return "white";
|
|
29
|
+
case 'secondary':
|
|
30
|
+
return "var(--primary)";
|
|
31
|
+
case 'danger':
|
|
32
|
+
return "white";
|
|
33
|
+
case 'disabled':
|
|
34
|
+
return "var(--dark-opacity-50)";
|
|
35
|
+
default:
|
|
36
|
+
return "white";
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
var templateObject_1;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.sizes = exports.layouts = void 0;
|
|
4
|
-
exports.layouts = ['belt', 'dark'];
|
|
3
|
+
exports.variants = exports.sizes = exports.layouts = void 0;
|
|
4
|
+
exports.layouts = ['belt', 'dark', 'text'];
|
|
5
5
|
exports.sizes = ['large', 'medium', 'small', 'xsmall'];
|
|
6
|
+
exports.variants = ['primary', 'secondary', 'danger', 'disabled'];
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerItem = exports.ThumbnailItem = exports.BannerStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
|
-
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0
|
|
13
|
+
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 var(--box-shadow-color);\n position: relative;\n z-index: 5;\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n color: var(--primary);\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n }\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 var(--box-shadow-color);\n position: relative;\n z-index: 5;\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n color: var(--primary);\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
exports.ThumbnailItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n background-color: ", ";\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n background-color: ", ";\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n"])), function (props) { return props.hasDarkTheme ? "var(--dark)" : "#fff"; });
|
|
15
15
|
exports.BannerItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n span {\n height: 174px !important;\n }\n }\n }\n"], ["\n\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n span {\n height: 174px !important;\n }\n }\n }\n"])), function (props) { return props.hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.hasDarkTheme ? "var(--dark)" : "#fff"; });
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n }\n }\n }\n"], ["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n }\n }\n }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color)
|
|
13
|
+
exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n }\n }\n }\n"], ["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n }\n }\n }\n"])), function (props) { return props.$hasShadow ? "\"box-shadow: 0 6px 30px 0 var(--box-shadow-color);\"" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
|
|
14
14
|
var templateObject_1;
|
|
@@ -24,5 +24,5 @@ exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 |
|
|
|
24
24
|
exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n padding: 0;\n font:var(--caption-medium-12-15);\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"], ["\n display: block;\n padding: 0;\n font:var(--caption-medium-12-15);\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"])), function (props) { return (props.$isActive ? "" : "&:hover{"); }, function (props) { return (props.$isActive ? "" : "}"); }, function (props) { return (props.$isSeeAll ? "font-weight: 700;" : ""); });
|
|
25
25
|
exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
|
|
26
26
|
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem 15px 2rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 2rem 15px 0.5rem 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"], ["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem 15px 2rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 2rem 15px 0.5rem 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"])), devices_1.devices.xl);
|
|
27
|
-
exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px
|
|
27
|
+
exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px var(--box-shadow-color);\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"], ["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px var(--box-shadow-color);\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
|
|
28
28
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
30
30
|
exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports.SubCategoryInner = exports.SubCategoryItem = exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none;\n &:not([href]){\n cursor: initial;\n *{\n cursor: initial;\n }\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none;\n &:not([href]){\n cursor: initial;\n *{\n cursor: initial;\n }\n }\n }\n"])));
|
|
33
|
-
var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0
|
|
33
|
+
var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"], ["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n"])));
|
|
34
34
|
exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n &:not(:last-child):not(:nth-last-child(2)){\n path, circle, rect {\n color : var(--dark-opacity-75)\n }\n }\n &:hover{\n &:not(:last-child):not(:nth-last-child(2)){\n path , circle, rect {\n color : var(--dark);\n }\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n &:last-child , &:nth-last-child(2){\n ul{\n left: auto;\n right: 0;\n }\n }\n ", "\n"], ["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n &:not(:last-child):not(:nth-last-child(2)){\n path, circle, rect {\n color : var(--dark-opacity-75)\n }\n }\n &:hover{\n &:not(:last-child):not(:nth-last-child(2)){\n path , circle, rect {\n color : var(--dark);\n }\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n &:last-child , &:nth-last-child(2){\n ul{\n left: auto;\n right: 0;\n }\n }\n ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n > a > span{\n ".concat(hoverAndActive, "\n }\n ") : ""; });
|
|
35
35
|
exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n color: var(--dark-opacity-75);\n background-color: white;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n color: var(--dark-opacity-75);\n background-color: white;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"])));
|
|
36
36
|
exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 24px;\n display:block;\n"], ["\n height: 24px;\n display:block;\n"])));
|
|
@@ -29,15 +29,24 @@ var Dropdown = function (props) {
|
|
|
29
29
|
}, [props.show]);
|
|
30
30
|
var ButtonLinkComponent = function (_a) {
|
|
31
31
|
var item = _a.item, children = _a.children;
|
|
32
|
-
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, {
|
|
32
|
+
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, __assign({ onClick: function (e) {
|
|
33
|
+
item.onClick(e);
|
|
34
|
+
setShowDropdown(false);
|
|
35
|
+
} }, { children: children }))) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug, onClick: function (e) {
|
|
36
|
+
item.onClick(e);
|
|
37
|
+
setShowDropdown(false);
|
|
38
|
+
} }, { children: children })));
|
|
33
39
|
};
|
|
34
40
|
var ToggleButton = function (_a) {
|
|
35
41
|
var children = _a.children;
|
|
36
|
-
return props.toggle ? ((0, jsx_runtime_1.jsx)(props.toggle, { children: children })) : ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: function () { return setShowDropdown(!showDropdown); } }, { children: "Toggle" })));
|
|
42
|
+
return props.toggle ? ((0, jsx_runtime_1.jsx)("span", __assign({ onClick: function () { return setShowDropdown(!showDropdown); } }, { children: (0, jsx_runtime_1.jsx)(props.toggle, { children: children }) }))) : ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: function () { return setShowDropdown(!showDropdown); } }, { children: "Toggle" })));
|
|
37
43
|
};
|
|
38
|
-
return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)(Dropdown_styled_1.DropdownStyled, __assign({ ref: dropdownRef, "$show": showDropdown }, { children: [(0, jsx_runtime_1.jsx)(ToggleButton, {}), (0, jsx_runtime_1.jsx)(Dropdown_styled_1.DropdownMenu, __assign({ "$show": showDropdown, "$size": props.size, "$isShowTopChevron": props.isShowTopChevron }, { children: (0, jsx_runtime_1.jsx)("ul", { children: (_a = props === null || props === void 0 ? void 0 : props.list) === null || _a === void 0 ? void 0 : _a.map(function (item, key) {
|
|
39
45
|
return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: item.title })) }, key));
|
|
40
46
|
}) }) }))] })));
|
|
41
47
|
};
|
|
42
|
-
Dropdown.defaultProps = {
|
|
48
|
+
Dropdown.defaultProps = {
|
|
49
|
+
size: "medium",
|
|
50
|
+
isShowTopChevron: true
|
|
51
|
+
};
|
|
43
52
|
exports.default = Dropdown;
|
|
@@ -10,5 +10,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.DropdownMenu = exports.DropdownStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.DropdownStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
13
|
-
exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n border-radius: 8px;\n background-color: white;\n
|
|
13
|
+
exports.DropdownMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n border-radius: 8px;\n background-color: white;\n box-sizing: border-box;\n z-index: 9;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n right: 0;\n top: calc(100% + 16px);\n opacity: ", ";\n visibility: ", ";\n padding: ", ";\n min-width: ", ";\n &:before {\n content: \"\";\n position: absolute;\n transform: rotate(45deg);\n right: 18px;\n transition: all 0.15s ease;\n background-color: white;\n width: 12px;\n height: 12px;\n border-radius: 3px;\n bottom: calc(100% - 6px);\n display: ", ";\n }\n\n ul{\n padding: 0;\n margin: 0;\n li{\n display: block;\n margin: 0;\n padding: 0;\n a{\n cursor: pointer;\n text-decoration: none;\n padding: ", ";\n font: ", ";\n display: block;\n color: var(--dark);\n border-radius: 0.5rem;\n position: relative;\n &:hover{\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n }\n &:is(.hasNotification){\n &:after{\n content: \"\";\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--primary);\n } \n }\n }\n + li{\n margin-top: 0.25rem;\n }\n }\n }\n"], ["\n position: absolute;\n border-radius: 8px;\n background-color: white;\n box-sizing: border-box;\n z-index: 9;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n right: 0;\n top: calc(100% + 16px);\n opacity: ", ";\n visibility: ", ";\n padding: ", ";\n min-width: ", ";\n &:before {\n content: \"\";\n position: absolute;\n transform: rotate(45deg);\n right: 18px;\n transition: all 0.15s ease;\n background-color: white;\n width: 12px;\n height: 12px;\n border-radius: 3px;\n bottom: calc(100% - 6px);\n display: ", ";\n }\n\n ul{\n padding: 0;\n margin: 0;\n li{\n display: block;\n margin: 0;\n padding: 0;\n a{\n cursor: pointer;\n text-decoration: none;\n padding: ", ";\n font: ", ";\n display: block;\n color: var(--dark);\n border-radius: 0.5rem;\n position: relative;\n &:hover{\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n }\n &:is(.hasNotification){\n &:after{\n content: \"\";\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--primary);\n } \n }\n }\n + li{\n margin-top: 0.25rem;\n }\n }\n }\n"])), function (props) { return props.$show ? "1" : "0"; }, function (props) { return props.$show ? "visible" : "hidden"; }, function (props) {
|
|
14
|
+
switch (props.$size) {
|
|
15
|
+
case 'small':
|
|
16
|
+
return "0.5rem";
|
|
17
|
+
case 'medium':
|
|
18
|
+
return "1rem";
|
|
19
|
+
default:
|
|
20
|
+
return "1rem";
|
|
21
|
+
}
|
|
22
|
+
}, function (props) {
|
|
23
|
+
switch (props.$size) {
|
|
24
|
+
case 'small':
|
|
25
|
+
return "169px";
|
|
26
|
+
case 'medium':
|
|
27
|
+
return "184px";
|
|
28
|
+
default:
|
|
29
|
+
return "184px";
|
|
30
|
+
}
|
|
31
|
+
}, function (props) { return props.$isShowTopChevron ? "block" : "none"; }, function (props) {
|
|
32
|
+
switch (props.$size) {
|
|
33
|
+
case 'small':
|
|
34
|
+
return "8px 12px";
|
|
35
|
+
case 'medium':
|
|
36
|
+
return "12px";
|
|
37
|
+
default:
|
|
38
|
+
return "12px";
|
|
39
|
+
}
|
|
40
|
+
}, function (props) {
|
|
41
|
+
switch (props.$size) {
|
|
42
|
+
case 'small':
|
|
43
|
+
return "var(--caption-medium-12-15)";
|
|
44
|
+
case 'medium':
|
|
45
|
+
return "var(--body-bold-13-16)";
|
|
46
|
+
default:
|
|
47
|
+
return "var(--body-bold-13-16)";
|
|
48
|
+
}
|
|
49
|
+
});
|
|
14
50
|
var templateObject_1, templateObject_2;
|
|
@@ -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 SvgTwitter = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgTwitter = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M3.22457 2.31328H3.1402L3.18071 2.38729L6.87119 9.12951L3.15978 14.6077L3.1069 14.6858H3.20117H4.04031H4.06683L4.08171 14.6638L7.3001 9.91323L9.89826 14.6598L9.91249 14.6858H9.94212H12.7978H12.8821L12.8416 14.6118L8.94267 7.48879L12.396 2.39133L12.4489 2.31328H12.3546H11.5155H11.489L11.4741 2.33524L8.51376 6.70507L6.12406 2.33927L6.10984 2.31328H6.08021H3.22457ZM10.2813 13.7411L4.54296 3.25783H5.74085L11.4792 13.7411H10.2813Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 0.1 }) }))); };
|
|
40
40
|
exports.default = SvgTwitter;
|
|
@@ -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 SvgTwitterFilled = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M16.9016 19H3.09862C1.93954 19 1 18.0605 1 16.9014V3.0986C1 1.93953 1.93954 1 3.09862 1H16.9014C18.0605 1 19 1.93953 19 3.0986V16.9012C19.0002 18.0605 18.0607 19 16.9016 19Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.76535 4.13672L8.60333 10.6056L3.73486 15.8649H4.83065L9.09308 11.2602L12.5369 15.8649H16.2656L11.1553 9.03226L15.6869 4.13672H14.5911L10.6658 8.37744L7.49409 4.13672H3.76535ZM5.37675 4.94399H7.08972L14.654 15.0578H12.941L5.37675 4.94399Z", fill: "white" })] }))); };
|
|
40
|
+
exports.default = SvgTwitterFilled;
|
|
@@ -28,8 +28,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
28
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
29
|
exports.House = exports.Home = exports.Hide = exports.Heart = exports.Graph = exports.Gift = 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
30
|
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.NoHiddenCost = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading2 = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegativeFilled = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = void 0;
|
|
31
|
-
exports.
|
|
32
|
-
exports.iconList = exports.Visa = exports.TwitterStroke = exports.Pointinghand = exports.PointFinger = exports.Plant = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Lgbt = exports.HeartArrow = void 0;
|
|
31
|
+
exports.FacebookStroke = exports.Confetti = exports.Youtube = exports.Work = exports.Whatsapp = exports.WaveLoading = 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.TwitterFilled = 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 = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = void 0;
|
|
32
|
+
exports.iconList = exports.Visa = exports.TwitterStroke = exports.Pointinghand = exports.PointFinger = exports.Plant = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Lgbt = exports.HeartArrow = exports.Grid = 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; } });
|
|
@@ -391,6 +391,8 @@ var Trash_1 = __importDefault(require("./Trash"));
|
|
|
391
391
|
Object.defineProperty(exports, "Trash", { enumerable: true, get: function () { return Trash_1.default; } });
|
|
392
392
|
var Twitter_1 = __importDefault(require("./Twitter"));
|
|
393
393
|
Object.defineProperty(exports, "Twitter", { enumerable: true, get: function () { return Twitter_1.default; } });
|
|
394
|
+
var TwitterFilled_1 = __importDefault(require("./TwitterFilled"));
|
|
395
|
+
Object.defineProperty(exports, "TwitterFilled", { enumerable: true, get: function () { return TwitterFilled_1.default; } });
|
|
394
396
|
var TwoUser_1 = __importDefault(require("./TwoUser"));
|
|
395
397
|
Object.defineProperty(exports, "TwoUser", { enumerable: true, get: function () { return TwoUser_1.default; } });
|
|
396
398
|
var Unlock_1 = __importDefault(require("./Unlock"));
|
|
@@ -1174,6 +1176,10 @@ exports.iconList = {
|
|
|
1174
1176
|
var props = __rest(_a, []);
|
|
1175
1177
|
return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, props));
|
|
1176
1178
|
},
|
|
1179
|
+
TwitterFilled: function (_a) {
|
|
1180
|
+
var props = __rest(_a, []);
|
|
1181
|
+
return (0, jsx_runtime_1.jsx)(TwitterFilled_1.default, __assign({}, props));
|
|
1182
|
+
},
|
|
1177
1183
|
TwoUser: function (_a) {
|
|
1178
1184
|
var props = __rest(_a, []);
|
|
1179
1185
|
return (0, jsx_runtime_1.jsx)(TwoUser_1.default, __assign({}, props));
|
|
@@ -20,7 +20,7 @@ var InfoBox_styled_1 = require("./InfoBox.styled");
|
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
21
|
var react_i18next_1 = require("react-i18next");
|
|
22
22
|
var InfoBox = function (props) {
|
|
23
|
-
var title = props.title, description = props.description, radius = props.radius, size = props.size;
|
|
23
|
+
var title = props.title, description = props.description, radius = props.radius, size = props.size, variant = props.variant, onClick = props.onClick;
|
|
24
24
|
var descriptionRef = (0, react_1.useRef)(null);
|
|
25
25
|
var inputRef = (0, react_1.useRef)(null);
|
|
26
26
|
var _a = (0, react_1.useState)(false), alert = _a[0], setAlert = _a[1];
|
|
@@ -55,7 +55,7 @@ var InfoBox = function (props) {
|
|
|
55
55
|
}
|
|
56
56
|
});
|
|
57
57
|
}, []);
|
|
58
|
-
return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ radius: radius }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, {
|
|
58
|
+
return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: props.onClick, "$radius": radius, "$variant": variant, "$hasLink": !!props.onClick, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "2px", name: variant === "danger" ? "Danger" : "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, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, { "$size": size, ref: descriptionRef, dangerouslySetInnerHTML: { __html: description } }), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!props.onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "2px", name: "ArrowSmallRight", width: "24px", height: "24px" }) }))] })));
|
|
59
59
|
};
|
|
60
60
|
InfoBox.defaultProps = {
|
|
61
61
|
size: "small"
|