wex-ui-lib 1.1.6 → 1.1.8
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 +20 -20
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +20 -20
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -2027,8 +2027,8 @@ function Button(props) {
|
|
|
2027
2027
|
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 border: ", ";\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n border-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 border: ", ";\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n border-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, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) ? "2px solid ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.border) : 'none'; }, 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.borderHover) || ''; }, 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; });
|
|
2028
2028
|
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n background-color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n border: none!important;\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 padding: 10px 0px;\n letter-spacing: 2px;\n border: none!important;\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) { 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; });
|
|
2029
2029
|
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 "])));
|
|
2030
|
-
var RoundedButton = newStyled(DefaultButton)(templateObject_4$
|
|
2031
|
-
var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$
|
|
2030
|
+
var RoundedButton = newStyled(DefaultButton)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2031
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$3;
|
|
2032
2032
|
|
|
2033
2033
|
function insertWithoutScoping(cache, serialized) {
|
|
2034
2034
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2173,39 +2173,39 @@ var _createEmotion = createEmotion({
|
|
|
2173
2173
|
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"])));
|
|
2174
2174
|
var disappearAnimation = keyframes(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
2175
2175
|
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"])));
|
|
2176
|
-
var fadeInFromRight = keyframes(templateObject_4$
|
|
2176
|
+
var fadeInFromRight = keyframes(templateObject_4$2 || (templateObject_4$2 = __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"])));
|
|
2177
2177
|
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"])));
|
|
2178
2178
|
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"])));
|
|
2179
|
-
var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$
|
|
2179
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6;
|
|
2180
2180
|
|
|
2181
2181
|
function Navbar(props) {
|
|
2182
2182
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
2183
2183
|
return (React.createElement(React.Fragment, null,
|
|
2184
|
-
React.createElement(NavbarContainer, { height: config.height, colors: config.colors
|
|
2184
|
+
React.createElement(NavbarContainer, { height: config.height, colors: config.colors },
|
|
2185
2185
|
React.createElement(Logo, { src: logo === null || logo === undefined ? undefined : logo.url, width: logo === null || logo === undefined ? undefined : logo.width, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
|
|
2186
|
-
React.createElement(
|
|
2186
|
+
React.createElement(ItemsContainer, { centeredItems: config.centeredItems }, items === null || items === undefined ? undefined : items.map(function (item) {
|
|
2187
2187
|
var _a;
|
|
2188
2188
|
return (React.createElement("a", { key: item.label, href: "#", onClick: function (e) {
|
|
2189
2189
|
e.preventDefault();
|
|
2190
2190
|
item.onClick && item.onClick();
|
|
2191
2191
|
} },
|
|
2192
2192
|
item.label,
|
|
2193
|
-
item.subitems &&
|
|
2194
|
-
|
|
2195
|
-
React.createElement(
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
}))))));
|
|
2193
|
+
item.subitems && React.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
|
|
2194
|
+
item.subitems && (React.createElement("div", null, (_a = item.subitems) === null || _a === undefined ? undefined : _a.map(function (subitem) {
|
|
2195
|
+
return (React.createElement(ControlledNavItem, { key: subitem.label },
|
|
2196
|
+
React.createElement("a", { href: "#", onClick: function (e) {
|
|
2197
|
+
e.preventDefault();
|
|
2198
|
+
subitem.onClick && subitem.onClick();
|
|
2199
|
+
} }, subitem.label)));
|
|
2200
|
+
})))));
|
|
2202
2201
|
})),
|
|
2203
2202
|
button ? (React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)) : React.createElement(React.Fragment, null))));
|
|
2204
2203
|
}
|
|
2205
|
-
var NavbarContainer = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\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 }\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: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n
|
|
2206
|
-
var
|
|
2207
|
-
var
|
|
2208
|
-
var
|
|
2204
|
+
var NavbarContainer = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\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 }\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: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\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 }\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: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; });
|
|
2205
|
+
var ItemsContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\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 gap: 18px;\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 padding: 0;\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\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 gap: 18px;\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 padding: 0;\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n"])), function (props) { return props.centeredItems ? 'unset' : 'auto'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, theme.gray, disappearAnimation, 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.textHover) || theme.primary; }, appearAnimation, appearAnimation);
|
|
2206
|
+
var Logo = newStyled.img(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])), function (props) { return props.width || '130px'; });
|
|
2207
|
+
var ControlledNavItem = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n & > div{\n gap: 30px;\n flex-direction: column;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "], ["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n & > div{\n gap: 30px;\n flex-direction: column;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "])));
|
|
2208
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1;
|
|
2209
2209
|
|
|
2210
2210
|
function Hero(props) {
|
|
2211
2211
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
@@ -2217,7 +2217,7 @@ function Hero(props) {
|
|
|
2217
2217
|
}
|
|
2218
2218
|
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: ", ";\n margin-top: ", ";\n background-image: url(", ");\n background-color: ", ";\n background-position-y: 69%;\n background-size: cover;\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: ", ";\n margin-top: ", ";\n background-image: url(", ");\n background-color: ", ";\n background-position-y: 69%;\n background-size: cover;\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 props.height ? "calc(".concat(props.height, " - ").concat(props.marginTop || '0px', ")") : '100vh'; }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; }, function (props) { return props.backgroundColor || 'none'; });
|
|
2219
2219
|
var Overlay = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __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; });
|
|
2220
|
-
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
|
+
var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n height: 100%;\n z-index: 2;\n"])));
|
|
2221
2221
|
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|
|
2222
2222
|
|
|
2223
2223
|
function useIntObs(_a) {
|