wex-ui-lib 1.4.2 → 1.4.4
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 -37
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +6 -4
- package/dist/index.esm.js +47 -37
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Card/Card.d.ts +4 -1
- package/dist/types/components/Card/Card.stories.d.ts +1 -0
- package/dist/types/components/Card/Cards/DefaultCard.d.ts +7 -0
- package/dist/types/components/Card/Cards/ImageModernCard.d.ts +7 -0
- package/dist/types/components/Footer/Footer.types.d.ts +2 -1
- package/dist/types/components/Modal/Modal.d.ts +3 -0
- package/dist/types/components/Modal/Modal.stories.d.ts +6 -0
- package/dist/types/components/Modal/Modal.types.d.ts +8 -0
- package/dist/types/components/Modal/index.d.ts +2 -0
- package/dist/types/components/Navbar/Navbar.stories.d.ts +1 -0
- package/dist/types/components/Navbar/Navbar.types.d.ts +1 -2
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1980,12 +1980,12 @@ 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$
|
|
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: ", "\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) {
|
|
1984
1984
|
return props.border === "rounded" ? "2px" :
|
|
1985
1985
|
props.border === "circle" ? "50px" :
|
|
1986
1986
|
"unset";
|
|
1987
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; });
|
|
1988
|
-
var templateObject_1$
|
|
1988
|
+
var templateObject_1$d;
|
|
1989
1989
|
|
|
1990
1990
|
var theme = {
|
|
1991
1991
|
primary: "#DC3737",
|
|
@@ -2037,11 +2037,11 @@ function Button(props) {
|
|
|
2037
2037
|
React.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
|
|
2038
2038
|
}
|
|
2039
2039
|
}
|
|
2040
|
-
var DefaultButton = newStyled.button(templateObject_1$
|
|
2040
|
+
var DefaultButton = newStyled.button(templateObject_1$c || (templateObject_1$c = __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 white-space: nowrap;\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 @media only screen and (max-width: 1024px) {\n padding: 7px 8px;\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 white-space: nowrap;\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 @media only screen and (max-width: 1024px) {\n padding: 7px 8px;\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; });
|
|
2041
2041
|
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$8 || (templateObject_2$8 = __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; });
|
|
2042
2042
|
var PillButton = newStyled(DefaultButton)(templateObject_3$7 || (templateObject_3$7 = __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 "])));
|
|
2043
2043
|
var RoundedButton = newStyled(DefaultButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2044
|
-
var templateObject_1$
|
|
2044
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$7, templateObject_4$6;
|
|
2045
2045
|
|
|
2046
2046
|
function insertWithoutScoping(cache, serialized) {
|
|
2047
2047
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2183,20 +2183,20 @@ var _createEmotion = createEmotion({
|
|
|
2183
2183
|
}),
|
|
2184
2184
|
keyframes = _createEmotion.keyframes;
|
|
2185
2185
|
|
|
2186
|
-
var appearAnimation = keyframes(templateObject_1$
|
|
2186
|
+
var appearAnimation = keyframes(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
2187
2187
|
var disappearAnimation = keyframes(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
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
2191
|
var fadeInFromBottom = keyframes(templateObject_6$1 || (templateObject_6$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"])));
|
|
2192
|
-
var templateObject_1$
|
|
2192
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$1;
|
|
2193
2193
|
|
|
2194
2194
|
function Navbar(props) {
|
|
2195
2195
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
2196
2196
|
return (React.createElement(React.Fragment, null,
|
|
2197
|
-
React.createElement(NavbarContainer, {
|
|
2197
|
+
React.createElement(NavbarContainer, __assign({}, props),
|
|
2198
2198
|
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(ItemsContainer,
|
|
2199
|
+
React.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
|
|
2200
2200
|
var _a, _b;
|
|
2201
2201
|
return (React.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
|
|
2202
2202
|
e.preventDefault();
|
|
@@ -2213,14 +2213,14 @@ function Navbar(props) {
|
|
|
2213
2213
|
} }, subitem.label)));
|
|
2214
2214
|
})))));
|
|
2215
2215
|
})),
|
|
2216
|
-
button
|
|
2216
|
+
button && (React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))));
|
|
2217
2217
|
}
|
|
2218
|
-
var NavbarContainer = newStyled.div(templateObject_1$
|
|
2219
|
-
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n
|
|
2220
|
-
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; return ((_a = props.config
|
|
2221
|
-
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\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 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'; });
|
|
2218
|
+
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"], ["\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"])), 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
|
+
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
|
+
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
|
+
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
2222
|
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 templateObject_1$
|
|
2223
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
|
|
2224
2224
|
|
|
2225
2225
|
function Hero(props) {
|
|
2226
2226
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
@@ -2233,14 +2233,14 @@ function Hero(props) {
|
|
|
2233
2233
|
return function () { return clearInterval(interval_1); };
|
|
2234
2234
|
}
|
|
2235
2235
|
}, [imageUrls]);
|
|
2236
|
-
return (React.createElement(Container$
|
|
2236
|
+
return (React.createElement(Container$5, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
|
|
2237
2237
|
overlay && (React.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2238
2238
|
React.createElement(HeroContent, null, children)));
|
|
2239
2239
|
}
|
|
2240
|
-
var Container$
|
|
2240
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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 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"])), 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'; });
|
|
2241
2241
|
var Overlay = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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; });
|
|
2242
2242
|
var HeroContent = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n z-index: 2;\n @media only screen and (max-width: 1024px) {\n padding: 0 12vw;\n }\n"], ["\n width: 100%;\n height: 100%;\n z-index: 2;\n @media only screen and (max-width: 1024px) {\n padding: 0 12vw;\n }\n"])));
|
|
2243
|
-
var templateObject_1$
|
|
2243
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4;
|
|
2244
2244
|
|
|
2245
2245
|
function useIntObs(_a) {
|
|
2246
2246
|
var _b;
|
|
@@ -2310,7 +2310,7 @@ function Fade(props) {
|
|
|
2310
2310
|
root: document,
|
|
2311
2311
|
rootMargin: "-10% 0% -10% 0%"
|
|
2312
2312
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
|
2313
|
-
return (React.createElement(Container$
|
|
2313
|
+
return (React.createElement(Container$4, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2314
2314
|
switch (type) {
|
|
2315
2315
|
case 'bottom-to-top':
|
|
2316
2316
|
return fadeInFromBottom;
|
|
@@ -2323,8 +2323,8 @@ function Fade(props) {
|
|
|
2323
2323
|
}
|
|
2324
2324
|
} }, children));
|
|
2325
2325
|
}
|
|
2326
|
-
var Container$
|
|
2327
|
-
var templateObject_1$
|
|
2326
|
+
var Container$4 = newStyled.span(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2327
|
+
var templateObject_1$8;
|
|
2328
2328
|
|
|
2329
2329
|
function Slider(props) {
|
|
2330
2330
|
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;
|
|
@@ -2428,44 +2428,44 @@ function Slider(props) {
|
|
|
2428
2428
|
goTo(index + 1);
|
|
2429
2429
|
}, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
|
|
2430
2430
|
}
|
|
2431
|
-
var SliderContainer = newStyled.div(templateObject_1$
|
|
2431
|
+
var SliderContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n background-color: transparent;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n & > div {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 12px;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n left: 12px\n }\n }\n"], ["\n background-color: transparent;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n & > div {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 12px;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n left: 12px\n }\n }\n"])), function (props) { return props.visibleInactiveSlides ? 'visible' : 'hidden'; });
|
|
2432
2432
|
var SlidesWrapper = newStyled.ul(templateObject_2$4 || (templateObject_2$4 = __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; });
|
|
2433
2433
|
var Slide = newStyled.li(templateObject_3$3 || (templateObject_3$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"])));
|
|
2434
2434
|
var RadiosContainer = newStyled.ul(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
2435
2435
|
var RadioButton = newStyled.li(templateObject_5$3 || (templateObject_5$3 = __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"; });
|
|
2436
|
-
var templateObject_1$
|
|
2436
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3;
|
|
2437
2437
|
|
|
2438
2438
|
function Showcase(props) {
|
|
2439
2439
|
var items = props.items, itemsPerRow = props.itemsPerRow, backgroundColor = props.backgroundColor, gap = props.gap;
|
|
2440
2440
|
var _a = React.useState(undefined), hoveredItemKey = _a[0], setHoveredItemKey = _a[1];
|
|
2441
|
-
return (React.createElement(Container$
|
|
2441
|
+
return (React.createElement(Container$3, { itemsPerRow: itemsPerRow, onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor, gap: gap }, items.map(function (item, index) {
|
|
2442
2442
|
return item ? (React.createElement(ShowcaseItem, { key: index, onClick: function () { return item.callback(); }, backgroundUrl: item.imageUrl, onMouseEnter: function () { return setHoveredItemKey(index); }, itemKey: index, hoveredItemKey: hoveredItemKey },
|
|
2443
2443
|
React.createElement("span", null, formatText(item.label, 'uppercase')))) : React.createElement(React.Fragment, null);
|
|
2444
2444
|
})));
|
|
2445
2445
|
}
|
|
2446
|
-
var Container$
|
|
2446
|
+
var Container$3 = newStyled.section(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-template-columns: ", ";\n grid-auto-rows: 1fr;\n gap: ", ";\n padding: 2px 0;\n background-color: ", ";\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 2px 4vw;\n }\n"], ["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-template-columns: ", ";\n grid-auto-rows: 1fr;\n gap: ", ";\n padding: 2px 0;\n background-color: ", ";\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 2px 4vw;\n }\n"])), function (props) { return "repeat(".concat(props.itemsPerRow || 3, ", minmax(100px, 1fr))"); }, function (props) { return props.gap || "2px"; }, function (props) { return props.backgroundColor || 'transparent'; });
|
|
2447
2447
|
var ShowcaseItem = newStyled.a(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: relative;\n background-image: url(", ");\n background-size: cover;\n aspect-ratio: 1 / 1;\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 background-image: url(", ");\n background-size: cover;\n aspect-ratio: 1 / 1;\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)'; });
|
|
2448
|
-
var templateObject_1$
|
|
2448
|
+
var templateObject_1$6, templateObject_2$3;
|
|
2449
2449
|
|
|
2450
2450
|
function Footer(props) {
|
|
2451
2451
|
var _a = props.logo, logo = _a === undefined ? {
|
|
2452
2452
|
url: "",
|
|
2453
2453
|
callback: function () { }
|
|
2454
|
-
} : _a, subtitle = props.subtitle,
|
|
2454
|
+
} : _a, subtitle = props.subtitle, _b = props.colors, colors = _b === undefined ? {} : _b, _c = props.socialMediaUrls, socialMediaUrls = _c === undefined ? {
|
|
2455
2455
|
instagram: "",
|
|
2456
2456
|
twitter: "",
|
|
2457
2457
|
facebook: "",
|
|
2458
2458
|
linkedin: "",
|
|
2459
2459
|
youtube: ""
|
|
2460
|
-
} :
|
|
2460
|
+
} : _c, _d = props.contactData, contactData = _d === undefined ? {
|
|
2461
2461
|
phone: "",
|
|
2462
2462
|
phone2: "",
|
|
2463
2463
|
email: "",
|
|
2464
2464
|
email2: "",
|
|
2465
2465
|
address: "",
|
|
2466
2466
|
address2: "",
|
|
2467
|
-
} :
|
|
2468
|
-
return (React.createElement(Container$
|
|
2467
|
+
} : _d, navItems = props.navItems;
|
|
2468
|
+
return (React.createElement(Container$2, { colors: colors },
|
|
2469
2469
|
React.createElement(Logo, { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
|
2470
2470
|
React.createElement(Subtitle, null, subtitle),
|
|
2471
2471
|
React.createElement(SocialMedia, null,
|
|
@@ -2488,13 +2488,19 @@ function Footer(props) {
|
|
|
2488
2488
|
contactData.email2 && React.createElement("p", null, contactData.email2)),
|
|
2489
2489
|
React.createElement(Nav, null, navItems && navItems.map(function (item, index) { return React.createElement("a", { key: index, onClick: item.callback }, item.label); }))));
|
|
2490
2490
|
}
|
|
2491
|
-
var Container$
|
|
2491
|
+
var Container$2 = newStyled.footer(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n border-top: 2px solid ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n display: grid;\n gap: 18px;\n grid-template-columns: auto auto auto;\n grid-template-rows: auto auto auto;\n grid-template-areas: \n \"logo . contactData\"\n \"subtitle . contactData\"\n \"socialMedia . nav\"\n ;\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 34px 4vw;\n gap: 40px;\n grid-template-areas: \n \"logo\"\n \"subtitle\"\n \"nav\"\n \"contactData\"\n \"socialMedia\"\n ;\n }\n"], ["\n width: 100%;\n background-color: ", ";\n border-top: 2px solid ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n display: grid;\n gap: 18px;\n grid-template-columns: auto auto auto;\n grid-template-rows: auto auto auto;\n grid-template-areas: \n \"logo . contactData\"\n \"subtitle . contactData\"\n \"socialMedia . nav\"\n ;\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 34px 4vw;\n gap: 40px;\n grid-template-areas: \n \"logo\"\n \"subtitle\"\n \"nav\"\n \"contactData\"\n \"socialMedia\"\n ;\n }\n"])), function (props) { return props.colors.background || theme.black2; }, function (props) { return props.colors.border || theme.black2; });
|
|
2492
2492
|
var Logo = newStyled.img(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n grid-area: logo;\n max-width: 160px;\n cursor: pointer;\n transition: 200ms;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n grid-area: logo;\n max-width: 160px;\n cursor: pointer;\n transition: 200ms;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
|
|
2493
2493
|
var Subtitle = newStyled.h5(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n grid-area: subtitle;\n font-size: 16px;\n letter-spacing: .5px;\n"], ["\n grid-area: subtitle;\n font-size: 16px;\n letter-spacing: .5px;\n"])));
|
|
2494
2494
|
var SocialMedia = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n grid-area: socialMedia;\n display: flex;\n gap: 12px;\n"], ["\n grid-area: socialMedia;\n display: flex;\n gap: 12px;\n"])));
|
|
2495
2495
|
var ContactData = newStyled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n grid-area: contactData;\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: flex-end;\n align-items: flex-end;\n @media only screen and (max-width: 1024px) {\n align-items: flex-start;\n }\n"], ["\n grid-area: contactData;\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: flex-end;\n align-items: flex-end;\n @media only screen and (max-width: 1024px) {\n align-items: flex-start;\n }\n"])));
|
|
2496
2496
|
var Nav = newStyled.nav(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n grid-area: nav;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 20px;\n padding-bottom: 6px;\n a {\n color: white;\n text-decoration: none;\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n @media only screen and (max-width: 1024px) {\n flex-direction: column;\n align-items: flex-start;\n }\n"], ["\n grid-area: nav;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 20px;\n padding-bottom: 6px;\n a {\n color: white;\n text-decoration: none;\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n @media only screen and (max-width: 1024px) {\n flex-direction: column;\n align-items: flex-start;\n }\n"])));
|
|
2497
|
-
var templateObject_1$
|
|
2497
|
+
var templateObject_1$5, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6;
|
|
2498
|
+
|
|
2499
|
+
var DefaultCard = newStyled.article(templateObject_1$4 || (templateObject_1$4 = __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"; });
|
|
2500
|
+
var templateObject_1$4;
|
|
2501
|
+
|
|
2502
|
+
var ImageModernCard = newStyled.article(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n width: ", ";\n height: ", ";\n transition: 300ms;\n cursor: ", ";\n &::before {\n content: \"\";\n border-radius: 10px;\n position: absolute;\n transition: 300ms;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n }\n &:hover {\n &::before {\n height: ", ";\n transform: translateY(-10px);\n }\n .img {\n transform: translateY(-10px);\n }\n .footer {\n transform: translateY(10px);\n }\n }\n .img {\n border-radius: 10px;\n transition: 300ms;\n position: absolute;\n z-index: -1;\n height: 100%;\n width: 100%;\n background-image: url(", ");\n background-size: cover;\n background-repeat: no-repeat;\n }\n .footer {\n border-radius: 0 0 10px 10px;\n transition: 300ms;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 32%;\n width: 100%;\n gap: 4px;\n background-color: ", ";\n h4 {\n color: ", ";\n font-size: ", ";\n }\n p {\n font-size: ", ";\n color: ", ";\n line-height: 24px;\n }\n }\n"], ["\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n width: ", ";\n height: ", ";\n transition: 300ms;\n cursor: ", ";\n &::before {\n content: \"\";\n border-radius: 10px;\n position: absolute;\n transition: 300ms;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n }\n &:hover {\n &::before {\n height: ", ";\n transform: translateY(-10px);\n }\n .img {\n transform: translateY(-10px);\n }\n .footer {\n transform: translateY(10px);\n }\n }\n .img {\n border-radius: 10px;\n transition: 300ms;\n position: absolute;\n z-index: -1;\n height: 100%;\n width: 100%;\n background-image: url(", ");\n background-size: cover;\n background-repeat: no-repeat;\n }\n .footer {\n border-radius: 0 0 10px 10px;\n transition: 300ms;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 32%;\n width: 100%;\n gap: 4px;\n background-color: ", ";\n h4 {\n color: ", ";\n font-size: ", ";\n }\n p {\n font-size: ", ";\n color: ", ";\n line-height: 24px;\n }\n }\n"])), function (props) { return props.card.width || "100%"; }, function (props) { return props.card.height || "100%"; }, function (props) { return props.card.callback ? 'pointer' : 'default'; }, function (props) { return "calc(".concat(props.card.height, " + 20px)") || "100%"; }, function (props) { return props.card.imageUrl; }, function (props) { return props.card.backgroundColor || theme.black2; }, 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"; });
|
|
2503
|
+
var templateObject_1$3;
|
|
2498
2504
|
|
|
2499
2505
|
function Card(props) {
|
|
2500
2506
|
var callback = props.callback, type = props.type; props.backgroundColor; var _a = props.icon, icon = _a === undefined ? {
|
|
@@ -2514,17 +2520,22 @@ function Card(props) {
|
|
|
2514
2520
|
size: '16px'
|
|
2515
2521
|
} : _c;
|
|
2516
2522
|
switch (type) {
|
|
2517
|
-
default:
|
|
2518
|
-
return (React.createElement(
|
|
2523
|
+
case "default":
|
|
2524
|
+
return (React.createElement(DefaultCard, { card: props, onClick: function () { return callback; } },
|
|
2519
2525
|
React.createElement(Fade, { type: 'left-to-right' }, icon.element),
|
|
2520
2526
|
React.createElement(Fade, { type: 'left-to-right' },
|
|
2521
2527
|
React.createElement("h4", null, title.text)),
|
|
2522
2528
|
React.createElement(Fade, { type: 'left-to-right' },
|
|
2523
2529
|
React.createElement("p", null, description.text))));
|
|
2530
|
+
case "image-modern":
|
|
2531
|
+
return (React.createElement(Fade, { type: 'left-to-right' },
|
|
2532
|
+
React.createElement(ImageModernCard, { card: props, onClick: function () { return callback; } },
|
|
2533
|
+
React.createElement("div", { className: "img" }),
|
|
2534
|
+
React.createElement("div", { className: "footer" },
|
|
2535
|
+
React.createElement("h4", null, title.text),
|
|
2536
|
+
React.createElement("p", null, description.text)))));
|
|
2524
2537
|
}
|
|
2525
2538
|
}
|
|
2526
|
-
var Container$2 = newStyled.article(templateObject_1$3 || (templateObject_1$3 = __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"; });
|
|
2527
|
-
var templateObject_1$3;
|
|
2528
2539
|
|
|
2529
2540
|
function Cards(props) {
|
|
2530
2541
|
var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
|
|
@@ -2545,8 +2556,7 @@ function EntrySelector(props) {
|
|
|
2545
2556
|
React.createElement(Items, null, items.map(function (item, index) { return (React.createElement(Item, { onClick: function () { return setSelectedItem(index); }, isSelected: selectedItem === index, colors: colors },
|
|
2546
2557
|
item.name,
|
|
2547
2558
|
React.createElement(Icon, { icon: 'arrow-long' }))); })),
|
|
2548
|
-
React.createElement(
|
|
2549
|
-
React.createElement(ItemContent, null, items[selectedItem].content)))));
|
|
2559
|
+
React.createElement(ItemContent, null, items[selectedItem].content))));
|
|
2550
2560
|
}
|
|
2551
2561
|
var Container = newStyled.section(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n gap: 28px;\n h5 {\n color: #AEAEAE;\n font-size: 18px;\n }\n * {\n user-select: none;\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n gap: 28px;\n h5 {\n color: #AEAEAE;\n font-size: 18px;\n }\n * {\n user-select: none;\n }\n"])), function (props) { return props.colors.background || "transparent"; });
|
|
2552
2562
|
var Inner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr 2fr;\n grid-template-areas: \"items content\";\n gap: 22px;\n"], ["\n display: grid;\n grid-template-columns: 1fr 2fr;\n grid-template-areas: \"items content\";\n gap: 22px;\n"])));
|