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.d.ts CHANGED
@@ -41,10 +41,9 @@ type ButtonProps = {
41
41
  declare function Button(props: ButtonProps): React$1.JSX.Element;
42
42
 
43
43
  type NavbarProps = {
44
- config: {
44
+ config?: {
45
45
  colors?: ComponentColors;
46
46
  height?: string;
47
- centeredItems?: boolean;
48
47
  };
49
48
  logo?: {
50
49
  url: string;
@@ -123,8 +122,8 @@ type FooterProps = {
123
122
  url: string;
124
123
  callback?: () => void;
125
124
  };
125
+ colors?: ComponentColors;
126
126
  subtitle?: string;
127
- backgroundColor?: string;
128
127
  socialMediaUrls?: {
129
128
  instagram?: string;
130
129
  twitter?: string;
@@ -149,8 +148,10 @@ type FooterProps = {
149
148
  declare function Footer(props: FooterProps): React$1.JSX.Element;
150
149
 
151
150
  type CardProps = {
152
- type?: "default";
151
+ type: "default" | "image-modern";
153
152
  backgroundColor?: string;
153
+ width?: string;
154
+ height?: string;
154
155
  title?: Font & {
155
156
  text: string;
156
157
  color?: string;
@@ -164,6 +165,7 @@ type CardProps = {
164
165
  width?: string;
165
166
  height?: string;
166
167
  };
168
+ imageUrl?: string;
167
169
  callback?: () => void;
168
170
  };
169
171
  declare function Card(props: CardProps): React$1.JSX.Element;
package/dist/index.esm.js CHANGED
@@ -1960,12 +1960,12 @@ function Icon(props) {
1960
1960
  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" },
1961
1961
  React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
1962
1962
  }
1963
- 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) {
1963
+ 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) {
1964
1964
  return props.border === "rounded" ? "2px" :
1965
1965
  props.border === "circle" ? "50px" :
1966
1966
  "unset";
1967
1967
  }, 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; });
1968
- var templateObject_1$c;
1968
+ var templateObject_1$d;
1969
1969
 
1970
1970
  var theme = {
1971
1971
  primary: "#DC3737",
@@ -2017,11 +2017,11 @@ function Button(props) {
2017
2017
  React__default.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
2018
2018
  }
2019
2019
  }
2020
- 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; });
2020
+ 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; });
2021
2021
  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; });
2022
2022
  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 "])));
2023
2023
  var RoundedButton = newStyled(DefaultButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
2024
- var templateObject_1$b, templateObject_2$8, templateObject_3$7, templateObject_4$6;
2024
+ var templateObject_1$c, templateObject_2$8, templateObject_3$7, templateObject_4$6;
2025
2025
 
2026
2026
  function insertWithoutScoping(cache, serialized) {
2027
2027
  if (cache.inserted[serialized.name] === undefined) {
@@ -2163,20 +2163,20 @@ var _createEmotion = createEmotion({
2163
2163
  }),
2164
2164
  keyframes = _createEmotion.keyframes;
2165
2165
 
2166
- 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"])));
2166
+ 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"])));
2167
2167
  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"])));
2168
2168
  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"])));
2169
2169
  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"])));
2170
2170
  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"])));
2171
2171
  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"])));
2172
- var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$1;
2172
+ var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$1;
2173
2173
 
2174
2174
  function Navbar(props) {
2175
2175
  var logo = props.logo, items = props.items, button = props.button, config = props.config;
2176
2176
  return (React__default.createElement(React__default.Fragment, null,
2177
- React__default.createElement(NavbarContainer, { height: config.height, colors: config.colors },
2177
+ React__default.createElement(NavbarContainer, __assign({}, props),
2178
2178
  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 }),
2179
- React__default.createElement(ItemsContainer, { centeredItems: config.centeredItems }, items === null || items === undefined ? undefined : items.map(function (item) {
2179
+ React__default.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
2180
2180
  var _a, _b;
2181
2181
  return (React__default.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
2182
2182
  e.preventDefault();
@@ -2193,14 +2193,14 @@ function Navbar(props) {
2193
2193
  } }, subitem.label)));
2194
2194
  })))));
2195
2195
  })),
2196
- 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(React__default.Fragment, null))));
2196
+ button && (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))));
2197
2197
  }
