wex-ui-lib 1.1.4 → 1.1.6

package/dist/index.d.ts

@@ -77,6 +77,7 @@ type HeroProps = {
         color: string;
         opacity: Opacity;
     };
+    backgroundColor?: string;
 };
 
 declare function Hero(props: HeroProps): React$1.JSX.Element;

package/dist/index.esm.js

@@ -2005,7 +2005,7 @@ function Button(props) {
     }
 }
 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; });
-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; });
+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; });
 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  "])));
 var RoundedButton = newStyled(DefaultButton)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  border-radius: 4px;\n"], ["\n  border-radius: 4px;\n"])));
 var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$2;
@@ -2188,14 +2188,14 @@ var ControlledNavItem = newStyled.div(templateObject_3$2 || (templateObject_3$2
 var templateObject_1$5, templateObject_2$3, templateObject_3$2;
 
 function Hero(props) {
-    var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
-    var _b = useState(imageUrls && imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
+    var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
+    var _b = useState(imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Container$3, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
+        React__default.createElement(Container$3, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height, backgroundColor: backgroundColor },
             overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
             React__default.createElement(HeroContent, null, children))));
 }
-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; });
+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: ", ";\n  margin-top: ", ";\n  background-image: url(", ");\n  background-color: ", ";\n  background-position-y: 69%;\n  background-size: cover;\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: ", ";\n  margin-top: ", ";\n  background-image: url(", ");\n  background-color: ", ";\n  background-position-y: 69%;\n  background-size: cover;\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'; });
 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; });
 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"])));
 var templateObject_1$4, templateObject_2$2, templateObject_3$1;