wex-ui-lib 1.1.2 → 1.1.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
@@ -49,6 +49,7 @@ type NavbarProps = {
49
49
  };
50
50
  logo?: {
51
51
  url: string;
52
+ width?: string;
52
53
  onClick?: () => void;
53
54
  };
54
55
  items?: {
@@ -116,7 +117,10 @@ type ShowcaseItem = {
116
117
  declare function Showcase(props: ShowcaseProps): React$1.JSX.Element;
117
118
 
118
119
  type FooterProps = {
119
- logoUrl?: string;
120
+ logo?: {
121
+ url: string;
122
+ callback?: () => void;
123
+ };
120
124
  subtitle?: string;
121
125
  backgroundColor?: string;
122
126
  socialMediaUrls?: {
package/dist/index.esm.js CHANGED
@@ -1945,9 +1945,9 @@ function Icon(props) {
1945
1945
  icon.includes("arrow-long") && (React__default.createElement("svg", { width: "18", height: "10", viewBox: "0 1 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
1946
1946
  React__default.createElement("path", { d: "M11.9985 0C13.2081 1.34446 14.2541 2.36903 15.1363 3.07371C16.0186 3.76912 16.8508 4.28836 17.633 4.63143V5.2573C16.7325 5.70236 15.8594 6.2726 15.0135 6.96801C14.1677 7.65415 13.1581 8.66481 11.9848 10H10.9343C11.7893 8.1363 12.6852 6.70375 13.622 5.70236H0V4.29764H13.622C12.9307 3.39824 12.4487 2.73064 12.1758 2.29485C11.903 1.85906 11.4982 1.09411 10.9616 0H11.9985Z" }))),
1947
1947
  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" },
1948
- React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", "stroke-width": "1.5" })))));
1948
+ React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
1949
1949
  }
1950
- var IconContainer = newStyled.button(templateObject_1$8 || (templateObject_1$8 = __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) {
1950
+ var IconContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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) {
1951
1951
  return props.border === "rounded" ? "2px" :
1952
1952
  props.border === "circle" ? "50px" :
1953
1953
  "unset";
@@ -1958,6 +1958,7 @@ var theme = {
1958
1958
  primary: "#DC3737",
1959
1959
  secondary: "hsl(0, 0%, 96%)",
1960
1960
  accent: "",
1961
+ gray: "#191919",
1961
1962
  black: "#2c2c2c",
1962
1963
  black2: "#141416",
1963
1964
  white: "white",
@@ -2003,11 +2004,11 @@ function Button(props) {
2003
2004
  React__default.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
2004
2005
  }
2005
2006
  }
2006
- var DefaultButton = newStyled.button(templateObject_1$7 || (templateObject_1$7 = __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 svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; 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.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; });
2007
- var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\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 color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\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) { return props.color || theme.black; }, 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; });
2007
+ var DefaultButton = newStyled.button(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n border: ", ";\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n border-color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n border: ", ";\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n border-color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) ? "2px solid ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.border) : 'none'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || ''; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
2008
+ var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n background-color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\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 &::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; });
2008
2009
  var PillButton = newStyled(DefaultButton)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "], ["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "])));
2009
2010
  var RoundedButton = newStyled(DefaultButton)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
2010
- var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$2;
2011
+ var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$2;
2011
2012
 
2012
2013
  function insertWithoutScoping(cache, serialized) {
2013
2014
  if (cache.inserted[serialized.name] === undefined) {
@@ -2150,18 +2151,18 @@ var _createEmotion = createEmotion({
2150
2151
  keyframes = _createEmotion.keyframes;
2151
2152
 
2152
2153
  var appearAnimation = keyframes(templateObject_1$6 || (templateObject_1$6 = __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"])));
2153
- var disappearAnimation = keyframes(templateObject_2$5 || (templateObject_2$5 = __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"])));
2154
+ var disappearAnimation = keyframes(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"], ["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"])));
2154
2155
  var fadeInFromLeft = keyframes(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
2155
2156
  var fadeInFromRight = keyframes(templateObject_4$1 || (templateObject_4$1 = __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"])));
2156
2157
  var fadeInFromTop = keyframes(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
2157
2158
  var fadeInFromBottom = keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
2158
- var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6;
2159
+ var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6;
2159
2160
 
2160
2161
  function Navbar(props) {
2161
2162
  var logo = props.logo, items = props.items, button = props.button, config = props.config;
2162
2163
  return (React__default.createElement(React__default.Fragment, null,
2163
2164
  React__default.createElement(NavbarContainer, { height: config.height, colors: config.colors, centeredItems: config.centeredItems },
2164
- React__default.createElement(Logo, { src: logo === null || logo === undefined ? undefined : logo.url, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
2165
+ React__default.createElement(Logo, { src: logo === null || logo === undefined ? undefined : logo.url, width: logo === null || logo === undefined ? undefined : logo.width, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
2165
2166
  React__default.createElement("div", null, items === null || items === undefined ? undefined : items.map(function (item) {
2166
2167
  var _a;
2167
2168
  return (React__default.createElement("a", { key: item.label, href: "#", onClick: function (e) {
@@ -2181,10 +2182,10 @@ function Navbar(props) {
2181
2182
  })),
2182
2183
  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))));
2183
2184
  }
2184
- var NavbarContainer = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; }, function (props) { return props.centeredItems ? 'unset' : 'auto'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, disappearAnimation, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, appearAnimation, appearAnimation);
2185
- var Logo = newStyled.img(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
2186
- var ControlledNavItem = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "], ["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "])));
2187
- var templateObject_1$5, templateObject_2$4, templateObject_3$2;
2185
+ var NavbarContainer = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 18px;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 18px;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; }, function (props) { return props.centeredItems ? 'unset' : 'auto'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.primary; }, appearAnimation, appearAnimation);
2186
+ var Logo = newStyled.img(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])), function (props) { return props.width || '130px'; });
2187
+ var ControlledNavItem = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n & > div{\n gap: 30px;\n flex-direction: column;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "], ["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n & > div{\n gap: 30px;\n flex-direction: column;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "])));
2188
+ var templateObject_1$5, templateObject_2$3, templateObject_3$2;
2188
2189
 
2189
2190
  function Hero(props) {
2190
2191
  var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
@@ -2195,9 +2196,9 @@ function Hero(props) {
2195
2196
  React__default.createElement(HeroContent, null, children))));
2196
2197
  }
2197
2198
  var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"])), function (props) { return "calc(".concat(props.height, " - ").concat(props.marginTop, ")"); }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; });
2198
- var Overlay = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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; });
2199
+ var Overlay = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
2199
2200
  var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
2200
- var templateObject_1$4, templateObject_2$3, templateObject_3$1;
2201
+ var templateObject_1$4, templateObject_2$2, templateObject_3$1;
2201
2202
 
2202
2203
  function useIntObs(_a) {
2203
2204
  var _b;
@@ -2338,6 +2339,10 @@ function Slider(props) {
2338
2339
  default:
2339
2340
  setTranslateX(wrapperRef.current.clientWidth * (option));
2340
2341
  setCurrentSlide(option);
2342
+ if (intervalRef.current) {
2343
+ clearInterval(intervalRef.current);
2344
+ intervalRef.current = null;
2345
+ }
2341
2346
  break;
2342
2347
  }
2343
2348
  }, [children, currentSlide]);
@@ -2357,12 +2362,19 @@ function Slider(props) {
2357
2362
  document.removeEventListener("transitionend", transitionEnd);
2358
2363
  };
2359
2364
  }, [currentSlide, children]);
2365
+ var intervalRef = useRef(null);
2360
2366
  useEffect(function () {
2361
2367
  if (autoplayTicTime) {
2362
- window.setInterval(function () {
2368
+ intervalRef.current = setInterval(function () {
2363
2369
  goTo('next');
2364
2370
  }, autoplayTicTime);
2365
2371
  }
2372
+ return function () {
2373
+ if (intervalRef.current) {
2374
+ clearInterval(intervalRef.current);
2375
+ intervalRef.current = null;
2376
+ }
2377
+ };
2366
2378
  }, [goTo, autoplayTicTime]);
2367
2379
  return (React__default.createElement(React__default.Fragment, null,
2368
2380
  React__default.createElement(SliderContainer, { visibleInactiveSlides: visibleInactiveSlides },
@@ -2370,14 +2382,16 @@ function Slider(props) {
2370
2382
  showArrowKeys && (React__default.createElement(React__default.Fragment, null,
2371
2383
  React__default.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
2372
2384
  React__default.createElement(Icon, { callback: function () { return goTo('next'); }, color: 'black', icon: 'arrow-long' })))),
2373
- showRadioButtons && (React__default.createElement(RadiosContainer, null, children.map(function (item, index) { return (React__default.createElement(RadioButton, { key: index, onClick: function () { return goTo(index + 1); }, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
2385
+ showRadioButtons && (React__default.createElement(RadiosContainer, null, children.map(function (item, index) { return (React__default.createElement(RadioButton, { key: index, onClick: function () {
2386
+ goTo(index + 1);
2387
+ }, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
2374
2388
  }
2375
2389
  var SliderContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n & > button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"], ["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n & > button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"])), function (props) { return props.visibleInactiveSlides ? 'visible' : 'hidden'; });
2376
- var SlidesWrapper = newStyled.ul(templateObject_2$2 || (templateObject_2$2 = __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; });
2390
+ var SlidesWrapper = newStyled.ul(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"], ["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"])), function (props) { return -props.translateX; });
2377
2391
  var Slide = newStyled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
2378
2392
  var RadiosContainer = newStyled.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n transform: translateY(20px);\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 58px;\n cursor: pointer;\n list-style: none;\n"], ["\n position: relative;\n display: flex;\n transform: translateY(20px);\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 58px;\n cursor: pointer;\n list-style: none;\n"])));
2379
2393
  var RadioButton = newStyled.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n width: 7px; \n height: 7px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: -4px;\n width: 12px;\n height: 12px;\n border-radius: 50px;\n background-color: transparent;\n border: 2px solid ", ";\n opacity: 80%;\n z-index: -1;\n }\n"], ["\n position: relative;\n width: 7px; \n height: 7px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: -4px;\n width: 12px;\n height: 12px;\n border-radius: 50px;\n background-color: transparent;\n border: 2px solid ", ";\n opacity: 80%;\n z-index: -1;\n }\n"])), function (props) { return props.radioButtonsColor || theme.black; }, function (props) { return props.isSelected ? props.radioButtonsColor || theme.black : "unset"; });
2380
- var templateObject_1$2, templateObject_2$2, templateObject_3, templateObject_4, templateObject_5;
2394
+ var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5;
2381
2395
 
2382
2396
  function Showcase(props) {
2383
2397
  var items = props.items, backgroundColor = props.backgroundColor;
@@ -2400,26 +2414,29 @@ function Showcase(props) {
2400
2414
  })));
2401
2415
  }
2402
2416
  var Container$1 = newStyled.section(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 2px;\n padding: 2px 0;\n background-color: ", ";\n"], ["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 2px;\n padding: 2px 0;\n background-color: ", ";\n"])), function (props) { return props.backgroundColor || 'white'; });
2403
- var ShowcaseItem = newStyled.a(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"], ["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"])), function (props) { return props.backgroundUrl; }, function (props) { return props.hoveredItemKey === props.itemKey || props.hoveredItemKey === undefined ? 'unset' : 'brightness(0.3)'; });
2404
- var templateObject_1$1, templateObject_2$1;
2417
+ var ShowcaseItem = newStyled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"], ["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"])), function (props) { return props.backgroundUrl; }, function (props) { return props.hoveredItemKey === props.itemKey || props.hoveredItemKey === undefined ? 'unset' : 'brightness(0.3)'; });
2418
+ var templateObject_1$1, templateObject_2;
2405
2419
 
2406
2420
  function Footer(props) {
2407
- var logoUrl = props.logoUrl, subtitle = props.subtitle, backgroundColor = props.backgroundColor, _a = props.socialMediaUrls, socialMediaUrls = _a === undefined ? {
2421
+ var _a = props.logo, logo = _a === undefined ? {
2422
+ url: "",
2423
+ callback: function () { }
2424
+ } : _a, subtitle = props.subtitle, backgroundColor = props.backgroundColor, _b = props.socialMediaUrls, socialMediaUrls = _b === undefined ? {
2408
2425
  instagram: "",
2409
2426
  twitter: "",
2410
2427
  facebook: "",
2411
2428
  linkedIn: "",
2412
- } : _a, _b = props.contactData, contactData = _b === undefined ? {
2429
+ } : _b, _c = props.contactData, contactData = _c === undefined ? {
2413
2430
  phone: "",
2414
2431
  phone2: "",
2415
2432
  email: "",
2416
2433
  email2: "",
2417
2434
  address: "",
2418
2435
  address2: "",
2419
- } : _b, navItems = props.navItems;
2436
+ } : _c, navItems = props.navItems;
2420
2437
  return (React__default.createElement(Container, { backgroundColor: backgroundColor },
2421
2438
  React__default.createElement("div", { className: 'left' },
2422
- React__default.createElement("img", { src: logoUrl, alt: "logo" }),
2439
+ React__default.createElement("img", { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
2423
2440
  React__default.createElement("h5", null, subtitle),
2424
2441
  React__default.createElement("div", null,
2425
2442
  socialMediaUrls.instagram &&
@@ -2436,9 +2453,8 @@ function Footer(props) {
2436
2453
  contactData.email2 && React__default.createElement("p", null, contactData.email2)),
2437
2454
  React__default.createElement("nav", null, navItems && navItems.map(function (item) { return React__default.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
2438
2455
  }
2439
- var Container = newStyled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"], ["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"])), function (props) { return props.backgroundColor || theme.black2; }, theme.primary);
2440
- newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n"], ["\n\n"])));
2441
- var templateObject_1, templateObject_2;
2456
+ var Container = newStyled.footer(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n cursor: pointer;\n &:hover {\n filter: brightness(1.2);\n }\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"], ["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n .left {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 22px;\n h5 {\n font-size: 14px;\n }\n img {\n max-width: 160px;\n cursor: pointer;\n &:hover {\n filter: brightness(1.2);\n }\n }\n div {\n display: flex;\n gap: 12px;\n }\n }\n .right {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: right;\n gap: 34px;\n div {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n nav {\n display: flex;\n gap: 20px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n"])), function (props) { return props.backgroundColor || theme.black2; }, theme.primary);
2457
+ var templateObject_1;
2442
2458
 
2443
2459
  export { Button, Fade, Footer, Hero, Icon, Navbar, Showcase, Slider };
2444
2460
  //# sourceMappingURL=index.esm.js.map