2198
- 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'; });
2199
- 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'; });
2200
- 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);
2201
- 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'; });
2198
+ 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\""; });
2199
+ 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"])));
2200
+ 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);
2201
+ 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'; });
2202
2202
  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"])));
2203
- var templateObject_1$9, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
2203
+ var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
2204
2204
 
2205
2205
  function Hero(props) {
2206
2206
  var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
@@ -2213,14 +2213,14 @@ function Hero(props) {
2213
2213
  return function () { return clearInterval(interval_1); };
2214
2214
  }
2215
2215
  }, [imageUrls]);
2216
- return (React__default.createElement(Container$6, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
2216
+ return (React__default.createElement(Container$5, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
2217
2217
  overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
2218
2218
  React__default.createElement(HeroContent, null, children)));
2219
2219
  }
2220
- 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'; });
2220
+ 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'; });
2221
2221
  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; });
2222
2222
  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"])));
2223
- var templateObject_1$8, templateObject_2$5, templateObject_3$4;
2223
+ var templateObject_1$9, templateObject_2$5, templateObject_3$4;
2224
2224
 
2225
2225
  function useIntObs(_a) {
2226
2226
  var _b;
@@ -2290,7 +2290,7 @@ function Fade(props) {
2290
2290
  root: document,
2291
2291
  rootMargin: "-10% 0% -10% 0%"
2292
2292
  }), isIntersecting = _b.isIntersecting, ref = _b.ref;
