wex-ui-lib 1.2.41 → 1.3.0
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 +153 -76
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +66 -10
- package/dist/index.esm.js +150 -77
- 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 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; });
|
|
2039
|
+
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$7 || (templateObject_2$7 = __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$6 || (templateObject_3$6 = __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$5 || (templateObject_4$5 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2042
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5;
|
|
2043
2043
|
|
|
2044
2044
|
function insertWithoutScoping(cache, serialized) {
|
|
2045
2045
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2181,13 +2181,13 @@ 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$
|
|
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$6 || (templateObject_2$6 = __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$5 || (templateObject_3$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"])));
|
|
2187
|
+
var fadeInFromRight = keyframes(templateObject_4$4 || (templateObject_4$4 = __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$4 || (templateObject_5$4 = __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
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$
|
|
2190
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6;
|
|
2191
2191
|
|
|
2192
2192
|
function Navbar(props) {
|
|
2193
2193
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2195,15 +2195,15 @@ function Navbar(props) {
|
|
|
2195
2195
|
React.createElement(NavbarContainer, { height: config.height, colors: config.colors },
|
|
2196
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 }),
|
|
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 @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; });
|
|
2216
|
+
var ItemsContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n \n @media only screen and (max-width: 800px) {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n \n @media only screen and (max-width: 800px) {\n display: none;\n }\n"])), function (props) { return props.centeredItems ? 'unset' : 'auto'; });
|
|
2217
|
+
var Item$1 = newStyled.a(templateObject_3$4 || (templateObject_3$4 = __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 = newStyled.img(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])), function (props) { return props.width || '130px'; });
|
|
2219
|
+
var Subitem = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __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$5, templateObject_3$4, templateObject_4$3, templateObject_5$3;
|
|
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$4 || (templateObject_2$4 = __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$3 || (templateObject_3$3 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n height: 100%;\n z-index: 2;\n"])));
|
|
2240
|
+
var templateObject_1$8, templateObject_2$4, templateObject_3$3;
|
|
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$3 || (templateObject_2$3 = __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$2 || (templateObject_3$2 = __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$2 || (templateObject_4$2 = __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$2 || (templateObject_5$2 = __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$3, templateObject_3$2, templateObject_4$2, templateObject_5$2;
|
|
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"], ["\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"])), 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$2 || (templateObject_2$2 = __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$2;
|
|
2463
2446
|
|
|
2464
2447
|
function Footer(props) {
|
|
2465
2448
|
var _a = props.logo, logo = _a === undefined ? {
|
|
@@ -2478,7 +2461,7 @@ function Footer(props) {
|
|
|
2478
2461
|
address: "",
|
|
2479
2462
|
address2: "",
|
|
2480
2463
|
} : _c, navItems = props.navItems;
|
|
2481
|
-
return (React.createElement(Container, { backgroundColor: backgroundColor },
|
|
2464
|
+
return (React.createElement(Container$3, { backgroundColor: backgroundColor },
|
|
2482
2465
|
React.createElement("div", { className: 'left' },
|
|
2483
2466
|
React.createElement("img", { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
|
2484
2467
|
React.createElement("h5", null, subtitle),
|
|
@@ -2497,10 +2480,103 @@ function Footer(props) {
|
|
|
2497
2480
|
contactData.email2 && React.createElement("p", null, contactData.email2)),
|
|
2498
2481
|
React.createElement("nav", null, navItems && navItems.map(function (item) { return React.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
|
|
2499
2482
|
}
|
|
2500
|
-
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);
|
|
2501
|
-
var templateObject_1;
|
|
2483
|
+
var Container$3 = newStyled.footer(templateObject_1$4 || (templateObject_1$4 = __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);
|
|
2484
|
+
var templateObject_1$4;
|
|
2485
|
+
|
|
2486
|
+
function Card(props) {
|
|
2487
|
+
var callback = props.callback, type = props.type; props.backgroundColor; var _a = props.icon, icon = _a === undefined ? {
|
|
2488
|
+
element: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 37", fill: "none" },
|
|
2489
|
+
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" }))),
|
|
2490
|
+
width: "30px",
|
|
2491
|
+
height: "30px"
|
|
2492
|
+
} : _a, _b = props.title, title = _b === undefined ? {
|
|
2493
|
+
text: 'Lorem Ipsum',
|
|
2494
|
+
color: 'white',
|
|
2495
|
+
casing: "uppercase",
|
|
2496
|
+
size: '20px'
|
|
2497
|
+
} : _b, _c = props.description, description = _c === undefined ? {
|
|
2498
|
+
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',
|
|
2499
|
+
color: 'white',
|
|
2500
|
+
casing: "first-capitalized",
|
|
2501
|
+
size: '16px'
|
|
2502
|
+
} : _c;
|
|
2503
|
+
switch (type) {
|
|
2504
|
+
default:
|
|
2505
|
+
return (React.createElement(Container$2, { card: props, onClick: function () { return callback; } },
|
|
2506
|
+
React.createElement(Fade, { type: 'left-to-right' }, icon.element),
|
|
2507
|
+
React.createElement(Fade, { type: 'left-to-right' },
|
|
2508
|
+
React.createElement("h4", null, title.text)),
|
|
2509
|
+
React.createElement(Fade, { type: 'left-to-right' },
|
|
2510
|
+
React.createElement("p", null, description.text))));
|
|
2511
|
+
}
|
|
2512
|
+
}
|
|
2513
|
+
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"; });
|
|
2514
|
+
var templateObject_1$3;
|
|
2515
|
+
|
|
2516
|
+
function Cards(props) {
|
|
2517
|
+
var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
|
|
2518
|
+
return (React.createElement(Container$1, { gap: gap, padding: padding, backgroundColor: backgroundColor }, cards.map(function (card) { return (React.createElement(Card, __assign({}, card))); })));
|
|
2519
|
+
}
|
|
2520
|
+
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; });
|
|
2521
|
+
var templateObject_1$2;
|
|
2522
|
+
|
|
2523
|
+
function EntrySelector(props) {
|
|
2524
|
+
var title = props.title, _a = props.colors, colors = _a === undefined ? {
|
|
2525
|
+
background: "",
|
|
2526
|
+
lightBackground: "",
|
|
2527
|
+
accent: ""
|
|
2528
|
+
} : _a, items = props.items, padding = props.padding;
|
|
2529
|
+
var _b = React.useState(0), selectedItem = _b[0], setSelectedItem = _b[1];
|
|
2530
|
+
return (React.createElement(Container, { padding: padding, colors: colors },
|
|
2531
|
+
title && (React.createElement("h5", null, title)),
|
|
2532
|
+
React.createElement(Inner, null,
|
|
2533
|
+
React.createElement(Items, null, items.map(function (item, index) { return (React.createElement(Item, { onClick: function () { return setSelectedItem(index); }, isSelected: selectedItem === index, colors: colors },
|
|
2534
|
+
item.name,
|
|
2535
|
+
React.createElement(Icon, { icon: 'arrow-long' }))); })),
|
|
2536
|
+
React.createElement(ItemContent, null, items[selectedItem].content))));
|
|
2537
|
+
}
|
|
2538
|
+
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'; });
|
|
2539
|
+
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"])));
|
|
2540
|
+
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 "])));
|
|
2541
|
+
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; });
|
|
2542
|
+
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"])));
|
|
2543
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
|
2544
|
+
|
|
2545
|
+
var Tabs = function (_a) {
|
|
2546
|
+
var tabs = _a.tabs, font = _a.font, _b = _a.displayMode, displayMode = _b === undefined ? "dark" : _b, accentColor = _a.accentColor, tabPadding = _a.tabPadding;
|
|
2547
|
+
var _c = React.useState(0), activeTab = _c[0], setActiveTab = _c[1];
|
|
2548
|
+
var _d = React.useState({ left: 0, width: 0 }), indicatorStyle = _d[0], setIndicatorStyle = _d[1];
|
|
2549
|
+
var tabRefs = React.useRef([]);
|
|
2550
|
+
React.useEffect(function () {
|
|
2551
|
+
var updateIndicator = function (index) {
|
|
2552
|
+
var tab = tabRefs.current[index];
|
|
2553
|
+
if (tab) {
|
|
2554
|
+
setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
|
|
2555
|
+
}
|
|
2556
|
+
};
|
|
2557
|
+
updateIndicator(activeTab);
|
|
2558
|
+
}, [activeTab]);
|
|
2559
|
+
return (React.createElement(TabsContainer, null,
|
|
2560
|
+
React.createElement(TabsList, null,
|
|
2561
|
+
tabs.map(function (tab, index) { return (React.createElement(Tab
|
|
2562
|
+
// @ts-ignore
|
|
2563
|
+
, {
|
|
2564
|
+
// @ts-ignore
|
|
2565
|
+
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)); }),
|
|
2566
|
+
React.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
|
2567
|
+
React.createElement(TabPanel, null, tabs[activeTab].content)));
|
|
2568
|
+
};
|
|
2569
|
+
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
|
2570
|
+
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"])));
|
|
2571
|
+
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; });
|
|
2572
|
+
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; });
|
|
2573
|
+
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"])));
|
|
2574
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
2502
2575
|
|
|
2503
2576
|
exports.Button = Button;
|
|
2577
|
+
exports.Card = Card;
|
|
2578
|
+
exports.Cards = Cards;
|
|
2579
|
+
exports.EntrySelector = EntrySelector;
|
|
2504
2580
|
exports.Fade = Fade;
|
|
2505
2581
|
exports.Footer = Footer;
|
|
2506
2582
|
exports.Hero = Hero;
|
|
@@ -2508,4 +2584,5 @@ exports.Icon = Icon;
|
|
|
2508
2584
|
exports.Navbar = Navbar;
|
|
2509
2585
|
exports.Showcase = Showcase;
|
|
2510
2586
|
exports.Slider = Slider;
|
|
2587
|
+
exports.Tabs = Tabs;
|
|
2511
2588
|
//# sourceMappingURL=index.cjs.js.map
|