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 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$c || (templateObject_1$c = __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) {
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$c;
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$b || (templateObject_1$b = __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; });
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$b, templateObject_2$8, templateObject_3$7, templateObject_4$6;
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$a || (templateObject_1$a = __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"])));
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$a, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$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, { height: config.height, colors: config.colors },
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, { centeredItems: config.centeredItems }, items === null || items === undefined ? undefined : items.map(function (item) {
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 ? (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))));
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$9 || (templateObject_1$9 = __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"], ["\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"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; });
2219
- var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"])), function (props) { return props.centeredItems ? 'unset' : 'auto'; });
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.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a; return ((_a = props.config.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.config.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.primary; }, appearAnimation, function (props) { var _a; return !props.hasSubitems ? ((_a = props.config.colors) === null || _a === undefined ? undefined : _a.borderHover) || "white" : "transparent"; }, appearAnimation);
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$9, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
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$6, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
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$6 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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'; });
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$8, templateObject_2$5, templateObject_3$4;
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$5, { ref: ref, isVisible: isIntersecting, animation: function () {
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$5 = newStyled.span(templateObject_1$7 || (templateObject_1$7 = __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$7;
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$6 || (templateObject_1$6 = __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'; });
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$6, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3;
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$4, { itemsPerRow: itemsPerRow, onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor, gap: gap }, items.map(function (item, index) {
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$4 = newStyled.section(templateObject_1$5 || (templateObject_1$5 = __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'; });
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$5, templateObject_2$3;
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, backgroundColor = props.backgroundColor, _b = props.socialMediaUrls, socialMediaUrls = _b === undefined ? {
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
- } : _b, _c = props.contactData, contactData = _c === undefined ? {
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
- } : _c, navItems = props.navItems;
2468
- return (React.createElement(Container$3, { backgroundColor: backgroundColor },
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$3 = newStyled.footer(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\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 padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\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.backgroundColor || theme.black2; }, theme.primary);
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$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6;
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(Container$2, { card: props, onClick: function () { return callback; } },
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(Fade, { type: 'bottom-to-top' },
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"])));