wex-ui-lib 1.4.5 → 1.4.7

package/dist/index.d.ts

@@ -58,6 +58,10 @@ type NavbarProps = {
             onClick?: () => void;
         }[];
     }[];
+    mobileItems?: {
+        label: string;
+        onClick?: () => void;
+    }[];
     button?: ButtonProps & {
         label: string;
         onClick?: () => void;

package/dist/index.esm.js

@@ -1960,11 +1960,11 @@ function Icon(props) {
         icon.includes("arrow-caret") && (React__default.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
 }
-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) {
+var IconContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1px;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  transition: 100ms;\n  cursor: pointer;\n  svg {\n    transform: ", ";\n    height: ", ";\n    fill: ", ";\n    stroke: ", ";\n    path{\n      fill: ", ";\n      stroke: ", ";\n    }\n  }\n  &:hover {\n    border-color: ", ";\n    svg {\n      fill: ", ";\n      path{\n        fill: ", ";\n      }\n    }\n  }\n"], ["\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1px;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  transition: 100ms;\n  cursor: pointer;\n  svg {\n    transform: ", ";\n    height: ", ";\n    fill: ", ";\n    stroke: ", ";\n    path{\n      fill: ", ";\n      stroke: ", ";\n    }\n  }\n  &:hover {\n    border-color: ", ";\n    svg {\n      fill: ", ";\n      path{\n        fill: ", ";\n      }\n    }\n  }\n"])), function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? "2px solid ".concat(props.color) : "unset"; }, function (props) {
     return props.border === "rounded" ? "2px" :
         props.border === "circle" ? "50px" :
             "unset";
-}, 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; });
+}, function (props) { return props.icon.includes("left") ? "rotateY(180deg)" : ""; }, function (props) { return props.border ? "46%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; });
 var templateObject_1$d;
 
 var theme = {
@@ -2168,39 +2168,62 @@ var disappearAnimation = keyframes(templateObject_2$7 || (templateObject_2$7 = _
 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"])));
 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"])));
 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"])));
-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"])));
-var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$1;
+var fadeInFromBottom = keyframes(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$2;
 
 function Navbar(props) {
     var logo = props.logo, items = props.items, button = props.button, config = props.config;
+    var _a = useState(false), sideNavOpen = _a[0], setSideNavOpen = _a[1];
+    var isMobile = typeof window !== 'undefined' && window.innerWidth <= 800;
+    var sideNavItems = props.mobileItems || [];
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(NavbarContainer, __assign({}, props),
             React__default.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 }),
-            React__default.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
-                var _a, _b;
-                return (React__default.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
-                        e.preventDefault();
-                        item.onClick && item.onClick();
-                    }, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
-                    item.label,
-                    item.subitems && React__default.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
-                    item.subitems && (React__default.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
-                        return (React__default.createElement(Subitem, { key: subitem.label },
-                            React__default.createElement("a", { href: "#", onClick: function (e) {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    subitem.onClick && subitem.onClick();
-                                } }, subitem.label)));
-                    })))));
-            })),
-            button && (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))));
+            !isMobile ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
+                    var _a, _b;
+                    return (React__default.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
+                            e.preventDefault();
+                            item.onClick && item.onClick();
+                        }, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
+                        item.label,
+                        item.subitems && React__default.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
+                        item.subitems && (React__default.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
+                            return (React__default.createElement(Subitem, { key: subitem.label },
+                                React__default.createElement("a", { href: "#", onClick: function (e) {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        subitem.onClick && subitem.onClick();
+                                    } }, subitem.label)));
+                        })))));
+                })),
+                button && (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))) : (React__default.createElement(Icon, { icon: 'hamburgerMenu', color: 'white', callback: function () { return setSideNavOpen(true); } }))),
+        isMobile && (React__default.createElement(SideNav, { open: sideNavOpen },
+            React__default.createElement(SideNavOverlay, { open: sideNavOpen, onClick: function () { return setSideNavOpen(false); } }),
+            React__default.createElement(SideNavContent, { open: sideNavOpen },
+                React__default.createElement(CloseButton, { onClick: function () { return setSideNavOpen(false); } }, "\u00D7"), sideNavItems === null || sideNavItems === undefined ? undefined :
+                sideNavItems.map(function (item) { return (React__default.createElement(SideNavItem, { key: item.label, onClick: function () { setSideNavOpen(false); item.onClick && item.onClick(); } }, item.label)); }))))));
 }
