wex-ui-lib 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +39 -24
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.esm.js +39 -24
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Footer/Footer.types.d.ts +4 -1
- package/dist/types/components/Navbar/Navbar.d.ts +3 -0
- package/dist/types/components/Navbar/Navbar.stories.d.ts +7 -0
- package/dist/types/components/Navbar/Navbar.types.d.ts +25 -0
- package/dist/types/components/Navbar/index.d.ts +2 -3
- package/dist/types/index.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -116,7 +116,10 @@ type ShowcaseItem = {
|
|
|
116
116
|
declare function Showcase(props: ShowcaseProps): React$1.JSX.Element;
|
|
117
117
|
|
|
118
118
|
type FooterProps = {
|
|
119
|
-
|
|
119
|
+
logo?: {
|
|
120
|
+
url: string;
|
|
121
|
+
callback?: () => void;
|
|
122
|
+
};
|
|
120
123
|
subtitle?: string;
|
|
121
124
|
backgroundColor?: string;
|
|
122
125
|
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",
|
|
1948
|
+
React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
|
|
1949
1949
|
}
|
|
1950
|
-
var IconContainer = newStyled.
|
|
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";
|
|
@@ -2003,11 +2003,11 @@ function Button(props) {
|
|
|
2003
2003
|
React__default.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
|
|
2004
2004
|
}
|
|
2005
2005
|
}
|
|
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$
|
|
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 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; });
|
|
2007
|
+
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
2008
|
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
2009
|
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$
|
|
2010
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$2;
|
|
2011
2011
|
|
|
2012
2012
|
function insertWithoutScoping(cache, serialized) {
|
|
2013
2013
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2150,12 +2150,12 @@ var _createEmotion = createEmotion({
|
|
|
2150
2150
|
keyframes = _createEmotion.keyframes;
|
|
2151
2151
|
|
|
2152
2152
|
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$
|
|
2153
|
+
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
2154
|
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
2155
|
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
2156
|
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
2157
|
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$
|
|
2158
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
2159
2159
|
|
|
2160
2160
|
function Navbar(props) {
|
|
2161
2161
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2182,9 +2182,9 @@ function Navbar(props) {
|
|
|
2182
2182
|
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
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$
|
|
2185
|
+
var Logo = newStyled.img(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n cursor: pointer;\n height: 56%;\n max-width: 128px;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n height: 56%;\n max-width: 128px;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
|
|
2186
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$
|
|
2187
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$2;
|
|
2188
2188
|
|
|
2189
2189
|
function Hero(props) {
|
|
2190
2190
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
@@ -2195,9 +2195,9 @@ function Hero(props) {
|
|
|
2195
2195
|
React__default.createElement(HeroContent, null, children))));
|
|
2196
2196
|
}
|
|
2197
2197
|
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$
|
|
2198
|
+
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
2199
|
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$
|
|
2200
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|
|
2201
2201
|
|
|
2202
2202
|
function useIntObs(_a) {
|
|
2203
2203
|
var _b;
|
|
@@ -2338,6 +2338,10 @@ function Slider(props) {
|
|
|
2338
2338
|
default:
|
|
2339
2339
|
setTranslateX(wrapperRef.current.clientWidth * (option));
|
|
2340
2340
|
setCurrentSlide(option);
|
|
2341
|
+
if (intervalRef.current) {
|
|
2342
|
+
clearInterval(intervalRef.current);
|
|
2343
|
+
intervalRef.current = null;
|
|
2344
|
+
}
|
|
2341
2345
|
break;
|
|
2342
2346
|
}
|
|
2343
2347
|
}, [children, currentSlide]);
|
|
@@ -2357,12 +2361,19 @@ function Slider(props) {
|
|
|
2357
2361
|
document.removeEventListener("transitionend", transitionEnd);
|
|
2358
2362
|
};
|
|
2359
2363
|
}, [currentSlide, children]);
|
|
2364
|
+
var intervalRef = useRef(null);
|
|
2360
2365
|
useEffect(function () {
|
|
2361
2366
|
if (autoplayTicTime) {
|
|
2362
|
-
|
|
2367
|
+
intervalRef.current = setInterval(function () {
|
|
2363
2368
|
goTo('next');
|
|
2364
2369
|
}, autoplayTicTime);
|
|
2365
2370
|
}
|
|
2371
|
+
return function () {
|
|
2372
|
+
if (intervalRef.current) {
|
|
2373
|
+
clearInterval(intervalRef.current);
|
|
2374
|
+
intervalRef.current = null;
|
|
2375
|
+
}
|
|
2376
|
+
};
|
|
2366
2377
|
}, [goTo, autoplayTicTime]);
|
|
2367
2378
|
return (React__default.createElement(React__default.Fragment, null,
|
|
2368
2379
|
React__default.createElement(SliderContainer, { visibleInactiveSlides: visibleInactiveSlides },
|
|
@@ -2370,14 +2381,16 @@ function Slider(props) {
|
|
|
2370
2381
|
showArrowKeys && (React__default.createElement(React__default.Fragment, null,
|
|
2371
2382
|
React__default.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
|
|
2372
2383
|
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 () {
|
|
2384
|
+
showRadioButtons && (React__default.createElement(RadiosContainer, null, children.map(function (item, index) { return (React__default.createElement(RadioButton, { key: index, onClick: function () {
|
|
2385
|
+
goTo(index + 1);
|
|
2386
|
+
}, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
|
|
2374
2387
|
}
|
|
2375
2388
|
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$
|
|
2389
|
+
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
2390
|
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
2391
|
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
2392
|
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$
|
|
2393
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5;
|
|
2381
2394
|
|
|
2382
2395
|
function Showcase(props) {
|
|
2383
2396
|
var items = props.items, backgroundColor = props.backgroundColor;
|
|
@@ -2400,26 +2413,29 @@ function Showcase(props) {
|
|
|
2400
2413
|
})));
|
|
2401
2414
|
}
|
|
2402
2415
|
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
|
|
2404
|
-
var templateObject_1$1, templateObject_2
|
|
2416
|
+
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)'; });
|
|
2417
|
+
var templateObject_1$1, templateObject_2;
|
|
2405
2418
|
|
|
2406
2419
|
function Footer(props) {
|
|
2407
|
-
var
|
|
2420
|
+
var _a = props.logo, logo = _a === undefined ? {
|
|
2421
|
+
url: "",
|
|
2422
|
+
callback: function () { }
|
|
2423
|
+
} : _a, subtitle = props.subtitle, backgroundColor = props.backgroundColor, _b = props.socialMediaUrls, socialMediaUrls = _b === undefined ? {
|
|
2408
2424
|
instagram: "",
|
|
2409
2425
|
twitter: "",
|
|
2410
2426
|
facebook: "",
|
|
2411
2427
|
linkedIn: "",
|
|
2412
|
-
} :
|
|
2428
|
+
} : _b, _c = props.contactData, contactData = _c === undefined ? {
|
|
2413
2429
|
phone: "",
|
|
2414
2430
|
phone2: "",
|
|
2415
2431
|
email: "",
|
|
2416
2432
|
email2: "",
|
|
2417
2433
|
address: "",
|
|
2418
2434
|
address2: "",
|
|
2419
|
-
} :
|
|
2435
|
+
} : _c, navItems = props.navItems;
|
|
2420
2436
|
return (React__default.createElement(Container, { backgroundColor: backgroundColor },
|
|
2421
2437
|
React__default.createElement("div", { className: 'left' },
|
|
2422
|
-
React__default.createElement("img", { src:
|
|
2438
|
+
React__default.createElement("img", { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
|
2423
2439
|
React__default.createElement("h5", null, subtitle),
|
|
2424
2440
|
React__default.createElement("div", null,
|
|
2425
2441
|
socialMediaUrls.instagram &&
|
|
@@ -2436,9 +2452,8 @@ function Footer(props) {
|
|
|
2436
2452
|
contactData.email2 && React__default.createElement("p", null, contactData.email2)),
|
|
2437
2453
|
React__default.createElement("nav", null, navItems && navItems.map(function (item) { return React__default.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
|
|
2438
2454
|
}
|
|
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
|
-
|
|
2441
|
-
var templateObject_1, templateObject_2;
|
|
2455
|
+
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);
|
|
2456
|
+
var templateObject_1;
|
|
2442
2457
|
|
|
2443
2458
|
export { Button, Fade, Footer, Hero, Icon, Navbar, Showcase, Slider };
|
|
2444
2459
|
//# sourceMappingURL=index.esm.js.map
|