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.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React$1, { JSX } from 'react';
|
|
1
|
+
import React$1, { JSX, ReactElement } from 'react';
|
|
2
2
|
|
|
3
3
|
type ArrowIcon = 'arrow-long' | 'arrow-caret' | 'arrow-long-left' | 'arrow-caret-left';
|
|
4
4
|
type SocialMediaIcon = "twitter" | "instagram" | "youtube" | "linkedin";
|
|
@@ -13,8 +13,6 @@ type IconProps = {
|
|
|
13
13
|
|
|
14
14
|
declare function Icon(props: IconProps): React$1.JSX.Element;
|
|
15
15
|
|
|
16
|
-
type TextCasing = 'first-capitalized' | 'uppercase' | 'lowercase';
|
|
17
|
-
|
|
18
16
|
type ComponentColors = {
|
|
19
17
|
text?: string;
|
|
20
18
|
textHover?: string;
|
|
@@ -23,19 +21,20 @@ type ComponentColors = {
|
|
|
23
21
|
border?: string;
|
|
24
22
|
borderHover?: string;
|
|
25
23
|
};
|
|
26
|
-
type
|
|
24
|
+
type Font = {
|
|
27
25
|
size?: string;
|
|
28
|
-
casing?:
|
|
26
|
+
casing?: 'first-capitalized' | 'uppercase' | 'lowercase';
|
|
29
27
|
weight?: '300' | '400' | '500' | '600' | '700' | '800' | '900';
|
|
30
28
|
};
|
|
31
29
|
type Opacity = "10%" | "20%" | "30%" | "40%" | "50%" | "60%" | "70%" | "80%" | "90%";
|
|
30
|
+
type DisplayMode = "light" | "dark";
|
|
32
31
|
|
|
33
32
|
type ButtonProps = {
|
|
34
33
|
children?: React.ReactNode | string;
|
|
35
34
|
onClick?: () => void;
|
|
36
35
|
type?: "default" | "rounded" | "pill" | "underlined";
|
|
37
36
|
colors?: ComponentColors;
|
|
38
|
-
font?:
|
|
37
|
+
font?: Font;
|
|
39
38
|
arrow?: ArrowIcon;
|
|
40
39
|
};
|
|
41
40
|
|
|
@@ -83,10 +82,10 @@ type HeroProps = {
|
|
|
83
82
|
declare function Hero(props: HeroProps): React$1.JSX.Element;
|
|
84
83
|
|
|
85
84
|
type FadeProps = {
|
|
86
|
-
children: React$1.ReactElement
|
|
85
|
+
children: React$1.ReactElement;
|
|
87
86
|
type?: 'top-to-bottom' | 'right-to-left' | 'bottom-to-top' | 'left-to-right';
|
|
88
87
|
};
|
|
89
|
-
declare function Fade(props: FadeProps): React$1.
|
|
88
|
+
declare function Fade(props: FadeProps): React$1.JSX.Element;
|
|
90
89
|
|
|
91
90
|
type goToOption = 'next' | 'prev' | number;
|
|
92
91
|
type SliderRef = {
|
|
@@ -106,8 +105,10 @@ type SliderProps = {
|
|
|
106
105
|
declare function Slider(props: SliderProps): React$1.JSX.Element;
|
|
107
106
|
|
|
108
107
|
type ShowcaseProps = {
|
|
108
|
+
items: ShowcaseItem[];
|
|
109
|
+
itemsPerRow?: number;
|
|
110
|
+
gap?: string;
|
|
109
111
|
backgroundColor?: string;
|
|
110
|
-
items: [ShowcaseItem, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?];
|
|
111
112
|
};
|
|
112
113
|
type ShowcaseItem = {
|
|
113
114
|
label: string;
|
|
@@ -146,4 +147,59 @@ type FooterProps = {
|
|
|
146
147
|
|
|
147
148
|
declare function Footer(props: FooterProps): React$1.JSX.Element;
|
|
148
149
|
|
|
149
|
-
|
|
150
|
+
type CardProps = {
|
|
151
|
+
type?: "default";
|
|
152
|
+
backgroundColor?: string;
|
|
153
|
+
title?: Font & {
|
|
154
|
+
text: string;
|
|
155
|
+
color?: string;
|
|
156
|
+
};
|
|
157
|
+
description?: Font & {
|
|
158
|
+
text: string;
|
|
159
|
+
color?: string;
|
|
160
|
+
};
|
|
161
|
+
icon?: {
|
|
162
|
+
element: ReactElement;
|
|
163
|
+
width?: string;
|
|
164
|
+
height?: string;
|
|
165
|
+
};
|
|
166
|
+
callback?: () => void;
|
|
167
|
+
};
|
|
168
|
+
declare function Card(props: CardProps): React$1.JSX.Element;
|
|
169
|
+
|
|
170
|
+
type CardsProps = {
|
|
171
|
+
cards: CardProps[];
|
|
172
|
+
padding?: string;
|
|
173
|
+
backgroundColor?: string;
|
|
174
|
+
gap?: string;
|
|
175
|
+
};
|
|
176
|
+
declare function Cards(props: CardsProps): React$1.JSX.Element;
|
|
177
|
+
|
|
178
|
+
type EntrySelectorProps = {
|
|
179
|
+
title?: string;
|
|
180
|
+
colors?: {
|
|
181
|
+
background?: string;
|
|
182
|
+
lightBackground?: string;
|
|
183
|
+
accent?: string;
|
|
184
|
+
};
|
|
185
|
+
padding?: string;
|
|
186
|
+
items: {
|
|
187
|
+
name: string;
|
|
188
|
+
content?: ReactElement;
|
|
189
|
+
}[];
|
|
190
|
+
};
|
|
191
|
+
declare function EntrySelector(props: EntrySelectorProps): React$1.JSX.Element;
|
|
192
|
+
|
|
193
|
+
interface TabsProps {
|
|
194
|
+
tabPadding?: string;
|
|
195
|
+
accentColor?: string;
|
|
196
|
+
displayMode?: DisplayMode;
|
|
197
|
+
font?: Font;
|
|
198
|
+
tabs: {
|
|
199
|
+
label: string;
|
|
200
|
+
content: React$1.ReactNode;
|
|
201
|
+
}[];
|
|
202
|
+
}
|
|
203
|
+
declare const Tabs: React$1.FC<TabsProps>;
|
|
204
|
+
|
|
205
|
+
export { Button, Card, Cards, EntrySelector, Fade, Footer, Hero, Icon, Navbar, Showcase, Slider, type SliderRef, Tabs };
|
package/dist/index.esm.js
CHANGED
|
@@ -1958,12 +1958,12 @@ function Icon(props) {
|
|
|
1958
1958
|
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" },
|
|
1959
1959
|
React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
|
|
1960
1960
|
}
|
|
1961
|
-
var IconContainer = newStyled.div(templateObject_1$
|
|
1961
|
+
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) {
|
|
1962
1962
|
return props.border === "rounded" ? "2px" :
|
|
1963
1963
|
props.border === "circle" ? "50px" :
|
|
1964
1964
|
"unset";
|
|
1965
1965
|
}, 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; });
|
|
1966
|
-
var templateObject_1$
|
|
1966
|
+
var templateObject_1$c;
|
|
1967
1967
|
|
|
1968
1968
|
var theme = {
|
|
1969
1969
|
primary: "#DC3737",
|
|
@@ -2015,11 +2015,11 @@ function Button(props) {
|
|
|
2015
2015
|
React__default.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
|
|
2016
2016
|
}
|
|
2017
2017
|
}
|
|
2018
|
-
var DefaultButton = newStyled.button(templateObject_1$
|
|
2019
|
-
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$
|
|
2020
|
-
var PillButton = newStyled(DefaultButton)(templateObject_3$
|
|
2021
|
-
var RoundedButton = newStyled(DefaultButton)(templateObject_4$
|
|
2022
|
-
var templateObject_1$
|
|
2018
|
+
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; });
|
|
2019
|
+
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; });
|
|
2020
|
+
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 "])));
|
|
2021
|
+
var RoundedButton = newStyled(DefaultButton)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2022
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5;
|
|
2023
2023
|
|
|
2024
2024
|
function insertWithoutScoping(cache, serialized) {
|
|
2025
2025
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2161,13 +2161,13 @@ var _createEmotion = createEmotion({
|
|
|
2161
2161
|
}),
|
|
2162
2162
|
keyframes = _createEmotion.keyframes;
|
|
2163
2163
|
|
|
2164
|
-
var appearAnimation = keyframes(templateObject_1$
|
|
2165
|
-
var disappearAnimation = keyframes(templateObject_2$
|
|
2166
|
-
var fadeInFromLeft = keyframes(templateObject_3$
|
|
2167
|
-
var fadeInFromRight = keyframes(templateObject_4$
|
|
2168
|
-
var fadeInFromTop = keyframes(templateObject_5$
|
|
2164
|
+
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"])));
|
|
2165
|
+
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"])));
|
|
2166
|
+
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"])));
|
|
2167
|
+
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"])));
|
|
2168
|
+
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"])));
|
|
2169
2169
|
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"])));
|
|
2170
|
-
var templateObject_1$
|
|
2170
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6;
|
|
2171
2171
|
|
|
2172
2172
|
function Navbar(props) {
|
|
2173
2173
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2175,15 +2175,15 @@ function Navbar(props) {
|
|
|
2175
2175
|
React__default.createElement(NavbarContainer, { height: config.height, colors: config.colors },
|
|
2176
2176
|
React__default.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 }),
|
|
2177
2177
|
React__default.createElement(ItemsContainer, { centeredItems: config.centeredItems }, items === null || items === undefined ? undefined : items.map(function (item) {
|
|
2178
|
-
var _a;
|
|
2179
|
-
return (React__default.createElement(
|
|
2178
|
+
var _a, _b;
|
|
2179
|
+
return (React__default.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
|
|
2180
2180
|
e.preventDefault();
|
|
2181
2181
|
item.onClick && item.onClick();
|
|
2182
|
-
} },
|
|
2182
|
+
}, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
|
|
2183
2183
|
item.label,
|
|
2184
2184
|
item.subitems && React__default.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
|
|
2185
|
-
item.subitems && (React__default.createElement("div", null, (
|
|
2186
|
-
return (React__default.createElement(
|
|
2185
|
+
item.subitems && (React__default.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
|
|
2186
|
+
return (React__default.createElement(Subitem, { key: subitem.label },
|
|
2187
2187
|
React__default.createElement("a", { href: "#", onClick: function (e) {
|
|
2188
2188
|
e.preventDefault();
|
|
2189
2189
|
subitem.onClick && subitem.onClick();
|
|
@@ -2192,11 +2192,12 @@ function Navbar(props) {
|
|
|
2192
2192
|
})),
|
|
2193
2193
|
button ? (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)) : React__default.createElement(React__default.Fragment, null))));
|
|
2194
2194
|
}
|
|
2195
|
-
var NavbarContainer = newStyled.div(templateObject_1$
|
|
2196
|
-
var ItemsContainer = newStyled.div(templateObject_2$
|
|
2197
|
-
var
|
|
2198
|
-
var
|
|
2199
|
-
var
|
|
2195
|
+
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'; });
|
|
2196
|
+
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'; });
|
|
2197
|
+
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);
|
|
2198
|
+
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'; });
|
|
2199
|
+
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 "])));
|
|
2200
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3;
|
|
2200
2201
|
|
|
2201
2202
|
function Hero(props) {
|
|
2202
2203
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
@@ -2209,14 +2210,14 @@ function Hero(props) {
|
|
|
2209
2210
|
return function () { return clearInterval(interval_1); };
|
|
2210
2211
|
}
|
|
2211
2212
|
}, [imageUrls]);
|
|
2212
|
-
return (React__default.createElement(Container$
|
|
2213
|
+
return (React__default.createElement(Container$6, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
|
|
2213
2214
|
overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2214
2215
|
React__default.createElement(HeroContent, null, children)));
|
|
2215
2216
|
}
|
|
2216
|
-
var Container$
|
|
2217
|
-
var Overlay = newStyled.div(templateObject_2$
|
|
2218
|
-
var HeroContent = newStyled.div(templateObject_3$
|
|
2219
|
-
var templateObject_1$
|
|
2217
|
+
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'; });
|
|
2218
|
+
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; });
|
|
2219
|
+
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"])));
|
|
2220
|
+
var templateObject_1$8, templateObject_2$4, templateObject_3$3;
|
|
2220
2221
|
|
|
2221
2222
|
function useIntObs(_a) {
|
|
2222
2223
|
var _b;
|
|
@@ -2286,27 +2287,21 @@ function Fade(props) {
|
|
|
2286
2287
|
root: document,
|
|
2287
2288
|
rootMargin: "-10% 0% -10% 0%"
|
|
2288
2289
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
return fadeInFromRight;
|
|
2302
|
-
case 'left-to-right':
|
|
2303
|
-
return fadeInFromLeft;
|
|
2304
|
-
default:
|
|
2305
|
-
return fadeInFromBottom;
|
|
2306
|
-
}
|
|
2307
|
-
};
|
|
2308
|
-
return React__default.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) }));
|
|
2290
|
+
return (React__default.createElement(Container$5, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2291
|
+
switch (type) {
|
|
2292
|
+
case 'bottom-to-top':
|
|
2293
|
+
return fadeInFromBottom;
|
|
2294
|
+
case 'top-to-bottom':
|
|
2295
|
+
return fadeInFromTop;
|
|
2296
|
+
case 'right-to-left':
|
|
2297
|
+
return fadeInFromRight;
|
|
2298
|
+
case 'left-to-right':
|
|
2299
|
+
return fadeInFromLeft;
|
|
2300
|
+
}
|
|
2301
|
+
} }, children));
|
|
2309
2302
|
}
|
|
2303
|
+
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") : ''; });
|
|
2304
|
+
var templateObject_1$7;
|
|
2310
2305
|
|
|
2311
2306
|
function Slider(props) {
|
|
2312
2307
|
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;
|
|
@@ -2404,42 +2399,30 @@ function Slider(props) {
|
|
|
2404
2399
|
React__default.createElement(SliderContainer, { visibleInactiveSlides: visibleInactiveSlides },
|
|
2405
2400
|
React__default.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
|
|
2406
2401
|
showArrowKeys && (React__default.createElement(React__default.Fragment, null,
|
|
2407
|
-
React__default.createElement(Icon, { callback: function () { return goTo('prev'); }, color: '
|
|
2408
|
-
React__default.createElement(Icon, { callback: function () { return goTo('next'); }, color: '
|
|
2402
|
+
React__default.createElement(Icon, { border: 'circle', size: '24px', callback: function () { return goTo('prev'); }, color: '#AEAEAE', icon: 'arrow-long' }),
|
|
2403
|
+
React__default.createElement(Icon, { border: 'circle', size: '24px', callback: function () { return goTo('next'); }, color: '#AEAEAE', icon: 'arrow-long' })))),
|
|
2409
2404
|
showRadioButtons && (React__default.createElement(RadiosContainer, null, children.map(function (item, index) { return (React__default.createElement(RadioButton, { key: index, onClick: function () {
|
|
2410
2405
|
goTo(index + 1);
|
|
2411
2406
|
}, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
|
|
2412
2407
|
}
|
|
2413
|
-
var SliderContainer = newStyled.div(templateObject_1$
|
|
2414
|
-
var SlidesWrapper = newStyled.ul(templateObject_2$
|
|
2415
|
-
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"])));
|
|
2416
|
-
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"])));
|
|
2417
|
-
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"; });
|
|
2418
|
-
var templateObject_1$
|
|
2408
|
+
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'; });
|
|
2409
|
+
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; });
|
|
2410
|
+
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"])));
|
|
2411
|
+
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"])));
|
|
2412
|
+
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"; });
|
|
2413
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2;
|
|
2419
2414
|
|
|
2420
2415
|
function Showcase(props) {
|
|
2421
|
-
var items = props.items, backgroundColor = props.backgroundColor;
|
|
2416
|
+
var items = props.items, itemsPerRow = props.itemsPerRow, backgroundColor = props.backgroundColor, gap = props.gap;
|
|
2422
2417
|
var _a = useState(undefined), hoveredItemKey = _a[0], setHoveredItemKey = _a[1];
|
|
2423
|
-
|
|
2424
|
-
if (items.length >= 8) {
|
|
2425
|
-
return items.slice(0, 8);
|
|
2426
|
-
}
|
|
2427
|
-
var result = [];
|
|
2428
|
-
var i = 0;
|
|
2429
|
-
while (result.length < 8) {
|
|
2430
|
-
result.push(items[i % items.length]);
|
|
2431
|
-
i++;
|
|
2432
|
-
}
|
|
2433
|
-
return result;
|
|
2434
|
-
}, [items]);
|
|
2435
|
-
return (React__default.createElement(Container$1, { onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor }, eightItems.map(function (item, index) {
|
|
2418
|
+
return (React__default.createElement(Container$4, { itemsPerRow: itemsPerRow, onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor, gap: gap }, items.map(function (item, index) {
|
|
2436
2419
|
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 },
|
|
2437
2420
|
React__default.createElement("span", null, formatText(item.label, 'uppercase')))) : React__default.createElement(React__default.Fragment, null);
|
|
2438
2421
|
})));
|
|
2439
2422
|
}
|
|
2440
|
-
var Container$
|
|
2441
|
-
var ShowcaseItem = newStyled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n
|
|
2442
|
-
var templateObject_1$
|
|
2423
|
+
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'; });
|
|
2424
|
+
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)'; });
|
|
2425
|
+
var templateObject_1$5, templateObject_2$2;
|
|
2443
2426
|
|
|
2444
2427
|
function Footer(props) {
|
|
2445
2428
|
var _a = props.logo, logo = _a === undefined ? {
|
|
@@ -2458,7 +2441,7 @@ function Footer(props) {
|
|
|
2458
2441
|
address: "",
|
|
2459
2442
|
address2: "",
|
|
2460
2443
|
} : _c, navItems = props.navItems;
|
|
2461
|
-
return (React__default.createElement(Container, { backgroundColor: backgroundColor },
|
|
2444
|
+
return (React__default.createElement(Container$3, { backgroundColor: backgroundColor },
|
|
2462
2445
|
React__default.createElement("div", { className: 'left' },
|
|
2463
2446
|
React__default.createElement("img", { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
|
2464
2447
|
React__default.createElement("h5", null, subtitle),
|
|
@@ -2477,8 +2460,98 @@ function Footer(props) {
|
|
|
2477
2460
|
contactData.email2 && React__default.createElement("p", null, contactData.email2)),
|
|
2478
2461
|
React__default.createElement("nav", null, navItems && navItems.map(function (item) { return React__default.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
|
|
2479
2462
|
}
|
|
2480
|
-
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);
|
|
2481
|
-
var templateObject_1;
|
|
2463
|
+
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);
|
|
2464
|
+
var templateObject_1$4;
|
|
2465
|
+
|
|
2466
|
+
function Card(props) {
|
|
2467
|
+
var callback = props.callback, type = props.type; props.backgroundColor; var _a = props.icon, icon = _a === undefined ? {
|
|
2468
|
+
element: (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 37", fill: "none" },
|
|
2469
|
+
React__default.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" }))),
|
|
2470
|
+
width: "30px",
|
|
2471
|
+
height: "30px"
|
|
2472
|
+
} : _a, _b = props.title, title = _b === undefined ? {
|
|
2473
|
+
text: 'Lorem Ipsum',
|
|
2474
|
+
color: 'white',
|
|
2475
|
+
casing: "uppercase",
|
|
2476
|
+
size: '20px'
|
|
2477
|
+
} : _b, _c = props.description, description = _c === undefined ? {
|
|
2478
|
+
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',
|
|
2479
|
+
color: 'white',
|
|
2480
|
+
casing: "first-capitalized",
|
|
2481
|
+
size: '16px'
|
|
2482
|
+
} : _c;
|
|
2483
|
+
switch (type) {
|
|
2484
|
+
default:
|
|
2485
|
+
return (React__default.createElement(Container$2, { card: props, onClick: function () { return callback; } },
|
|
2486
|
+
React__default.createElement(Fade, { type: 'left-to-right' }, icon.element),
|
|
2487
|
+
React__default.createElement(Fade, { type: 'left-to-right' },
|
|
2488
|
+
React__default.createElement("h4", null, title.text)),
|
|
2489
|
+
React__default.createElement(Fade, { type: 'left-to-right' },
|
|
2490
|
+
React__default.createElement("p", null, description.text))));
|
|
2491
|
+
}
|
|
2492
|
+
}
|
|
2493
|
+
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"; });
|
|
2494
|
+
var templateObject_1$3;
|
|
2482
2495
|
|
|
2483
|
-
|
|
2496
|
+
function Cards(props) {
|
|
2497
|
+
var cards = props.cards, padding = props.padding, backgroundColor = props.backgroundColor, gap = props.gap;
|
|
2498
|
+
return (React__default.createElement(Container$1, { gap: gap, padding: padding, backgroundColor: backgroundColor }, cards.map(function (card) { return (React__default.createElement(Card, __assign({}, card))); })));
|
|
2499
|
+
}
|
|
2500
|
+
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; });
|
|
2501
|
+
var templateObject_1$2;
|
|
2502
|
+
|
|
2503
|
+
function EntrySelector(props) {
|
|
2504
|
+
var title = props.title, _a = props.colors, colors = _a === undefined ? {
|
|
2505
|
+
background: "",
|
|
2506
|
+
lightBackground: "",
|
|
2507
|
+
accent: ""
|
|
2508
|
+
} : _a, items = props.items, padding = props.padding;
|
|
2509
|
+
var _b = useState(0), selectedItem = _b[0], setSelectedItem = _b[1];
|
|
2510
|
+
return (React__default.createElement(Container, { padding: padding, colors: colors },
|
|
2511
|
+
title && (React__default.createElement("h5", null, title)),
|
|
2512
|
+
React__default.createElement(Inner, null,
|
|
2513
|
+
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 },
|
|
2514
|
+
item.name,
|
|
2515
|
+
React__default.createElement(Icon, { icon: 'arrow-long' }))); })),
|
|
2516
|
+
React__default.createElement(ItemContent, null, items[selectedItem].content))));
|
|
2517
|
+
}
|
|
2518
|
+
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'; });
|
|
2519
|
+
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"])));
|
|
2520
|
+
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 "])));
|
|
2521
|
+
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; });
|
|
2522
|
+
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"])));
|
|
2523
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
|
2524
|
+
|
|
2525
|
+
var Tabs = function (_a) {
|
|
2526
|
+
var tabs = _a.tabs, font = _a.font, _b = _a.displayMode, displayMode = _b === undefined ? "dark" : _b, accentColor = _a.accentColor, tabPadding = _a.tabPadding;
|
|
2527
|
+
var _c = useState(0), activeTab = _c[0], setActiveTab = _c[1];
|
|
2528
|
+
var _d = useState({ left: 0, width: 0 }), indicatorStyle = _d[0], setIndicatorStyle = _d[1];
|
|
2529
|
+
var tabRefs = useRef([]);
|
|
2530
|
+
useEffect(function () {
|
|
2531
|
+
var updateIndicator = function (index) {
|
|
2532
|
+
var tab = tabRefs.current[index];
|
|
2533
|
+
if (tab) {
|
|
2534
|
+
setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
|
|
2535
|
+
}
|
|
2536
|
+
};
|
|
2537
|
+
updateIndicator(activeTab);
|
|
2538
|
+
}, [activeTab]);
|
|
2539
|
+
return (React__default.createElement(TabsContainer, null,
|
|
2540
|
+
React__default.createElement(TabsList, null,
|
|
2541
|
+
tabs.map(function (tab, index) { return (React__default.createElement(Tab
|
|
2542
|
+
// @ts-ignore
|
|
2543
|
+
, {
|
|
2544
|
+
// @ts-ignore
|
|
2545
|
+
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)); }),
|
|
2546
|
+
React__default.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
|
2547
|
+
React__default.createElement(TabPanel, null, tabs[activeTab].content)));
|
|
2548
|
+
};
|
|
2549
|
+
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
|
2550
|
+
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"])));
|
|
2551
|
+
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; });
|
|
2552
|
+
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; });
|
|
2553
|
+
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"])));
|
|
2554
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
2555
|
+
|
|
2556
|
+
export { Button, Card, Cards, EntrySelector, Fade, Footer, Hero, Icon, Navbar, Showcase, Slider, Tabs };
|
|
2484
2557
|
//# sourceMappingURL=index.esm.js.map
|