wex-ui-lib 1.4.5 → 1.4.6
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 +48 -25
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.esm.js +47 -24
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Navbar/Navbar.types.d.ts +4 -0
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1980,11 +1980,11 @@ function Icon(props) {
|
|
|
1980
1980
|
icon.includes("arrow-caret") && (React.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
1981
1981
|
React.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
|
|
1982
1982
|
}
|
|
1983
|
-
var IconContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n transition: 100ms;\n cursor: pointer;\n svg {\n transform: ", ";\n height: ", ";\n fill: ", ";\n path{\n fill: ", "
|
|
1983
|
+
var IconContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n transition: 100ms;\n cursor: pointer;\n svg {\n transform: ", ";\n height: ", ";\n fill: ", ";\n stroke: ", ";\n path{\n fill: ", ";\n stroke: ", ";\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n fill: ", ";\n path{\n fill: ", ";\n }\n }\n }\n"], ["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n transition: 100ms;\n cursor: pointer;\n svg {\n transform: ", ";\n height: ", ";\n fill: ", ";\n stroke: ", ";\n path{\n fill: ", ";\n stroke: ", ";\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n fill: ", ";\n path{\n fill: ", ";\n }\n }\n }\n"])), function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? "2px solid ".concat(props.color) : "unset"; }, function (props) {
|
|
1984
1984
|
return props.border === "rounded" ? "2px" :
|
|
1985
1985
|
props.border === "circle" ? "50px" :
|
|
1986
1986
|
"unset";
|
|
1987
|
-
}, function (props) { return props.icon.includes("left") ? "rotateY(180deg)" : ""; }, function (props) { return props.border ? "46%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; });
|
|
1987
|
+
}, function (props) { return props.icon.includes("left") ? "rotateY(180deg)" : ""; }, function (props) { return props.border ? "46%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; });
|
|
1988
1988
|
var templateObject_1$d;
|
|
1989
1989
|
|
|
1990
1990
|
var theme = {
|
|
@@ -2188,39 +2188,62 @@ var disappearAnimation = keyframes(templateObject_2$7 || (templateObject_2$7 = _
|
|
|
2188
2188
|
var fadeInFromLeft = keyframes(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
2189
2189
|
var fadeInFromRight = keyframes(templateObject_4$5 || (templateObject_4$5 = __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"])));
|
|
2190
2190
|
var fadeInFromTop = keyframes(templateObject_5$5 || (templateObject_5$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"])));
|
|
2191
|
-
var fadeInFromBottom = keyframes(templateObject_6$
|
|
2192
|
-
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$
|
|
2191
|
+
var fadeInFromBottom = keyframes(templateObject_6$2 || (templateObject_6$2 = __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"])));
|
|
2192
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$2;
|
|
2193
2193
|
|
|
2194
2194
|
function Navbar(props) {
|
|
2195
2195
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
2196
|
+
var _a = React.useState(false), sideNavOpen = _a[0], setSideNavOpen = _a[1];
|
|
2197
|
+
var isMobile = typeof window !== 'undefined' && window.innerWidth <= 800;
|
|
2198
|
+
var sideNavItems = props.mobileItems || [];
|
|
2196
2199
|
return (React.createElement(React.Fragment, null,
|
|
2197
2200
|
React.createElement(NavbarContainer, __assign({}, props),
|
|
2198
2201
|
React.createElement(Logo$1, { src: logo === null || logo === undefined ? undefined : logo.url, width: logo === null || logo === undefined ? undefined : logo.width, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
|
|
2199
|
-
React.createElement(
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
React.createElement(
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
}
|
|
2218
|
-
|
|
2202
|
+
!isMobile ? (React.createElement(React.Fragment, null,
|
|
2203
|
+
React.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
|
|
2204
|
+
var _a, _b;
|
|
2205
|
+
return (React.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
|
|
2206
|
+
e.preventDefault();
|
|
2207
|
+
item.onClick && item.onClick();
|
|
2208
|
+
}, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
|
|
2209
|
+
item.label,
|
|
2210
|
+
item.subitems && React.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
|
|
2211
|
+
item.subitems && (React.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
|
|
2212
|
+
return (React.createElement(Subitem, { key: subitem.label },
|
|
2213
|
+
React.createElement("a", { href: "#", onClick: function (e) {
|
|
2214
|
+
e.preventDefault();
|
|
2215
|
+
e.stopPropagation();
|
|
2216
|
+
subitem.onClick && subitem.onClick();
|
|
2217
|
+
} }, subitem.label)));
|
|
2218
|
+
})))));
|
|
2219
|
+
})),
|
|
2220
|
+
button && (React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))) : (React.createElement(Icon, { icon: 'hamburgerMenu', color: 'white', callback: function () { return setSideNavOpen(true); } }))),
|
|
2221
|
+
isMobile && (React.createElement(SideNav, { open: sideNavOpen },
|
|
2222
|
+
React.createElement(SideNavOverlay, { open: sideNavOpen, onClick: function () { return setSideNavOpen(false); } }),
|
|
2223
|
+
React.createElement(SideNavContent, { open: sideNavOpen },
|
|
2224
|
+
React.createElement(CloseButton, { onClick: function () { return setSideNavOpen(false); } }, "\u00D7"), sideNavItems === null || sideNavItems === undefined ? undefined :
|
|
2225
|
+
sideNavItems.map(function (item) { return (React.createElement(SideNavItem, { key: item.label, onClick: function () { setSideNavOpen(false); item.onClick && item.onClick(); } }, item.label)); }))))));
|
|
2226
|
+
}
|
|
2227
|
+
var NavbarContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n grid-area: button;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 1024px) {\n grid-template-columns: auto auto;\n grid-template-areas: \"logo hamburgerIcon\";\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n grid-area: button;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 1024px) {\n grid-template-columns: auto auto;\n grid-template-areas: \"logo hamburgerIcon\";\n }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.background) || theme.black; }, function (props) { var _a; return ((_a = props.config) === null || _a === undefined ? undefined : _a.height) || '80px'; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-columns: auto auto auto" : "grid-template-columns: auto auto"; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-areas: \"logo items button\"" : "grid-template-areas: \"logo items\""; });
|
|
2219
2228
|
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"], ["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"])));
|
|
2220
2229
|
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"], ["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.textHover) || theme.primary; }, appearAnimation, function (props) { var _a, _b; return !props.hasSubitems ? ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.borderHover) || "white" : "transparent"; }, appearAnimation);
|
|
2221
2230
|
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n grid-area: logo;\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"], ["\n grid-area: logo;\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
|
|
2222
2231
|
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"], ["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"])));
|
|
2223
|
-
var
|
|
2232
|
+
var SideNav = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 200;\n pointer-events: ", ";\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 200;\n pointer-events: ", ";\n"])), function (_a) {
|
|
2233
|
+
var open = _a.open;
|
|
2234
|
+
return open ? 'auto' : 'none';
|
|
2235
|
+
});
|
|
2236
|
+
var SideNavOverlay = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0,0,0,0.4);\n opacity: ", ";\n transition: opacity 0.3s;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0,0,0,0.4);\n opacity: ", ";\n transition: opacity 0.3s;\n"])), function (_a) {
|
|
2237
|
+
var open = _a.open;
|
|
2238
|
+
return open ? 1 : 0;
|
|
2239
|
+
});
|
|
2240
|
+
var SideNavContent = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n width: 80vw;\n max-width: 320px;\n height: 100vh;\n background: ", ";\n box-shadow: -2px 0 16px rgba(0,0,0,0.15);\n transform: ", ";\n transition: transform 0.3s;\n display: flex;\n flex-direction: column;\n padding: 32px 20px 20px 20px;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n width: 80vw;\n max-width: 320px;\n height: 100vh;\n background: ", ";\n box-shadow: -2px 0 16px rgba(0,0,0,0.15);\n transform: ", ";\n transition: transform 0.3s;\n display: flex;\n flex-direction: column;\n padding: 32px 20px 20px 20px;\n"])), theme.black2, function (_a) {
|
|
2241
|
+
var open = _a.open;
|
|
2242
|
+
return open ? 'translateX(0)' : 'translateX(100%)';
|
|
2243
|
+
});
|
|
2244
|
+
var CloseButton = newStyled.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n align-self: flex-end;\n cursor: pointer;\n"], ["\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n align-self: flex-end;\n cursor: pointer;\n"])));
|
|
2245
|
+
var SideNavItem = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n color: white;\n font-size: 1.1rem;\n padding: 16px 0;\n border-bottom: 1px solid rgba(255,255,255,0.08);\n cursor: pointer;\n &:last-of-type { border-bottom: none; }\n"], ["\n color: white;\n font-size: 1.1rem;\n padding: 16px 0;\n border-bottom: 1px solid rgba(255,255,255,0.08);\n cursor: pointer;\n &:last-of-type { border-bottom: none; }\n"])));
|
|
2246
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
2224
2247
|
|
|
2225
2248
|
function Hero(props) {
|
|
2226
2249
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|