wex-ui-lib 1.2.7 → 1.2.41

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
@@ -1,4 +1,4 @@
1
- import React$1, { JSX, ReactElement } from 'react';
1
+ import React$1, { JSX } from 'react';
2
2
 
3
3
  type ArrowIcon = 'arrow-long' | 'arrow-caret' | 'arrow-long-left' | 'arrow-caret-left';
4
4
  type SocialMediaIcon = "twitter" | "instagram" | "youtube" | "linkedin";
@@ -83,10 +83,10 @@ type HeroProps = {
83
83
  declare function Hero(props: HeroProps): React$1.JSX.Element;
84
84
 
85
85
  type FadeProps = {
86
- children: React$1.ReactElement;
86
+ children: React$1.ReactElement<any>;
87
87
  type?: 'top-to-bottom' | 'right-to-left' | 'bottom-to-top' | 'left-to-right';
88
88
  };
89
- declare function Fade(props: FadeProps): React$1.JSX.Element;
89
+ declare function Fade(props: FadeProps): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
90
90
 
91
91
  type goToOption = 'next' | 'prev' | number;
92
92
  type SliderRef = {
@@ -146,32 +146,4 @@ type FooterProps = {
146
146
 
147
147
  declare function Footer(props: FooterProps): React$1.JSX.Element;
148
148
 
149
- type CardProps = {
150
- type?: "default";
151
- backgroundColor?: string;
152
- title?: ComponentFont & {
153
- text: string;
154
- color?: string;
155
- };
156
- description?: ComponentFont & {
157
- text: string;
158
- color?: string;
159
- };
160
- icon?: {
161
- element: ReactElement;
162
- width?: string;
163
- height?: string;
164
- };
165
- callback?: () => void;
166
- };
167
- declare function Card(props: CardProps): React$1.JSX.Element;
168
-
169
- type CardsProps = {
170
- cards: CardProps[];
171
- padding?: string;
172
- backgroundColor?: string;
173
- gap?: string;
174
- };
175
- declare function Cards(props: CardsProps): React$1.JSX.Element;
176
-
177
- export { Button, Card, Cards, Fade, Footer, Hero, Icon, Navbar, Showcase, Slider, type SliderRef };
149
+ export { Button, Fade, Footer, Hero, Icon, Navbar, Showcase, Slider, type SliderRef };
package/dist/index.esm.js CHANGED
@@ -1958,12 +1958,12 @@ function Icon(props) {
1958
1958
  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" },
1959
1959
  React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
1960
1960
  }
1961
- var IconContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __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) {
1961
+ var IconContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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) {
1962
1962
  return props.border === "rounded" ? "2px" :
1963
1963
  props.border === "circle" ? "50px" :
1964
1964
  "unset";
1965
1965
  }, 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; });
1966
- var templateObject_1$a;
1966
+ var templateObject_1$7;
1967
1967
 
1968
1968
  var theme = {
1969
1969
  primary: "#DC3737",
@@ -2015,11 +2015,11 @@ function Button(props) {
2015
2015
  React__default.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
2016
2016
  }
2017
2017
  }
2018
- var DefaultButton = newStyled.button(templateObject_1$9 || (templateObject_1$9 = __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; });
2018
+ var DefaultButton = newStyled.button(templateObject_1$6 || (templateObject_1$6 = __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; });
2019
2019
  var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$5 || (templateObject_2$5 = __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; });
2020
2020
  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 "])));
2021
2021
  var RoundedButton = newStyled(DefaultButton)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
2022
- var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$3;
2022
+ var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$3;
2023
2023
 