2293
- return (React__default.createElement(Container$5, { ref: ref, isVisible: isIntersecting, animation: function () {
2293
+ return (React__default.createElement(Container$4, { ref: ref, isVisible: isIntersecting, animation: function () {
2294
2294
  switch (type) {
2295
2295
  case 'bottom-to-top':
2296
2296
  return fadeInFromBottom;
@@ -2303,8 +2303,8 @@ function Fade(props) {
2303
2303
  }
2304
2304
  } }, children));
2305
2305
  }
2306
- 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") : ''; });
2307
- var templateObject_1$7;
2306
+ 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") : ''; });
2307
+ var templateObject_1$8;
2308
2308
 
2309
2309
  function Slider(props) {
2310
2310
  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;
@@ -2408,44 +2408,44 @@ function Slider(props) {
2408
2408
  goTo(index + 1);
2409
2409
  }, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
2410
2410
  }
2411
- 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'; });
2411
+ 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'; });
2412
2412
  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; });
2413
2413
  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"])));
2414
2414
  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"])));
2415
2415
  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"; });
2416
- var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3;
2416
+ var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3;
2417
2417
 
2418
2418
  function Showcase(props) {
2419
2419
  var items = props.items, itemsPerRow = props.itemsPerRow, backgroundColor = props.backgroundColor, gap = props.gap;
2420
2420
  var _a = useState(undefined), hoveredItemKey = _a[0], setHoveredItemKey = _a[1];
2421
- return (React__default.createElement(Container$4, { itemsPerRow: itemsPerRow, onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor, gap: gap }, items.map(function (item, index) {
2421
+ return (React__default.createElement(Container$3, { itemsPerRow: itemsPerRow, onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor, gap: gap }, items.map(function (item, index) {
2422
2422
  return item ? (React__default.createElement(ShowcaseItem, { key: index, onClick: function () { return item.callback(); }, backgroundUrl: item.imageUrl, onMouseEnter: function () { return setHoveredItemKey(index); }, itemKey: index, hoveredItemKey: hoveredItemKey },
2423
2423
  React__default.createElement("span", null, formatText(item.label, 'uppercase')))) : React__default.createElement(React__default.Fragment, null);
2424
2424
  })));
2425
2425
  }
2426
- 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'; });
2426
+ 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'; });
2427
2427
  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)'; });
2428
- var templateObject_1$5, templateObject_2$3;
2428
+ var templateObject_1$6, templateObject_2$3;
2429
2429
 
2430
2430
  function Footer(props) {
2431
2431
  var _a = props.logo, logo = _a === undefined ? {
2432
2432
  url: "",
2433
2433
  callback: function () { }
2434
- } : _a, subtitle = props.subtitle, backgroundColor = props.backgroundColor, _b = props.socialMediaUrls, socialMediaUrls = _b === undefined ? {
2434
+ } : _a, subtitle = props.subtitle, _b = props.colors, colors = _b === undefined ? {} : _b, _c = props.socialMediaUrls, socialMediaUrls = _c === undefined ? {
2435
2435
  instagram: "",
2436
2436
  twitter: "",
2437
2437
  facebook: "",
2438
2438
  linkedin: "",
2439
2439
  youtube: ""
2440
- } : _b, _c = props.contactData, contactData = _c === undefined ? {
2440
+ } : _c, _d = props.contactData, contactData = _d === undefined ? {
2441
2441
  phone: "",
2442
2442
  phone2: "",
2443
2443
  email: "",
2444
2444
  email2: "",
2445
2445
  address: "",
2446
2446
  address2: "",
2447
- } : _c, navItems = props.navItems;
2448
- return (React__default.createElement(Container$3, { backgroundColor: backgroundColor },
2447
+ } : _d, navItems = props.navItems;
2448
+ return (React__default.createElement(Container$2, { colors: colors },
2449
2449
  React__default.createElement(Logo, { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
2450
2450
  React__default.createElement(Subtitle, null, subtitle),
2451
2451
  React__default.createElement(SocialMedia, null,
@@ -2468,13 +2468,19 @@ function Footer(props) {
2468
2468
  contactData.email2 && React__default.createElement("p", null, contactData.email2)),
2469
2469
  React__default.createElement(Nav, null, navItems && navItems.map(function (item, index) { return React__default.createElement("a", { key: index, onClick: item.callback }, item.label); }))));
2470
2470
  }
2471
- 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);
2471
+ 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; });
2472
2472
  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"])));
2473
2473
  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"])));
2474
2474
  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"])));
2475
2475
  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"])));
2476
2476
  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"])));
2477
- var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6;
2477
+ var templateObject_1$5, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6;
2478
+
2479
+ 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"; });
2480
+ var templateObject_1$4;
2481
+
2482
+ 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"; });
2483
+ var templateObject_1$3;
2478
2484
 
2479
2485
  function Card(props) {
2480
2486
  var callback = props.callback, type = props.type; props.backgroundColor; var _a = props.icon, icon = _a === undefined ? {
@@ -2494,17 +2500,22 @@ function Card(props) {
2494
2500
  size: '16px'
2495
2501
  } : _c;
2496
2502
  switch (type) {
2497
- default:
2498
- return (React__default.createElement(Container$2, { card: props, onClick: function () { return callback; } },
2503
+ case "default":
2504
+ return (React__default.createElement(DefaultCard, { card: props, onClick: function () { return callback; } },
2499
2505
  React__default.createElement(Fade, { type: 'left-to-right' }, icon.element),
2500
2506
  React__default.createElement(Fade, { type: 'left-to-right' },
2501
2507
  React__default.createElement("h4", null, title.text)),
2502
2508
  React__default.createElement(Fade, { type: 'left-to-right' },
2503
2509
  React__default.createElement("p", null, description.text))));
2510
+ case "image-modern":
2511
+ return (React__default.createElement(Fade, { type: 'left-to-right' },
2512
+ React__default.createElement(ImageModernCard, { card: props, onClick: function () { return callback; } },
2513
+ React__default.createElement("div", { className: "img" }),
2514
+ React__default.createElement("div", { className: "footer" },
2515
+ React__default.createElement("h4", null, title.text),
2516
+ React__default.createElement("p", null, description.text)))));
2504
2517
  }
2505
2518
  }
2506
- 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"; });
2507
- var templateObject_1$3;
2508
2519
 
2509
2520
  function Cards(props) {
2510
2521
  var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
@@ -2525,8 +2536,7 @@ function EntrySelector(props) {
2525
2536
  React__default.createElement(Items, null, items.map(function (item, index) { return (React__default.createElement(Item, { onClick: function () { return setSelectedItem(index); }, isSelected: selectedItem === index, colors: colors },
2526
2537
  item.name,
2527
2538
  React__default.createElement(Icon, { icon: 'arrow-long' }))); })),
2528
- React__default.createElement(Fade, { type: 'bottom-to-top' },
2529
- React__default.createElement(ItemContent, null, items[selectedItem].content)))));
2539
+ React__default.createElement(ItemContent, null, items[selectedItem].content))));
2530
2540
  }
2531
2541
  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"; });
2532
2542
  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"])));