wex-ui-lib 1.2.7 → 1.2.41
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 +47 -81
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +4 -32
- package/dist/index.esm.js +48 -80
- package/dist/index.esm.js.map +1 -1
- package/dist/types/index.d.ts +1 -3
- package/dist/types/shared/components/Fade.d.ts +2 -2
- package/package.json +1 -1
- package/dist/types/components/Card/Card.d.ts +0 -21
- package/dist/types/components/Card/Card.stories.d.ts +0 -9
- package/dist/types/sections/Cards/Cards.d.ts +0 -9
- package/dist/types/sections/Cards/Cards.stories.d.ts +0 -7
package/dist/index.cjs.js
CHANGED
|
@@ -1978,12 +1978,12 @@ function Icon(props) {
|
|
|
1978
1978
|
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" },
|
|
1979
1979
|
React.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
|
|
1980
1980
|
}
|
|
1981
|
-
var IconContainer = newStyled.div(templateObject_1$
|
|
1981
|
+
var IconContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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: ", "\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 path{\n fill: ", "\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) {
|
|
1982
1982
|
return props.border === "rounded" ? "2px" :
|
|
1983
1983
|
props.border === "circle" ? "50px" :
|
|
1984
1984
|
"unset";
|
|
1985
1985
|
}, 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; });
|
|
1986
|
-
var templateObject_1$
|
|
1986
|
+
var templateObject_1$7;
|
|
1987
1987
|
|
|
1988
1988
|
var theme = {
|
|
1989
1989
|
primary: "#DC3737",
|
|
@@ -2035,11 +2035,11 @@ function Button(props) {
|
|
|
2035
2035
|
React.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
|
|
2036
2036
|
}
|
|
2037
2037
|
}
|
|
2038
|
-
var DefaultButton = newStyled.button(templateObject_1$
|
|
2038
|
+
var DefaultButton = newStyled.button(templateObject_1$6 || (templateObject_1$6 = __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; });
|
|
2039
2039
|
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; });
|
|
2040
2040
|
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 "])));
|
|
2041
2041
|
var RoundedButton = newStyled(DefaultButton)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2042
|
-
var templateObject_1$
|
|
2042
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$3;
|
|
2043
2043
|
|
|
2044
2044
|
function insertWithoutScoping(cache, serialized) {
|
|
2045
2045
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2181,13 +2181,13 @@ var _createEmotion = createEmotion({
|
|
|
2181
2181
|
}),
|
|
2182
2182
|
keyframes = _createEmotion.keyframes;
|
|
2183
2183
|
|
|
2184
|
-
var appearAnimation = keyframes(templateObject_1$
|
|
2184
|
+
var appearAnimation = keyframes(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
2185
2185
|
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"])));
|
|
2186
2186
|
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"])));
|
|
2187
2187
|
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"])));
|
|
2188
|
-
var fadeInFromTop = keyframes(templateObject_5$
|
|
2188
|
+
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"])));
|
|
2189
2189
|
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"])));
|
|
2190
|
-
var templateObject_1$
|
|
2190
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6;
|
|
2191
2191
|
|
|
2192
2192
|
function Navbar(props) {
|
|
2193
2193
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2195,15 +2195,15 @@ function Navbar(props) {
|
|
|
2195
2195
|
React.createElement(NavbarContainer, { height: config.height, colors: config.colors },
|
|
2196
2196
|
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 }),
|
|
2197
2197
|
React.createElement(ItemsContainer, { centeredItems: config.centeredItems }, items === null || items === undefined ? undefined : items.map(function (item) {
|
|
2198
|
-
var _a
|
|
2199
|
-
return (React.createElement(
|
|
2198
|
+
var _a;
|
|
2199
|
+
return (React.createElement("a", { key: item.label, href: "#", onClick: function (e) {
|
|
2200
2200
|
e.preventDefault();
|
|
2201
2201
|
item.onClick && item.onClick();
|
|
2202
|
-
}
|
|
2202
|
+
} },
|
|
2203
2203
|
item.label,
|
|
2204
2204
|
item.subitems && React.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
|
|
2205
|
-
item.subitems && (React.createElement("div", null, (
|
|
2206
|
-
return (React.createElement(
|
|
2205
|
+
item.subitems && (React.createElement("div", null, (_a = item.subitems) === null || _a === undefined ? undefined : _a.map(function (subitem) {
|
|
2206
|
+
return (React.createElement(ControlledNavItem, { key: subitem.label },
|
|
2207
2207
|
React.createElement("a", { href: "#", onClick: function (e) {
|
|
2208
2208
|
e.preventDefault();
|
|
2209
2209
|
subitem.onClick && subitem.onClick();
|
|
@@ -2212,12 +2212,11 @@ function Navbar(props) {
|
|
|
2212
2212
|
})),
|
|
2213
2213
|
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))));
|
|
2214
2214
|
}
|
|
2215
|
-
var NavbarContainer = newStyled.div(templateObject_1$
|
|
2216
|
-
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 \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 \n @media only screen and (max-width: 800px) {\n display: none;\n }\n"])), function (props) { return props.centeredItems ? 'unset' : 'auto'; });
|
|
2217
|
-
var
|
|
2218
|
-
var
|
|
2219
|
-
var
|
|
2220
|
-
var templateObject_1$7, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1;
|
|
2215
|
+
var NavbarContainer = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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'; });
|
|
2216
|
+
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);
|
|
2217
|
+
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'; });
|
|
2218
|
+
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 "])));
|
|
2219
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$1;
|
|
2221
2220
|
|
|
2222
2221
|
function Hero(props) {
|
|
2223
2222
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
@@ -2230,14 +2229,14 @@ function Hero(props) {
|
|
|
2230
2229
|
return function () { return clearInterval(interval_1); };
|
|
2231
2230
|
}
|
|
2232
2231
|
}, [imageUrls]);
|
|
2233
|
-
return (React.createElement(Container$
|
|
2232
|
+
return (React.createElement(Container$2, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
|
|
2234
2233
|
overlay && (React.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2235
2234
|
React.createElement(HeroContent, null, children)));
|
|
2236
2235
|
}
|
|
2237
|
-
var Container$
|
|
2236
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\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 transition: background-image 1s ease-in-out;\n\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 width: 100vw;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n background-color: ", ";\n background-position-y: 69%;\n background-size: cover;\n transition: background-image 1s ease-in-out;\n\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'; });
|
|
2238
2237
|
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; });
|
|
2239
2238
|
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"])));
|
|
2240
|
-
var templateObject_1$
|
|
2239
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1;
|
|
2241
2240
|
|
|
2242
2241
|
function useIntObs(_a) {
|
|
2243
2242
|
var _b;
|
|
@@ -2307,21 +2306,27 @@ function Fade(props) {
|
|
|
2307
2306
|
root: document,
|
|
2308
2307
|
rootMargin: "-10% 0% -10% 0%"
|
|
2309
2308
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2309
|
+
// Ensure the child is a valid React element
|
|
2310
|
+
if (!React.isValidElement(children)) {
|
|
2311
|
+
console.error('Fade component expects a valid React element as its child.');
|
|
2312
|
+
return null;
|
|
2313
|
+
}
|
|
2314
|
+
var getAnimation = function () {
|
|
2315
|
+
switch (type) {
|
|
2316
|
+
case 'bottom-to-top':
|
|
2317
|
+
return fadeInFromBottom;
|
|
2318
|
+
case 'top-to-bottom':
|
|
2319
|
+
return fadeInFromTop;
|
|
2320
|
+
case 'right-to-left':
|
|
2321
|
+
return fadeInFromRight;
|
|
2322
|
+
case 'left-to-right':
|
|
2323
|
+
return fadeInFromLeft;
|
|
2324
|
+
default:
|
|
2325
|
+
return fadeInFromBottom;
|
|
2326
|
+
}
|
|
2327
|
+
};
|
|
2328
|
+
return React.cloneElement(children, __assign(__assign({}, (typeof children.type === 'string' ? { ref: ref } : {})), { style: __assign({ opacity: 0, animation: isIntersecting ? "".concat(getAnimation(), " 0.8s ease forwards") : '' }, children.props.style) }));
|
|
2322
2329
|
}
|
|
2323
|
-
var Container$4 = newStyled.span(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2324
|
-
var templateObject_1$5;
|
|
2325
2330
|
|
|
2326
2331
|
function Slider(props) {
|
|
2327
2332
|
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;
|
|
@@ -2425,12 +2430,12 @@ function Slider(props) {
|
|
|
2425
2430
|
goTo(index + 1);
|
|
2426
2431
|
}, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
|
|
2427
2432
|
}
|
|
2428
|
-
var SliderContainer = newStyled.div(templateObject_1$
|
|
2433
|
+
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'; });
|
|
2429
2434
|
var SlidesWrapper = newStyled.ul(templateObject_2$1 || (templateObject_2$1 = __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; });
|
|
2430
2435
|
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"])));
|
|
2431
2436
|
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"])));
|
|
2432
2437
|
var RadioButton = newStyled.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n width: 7px; \n height: 7px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: -4px;\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: 7px; \n height: 7px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: -4px;\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"; });
|
|
2433
|
-
var templateObject_1$
|
|
2438
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5;
|
|
2434
2439
|
|
|
2435
2440
|
function Showcase(props) {
|
|
2436
2441
|
var items = props.items, backgroundColor = props.backgroundColor;
|
|
@@ -2447,14 +2452,14 @@ function Showcase(props) {
|
|
|
2447
2452
|
}
|
|
2448
2453
|
return result;
|
|
2449
2454
|
}, [items]);
|
|
2450
|
-
return (React.createElement(Container$
|
|
2455
|
+
return (React.createElement(Container$1, { onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor }, eightItems.map(function (item, index) {
|
|
2451
2456
|
return item ? (React.createElement(ShowcaseItem, { key: index, onClick: function () { return item.callback(); }, backgroundUrl: item.imageUrl, onMouseEnter: function () { return setHoveredItemKey(index); }, itemKey: index, hoveredItemKey: hoveredItemKey },
|
|
2452
2457
|
React.createElement("span", null, formatText(item.label, 'uppercase')))) : React.createElement(React.Fragment, null);
|
|
2453
2458
|
})));
|
|
2454
2459
|
}
|
|
2455
|
-
var Container$
|
|
2460
|
+
var Container$1 = newStyled.section(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 2px;\n padding: 2px 0;\n background-color: ", ";\n"], ["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 2px;\n padding: 2px 0;\n background-color: ", ";\n"])), function (props) { return props.backgroundColor || 'white'; });
|
|
2456
2461
|
var ShowcaseItem = newStyled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"], ["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"])), function (props) { return props.backgroundUrl; }, function (props) { return props.hoveredItemKey === props.itemKey || props.hoveredItemKey === undefined ? 'unset' : 'brightness(0.3)'; });
|
|
2457
|
-
var templateObject_1$
|
|
2462
|
+
var templateObject_1$1, templateObject_2;
|
|
2458
2463
|
|
|
2459
2464
|
function Footer(props) {
|
|
2460
2465
|
var _a = props.logo, logo = _a === undefined ? {
|
|
@@ -2473,7 +2478,7 @@ function Footer(props) {
|
|
|
2473
2478
|
address: "",
|
|
2474
2479
|
address2: "",
|
|
2475
2480
|
} : _c, navItems = props.navItems;
|
|
2476
|
-
return (React.createElement(Container
|
|
2481
|
+
return (React.createElement(Container, { backgroundColor: backgroundColor },
|
|
2477
2482
|
React.createElement("div", { className: 'left' },
|
|
2478
2483
|
React.createElement("img", { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
|
2479
2484
|
React.createElement("h5", null, subtitle),
|
|
@@ -2492,49 +2497,10 @@ function Footer(props) {
|
|
|
2492
2497
|
contactData.email2 && React.createElement("p", null, contactData.email2)),
|
|
2493
2498
|
React.createElement("nav", null, navItems && navItems.map(function (item) { return React.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
|
|
2494
2499
|
}
|
|
2495
|
-
var Container
|
|
2496
|
-
var templateObject_1$2;
|
|
2497
|
-
|
|
2498
|
-
function Card(props) {
|
|
2499
|
-
var callback = props.callback, type = props.type; props.backgroundColor; var _a = props.icon, icon = _a === undefined ? {
|
|
2500
|
-
element: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 37", fill: "none" },
|
|
2501
|
-
React.createElement("path", { d: "M7.6 36H16.4M1 11.9375C1 5.89689 5.92487 1 12 1C18.0751 1 23 5.89689 23 11.9375C23 16.4226 20.285 20.0935 16.4 21.7812V28.3438C16.4 29.5519 15.415 30.5312 14.2 30.5312H9.8C8.58497 30.5312 7.6 29.5519 7.6 28.3438V21.9649C3.71501 20.2771 1 16.4226 1 11.9375Z", stroke: "#F62223", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))),
|
|
2502
|
-
width: "30px",
|
|
2503
|
-
height: "30px"
|
|
2504
|
-
} : _a, _b = props.title, title = _b === undefined ? {
|
|
2505
|
-
text: 'Lorem Ipsum',
|
|
2506
|
-
color: 'white',
|
|
2507
|
-
casing: "uppercase",
|
|
2508
|
-
size: '20px'
|
|
2509
|
-
} : _b, _c = props.description, description = _c === undefined ? {
|
|
2510
|
-
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, nulla nostrum magnam molestiae officia aspernatur quisquam accusamus distinctio eligendi ut, provident, numquam iusto? Rerum doloremque temporibus neque, tenetur voluptatum ipsum',
|
|
2511
|
-
color: 'white',
|
|
2512
|
-
casing: "first-capitalized",
|
|
2513
|
-
size: '16px'
|
|
2514
|
-
} : _c;
|
|
2515
|
-
switch (type) {
|
|
2516
|
-
default:
|
|
2517
|
-
return (React.createElement(Container$1, { card: props, onClick: function () { return callback; } },
|
|
2518
|
-
React.createElement(Fade, { type: 'left-to-right' }, icon.element),
|
|
2519
|
-
React.createElement(Fade, { type: 'left-to-right' },
|
|
2520
|
-
React.createElement("h4", null, title.text)),
|
|
2521
|
-
React.createElement(Fade, { type: 'left-to-right' },
|
|
2522
|
-
React.createElement("p", null, description.text))));
|
|
2523
|
-
}
|
|
2524
|
-
}
|
|
2525
|
-
var Container$1 = newStyled.article(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n background-color: ", ";\n padding: 40px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n width: 100%;\n height: 100%;\n transition: 300ms;\n cursor: ", ";\n &:hover {\n filter: brightness(1.3);\n }\n h4 {\n color: ", ";\n font-size: ", ";\n }\n p {\n font-size: ", ";\n color: ", ";\n line-height: 24px;\n }\n svg {\n height: ", ";\n width: ", ";\n }\n"], ["\n background-color: ", ";\n padding: 40px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n width: 100%;\n height: 100%;\n transition: 300ms;\n cursor: ", ";\n &:hover {\n filter: brightness(1.3);\n }\n h4 {\n color: ", ";\n font-size: ", ";\n }\n p {\n font-size: ", ";\n color: ", ";\n line-height: 24px;\n }\n svg {\n height: ", ";\n width: ", ";\n }\n"])), function (props) { return props.card.backgroundColor || theme.black; }, function (props) { return props.card.callback ? 'pointer' : 'default'; }, function (props) { var _a; return ((_a = props.card.title) === null || _a === undefined ? undefined : _a.color) || "white"; }, function (props) { var _a; return ((_a = props.card.title) === null || _a === undefined ? undefined : _a.size) || "24px"; }, function (props) { var _a; return ((_a = props.card.description) === null || _a === undefined ? undefined : _a.size) || "16px"; }, function (props) { var _a; return ((_a = props.card.description) === null || _a === undefined ? undefined : _a.color) || "white"; }, function (props) { var _a; return ((_a = props.card.icon) === null || _a === undefined ? undefined : _a.width) || "40px"; }, function (props) { var _a; return ((_a = props.card.icon) === null || _a === undefined ? undefined : _a.height) || "40px"; });
|
|
2526
|
-
var templateObject_1$1;
|
|
2527
|
-
|
|
2528
|
-
function Cards(props) {
|
|
2529
|
-
var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
|
|
2530
|
-
return (React.createElement(Container, { gap: gap, padding: padding, backgroundColor: backgroundColor }, cards.map(function (card) { return (React.createElement(Card, __assign({}, card))); })));
|
|
2531
|
-
}
|
|
2532
|
-
var Container = newStyled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: ", ";;\n padding: ", ";\n background-color: ", ";\n"], ["\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: ", ";;\n padding: ", ";\n background-color: ", ";\n"])), function (props) { return props.gap || "20px"; }, function (props) { return props.padding || "8vw 40px"; }, function (props) { return props.backgroundColor || theme.black2; });
|
|
2500
|
+
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 cursor: pointer;\n &:hover {\n filter: brightness(1.2);\n }\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 cursor: pointer;\n &:hover {\n filter: brightness(1.2);\n }\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);
|
|
2533
2501
|
var templateObject_1;
|
|
2534
2502
|
|
|
2535
2503
|
exports.Button = Button;
|
|
2536
|
-
exports.Card = Card;
|
|
2537
|
-
exports.Cards = Cards;
|
|
2538
2504
|
exports.Fade = Fade;
|
|
2539
2505
|
exports.Footer = Footer;
|
|
2540
2506
|
exports.Hero = Hero;
|