2024
2024
  function insertWithoutScoping(cache, serialized) {
2025
2025
  if (cache.inserted[serialized.name] === undefined) {
@@ -2161,13 +2161,13 @@ var _createEmotion = createEmotion({
2161
2161
  }),
2162
2162
  keyframes = _createEmotion.keyframes;
2163
2163
 
2164
- var appearAnimation = keyframes(templateObject_1$8 || (templateObject_1$8 = __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"])));
2164
+ var appearAnimation = keyframes(templateObject_1$5 || (templateObject_1$5 = __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"])));
2165
2165
  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"])));
2166
2166
  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"])));
2167
2167
  var fadeInFromRight = keyframes(templateObject_4$2 || (templateObject_4$2 = __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"])));
2168
- var fadeInFromTop = keyframes(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
2168
+ 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"])));
2169
2169
  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"])));
2170
- var templateObject_1$8, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6;
2170
+ var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6;
2171
2171
 
2172
2172
  function Navbar(props) {
2173
2173
  var logo = props.logo, items = props.items, button = props.button, config = props.config;
@@ -2175,15 +2175,15 @@ function Navbar(props) {
2175
2175
  React__default.createElement(NavbarContainer, { height: config.height, colors: config.colors },
2176
2176
  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 }),
2177
2177
  React__default.createElement(ItemsContainer, { centeredItems: config.centeredItems }, items === null || items === undefined ? undefined : items.map(function (item) {
2178
- var _a, _b;
2179
- return (React__default.createElement(Item, { key: item.label, href: "#", onClick: function (e) {
2178
+ var _a;
2179
+ return (React__default.createElement("a", { key: item.label, href: "#", onClick: function (e) {
2180
2180
  e.preventDefault();
2181
2181
  item.onClick && item.onClick();
2182
- }, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
2182
+ } },
2183
2183
  item.label,
2184
2184
  item.subitems && React__default.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
2185
- item.subitems && (React__default.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
2186
- return (React__default.createElement(Subitem, { key: subitem.label },
2185
+ item.subitems && (React__default.createElement("div", null, (_a = item.subitems) === null || _a === undefined ? undefined : _a.map(function (subitem) {
2186
+ return (React__default.createElement(ControlledNavItem, { key: subitem.label },
2187
2187
  React__default.createElement("a", { href: "#", onClick: function (e) {
2188
2188
  e.preventDefault();
2189
2189
  subitem.onClick && subitem.onClick();
@@ -2192,12 +2192,11 @@ function Navbar(props) {
2192
2192
  })),
2193
2193
  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))));
2194
2194
  }
2195
- var NavbarContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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"], ["\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"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; });
2196
- var ItemsContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n \n @media only screen and (max-width: 800px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n \n @media only screen and (max-width: 800px) {\n display: none;\n }\n"])), function (props) { return props.centeredItems ? 'unset' : 'auto'; });
2197
- var Item = newStyled.a(templateObject_3$2 || (templateObject_3$2 = __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 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: ", ";\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 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: ", ";\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);
2198
- var Logo = newStyled.img(templateObject_4$1 || (templateObject_4$1 = __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'; });
2199
- var Subitem = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __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 "])));
2200
- var templateObject_1$7, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1;
2195
+ var NavbarContainer = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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"], ["\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"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; });
2196
+ var ItemsContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\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 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 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 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 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 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"])), 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);
2197
+ var Logo = newStyled.img(templateObject_3$2 || (templateObject_3$2 = __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'; });
2198
+ var ControlledNavItem = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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 "])));
2199
+ var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$1;
2201
2200
 
2202
2201
  function Hero(props) {
2203
2202
  var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
@@ -2210,14 +2209,14 @@ function Hero(props) {
2210
2209
  return function () { return clearInterval(interval_1); };
2211
2210
  }
2212
2211
  }, [imageUrls]);
2213
- return (React__default.createElement(Container$5, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
2212
+ return (React__default.createElement(Container$2, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
2214
2213
  overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
2215
2214
  React__default.createElement(HeroContent, null, children)));
2216
2215
  }
2217
- var Container$5 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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 @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 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 @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 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'; });
2216
+ var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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 @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 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 @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 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'; });
2218
2217
  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; });
2219
2218
  var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n height: 100%;\n z-index: 2;\n"])));
2220
- var templateObject_1$6, templateObject_2$2, templateObject_3$1;
2219
+ var templateObject_1$3, templateObject_2$2, templateObject_3$1;
2221
2220
 
2222
2221
  function useIntObs(_a) {
2223
2222
  var _b;
@@ -2287,21 +2286,27 @@ function Fade(props) {
2287
2286
  root: document,
2288
2287
  rootMargin: "-10% 0% -10% 0%"
2289
2288
  }), isIntersecting = _b.isIntersecting, ref = _b.ref;
2290
- return (React__default.createElement(Container$4, { ref: ref, isVisible: isIntersecting, animation: function () {
2291
- switch (type) {
2292
- case 'bottom-to-top':
2293
- return fadeInFromBottom;
2294
- case 'top-to-bottom':
2295
- return fadeInFromTop;
2296
- case 'right-to-left':
2297
- return fadeInFromRight;
2298
- case 'left-to-right':
2299
- return fadeInFromLeft;
2300
- }
2301
- } }, children));
2289
+ // Ensure the child is a valid React element
2290
+ if (!React__default.isValidElement(children)) {
2291
+ console.error('Fade component expects a valid React element as its child.');
2292
+ return null;
2293
+ }
2294
+ var getAnimation = function () {
2295
+ switch (type) {
2296
+ case 'bottom-to-top':
2297
+ return fadeInFromBottom;
2298
+ case 'top-to-bottom':
2299
+ return fadeInFromTop;
2300
+ case 'right-to-left':
2301
+ return fadeInFromRight;
2302
+ case 'left-to-right':
2303
+ return fadeInFromLeft;
2304
+ default:
2305
+ return fadeInFromBottom;
2306
+ }
2307
+ };
2308
+ return React__default.cloneElement(children, __assign(__assign({}, (typeof children.type === 'string' ? { ref: ref } : {})), { style: __assign({ opacity: 0, animation: isIntersecting ? "".concat(getAnimation(), " 0.8s ease forwards") : '' }, children.props.style) }));
2302
2309
  }
2303
- var Container$4 = newStyled.span(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
2304
- var templateObject_1$5;
2305
2310
 
2306
2311
  function Slider(props) {
2307
2312
  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;
@@ -2405,12 +2410,12 @@ function Slider(props) {
2405
2410
  goTo(index + 1);
2406
2411
  }, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
2407
2412
  }
2408
- var SliderContainer = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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'; });
2413
+ 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'; });
2409
2414
  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; });
2410
2415
  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"])));
2411
2416
  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"])));
2412
2417
  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"; });
2413
- var templateObject_1$4, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5;
2418
+ var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5;
2414
2419
 
2415
2420
  function Showcase(props) {
2416
2421
  var items = props.items, backgroundColor = props.backgroundColor;
@@ -2427,14 +2432,14 @@ function Showcase(props) {
2427
2432
  }
2428
2433
  return result;
2429
2434
  }, [items]);
2430
- return (React__default.createElement(Container$3, { onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor }, eightItems.map(function (item, index) {
2435
+ return (React__default.createElement(Container$1, { onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor }, eightItems.map(function (item, index) {
2431
2436
  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 },
2432
2437
  React__default.createElement("span", null, formatText(item.label, 'uppercase')))) : React__default.createElement(React__default.Fragment, null);
2433
2438
  })));
2434
2439
  }
2435
- var Container$3 = newStyled.section(templateObject_1$3 || (templateObject_1$3 = __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'; });
2440
+ 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'; });
2436
2441
  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)'; });
2437
- var templateObject_1$3, templateObject_2;
2442
+ var templateObject_1$1, templateObject_2;
2438
2443
 
2439
2444
  function Footer(props) {
2440
2445
  var _a = props.logo, logo = _a === undefined ? {
@@ -2453,7 +2458,7 @@ function Footer(props) {
2453
2458
  address: "",
2454
2459
  address2: "",
2455
2460
  } : _c, navItems = props.navItems;
2456
- return (React__default.createElement(Container$2, { backgroundColor: backgroundColor },
2461
+ return (React__default.createElement(Container, { backgroundColor: backgroundColor },
2457
2462
  React__default.createElement("div", { className: 'left' },
2458
2463
  React__default.createElement("img", { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
2459
2464
  React__default.createElement("h5", null, subtitle),
@@ -2472,45 +2477,8 @@ function Footer(props) {
2472
2477
  contactData.email2 && React__default.createElement("p", null, contactData.email2)),
2473
2478
  React__default.createElement("nav", null, navItems && navItems.map(function (item) { return React__default.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
2474
2479
  }
2475
- var Container$2 = newStyled.footer(templateObject_1$2 || (templateObject_1$2 = __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);
2476
- var templateObject_1$2;
2477
-
2478
- function Card(props) {
2479
- var callback = props.callback, type = props.type; props.backgroundColor; var _a = props.icon, icon = _a === undefined ? {
2480
- element: (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 37", fill: "none" },
2481
- React__default.createElement("path", { d: "M7.6 36H16.4M1 11.9375C1 5.89689 5.92487 1 12 1C18.0751 1 23 5.89689 23 11.9375C23 16.4226 20.285 20.0935 16.4 21.7812V28.3438C16.4 29.5519 15.415 30.5312 14.2 30.5312H9.8C8.58497 30.5312 7.6 29.5519 7.6 28.3438V21.9649C3.71501 20.2771 1 16.4226 1 11.9375Z", stroke: "#F62223", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))),
2482
- width: "30px",
2483
- height: "30px"
2484
- } : _a, _b = props.title, title = _b === undefined ? {
2485
- text: 'Lorem Ipsum',
2486
- color: 'white',
2487
- casing: "uppercase",
2488
- size: '20px'
2489
- } : _b, _c = props.description, description = _c === undefined ? {
2490
- text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, nulla nostrum magnam molestiae officia aspernatur quisquam accusamus distinctio eligendi ut, provident, numquam iusto? Rerum doloremque temporibus neque, tenetur voluptatum ipsum',
2491
- color: 'white',
2492
- casing: "first-capitalized",
2493
- size: '16px'
2494
- } : _c;
2495
- switch (type) {
2496
- default:
2497
- return (React__default.createElement(Container$1, { card: props, onClick: function () { return callback; } },
2498
- React__default.createElement(Fade, { type: 'left-to-right' }, icon.element),
2499
- React__default.createElement(Fade, { type: 'left-to-right' },
2500
- React__default.createElement("h4", null, title.text)),
2501
- React__default.createElement(Fade, { type: 'left-to-right' },
2502
- React__default.createElement("p", null, description.text))));
2503
- }
2504
- }
2505
- var Container$1 = newStyled.article(templateObject_1$1 || (templateObject_1$1 = __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"; });
2506
- var templateObject_1$1;
2507
-
2508
- function Cards(props) {
2509
- var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
2510
- return (React__default.createElement(Container, { gap: gap, padding: padding, backgroundColor: backgroundColor }, cards.map(function (card) { return (React__default.createElement(Card, __assign({}, card))); })));
2511
- }
2512
- var Container = newStyled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: ", ";;\n padding: ", ";\n background-color: ", ";\n"], ["\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: ", ";;\n padding: ", ";\n background-color: ", ";\n"])), function (props) { return props.gap || "20px"; }, function (props) { return props.padding || "8vw 40px"; }, function (props) { return props.backgroundColor || theme.black2; });
2480
+ 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);
2513
2481
  var templateObject_1;
2514
2482
 
2515
- export { Button, Card, Cards, Fade, Footer, Hero, Icon, Navbar, Showcase, Slider };
2483
+ export { Button, Fade, Footer, Hero, Icon, Navbar, Showcase, Slider };
2516
2484
  //# sourceMappingURL=index.esm.js.map