wex-ui-lib 1.4.3 → 1.4.5
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 +73 -30
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.esm.js +73 -30
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Card/Card.d.ts +4 -1
- package/dist/types/components/Card/Card.stories.d.ts +1 -0
- package/dist/types/components/Card/Cards/DefaultCard.d.ts +7 -0
- package/dist/types/components/Card/Cards/ImageModernCard.d.ts +7 -0
- package/dist/types/components/Modal/Modal.d.ts +3 -0
- package/dist/types/components/Modal/Modal.stories.d.ts +6 -0
- package/dist/types/components/Modal/Modal.types.d.ts +8 -0
- package/dist/types/components/Modal/index.d.ts +2 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -148,8 +148,10 @@ type FooterProps = {
|
|
|
148
148
|
declare function Footer(props: FooterProps): React$1.JSX.Element;
|
|
149
149
|
|
|
150
150
|
type CardProps = {
|
|
151
|
-
type
|
|
151
|
+
type: "default" | "image-modern";
|
|
152
152
|
backgroundColor?: string;
|
|
153
|
+
width?: string;
|
|
154
|
+
height?: string;
|
|
153
155
|
title?: Font & {
|
|
154
156
|
text: string;
|
|
155
157
|
color?: string;
|
|
@@ -163,6 +165,7 @@ type CardProps = {
|
|
|
163
165
|
width?: string;
|
|
164
166
|
height?: string;
|
|
165
167
|
};
|
|
168
|
+
imageUrl?: string;
|
|
166
169
|
callback?: () => void;
|
|
167
170
|
};
|
|
168
171
|
declare function Card(props: CardProps): React$1.JSX.Element;
|
package/dist/index.esm.js
CHANGED
|
@@ -1960,12 +1960,12 @@ function Icon(props) {
|
|
|
1960
1960
|
icon.includes("arrow-caret") && (React__default.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
1961
1961
|
React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
|
|
1962
1962
|
}
|
|
1963
|
-
var IconContainer = newStyled.div(templateObject_1$
|
|
1963
|
+
var IconContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __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) {
|
|
1964
1964
|
return props.border === "rounded" ? "2px" :
|
|
1965
1965
|
props.border === "circle" ? "50px" :
|
|
1966
1966
|
"unset";
|
|
1967
1967
|
}, 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; });
|
|
1968
|
-
var templateObject_1$
|
|
1968
|
+
var templateObject_1$d;
|
|
1969
1969
|
|
|
1970
1970
|
var theme = {
|
|
1971
1971
|
primary: "#DC3737",
|
|
@@ -2017,11 +2017,11 @@ function Button(props) {
|
|
|
2017
2017
|
React__default.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
|
|
2018
2018
|
}
|
|
2019
2019
|
}
|
|
2020
|
-
var DefaultButton = newStyled.button(templateObject_1$
|
|
2020
|
+
var DefaultButton = newStyled.button(templateObject_1$c || (templateObject_1$c = __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; });
|
|
2021
2021
|
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; });
|
|
2022
2022
|
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 "])));
|
|
2023
2023
|
var RoundedButton = newStyled(DefaultButton)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2024
|
-
var templateObject_1$
|
|
2024
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$7, templateObject_4$6;
|
|
2025
2025
|
|
|
2026
2026
|
function insertWithoutScoping(cache, serialized) {
|
|
2027
2027
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2163,13 +2163,13 @@ var _createEmotion = createEmotion({
|
|
|
2163
2163
|
}),
|
|
2164
2164
|
keyframes = _createEmotion.keyframes;
|
|
2165
2165
|
|
|
2166
|
-
var appearAnimation = keyframes(templateObject_1$
|
|
2166
|
+
var appearAnimation = keyframes(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
2167
2167
|
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"])));
|
|
2168
2168
|
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"])));
|
|
2169
2169
|
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"])));
|
|
2170
2170
|
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"])));
|
|
2171
2171
|
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"])));
|
|
2172
|
-
var templateObject_1$
|
|
2172
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$1;
|
|
2173
2173
|
|
|
2174
2174
|
function Navbar(props) {
|
|
2175
2175
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2195,12 +2195,12 @@ function Navbar(props) {
|
|
|
2195
2195
|
})),
|
|
2196
2196
|
button && (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))));
|
|
2197
2197
|
}
|
|
2198
|
-
var NavbarContainer = newStyled.div(templateObject_1$
|
|
2198
|
+
var NavbarContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\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 grid-area: button;\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 ", ";\n ", ";\n grid-template-rows: 100%;\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 grid-area: button;\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, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.background) || theme.black; }, function (props) { var _a; return ((_a = props.config) === null || _a === undefined ? undefined : _a.height) || '80px'; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-columns: auto auto auto" : "grid-template-columns: auto auto"; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-areas: \"logo items button\"" : "grid-template-areas: \"logo items\""; });
|
|
2199
2199
|
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"], ["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"])));
|
|
2200
2200
|
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 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 &: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 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 &: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, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.textHover) || theme.primary; }, appearAnimation, function (props) { var _a, _b; return !props.hasSubitems ? ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.borderHover) || "white" : "transparent"; }, appearAnimation);
|
|
2201
2201
|
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n grid-area: logo;\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 grid-area: logo;\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'; });
|
|
2202
2202
|
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"], ["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"])));
|
|
2203
|
-
var templateObject_1$
|
|
2203
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
|
|
2204
2204
|
|
|
2205
2205
|
function Hero(props) {
|
|
2206
2206
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
@@ -2213,14 +2213,14 @@ function Hero(props) {
|
|
|
2213
2213
|
return function () { return clearInterval(interval_1); };
|
|
2214
2214
|
}
|
|
2215
2215
|
}, [imageUrls]);
|
|
2216
|
-
return (React__default.createElement(Container$
|
|
2216
|
+
return (React__default.createElement(Container$5, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
|
|
2217
2217
|
overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2218
2218
|
React__default.createElement(HeroContent, null, children)));
|
|
2219
2219
|
}
|
|
2220
|
-
var Container$
|
|
2220
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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 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"])), 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'; });
|
|
2221
2221
|
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; });
|
|
2222
2222
|
var HeroContent = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n z-index: 2;\n @media only screen and (max-width: 1024px) {\n padding: 0 12vw;\n }\n"], ["\n width: 100%;\n height: 100%;\n z-index: 2;\n @media only screen and (max-width: 1024px) {\n padding: 0 12vw;\n }\n"])));
|
|
2223
|
-
var templateObject_1$
|
|
2223
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4;
|
|
2224
2224
|
|
|
2225
2225
|
function useIntObs(_a) {
|
|
2226
2226
|
var _b;
|
|
@@ -2290,7 +2290,7 @@ function Fade(props) {
|
|
|
2290
2290
|
root: document,
|
|
2291
2291
|
rootMargin: "-10% 0% -10% 0%"
|
|
2292
2292
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
|
2293
|
-
return (React__default.createElement(Container$
|
|
2293
|
+
return (React__default.createElement(Container$4, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2294
2294
|
switch (type) {
|
|
2295
2295
|
case 'bottom-to-top':
|
|
2296
2296
|
return fadeInFromBottom;
|
|
@@ -2303,8 +2303,8 @@ function Fade(props) {
|
|
|
2303
2303
|
}
|
|
2304
2304
|
} }, children));
|
|
2305
2305
|
}
|
|
2306
|
-
var Container$
|
|
2307
|
-
var templateObject_1$
|
|
2306
|
+
var Container$4 = newStyled.span(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2307
|
+
var templateObject_1$8;
|
|
2308
2308
|
|
|
2309
2309
|
function Slider(props) {
|
|
2310
2310
|
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;
|
|
@@ -2408,24 +2408,24 @@ function Slider(props) {
|
|
|
2408
2408
|
goTo(index + 1);
|
|
2409
2409
|
}, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
|
|
2410
2410
|
}
|
|
2411
|
-
var SliderContainer = newStyled.div(templateObject_1$
|
|
2411
|
+
var SliderContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n background-color: transparent;\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: 12px;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n left: 12px\n }\n }\n"], ["\n background-color: transparent;\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: 12px;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n left: 12px\n }\n }\n"])), function (props) { return props.visibleInactiveSlides ? 'visible' : 'hidden'; });
|
|
2412
2412
|
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; });
|
|
2413
2413
|
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"])));
|
|
2414
2414
|
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"])));
|
|
2415
2415
|
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"; });
|
|
2416
|
-
var templateObject_1$
|
|
2416
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3;
|
|
2417
2417
|
|
|
2418
2418
|
function Showcase(props) {
|
|
2419
2419
|
var items = props.items, itemsPerRow = props.itemsPerRow, backgroundColor = props.backgroundColor, gap = props.gap;
|
|
2420
2420
|
var _a = useState(undefined), hoveredItemKey = _a[0], setHoveredItemKey = _a[1];
|
|
2421
|
-
return (React__default.createElement(Container$
|
|
2421
|
+
return (React__default.createElement(Container$3, { itemsPerRow: itemsPerRow, onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor, gap: gap }, items.map(function (item, index) {
|
|
2422
2422
|
return item ? (React__default.createElement(ShowcaseItem, { key: index, onClick: function () { return item.callback(); }, backgroundUrl: item.imageUrl, onMouseEnter: function () { return setHoveredItemKey(index); }, itemKey: index, hoveredItemKey: hoveredItemKey },
|
|
2423
2423
|
React__default.createElement("span", null, formatText(item.label, 'uppercase')))) : React__default.createElement(React__default.Fragment, null);
|
|
2424
2424
|
})));
|
|
2425
2425
|
}
|
|
2426
|
-
var Container$
|
|
2426
|
+
var Container$3 = newStyled.section(templateObject_1$6 || (templateObject_1$6 = __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'; });
|
|
2427
2427
|
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)'; });
|
|
2428
|
-
var templateObject_1$
|
|
2428
|
+
var templateObject_1$6, templateObject_2$3;
|
|
2429
2429
|
|
|
2430
2430
|
function Footer(props) {
|
|
2431
2431
|
var _a = props.logo, logo = _a === undefined ? {
|
|
@@ -2445,7 +2445,7 @@ function Footer(props) {
|
|
|
2445
2445
|
address: "",
|
|
2446
2446
|
address2: "",
|
|
2447
2447
|
} : _d, navItems = props.navItems;
|
|
2448
|
-
return (React__default.createElement(Container$
|
|
2448
|
+
return (React__default.createElement(Container$2, { colors: colors },
|
|
2449
2449
|
React__default.createElement(Logo, { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
|
2450
2450
|
React__default.createElement(Subtitle, null, subtitle),
|
|
2451
2451
|
React__default.createElement(SocialMedia, null,
|
|
@@ -2468,13 +2468,19 @@ function Footer(props) {
|
|
|
2468
2468
|
contactData.email2 && React__default.createElement("p", null, contactData.email2)),
|
|
2469
2469
|
React__default.createElement(Nav, null, navItems && navItems.map(function (item, index) { return React__default.createElement("a", { key: index, onClick: item.callback }, item.label); }))));
|
|
2470
2470
|
}
|
|
2471
|
-
var Container$
|
|
2471
|
+
var Container$2 = newStyled.footer(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n border-top: 2px solid ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\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 border-top: 2px solid ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\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.colors.background || theme.black2; }, function (props) { return props.colors.border || theme.black2; });
|
|
2472
2472
|
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"])));
|
|
2473
2473
|
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"])));
|
|
2474
2474
|
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"])));
|
|
2475
2475
|
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"])));
|
|
2476
2476
|
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 cursor: pointer;\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 cursor: pointer;\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"])));
|
|
2477
|
-
var templateObject_1$
|
|
2477
|
+
var templateObject_1$5, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6;
|
|
2478
|
+
|
|
2479
|
+
var DefaultCard = newStyled.article(templateObject_1$4 || (templateObject_1$4 = __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"; });
|
|
2480
|
+
var templateObject_1$4;
|
|
2481
|
+
|
|
2482
|
+
var ImageModernCard = newStyled.article(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n width: ", ";\n height: ", ";\n transition: 300ms;\n cursor: ", ";\n &::before {\n content: \"\";\n border-radius: 10px;\n position: absolute;\n transition: 300ms;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n }\n &:hover {\n &::before {\n height: ", ";\n transform: translateY(-10px);\n }\n .img {\n transform: translateY(-10px);\n }\n .footer {\n transform: translateY(10px);\n }\n }\n .img {\n border-radius: 10px;\n transition: 300ms;\n position: absolute;\n z-index: -1;\n height: 100%;\n width: 100%;\n background-image: url(", ");\n background-size: cover;\n background-repeat: no-repeat;\n }\n .footer {\n border-radius: 0 0 10px 10px;\n transition: 300ms;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 32%;\n width: 100%;\n gap: 4px;\n background-color: ", ";\n h4 {\n color: ", ";\n font-size: ", ";\n }\n p {\n font-size: ", ";\n color: ", ";\n line-height: 24px;\n }\n }\n"], ["\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n width: ", ";\n height: ", ";\n transition: 300ms;\n cursor: ", ";\n &::before {\n content: \"\";\n border-radius: 10px;\n position: absolute;\n transition: 300ms;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n }\n &:hover {\n &::before {\n height: ", ";\n transform: translateY(-10px);\n }\n .img {\n transform: translateY(-10px);\n }\n .footer {\n transform: translateY(10px);\n }\n }\n .img {\n border-radius: 10px;\n transition: 300ms;\n position: absolute;\n z-index: -1;\n height: 100%;\n width: 100%;\n background-image: url(", ");\n background-size: cover;\n background-repeat: no-repeat;\n }\n .footer {\n border-radius: 0 0 10px 10px;\n transition: 300ms;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 32%;\n width: 100%;\n gap: 4px;\n background-color: ", ";\n h4 {\n color: ", ";\n font-size: ", ";\n }\n p {\n font-size: ", ";\n color: ", ";\n line-height: 24px;\n }\n }\n"])), function (props) { return props.card.width || "100%"; }, function (props) { return props.card.height || "100%"; }, function (props) { return props.card.callback ? 'pointer' : 'default'; }, function (props) { return "calc(".concat(props.card.height, " + 20px)") || "100%"; }, function (props) { return props.card.imageUrl; }, function (props) { return props.card.backgroundColor || theme.black2; }, 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"; });
|
|
2483
|
+
var templateObject_1$3;
|
|
2478
2484
|
|
|
2479
2485
|
function Card(props) {
|
|
2480
2486
|
var callback = props.callback, type = props.type; props.backgroundColor; var _a = props.icon, icon = _a === undefined ? {
|
|
@@ -2494,17 +2500,22 @@ function Card(props) {
|
|
|
2494
2500
|
size: '16px'
|
|
2495
2501
|
} : _c;
|
|
2496
2502
|
switch (type) {
|
|
2497
|
-
default:
|
|
2498
|
-
return (React__default.createElement(
|
|
2503
|
+
case "default":
|
|
2504
|
+
return (React__default.createElement(DefaultCard, { card: props, onClick: function () { return callback; } },
|
|
2499
2505
|
React__default.createElement(Fade, { type: 'left-to-right' }, icon.element),
|
|
2500
2506
|
React__default.createElement(Fade, { type: 'left-to-right' },
|
|
2501
2507
|
React__default.createElement("h4", null, title.text)),
|
|
2502
2508
|
React__default.createElement(Fade, { type: 'left-to-right' },
|
|
2503
2509
|
React__default.createElement("p", null, description.text))));
|
|
2510
|
+
case "image-modern":
|
|
2511
|
+
return (React__default.createElement(Fade, { type: 'left-to-right' },
|
|
2512
|
+
React__default.createElement(ImageModernCard, { card: props, onClick: function () { return callback; } },
|
|
2513
|
+
React__default.createElement("div", { className: "img" }),
|
|
2514
|
+
React__default.createElement("div", { className: "footer" },
|
|
2515
|
+
React__default.createElement("h4", null, title.text),
|
|
2516
|
+
React__default.createElement("p", null, description.text)))));
|
|
2504
2517
|
}
|
|
2505
2518
|
}
|
|
2506
|
-
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"; });
|
|
2507
|
-
var templateObject_1$3;
|
|
2508
2519
|
|
|
2509
2520
|
function Cards(props) {
|
|
2510
2521
|
var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
|
|
@@ -2525,8 +2536,7 @@ function EntrySelector(props) {
|
|
|
2525
2536
|
React__default.createElement(Items, null, items.map(function (item, index) { return (React__default.createElement(Item, { onClick: function () { return setSelectedItem(index); }, isSelected: selectedItem === index, colors: colors },
|
|
2526
2537
|
item.name,
|
|
2527
2538
|
React__default.createElement(Icon, { icon: 'arrow-long' }))); })),
|
|
2528
|
-
React__default.createElement(
|
|
2529
|
-
React__default.createElement(ItemContent, null, items[selectedItem].content)))));
|
|
2539
|
+
React__default.createElement(ItemContent, null, items[selectedItem].content))));
|
|
2530
2540
|
}
|
|
2531
2541
|
var Container = newStyled.section(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n background-color: ", ";\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 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 || "transparent"; });
|
|
2532
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"])));
|
|
@@ -2535,6 +2545,7 @@ var Item = newStyled.button(templateObject_4$1 || (templateObject_4$1 = __makeTe
|
|
|
2535
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"])));
|
|
2536
2546
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
|
2537
2547
|
|
|
2548
|
+
var isTouchDevice = function () { return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0); };
|
|
2538
2549
|
var Tabs = function (_a) {
|
|
2539
2550
|
var _b, _c;
|
|
2540
2551
|
var tabs = _a.tabs, font = _a.font, _d = _a.displayMode, displayMode = _d === undefined ? "dark" : _d, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange, activeTabId = _a.activeTabId;
|
|
@@ -2543,6 +2554,9 @@ var Tabs = function (_a) {
|
|
|
2543
2554
|
var activeTab = isControlled ? activeTabId : internalActiveTabId;
|
|
2544
2555
|
var _f = useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
|
|
2545
2556
|
var tabRefs = useRef([]);
|
|
2557
|
+
var tabsListRef = useRef(null);
|
|
2558
|
+
// Drag state for mobile
|
|
2559
|
+
var dragState = useRef({ startX: 0, scrollLeft: 0, dragging: false });
|
|
2546
2560
|
useEffect(function () {
|
|
2547
2561
|
onTabChange && onTabChange(activeTab);
|
|
2548
2562
|
var updateIndicator = function () {
|
|
@@ -2562,14 +2576,43 @@ var Tabs = function (_a) {
|
|
|
2562
2576
|
}
|
|
2563
2577
|
onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
|
|
2564
2578
|
};
|
|
2579
|
+
// Drag handlers
|
|
2580
|
+
useEffect(function () {
|
|
2581
|
+
var el = tabsListRef.current;
|
|
2582
|
+
if (!el || !isTouchDevice())
|
|
2583
|
+
return;
|
|
2584
|
+
var onTouchStart = function (e) {
|
|
2585
|
+
dragState.current.dragging = true;
|
|
2586
|
+
dragState.current.startX = e.touches[0].pageX - el.offsetLeft;
|
|
2587
|
+
dragState.current.scrollLeft = el.scrollLeft;
|
|
2588
|
+
};
|
|
2589
|
+
var onTouchMove = function (e) {
|
|
2590
|
+
if (!dragState.current.dragging)
|
|
2591
|
+
return;
|
|
2592
|
+
var x = e.touches[0].pageX - el.offsetLeft;
|
|
2593
|
+
var walk = dragState.current.startX - x;
|
|
2594
|
+
el.scrollLeft = dragState.current.scrollLeft + walk;
|
|
2595
|
+
};
|
|
2596
|
+
var onTouchEnd = function () {
|
|
2597
|
+
dragState.current.dragging = false;
|
|
2598
|
+
};
|
|
2599
|
+
el.addEventListener('touchstart', onTouchStart);
|
|
2600
|
+
el.addEventListener('touchmove', onTouchMove);
|
|
2601
|
+
el.addEventListener('touchend', onTouchEnd);
|
|
2602
|
+
return function () {
|
|
2603
|
+
el.removeEventListener('touchstart', onTouchStart);
|
|
2604
|
+
el.removeEventListener('touchmove', onTouchMove);
|
|
2605
|
+
el.removeEventListener('touchend', onTouchEnd);
|
|
2606
|
+
};
|
|
2607
|
+
}, [tabs]);
|
|
2565
2608
|
return (React__default.createElement(TabsContainer, null,
|
|
2566
|
-
React__default.createElement(TabsList,
|
|
2609
|
+
React__default.createElement(TabsList, { ref: tabsListRef },
|
|
2567
2610
|
tabs.map(function (tab, index) { return (React__default.createElement(Tab, { ref: function (el) { tabRefs.current[index] = el; }, key: tab.id, active: activeTab === tab.id, onClick: function () { return handleTabClick(tab.id); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
|
2568
2611
|
React__default.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
|
2569
2612
|
React__default.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
|
|
2570
2613
|
};
|
|
2571
2614
|
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
|
2572
|
-
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"])));
|
|
2615
|
+
var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n position: relative;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar { display: none; }\n width: 100%;\n scroll-behavior: smooth;\n @media (max-width: 700px) {\n justify-content: flex-start;\n cursor: grab;\n -webkit-overflow-scrolling: touch;\n }\n"], ["\n display: flex;\n justify-content: center;\n position: relative;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar { display: none; }\n width: 100%;\n scroll-behavior: smooth;\n @media (max-width: 700px) {\n justify-content: flex-start;\n cursor: grab;\n -webkit-overflow-scrolling: touch;\n }\n"])));
|
|
2573
2616
|
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; });
|
|
2574
2617
|
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; });
|
|
2575
2618
|
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"])));
|