wex-ui-lib 1.1.0 → 1.1.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/index.cjs.js +31 -23
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +31 -23
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Slider/Slider.stories.d.ts +1 -0
- package/dist/types/components/Slider/Slider.types.d.ts +2 -0
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -2026,8 +2026,8 @@ function Button(props) {
|
|
|
2026
2026
|
var DefaultButton = newStyled.button(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
|
|
2027
2027
|
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"], ["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || 'transparent'; }, function (props) { return props.color || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; });
|
|
2028
2028
|
var PillButton = newStyled(DefaultButton)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "], ["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "])));
|
|
2029
|
-
var RoundedButton = newStyled(DefaultButton)(templateObject_4$
|
|
2030
|
-
var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$
|
|
2029
|
+
var RoundedButton = newStyled(DefaultButton)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2030
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$2;
|
|
2031
2031
|
|
|
2032
2032
|
function insertWithoutScoping(cache, serialized) {
|
|
2033
2033
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2172,10 +2172,10 @@ var _createEmotion = createEmotion({
|
|
|
2172
2172
|
var appearAnimation = keyframes(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"], ["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"])));
|
|
2173
2173
|
var disappearAnimation = keyframes(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"], ["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"])));
|
|
2174
2174
|
var fadeInFromLeft = keyframes(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2175
|
-
var fadeInFromRight = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2176
|
-
var fadeInFromTop = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2175
|
+
var fadeInFromRight = keyframes(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2176
|
+
var fadeInFromTop = keyframes(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2177
2177
|
var fadeInFromBottom = keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2178
|
-
var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6;
|
|
2178
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
2179
2179
|
|
|
2180
2180
|
function Navbar(props) {
|
|
2181
2181
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2210,11 +2210,11 @@ function Hero(props) {
|
|
|
2210
2210
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
2211
2211
|
var _b = React.useState(imageUrls && imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
|
|
2212
2212
|
return (React.createElement(React.Fragment, null,
|
|
2213
|
-
React.createElement(Container$
|
|
2213
|
+
React.createElement(Container$3, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
|
|
2214
2214
|
overlay && (React.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2215
2215
|
React.createElement(HeroContent, null, children))));
|
|
2216
2216
|
}
|
|
2217
|
-
var Container$
|
|
2217
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"])), function (props) { return "calc(".concat(props.height, " - ").concat(props.marginTop, ")"); }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; });
|
|
2218
2218
|
var Overlay = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
|
|
2219
2219
|
var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
|
|
2220
2220
|
var templateObject_1$4, templateObject_2$3, templateObject_3$1;
|
|
@@ -2287,7 +2287,7 @@ function Fade(props) {
|
|
|
2287
2287
|
root: document,
|
|
2288
2288
|
rootMargin: "-10% 0% -10% 0%"
|
|
2289
2289
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
|
2290
|
-
return (React.createElement(Container$
|
|
2290
|
+
return (React.createElement(Container$2, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2291
2291
|
switch (type) {
|
|
2292
2292
|
case 'bottom-to-top':
|
|
2293
2293
|
return fadeInFromBottom;
|
|
@@ -2300,14 +2300,14 @@ function Fade(props) {
|
|
|
2300
2300
|
}
|
|
2301
2301
|
} }, children));
|
|
2302
2302
|
}
|
|
2303
|
-
var Container$
|
|
2303
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2304
2304
|
var templateObject_1$3;
|
|
2305
2305
|
|
|
2306
2306
|
function Slider(props) {
|
|
2307
|
-
var children = props.children, forwardedRef = props.forwardedRef, autoplayTicTime = props.autoplayTicTime, _a = props.visibleInactiveSlides, visibleInactiveSlides = _a === undefined ? false : _a, _b = props.showArrowKeys, showArrowKeys = _b === undefined ? false : _b, onSlideChange = props.onSlideChange;
|
|
2307
|
+
var children = props.children, forwardedRef = props.forwardedRef, autoplayTicTime = props.autoplayTicTime, _a = props.visibleInactiveSlides, visibleInactiveSlides = _a === undefined ? false : _a, _b = props.showArrowKeys, showArrowKeys = _b === undefined ? false : _b, _c = props.showRadioButtons, showRadioButtons = _c === undefined ? false : _c, radioButtonsColor = props.radioButtonsColor, onSlideChange = props.onSlideChange;
|
|
2308
2308
|
var wrapperRef = React.useRef(null);
|
|
2309
|
-
var
|
|
2310
|
-
var
|
|
2309
|
+
var _d = React.useState(1), currentSlide = _d[0], setCurrentSlide = _d[1];
|
|
2310
|
+
var _e = React.useState(0), translateX = _e[0], setTranslateX = _e[1];
|
|
2311
2311
|
React.useImperativeHandle(forwardedRef, function () {
|
|
2312
2312
|
return {
|
|
2313
2313
|
goTo: function (option) { return goTo(option); },
|
|
@@ -2322,7 +2322,7 @@ function Slider(props) {
|
|
|
2322
2322
|
React.createElement(Slide, { key: children.length + 2, style: { backgroundColor: "red" } }, children[0])
|
|
2323
2323
|
], false);
|
|
2324
2324
|
}
|
|
2325
|
-
return React.createElement(Slide, null, children[0]);
|
|
2325
|
+
return [React.createElement(Slide, null, children[0])];
|
|
2326
2326
|
}, []);
|
|
2327
2327
|
React.useLayoutEffect(function () {
|
|
2328
2328
|
setTranslateX(wrapperRef.current.clientWidth * currentSlide);
|
|
@@ -2355,6 +2355,10 @@ function Slider(props) {
|
|
|
2355
2355
|
setCurrentSlide(function (next) { return ++next; });
|
|
2356
2356
|
}
|
|
2357
2357
|
break;
|
|
2358
|
+
default:
|
|
2359
|
+
setTranslateX(wrapperRef.current.clientWidth * (option));
|
|
2360
|
+
setCurrentSlide(option);
|
|
2361
|
+
break;
|
|
2358
2362
|
}
|
|
2359
2363
|
}, [children, currentSlide]);
|
|
2360
2364
|
React.useEffect(function () {
|
|
@@ -2380,16 +2384,20 @@ function Slider(props) {
|
|
|
2380
2384
|
}, autoplayTicTime);
|
|
2381
2385
|
}
|
|
2382
2386
|
}, [goTo, autoplayTicTime]);
|
|
2383
|
-
return (React.createElement(
|
|
2384
|
-
React.createElement(
|
|
2385
|
-
|
|
2386
|
-
React.createElement(
|
|
2387
|
-
|
|
2387
|
+
return (React.createElement(React.Fragment, null,
|
|
2388
|
+
React.createElement(SliderContainer, { visibleInactiveSlides: visibleInactiveSlides },
|
|
2389
|
+
React.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
|
|
2390
|
+
showArrowKeys && (React.createElement(React.Fragment, null,
|
|
2391
|
+
React.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
|
|
2392
|
+
React.createElement(Icon, { callback: function () { return goTo('next'); }, color: 'black', icon: 'arrow-long' })))),
|
|
2393
|
+
showRadioButtons && (React.createElement(RadiosContainer, null, children.map(function (item, index) { return (React.createElement(RadioButton, { key: index, onClick: function () { return goTo(index + 1); }, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
|
|
2388
2394
|
}
|
|
2389
|
-
var
|
|
2395
|
+
var SliderContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"], ["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"])), function (props) { return props.visibleInactiveSlides ? 'visible' : 'hidden'; });
|
|
2390
2396
|
var SlidesWrapper = newStyled.ul(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"], ["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"])), function (props) { return -props.translateX; });
|
|
2391
2397
|
var Slide = newStyled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
2392
|
-
var
|
|
2398
|
+
var RadiosContainer = newStyled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n transform: translateY(20px);\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 58px;\n cursor: pointer;\n list-style: none;\n"], ["\n position: relative;\n display: flex;\n transform: translateY(20px);\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 58px;\n cursor: pointer;\n list-style: none;\n"])));
|
|
2399
|
+
var RadioButton = newStyled.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n width: 9px; \n height: 9px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -3px;\n left: -3px;\n width: 12px;\n height: 12px;\n border-radius: 50px;\n background-color: transparent;\n border: 2px solid ", ";\n opacity: 80%;\n z-index: -1;\n }\n"], ["\n position: relative;\n width: 9px; \n height: 9px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -3px;\n left: -3px;\n width: 12px;\n height: 12px;\n border-radius: 50px;\n background-color: transparent;\n border: 2px solid ", ";\n opacity: 80%;\n z-index: -1;\n }\n"])), function (props) { return props.radioButtonsColor || theme.black; }, function (props) { return props.isSelected ? props.radioButtonsColor || theme.black : "unset"; });
|
|
2400
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3, templateObject_4, templateObject_5;
|
|
2393
2401
|
|
|
2394
2402
|
function Showcase(props) {
|
|
2395
2403
|
var items = props.items, backgroundColor = props.backgroundColor;
|
|
@@ -2416,7 +2424,7 @@ var ShowcaseItem = newStyled.a(templateObject_2$1 || (templateObject_2$1 = __mak
|
|
|
2416
2424
|
var templateObject_1$1, templateObject_2$1;
|
|
2417
2425
|
|
|
2418
2426
|
function Footer(props) {
|
|
2419
|
-
var logoUrl = props.logoUrl, subtitle = props.subtitle
|
|
2427
|
+
var logoUrl = props.logoUrl, subtitle = props.subtitle, backgroundColor = props.backgroundColor, _a = props.socialMediaUrls, socialMediaUrls = _a === undefined ? {
|
|
2420
2428
|
instagram: "",
|
|
2421
2429
|
twitter: "",
|
|
2422
2430
|
facebook: "",
|
|
@@ -2429,7 +2437,7 @@ function Footer(props) {
|
|
|
2429
2437
|
address: "",
|
|
2430
2438
|
address2: "",
|
|
2431
2439
|
} : _b, navItems = props.navItems;
|
|
2432
|
-
return (React.createElement(Container,
|
|
2440
|
+
return (React.createElement(Container, { backgroundColor: backgroundColor },
|
|
2433
2441
|
React.createElement("div", { className: 'left' },
|
|
2434
2442
|
React.createElement("img", { src: logoUrl, alt: "logo" }),
|
|
2435
2443
|
React.createElement("h5", null, subtitle),
|
|
@@ -2448,7 +2456,7 @@ function Footer(props) {
|
|
|
2448
2456
|
contactData.email2 && React.createElement("p", null, contactData.email2)),
|
|
2449
2457
|
React.createElement("nav", null, navItems && navItems.map(function (item) { return React.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
|
|
2450
2458
|
}
|
|
2451
|
-
var Container = newStyled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"], ["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"])), theme.black2, theme.primary);
|
|
2459
|
+
var Container = newStyled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"], ["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"])), function (props) { return props.backgroundColor || theme.black2; }, theme.primary);
|
|
2452
2460
|
newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
2453
2461
|
var templateObject_1, templateObject_2;
|
|
2454
2462
|
|