wex-ui-lib 1.2.42 → 1.3.1
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 +176 -96
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +66 -10
- package/dist/index.esm.js +172 -96
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Button/index.types.d.ts +2 -2
- package/dist/types/components/Card/Card.d.ts +21 -0
- package/dist/types/components/Card/Card.stories.d.ts +9 -0
- package/dist/types/components/Showcase/Showcase.types.d.ts +3 -1
- package/dist/types/components/Tabs/Tabs.d.ts +13 -0
- package/dist/types/components/Tabs/Tabs.stories.d.ts +7 -0
- package/dist/types/index.d.ts +5 -1
- package/dist/types/sections/Cards/Cards.d.ts +9 -0
- package/dist/types/sections/Cards/Cards.stories.d.ts +7 -0
- package/dist/types/sections/EntrySelector/EntrySelector.d.ts +15 -0
- package/dist/types/sections/EntrySelector/EntrySelector.stories.d.ts +7 -0
- package/dist/types/shared/components/Fade.d.ts +2 -2
- package/dist/types/shared/types.d.ts +3 -3
- package/dist/types/shared/utils/formatters.d.ts +2 -2
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
@@ -1978,12 +1978,12 @@ function Icon(props) {
|
|
1978
1978
|
icon.includes("arrow-caret") && (React.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
1979
1979
|
React.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
|
1980
1980
|
}
|
1981
|
-
var IconContainer = newStyled.div(templateObject_1$
|
1981
|
+
var IconContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n transition: 100ms;\n cursor: pointer;\n svg {\n transform: ", ";\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n fill: ", ";\n path{\n fill: ", ";\n }\n }\n }\n"], ["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n transition: 100ms;\n cursor: pointer;\n svg {\n transform: ", ";\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n fill: ", ";\n path{\n fill: ", ";\n }\n }\n }\n"])), function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? "2px solid ".concat(props.color) : "unset"; }, function (props) {
|
1982
1982
|
return props.border === "rounded" ? "2px" :
|
1983
1983
|
props.border === "circle" ? "50px" :
|
1984
1984
|
"unset";
|
1985
1985
|
}, 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; });
|
1986
|
-
var templateObject_1$
|
1986
|
+
var templateObject_1$c;
|
1987
1987
|
|
1988
1988
|
var theme = {
|
1989
1989
|
primary: "#DC3737",
|
@@ -2035,11 +2035,11 @@ function Button(props) {
|
|
2035
2035
|
React.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
|
2036
2036
|
}
|
2037
2037
|
}
|
2038
|
-
var DefaultButton = newStyled.button(templateObject_1$
|
2039
|
-
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$
|
2040
|
-
var PillButton = newStyled(DefaultButton)(templateObject_3$
|
2041
|
-
var RoundedButton = newStyled(DefaultButton)(templateObject_4$
|
2042
|
-
var templateObject_1$
|
2038
|
+
var DefaultButton = newStyled.button(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n border: ", ";\n white-space: nowrap;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n border-color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n @media only screen and (max-width: 1024px) {\n padding: 7px 8px;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n border: ", ";\n white-space: nowrap;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n border-color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n @media only screen and (max-width: 1024px) {\n padding: 7px 8px;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) ? "2px solid ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.border) : 'none'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || ''; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
|
2039
|
+
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n background-color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n border: none!important;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"], ["\n background-color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n border: none!important;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || 'transparent'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; });
|
2040
|
+
var PillButton = newStyled(DefaultButton)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "], ["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "])));
|
2041
|
+
var RoundedButton = newStyled(DefaultButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
2042
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$7, templateObject_4$6;
|
2043
2043
|
|
2044
2044
|
function insertWithoutScoping(cache, serialized) {
|
2045
2045
|
if (cache.inserted[serialized.name] === undefined) {
|
@@ -2181,29 +2181,29 @@ var _createEmotion = createEmotion({
|
|
2181
2181
|
}),
|
2182
2182
|
keyframes = _createEmotion.keyframes;
|
2183
2183
|
|
2184
|
-
var appearAnimation = keyframes(templateObject_1$
|
2185
|
-
var disappearAnimation = keyframes(templateObject_2$
|
2186
|
-
var fadeInFromLeft = keyframes(templateObject_3$
|
2187
|
-
var fadeInFromRight = keyframes(templateObject_4$
|
2188
|
-
var fadeInFromTop = keyframes(templateObject_5$
|
2189
|
-
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"])));
|
2190
|
-
var templateObject_1$
|
2184
|
+
var appearAnimation = keyframes(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"], ["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"])));
|
2185
|
+
var disappearAnimation = keyframes(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"], ["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"])));
|
2186
|
+
var fadeInFromLeft = keyframes(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
2187
|
+
var fadeInFromRight = keyframes(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
2188
|
+
var fadeInFromTop = keyframes(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
2189
|
+
var fadeInFromBottom = keyframes(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
2190
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$1;
|
2191
2191
|
|
2192
2192
|
function Navbar(props) {
|
2193
2193
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
2194
2194
|
return (React.createElement(React.Fragment, null,
|
2195
2195
|
React.createElement(NavbarContainer, { height: config.height, colors: config.colors },
|
2196
|
-
React.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 }),
|
2196
|
+
React.createElement(Logo$1, { src: logo === null || logo === undefined ? undefined : logo.url, width: logo === null || logo === undefined ? undefined : logo.width, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
|
2197
2197
|
React.createElement(ItemsContainer, { centeredItems: config.centeredItems }, items === null || items === undefined ? undefined : items.map(function (item) {
|
2198
|
-
var _a;
|
2199
|
-
return (React.createElement(
|
2198
|
+
var _a, _b;
|
2199
|
+
return (React.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
|
2200
2200
|
e.preventDefault();
|
2201
2201
|
item.onClick && item.onClick();
|
2202
|
-
} },
|
2202
|
+
}, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
|
2203
2203
|
item.label,
|
2204
2204
|
item.subitems && React.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
|
2205
|
-
item.subitems && (React.createElement("div", null, (
|
2206
|
-
return (React.createElement(
|
2205
|
+
item.subitems && (React.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
|
2206
|
+
return (React.createElement(Subitem, { key: subitem.label },
|
2207
2207
|
React.createElement("a", { href: "#", onClick: function (e) {
|
2208
2208
|
e.preventDefault();
|
2209
2209
|
subitem.onClick && subitem.onClick();
|
@@ -2212,11 +2212,12 @@ function Navbar(props) {
|
|
2212
2212
|
})),
|
2213
2213
|
button ? (React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)) : React.createElement(React.Fragment, null))));
|
2214
2214
|
}
|
2215
|
-
var NavbarContainer = newStyled.div(templateObject_1$
|
2216
|
-
var ItemsContainer = newStyled.div(templateObject_2$
|
2217
|
-
var
|
2218
|
-
var
|
2219
|
-
var
|
2215
|
+
var NavbarContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; });
|
2216
|
+
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"])), function (props) { return props.centeredItems ? 'unset' : 'auto'; });
|
2217
|
+
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n 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);
|
2218
|
+
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"], ["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
|
2219
|
+
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __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 "])));
|
2220
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
|
2220
2221
|
|
2221
2222
|
function Hero(props) {
|
2222
2223
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
@@ -2229,14 +2230,14 @@ function Hero(props) {
|
|
2229
2230
|
return function () { return clearInterval(interval_1); };
|
2230
2231
|
}
|
2231
2232
|
}, [imageUrls]);
|
2232
|
-
return (React.createElement(Container$
|
2233
|
+
return (React.createElement(Container$6, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
|
2233
2234
|
overlay && (React.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
2234
2235
|
React.createElement(HeroContent, null, children)));
|
2235
2236
|
}
|
2236
|
-
var Container$
|
2237
|
-
var Overlay = newStyled.div(templateObject_2$
|
2238
|
-
var HeroContent = newStyled.div(templateObject_3$
|
2239
|
-
var templateObject_1$
|
2237
|
+
var Container$6 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n width: 100vw;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n background-color: ", ";\n background-position-y: 69%;\n background-size: cover;\n transition: background-image 1s ease-in-out;\n\n @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'; });
|
2238
|
+
var Overlay = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
|
2239
|
+
var HeroContent = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n z-index: 2;\n padding: 0 12vw;\n"], ["\n width: 100%;\n height: 100%;\n z-index: 2;\n padding: 0 12vw;\n"])));
|
2240
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$4;
|
2240
2241
|
|
2241
2242
|
function useIntObs(_a) {
|
2242
2243
|
var _b;
|
@@ -2306,27 +2307,21 @@ function Fade(props) {
|
|
2306
2307
|
root: document,
|
2307
2308
|
rootMargin: "-10% 0% -10% 0%"
|
2308
2309
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
2309
|
-
|
2310
|
-
|
2311
|
-
|
2312
|
-
|
2313
|
-
|
2314
|
-
|
2315
|
-
|
2316
|
-
|
2317
|
-
|
2318
|
-
|
2319
|
-
|
2320
|
-
|
2321
|
-
return fadeInFromRight;
|
2322
|
-
case 'left-to-right':
|
2323
|
-
return fadeInFromLeft;
|
2324
|
-
default:
|
2325
|
-
return fadeInFromBottom;
|
2326
|
-
}
|
2327
|
-
};
|
2328
|
-
return React.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) }));
|
2310
|
+
return (React.createElement(Container$5, { ref: ref, isVisible: isIntersecting, animation: function () {
|
2311
|
+
switch (type) {
|
2312
|
+
case 'bottom-to-top':
|
2313
|
+
return fadeInFromBottom;
|
2314
|
+
case 'top-to-bottom':
|
2315
|
+
return fadeInFromTop;
|
2316
|
+
case 'right-to-left':
|
2317
|
+
return fadeInFromRight;
|
2318
|
+
case 'left-to-right':
|
2319
|
+
return fadeInFromLeft;
|
2320
|
+
}
|
2321
|
+
} }, children));
|
2329
2322
|
}
|
2323
|
+
var Container$5 = newStyled.span(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
2324
|
+
var templateObject_1$7;
|
2330
2325
|
|
2331
2326
|
function Slider(props) {
|
2332
2327
|
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;
|
@@ -2424,42 +2419,30 @@ function Slider(props) {
|
|
2424
2419
|
React.createElement(SliderContainer, { visibleInactiveSlides: visibleInactiveSlides },
|
2425
2420
|
React.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
|
2426
2421
|
showArrowKeys && (React.createElement(React.Fragment, null,
|
2427
|
-
React.createElement(Icon, { callback: function () { return goTo('prev'); }, color: '
|
2428
|
-
React.createElement(Icon, { callback: function () { return goTo('next'); }, color: '
|
2422
|
+
React.createElement(Icon, { border: 'circle', size: '24px', callback: function () { return goTo('prev'); }, color: '#AEAEAE', icon: 'arrow-long' }),
|
2423
|
+
React.createElement(Icon, { border: 'circle', size: '24px', callback: function () { return goTo('next'); }, color: '#AEAEAE', icon: 'arrow-long' })))),
|
2429
2424
|
showRadioButtons && (React.createElement(RadiosContainer, null, children.map(function (item, index) { return (React.createElement(RadioButton, { key: index, onClick: function () {
|
2430
2425
|
goTo(index + 1);
|
2431
2426
|
}, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
|
2432
2427
|
}
|
2433
|
-
var SliderContainer = newStyled.div(templateObject_1$
|
2434
|
-
var SlidesWrapper = newStyled.ul(templateObject_2$
|
2435
|
-
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"])));
|
2436
|
-
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"])));
|
2437
|
-
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"; });
|
2438
|
-
var templateObject_1$
|
2428
|
+
var SliderContainer = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\n width: 100%;\n & > div {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 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 & > div {\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'; });
|
2429
|
+
var SlidesWrapper = newStyled.ul(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"], ["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"])), function (props) { return -props.translateX; });
|
2430
|
+
var Slide = newStyled.li(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
2431
|
+
var RadiosContainer = newStyled.ul(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n transform: translateY(20px);\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 58px;\n cursor: pointer;\n list-style: none;\n"], ["\n position: relative;\n display: flex;\n transform: translateY(20px);\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 58px;\n cursor: pointer;\n list-style: none;\n"])));
|
2432
|
+
var RadioButton = newStyled.li(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: relative;\n width: 7px; \n height: 7px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: -4px;\n width: 12px;\n height: 12px;\n border-radius: 50px;\n background-color: transparent;\n border: 2px solid ", ";\n opacity: 80%;\n z-index: -1;\n }\n"], ["\n position: relative;\n width: 7px; \n height: 7px;\n background-color: ", ";\n border-radius: 50px;\n transition: 0.2s;\n &::before {\n content: \"\";\n position: absolute;\n top: -4px;\n left: -4px;\n width: 12px;\n height: 12px;\n border-radius: 50px;\n background-color: transparent;\n border: 2px solid ", ";\n opacity: 80%;\n z-index: -1;\n }\n"])), function (props) { return props.radioButtonsColor || theme.black; }, function (props) { return props.isSelected ? props.radioButtonsColor || theme.black : "unset"; });
|
2433
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3;
|
2439
2434
|
|
2440
2435
|
function Showcase(props) {
|
2441
|
-
var items = props.items, backgroundColor = props.backgroundColor;
|
2436
|
+
var items = props.items, itemsPerRow = props.itemsPerRow, backgroundColor = props.backgroundColor, gap = props.gap;
|
2442
2437
|
var _a = React.useState(undefined), hoveredItemKey = _a[0], setHoveredItemKey = _a[1];
|
2443
|
-
|
2444
|
-
if (items.length >= 8) {
|
2445
|
-
return items.slice(0, 8);
|
2446
|
-
}
|
2447
|
-
var result = [];
|
2448
|
-
var i = 0;
|
2449
|
-
while (result.length < 8) {
|
2450
|
-
result.push(items[i % items.length]);
|
2451
|
-
i++;
|
2452
|
-
}
|
2453
|
-
return result;
|
2454
|
-
}, [items]);
|
2455
|
-
return (React.createElement(Container$1, { onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor }, eightItems.map(function (item, index) {
|
2438
|
+
return (React.createElement(Container$4, { itemsPerRow: itemsPerRow, onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor, gap: gap }, items.map(function (item, index) {
|
2456
2439
|
return item ? (React.createElement(ShowcaseItem, { key: index, onClick: function () { return item.callback(); }, backgroundUrl: item.imageUrl, onMouseEnter: function () { return setHoveredItemKey(index); }, itemKey: index, hoveredItemKey: hoveredItemKey },
|
2457
2440
|
React.createElement("span", null, formatText(item.label, 'uppercase')))) : React.createElement(React.Fragment, null);
|
2458
2441
|
})));
|
2459
2442
|
}
|
2460
|
-
var Container$
|
2461
|
-
var ShowcaseItem = newStyled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n
|
2462
|
-
var templateObject_1$
|
2443
|
+
var Container$4 = newStyled.section(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-template-columns: ", ";\n grid-auto-rows: 1fr;\n gap: ", ";\n padding: 2px 0;\n background-color: ", ";\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 2px 4vw;\n }\n"], ["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-template-columns: ", ";\n grid-auto-rows: 1fr;\n gap: ", ";\n padding: 2px 0;\n background-color: ", ";\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 2px 4vw;\n }\n"])), function (props) { return "repeat(".concat(props.itemsPerRow || 3, ", minmax(100px, 1fr))"); }, function (props) { return props.gap || "2px"; }, function (props) { return props.backgroundColor || 'transparent'; });
|
2444
|
+
var ShowcaseItem = newStyled.a(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: relative;\n background-image: url(", ");\n background-size: cover;\n aspect-ratio: 1 / 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"], ["\n position: relative;\n background-image: url(", ");\n background-size: cover;\n aspect-ratio: 1 / 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"])), function (props) { return props.backgroundUrl; }, function (props) { return props.hoveredItemKey === props.itemKey || props.hoveredItemKey === undefined ? 'unset' : 'brightness(0.3)'; });
|
2445
|
+
var templateObject_1$5, templateObject_2$3;
|
2463
2446
|
|
2464
2447
|
function Footer(props) {
|
2465
2448
|
var _a = props.logo, logo = _a === undefined ? {
|
@@ -2478,29 +2461,125 @@ function Footer(props) {
|
|
2478
2461
|
address: "",
|
2479
2462
|
address2: "",
|
2480
2463
|
} : _c, navItems = props.navItems;
|
2481
|
-
return (React.createElement(Container, { backgroundColor: backgroundColor },
|
2482
|
-
React.createElement(
|
2483
|
-
|
2484
|
-
|
2485
|
-
|
2486
|
-
socialMediaUrls.instagram
|
2487
|
-
|
2488
|
-
socialMediaUrls.twitter
|
2489
|
-
|
2490
|
-
|
2491
|
-
React.createElement("
|
2492
|
-
|
2493
|
-
|
2494
|
-
|
2495
|
-
|
2496
|
-
|
2497
|
-
|
2498
|
-
|
2499
|
-
}
|
2500
|
-
var
|
2501
|
-
var
|
2464
|
+
return (React.createElement(Container$3, { backgroundColor: backgroundColor },
|
2465
|
+
React.createElement(Logo, { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
2466
|
+
React.createElement(Subtitle, null, subtitle),
|
2467
|
+
React.createElement(SocialMedia, null,
|
2468
|
+
socialMediaUrls.instagram &&
|
2469
|
+
React.createElement(Icon, { hoverColor: theme.primary, size: "40px", border: "circle", icon: 'instagram', callback: function () { window.open(socialMediaUrls.instagram, "_blank"); } }),
|
2470
|
+
socialMediaUrls.twitter &&
|
2471
|
+
React.createElement(Icon, { hoverColor: theme.primary, size: "40px", border: "circle", icon: 'twitter', callback: function () { window.open(socialMediaUrls.twitter, "_blank"); } })),
|
2472
|
+
React.createElement(ContactData, null,
|
2473
|
+
contactData.address && React.createElement("p", null, contactData.address),
|
2474
|
+
contactData.address2 && React.createElement("p", null, contactData.address2),
|
2475
|
+
contactData.phone && React.createElement("p", null, contactData.phone),
|
2476
|
+
contactData.phone2 && React.createElement("p", null, contactData.phone2),
|
2477
|
+
contactData.email && React.createElement("p", null, contactData.email),
|
2478
|
+
contactData.email2 && React.createElement("p", null, contactData.email2)),
|
2479
|
+
React.createElement(Nav, null, navItems && navItems.map(function (item) { return React.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); }))));
|
2480
|
+
}
|
2481
|
+
var Container$3 = newStyled.footer(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n display: grid;\n gap: 18px;\n grid-template-columns: auto auto auto;\n grid-template-rows: auto auto auto;\n grid-template-areas: \n \"logo . contactData\"\n \"subtitle . contactData\"\n \"socialMedia . nav\"\n ;\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 34px 4vw;\n gap: 40px;\n grid-template-areas: \n \"logo\"\n \"subtitle\"\n \"nav\"\n \"contactData\"\n \"socialMedia\"\n ;\n }\n"], ["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n border-top: 2px solid ", ";\n display: grid;\n gap: 18px;\n grid-template-columns: auto auto auto;\n grid-template-rows: auto auto auto;\n grid-template-areas: \n \"logo . contactData\"\n \"subtitle . contactData\"\n \"socialMedia . nav\"\n ;\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 34px 4vw;\n gap: 40px;\n grid-template-areas: \n \"logo\"\n \"subtitle\"\n \"nav\"\n \"contactData\"\n \"socialMedia\"\n ;\n }\n"])), function (props) { return props.backgroundColor || theme.black2; }, theme.primary);
|
2482
|
+
var Logo = newStyled.img(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n grid-area: logo;\n max-width: 160px;\n cursor: pointer;\n transition: 200ms;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n grid-area: logo;\n max-width: 160px;\n cursor: pointer;\n transition: 200ms;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
|
2483
|
+
var Subtitle = newStyled.h5(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n grid-area: subtitle;\n font-size: 16px;\n letter-spacing: .5px;\n"], ["\n grid-area: subtitle;\n font-size: 16px;\n letter-spacing: .5px;\n"])));
|
2484
|
+
var SocialMedia = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n grid-area: socialMedia;\n display: flex;\n gap: 12px;\n"], ["\n grid-area: socialMedia;\n display: flex;\n gap: 12px;\n"])));
|
2485
|
+
var ContactData = newStyled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n grid-area: contactData;\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: flex-end;\n align-items: flex-end;\n @media only screen and (max-width: 1024px) {\n align-items: flex-start;\n }\n"], ["\n grid-area: contactData;\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: flex-end;\n align-items: flex-end;\n @media only screen and (max-width: 1024px) {\n align-items: flex-start;\n }\n"])));
|
2486
|
+
var Nav = newStyled.nav(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n grid-area: nav;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 20px;\n padding-bottom: 6px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n @media only screen and (max-width: 1024px) {\n flex-direction: column;\n align-items: flex-start;\n }\n"], ["\n grid-area: nav;\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 20px;\n padding-bottom: 6px;\n a {\n color: white;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n @media only screen and (max-width: 1024px) {\n flex-direction: column;\n align-items: flex-start;\n }\n"])));
|
2487
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6;
|
2488
|
+
|
2489
|
+
function Card(props) {
|
2490
|
+
var callback = props.callback, type = props.type; props.backgroundColor; var _a = props.icon, icon = _a === undefined ? {
|
2491
|
+
element: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 37", fill: "none" },
|
2492
|
+
React.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" }))),
|
2493
|
+
width: "30px",
|
2494
|
+
height: "30px"
|
2495
|
+
} : _a, _b = props.title, title = _b === undefined ? {
|
2496
|
+
text: 'Lorem Ipsum',
|
2497
|
+
color: 'white',
|
2498
|
+
casing: "uppercase",
|
2499
|
+
size: '20px'
|
2500
|
+
} : _b, _c = props.description, description = _c === undefined ? {
|
2501
|
+
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',
|
2502
|
+
color: 'white',
|
2503
|
+
casing: "first-capitalized",
|
2504
|
+
size: '16px'
|
2505
|
+
} : _c;
|
2506
|
+
switch (type) {
|
2507
|
+
default:
|
2508
|
+
return (React.createElement(Container$2, { card: props, onClick: function () { return callback; } },
|
2509
|
+
React.createElement(Fade, { type: 'left-to-right' }, icon.element),
|
2510
|
+
React.createElement(Fade, { type: 'left-to-right' },
|
2511
|
+
React.createElement("h4", null, title.text)),
|
2512
|
+
React.createElement(Fade, { type: 'left-to-right' },
|
2513
|
+
React.createElement("p", null, description.text))));
|
2514
|
+
}
|
2515
|
+
}
|
2516
|
+
var Container$2 = newStyled.article(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n background-color: ", ";\n padding: 40px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n width: 100%;\n height: 100%;\n transition: 300ms;\n cursor: ", ";\n &:hover {\n filter: brightness(1.3);\n }\n h4 {\n color: ", ";\n font-size: ", ";\n }\n p {\n font-size: ", ";\n color: ", ";\n line-height: 24px;\n }\n svg {\n height: ", ";\n width: ", ";\n }\n"], ["\n background-color: ", ";\n padding: 40px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n width: 100%;\n height: 100%;\n transition: 300ms;\n cursor: ", ";\n &:hover {\n filter: brightness(1.3);\n }\n h4 {\n color: ", ";\n font-size: ", ";\n }\n p {\n font-size: ", ";\n color: ", ";\n line-height: 24px;\n }\n svg {\n height: ", ";\n width: ", ";\n }\n"])), function (props) { return props.card.backgroundColor || theme.black; }, function (props) { return props.card.callback ? 'pointer' : 'default'; }, function (props) { var _a; return ((_a = props.card.title) === null || _a === undefined ? undefined : _a.color) || "white"; }, function (props) { var _a; return ((_a = props.card.title) === null || _a === undefined ? undefined : _a.size) || "24px"; }, function (props) { var _a; return ((_a = props.card.description) === null || _a === undefined ? undefined : _a.size) || "16px"; }, function (props) { var _a; return ((_a = props.card.description) === null || _a === undefined ? undefined : _a.color) || "white"; }, function (props) { var _a; return ((_a = props.card.icon) === null || _a === undefined ? undefined : _a.width) || "40px"; }, function (props) { var _a; return ((_a = props.card.icon) === null || _a === undefined ? undefined : _a.height) || "40px"; });
|
2517
|
+
var templateObject_1$3;
|
2518
|
+
|
2519
|
+
function Cards(props) {
|
2520
|
+
var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
|
2521
|
+
return (React.createElement(Container$1, { gap: gap, padding: padding, backgroundColor: backgroundColor }, cards.map(function (card) { return (React.createElement(Card, __assign({}, card))); })));
|
2522
|
+
}
|
2523
|
+
var Container$1 = newStyled.section(templateObject_1$2 || (templateObject_1$2 = __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; });
|
2524
|
+
var templateObject_1$2;
|
2525
|
+
|
2526
|
+
function EntrySelector(props) {
|
2527
|
+
var title = props.title, _a = props.colors, colors = _a === undefined ? {
|
2528
|
+
background: "",
|
2529
|
+
lightBackground: "",
|
2530
|
+
accent: ""
|
2531
|
+
} : _a, items = props.items, padding = props.padding;
|
2532
|
+
var _b = React.useState(0), selectedItem = _b[0], setSelectedItem = _b[1];
|
2533
|
+
return (React.createElement(Container, { padding: padding, colors: colors },
|
2534
|
+
title && (React.createElement("h5", null, title)),
|
2535
|
+
React.createElement(Inner, null,
|
2536
|
+
React.createElement(Items, null, items.map(function (item, index) { return (React.createElement(Item, { onClick: function () { return setSelectedItem(index); }, isSelected: selectedItem === index, colors: colors },
|
2537
|
+
item.name,
|
2538
|
+
React.createElement(Icon, { icon: 'arrow-long' }))); })),
|
2539
|
+
React.createElement(ItemContent, null, items[selectedItem].content))));
|
2540
|
+
}
|
2541
|
+
var Container = newStyled.section(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n display: flex;\n flex-direction: column;\n gap: 28px;\n h5 {\n color: #AEAEAE;\n font-size: 18px;\n }\n * {\n user-select: none;\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n display: flex;\n flex-direction: column;\n gap: 28px;\n h5 {\n color: #AEAEAE;\n font-size: 18px;\n }\n * {\n user-select: none;\n }\n"])), function (props) { return props.colors.background || theme.black2; }, function (props) { return props.padding || '50px 8vw'; });
|
2542
|
+
var Inner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr 2fr;\n grid-template-areas: \"items content\";\n gap: 22px;\n"], ["\n display: grid;\n grid-template-columns: 1fr 2fr;\n grid-template-areas: \"items content\";\n gap: 22px;\n"])));
|
2543
|
+
var Items = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n grid-area: items;\n "], ["\n display: flex;\n flex-direction: column;\n grid-area: items;\n "])));
|
2544
|
+
var Item = newStyled.button(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n all: unset;\n padding: 28px 12px 26px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: ", ";\n font-size: 11px;\n letter-spacing: 1.5px;\n cursor: pointer;\n border-bottom: 2px solid ", ";\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"], ["\n all: unset;\n padding: 28px 12px 26px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: ", ";\n font-size: 11px;\n letter-spacing: 1.5px;\n cursor: pointer;\n border-bottom: 2px solid ", ";\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.isSelected ? "white" : "#AEAEAE"; }, function (props) { return props.isSelected ? (props.colors.accent || theme.primary) : "rgba(174, 174, 174, 0.25)"; }, function (props) { return props.isSelected ? (props.colors.lightBackground || theme.black) : "unset"; }, function (props) { return props.colors.lightBackground || theme.black; });
|
2545
|
+
var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n grid-area: content;\n display: flex;\n position: relative;\n width: 100%;\n overflow: hidden;\n flex-direction: column;\n gap: 20px;\n"], ["\n grid-area: content;\n display: flex;\n position: relative;\n width: 100%;\n overflow: hidden;\n flex-direction: column;\n gap: 20px;\n"])));
|
2546
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
2547
|
+
|
2548
|
+
var Tabs = function (_a) {
|
2549
|
+
var tabs = _a.tabs, font = _a.font, _b = _a.displayMode, displayMode = _b === undefined ? "dark" : _b, accentColor = _a.accentColor, tabPadding = _a.tabPadding;
|
2550
|
+
var _c = React.useState(0), activeTab = _c[0], setActiveTab = _c[1];
|
2551
|
+
var _d = React.useState({ left: 0, width: 0 }), indicatorStyle = _d[0], setIndicatorStyle = _d[1];
|
2552
|
+
var tabRefs = React.useRef([]);
|
2553
|
+
React.useEffect(function () {
|
2554
|
+
var updateIndicator = function (index) {
|
2555
|
+
var tab = tabRefs.current[index];
|
2556
|
+
if (tab) {
|
2557
|
+
setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
|
2558
|
+
}
|
2559
|
+
};
|
2560
|
+
updateIndicator(activeTab);
|
2561
|
+
}, [activeTab]);
|
2562
|
+
return (React.createElement(TabsContainer, null,
|
2563
|
+
React.createElement(TabsList, null,
|
2564
|
+
tabs.map(function (tab, index) { return (React.createElement(Tab
|
2565
|
+
// @ts-ignore
|
2566
|
+
, {
|
2567
|
+
// @ts-ignore
|
2568
|
+
ref: function (el) { return (tabRefs.current[index] = el); }, key: index, active: activeTab === index, onClick: function () { return setActiveTab(index); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
2569
|
+
React.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
2570
|
+
React.createElement(TabPanel, null, tabs[activeTab].content)));
|
2571
|
+
};
|
2572
|
+
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
2573
|
+
var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n position: relative;\n"], ["\n display: flex;\n justify-content: center;\n position: relative;\n"])));
|
2574
|
+
var Tab = newStyled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n width: fit-content;\n border: none;\n background: ", ";\n color: ", ";\n font-size: 16px;\n cursor: pointer;\n border-bottom: 2px solid rgba(255, 255, 255, 0.1);\n outline: none;\n transition: color 0.3s;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: 1px;\n &:hover {\n background: ", "\n }\n"], ["\n padding: ", ";\n width: fit-content;\n border: none;\n background: ", ";\n color: ", ";\n font-size: 16px;\n cursor: pointer;\n border-bottom: 2px solid rgba(255, 255, 255, 0.1);\n outline: none;\n transition: color 0.3s;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: 1px;\n &:hover {\n background: ", "\n }\n"])), function (props) { return props.tabPadding || "14px 32px 12px"; }, function (props) { return props.active ? (props.displayMode === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.black) : "transparent"; }, function (props) { return (props.active ? (props.displayMode === "dark" ? "white" : "black") : (props.displayMode === "dark" ? "#AEAEAE" : theme.black)); }, function (props) { var _a; return (((_a = props.font) === null || _a === undefined ? undefined : _a.size) || "12px"); }, function (props) { var _a; return (((_a = props.font) === null || _a === undefined ? undefined : _a.weight) || "12px"); }, function (props) { return props.displayMode === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.black; });
|
2575
|
+
var ActiveIndicator = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n left: ", "px;\n width: ", "px;\n height: 2px;\n background: ", ";\n transition: left 0.3s ease, width 0.3s ease;\n"], ["\n position: absolute;\n bottom: 0;\n left: ", "px;\n width: ", "px;\n height: 2px;\n background: ", ";\n transition: left 0.3s ease, width 0.3s ease;\n"])), function (props) { return props.left; }, function (props) { return props.width; }, function (props) { return props.accentColor || theme.primary; });
|
2576
|
+
var TabPanel = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 16px;\n font-size: 14px;\n"], ["\n padding: 16px;\n font-size: 14px;\n"])));
|
2577
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
2502
2578
|
|
2503
2579
|
exports.Button = Button;
|
2580
|
+
exports.Card = Card;
|
2581
|
+
exports.Cards = Cards;
|
2582
|
+
exports.EntrySelector = EntrySelector;
|
2504
2583
|
exports.Fade = Fade;
|
2505
2584
|
exports.Footer = Footer;
|
2506
2585
|
exports.Hero = Hero;
|
@@ -2508,4 +2587,5 @@ exports.Icon = Icon;
|
|
2508
2587
|
exports.Navbar = Navbar;
|
2509
2588
|
exports.Showcase = Showcase;
|
2510
2589
|
exports.Slider = Slider;
|
2590
|
+
exports.Tabs = Tabs;
|
2511
2591
|
//# sourceMappingURL=index.cjs.js.map
|