-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\""; });
+var NavbarContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  background-color: ", ";\n  width: 100vw;\n  height: ", ";\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-rows: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4vw;\n  z-index: 99;\n  backdrop-filter: blur(4px);\n  & > button {\n    margin-left: auto;\n    grid-area: button;\n  }\n  * {\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n  @media only screen and (max-width: 1024px) {\n    grid-template-columns: auto auto;\n    grid-template-areas: \"logo hamburgerIcon\";\n  }\n"], ["\n  background-color: ", ";\n  width: 100vw;\n  height: ", ";\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-rows: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4vw;\n  z-index: 99;\n  backdrop-filter: blur(4px);\n  & > button {\n    margin-left: auto;\n    grid-area: button;\n  }\n  * {\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n  @media only screen and (max-width: 1024px) {\n    grid-template-columns: auto auto;\n    grid-template-areas: \"logo hamburgerIcon\";\n  }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.background) || theme.black; }, function (props) { var _a; return ((_a = props.config) === null || _a === undefined ? undefined : _a.height) || '80px'; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-columns: auto auto auto" : "grid-template-columns: auto auto"; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-areas: \"logo items button\"" : "grid-template-areas: \"logo items\""; });
 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"])));
 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);
 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'; });
 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"])));
-var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
+var SideNav = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 200;\n  pointer-events: ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 200;\n  pointer-events: ", ";\n"])), function (_a) {
+    var open = _a.open;
+    return open ? 'auto' : 'none';
+});
+var SideNavOverlay = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0,0,0,0.4);\n  opacity: ", ";\n  transition: opacity 0.3s;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0,0,0,0.4);\n  opacity: ", ";\n  transition: opacity 0.3s;\n"])), function (_a) {
+    var open = _a.open;
+    return open ? 1 : 0;
+});
+var SideNavContent = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 80vw;\n  max-width: 320px;\n  height: 100vh;\n  background: ", ";\n  box-shadow: -2px 0 16px rgba(0,0,0,0.15);\n  transform: ", ";\n  transition: transform 0.3s;\n  display: flex;\n  flex-direction: column;\n  padding: 32px 20px 20px 20px;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 80vw;\n  max-width: 320px;\n  height: 100vh;\n  background: ", ";\n  box-shadow: -2px 0 16px rgba(0,0,0,0.15);\n  transform: ", ";\n  transition: transform 0.3s;\n  display: flex;\n  flex-direction: column;\n  padding: 32px 20px 20px 20px;\n"])), theme.black2, function (_a) {
+    var open = _a.open;
+    return open ? 'translateX(0)' : 'translateX(100%)';
+});
+var CloseButton = newStyled.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  color: white;\n  font-size: 2rem;\n  align-self: flex-end;\n  cursor: pointer;\n"], ["\n  background: none;\n  border: none;\n  color: white;\n  font-size: 2rem;\n  align-self: flex-end;\n  cursor: pointer;\n"])));
+var SideNavItem = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: white;\n  font-size: 1.1rem;\n  padding: 16px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  cursor: pointer;\n  &:last-of-type { border-bottom: none; }\n"], ["\n  color: white;\n  font-size: 1.1rem;\n  padding: 16px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  cursor: pointer;\n  &:last-of-type { border-bottom: none; }\n"])));
+var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 
 function Hero(props) {
     var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
@@ -2476,7 +2499,7 @@ var ContactData = newStyled.div(templateObject_5$2 || (templateObject_5$2 = __ma
 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"])));
 var templateObject_1$5, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6;
 
-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"; });
+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  @media only screen and (max-width: 1024px) {\n    padding: 30px 8vw;\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  @media only screen and (max-width: 1024px) {\n    padding: 30px 8vw;\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"; });
 var templateObject_1$4;
 
 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"; });
@@ -2521,7 +2544,7 @@ function Cards(props) {
     var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
     return (React__default.createElement(Container$1, { gap: gap, padding: padding, backgroundColor: backgroundColor }, cards.map(function (card) { return (React__default.createElement(Card, __assign({}, card))); })));
 }
-var Container$1 = newStyled.section(templateObject_1$2 || (templateObject_1$2 = __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; });
+var Container$1 = newStyled.section(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: ", ";;\n  padding: ", ";\n  background-color: ", ";\n  @media only screen and (max-width: 1024px) {\n    display: flex;\n    flex-direction: column;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: ", ";;\n  padding: ", ";\n  background-color: ", ";\n  @media only screen and (max-width: 1024px) {\n    display: flex;\n    flex-direction: column;\n  }\n"])), function (props) { return props.gap || "20px"; }, function (props) { return props.padding || "8vw 40px"; }, function (props) { return props.backgroundColor || theme.black2; });
 var templateObject_1$2;
 
 function EntrySelector(props) {