wex-ui-lib 1.0.5 → 1.0.7

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.d.ts CHANGED
@@ -1,6 +1,16 @@
1
- import React$1 from 'react';
1
+ import React$1, { JSX } from 'react';
2
2
 
3
3
  type ArrowIcon = 'arrow-long' | 'arrow-caret';
4
+ type SocialMediaIcon = "twitter" | "instagram" | "youtube" | "linkedin";
5
+ type IconProps = {
6
+ color?: string;
7
+ icon: ArrowIcon | SocialMediaIcon | "hamburgerMenu";
8
+ size?: string;
9
+ withBorder?: boolean;
10
+ callback?: () => void;
11
+ };
12
+
13
+ declare function Icon(props: IconProps): React$1.JSX.Element;
4
14
 
5
15
  type TextCasing = 'first-capitalized' | 'uppercase' | 'lowercase';
6
16
 
@@ -75,4 +85,31 @@ type FadeProps = {
75
85
  };
76
86
  declare function Fade(props: FadeProps): React$1.JSX.Element;
77
87
 
78
- export { Button, Fade, Hero, Navbar };
88
+ type goToOption = 'next' | 'prev' | number;
89
+ type SliderRef = {
90
+ goTo: (option: goToOption) => void;
91
+ };
92
+ type SliderProps = {
93
+ children: JSX.Element[];
94
+ autoplayTicTime?: number;
95
+ visibleInactiveSlides?: boolean;
96
+ forwardedRef?: React$1.Ref<SliderRef>;
97
+ showArrowKeys?: boolean;
98
+ onSlideChange?: (slide: number) => void;
99
+ };
100
+
101
+ declare function Slider(props: SliderProps): React$1.JSX.Element;
102
+
103
+ type ShowcaseProps = {
104
+ backgroundColor?: string;
105
+ items: [ShowcaseItem, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?, ShowcaseItem?];
106
+ };
107
+ type ShowcaseItem = {
108
+ label: string;
109
+ imageUrl: string;
110
+ callback?: () => void;
111
+ };
112
+
113
+ declare function Showcase(props: ShowcaseProps): React$1.JSX.Element;
114
+
115
+ export { Button, Fade, Hero, Icon, Navbar, Showcase, Slider };
package/dist/index.esm.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import React__default, { forwardRef, useContext, useState, useRef, useEffect } from 'react';
2
+ import React__default, { forwardRef, useContext, useState, useRef, useEffect, useImperativeHandle, useMemo, Children, useLayoutEffect, useCallback } from 'react';
3
3
 
4
4
  /******************************************************************************
5
5
  Copyright (c) Microsoft Corporation.
@@ -18,6 +18,16 @@ PERFORMANCE OF THIS SOFTWARE.
18
18
  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
19
19
 
20
20
 
21
+ function __spreadArray(to, from, pack) {
22
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
23
+ if (ar || !(i in from)) {
24
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
25
+ ar[i] = from[i];
26
+ }
27
+ }
28
+ return to.concat(ar || Array.prototype.slice.call(from));
29
+ }
30
+
21
31
  function __makeTemplateObject(cooked, raw) {
22
32
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
23
33
  return cooked;
@@ -1920,8 +1930,8 @@ tags.forEach(function (tagName) {
1920
1930
  });
1921
1931
 
1922
1932
  function Icon(props) {
1923
- var _a = props.color, color = _a === undefined ? 'white' : _a, icon = props.icon, size = props.size, withBorder = props.withBorder, link = props.link;
1924
- return (React__default.createElement(IconContainer, { color: color, size: size, withBorder: withBorder, onClick: function () { return window.open(link, "_blank"); } },
1933
+ var _a = props.color, color = _a === undefined ? 'white' : _a, icon = props.icon, size = props.size, withBorder = props.withBorder, callback = props.callback;
1934
+ return (React__default.createElement(IconContainer, { color: color, size: size, withBorder: withBorder, onClick: function () { return callback(); } },
1925
1935
  icon === "twitter" && (React__default.createElement("svg", { width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
1926
1936
  React__default.createElement("path", { d: "M7.22838 0H0.34375L8.46766 10.4263L0.786371 18.9328H3.3926L9.67543 11.9759L15.0966 18.9328H21.9812L13.515 8.06725L20.801 0H18.1946L12.3072 6.51855L7.22838 0ZM16.0801 17.0395L4.27784 1.89327H6.24482L18.0471 17.0395H16.0801Z" }))),
1927
1937
  icon === "instagram" && (React__default.createElement("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1937,8 +1947,8 @@ function Icon(props) {
1937
1947
  icon === "arrow-caret" && (React__default.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
1938
1948
  React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", "stroke-width": "1.5" })))));
1939
1949
  }
1940
- var IconContainer = newStyled.span(templateObject_1$5 || (templateObject_1$5 = __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: 4px;\n transition: all 0.2s;\n cursor: pointer;\n svg {\n transition: all 0.2s;\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\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: 4px;\n transition: all 0.2s;\n cursor: pointer;\n svg {\n transition: all 0.2s;\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\n }\n }\n"])), function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? "2px solid ".concat(props.color) : "unset"; }, function (props) { return props.withBorder ? "53%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; });
1941
- var templateObject_1$5;
1950
+ var IconContainer = newStyled.button(templateObject_1$7 || (templateObject_1$7 = __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: 4px;\n transition: all 0.2s;\n cursor: pointer;\n svg {\n transition: all 0.2s;\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\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: 4px;\n transition: all 0.2s;\n cursor: pointer;\n svg {\n transition: all 0.2s;\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\n }\n }\n"])), function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? "2px solid ".concat(props.color) : "unset"; }, function (props) { return props.withBorder ? "53%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; });
1951
+ var templateObject_1$7;
1942
1952
 
1943
1953
  var theme = {
1944
1954
  primary: "#DC3737",
@@ -1988,11 +1998,11 @@ function Button(props) {
1988
1998
  React__default.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
1989
1999
  }
1990
2000
  }
1991
- var DefaultButton = newStyled.button(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
1992
- var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"], ["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || 'transparent'; }, function (props) { return props.color || theme.black; }, 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; });
1993
- var PillButton = newStyled(DefaultButton)(templateObject_3$3 || (templateObject_3$3 = __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 "])));
2001
+ var DefaultButton = newStyled.button(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
2002
+ var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"], ["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || 'transparent'; }, function (props) { return props.color || theme.black; }, 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; });
2003
+ var PillButton = newStyled(DefaultButton)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "], ["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "])));
1994
2004
  var RoundedButton = newStyled(DefaultButton)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
1995
- var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4$1;
2005
+ var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$1;
1996
2006
 
1997
2007
  function insertWithoutScoping(cache, serialized) {
1998
2008
  if (cache.inserted[serialized.name] === undefined) {
@@ -2134,13 +2144,13 @@ var _createEmotion = createEmotion({
2134
2144
  }),
2135
2145
  keyframes = _createEmotion.keyframes;
2136
2146
 
2137
- var appearAnimation = keyframes(templateObject_1$3 || (templateObject_1$3 = __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"])));
2138
- var disappearAnimation = keyframes(templateObject_2$2 || (templateObject_2$2 = __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"])));
2139
- var fadeInFromLeft = keyframes(templateObject_3$2 || (templateObject_3$2 = __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"])));
2147
+ var appearAnimation = keyframes(templateObject_1$5 || (templateObject_1$5 = __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"])));
2148
+ var disappearAnimation = keyframes(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"], ["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"])));
2149
+ var fadeInFromLeft = keyframes(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
2140
2150
  var fadeInFromRight = keyframes(templateObject_4 || (templateObject_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"])));
2141
2151
  var fadeInFromTop = keyframes(templateObject_5 || (templateObject_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"])));
2142
2152
  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"])));
2143
- var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4, templateObject_5, templateObject_6;
2153
+ var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6;
2144
2154
 
2145
2155
  function Navbar(props) {
2146
2156
  var logo = props.logo, items = props.items, button = props.button, config = props.config;
@@ -2166,23 +2176,23 @@ function Navbar(props) {
2166
2176
  })),
2167
2177
  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))));
2168
2178
  }
2169
- var NavbarContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; }, function (props) { return props.centeredItems ? 'unset' : 'auto'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, disappearAnimation, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, appearAnimation, appearAnimation);
2170
- var Logo = newStyled.img(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
2171
- var ControlledNavItem = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "], ["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "])));
2172
- var templateObject_1$2, templateObject_2$1, templateObject_3$1;
2179
+ var NavbarContainer = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; }, function (props) { return props.centeredItems ? 'unset' : 'auto'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, disappearAnimation, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, appearAnimation, appearAnimation);
2180
+ var Logo = newStyled.img(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
2181
+ var ControlledNavItem = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "], ["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "])));
2182
+ var templateObject_1$4, templateObject_2$3, templateObject_3$2;
2173
2183
 
2174
2184
  function Hero(props) {
2175
2185
  var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
2176
2186
  var _b = useState(imageUrls && imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
2177
2187
  return (React__default.createElement(React__default.Fragment, null,
2178
- React__default.createElement(Container$1, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
2188
+ React__default.createElement(Container$3, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
2179
2189
  overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
2180
2190
  React__default.createElement(HeroContent, null, children))));
2181
2191
  }
2182
- var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"])), function (props) { return "calc(".concat(props.height, " - ").concat(props.marginTop, ")"); }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; });
2183
- var Overlay = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
2184
- var HeroContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
2185
- var templateObject_1$1, templateObject_2, templateObject_3;
2192
+ var Container$3 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"])), function (props) { return "calc(".concat(props.height, " - ").concat(props.marginTop, ")"); }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; });
2193
+ var Overlay = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
2194
+ var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
2195
+ var templateObject_1$3, templateObject_2$2, templateObject_3$1;
2186
2196
 
2187
2197
  function useIntObs(_a) {
2188
2198
  var _b;
@@ -2252,7 +2262,7 @@ function Fade(props) {
2252
2262
  root: document,
2253
2263
  rootMargin: "-10% 0% -10% 0%"
2254
2264
  }), isIntersecting = _b.isIntersecting, ref = _b.ref;
2255
- return (React__default.createElement(Container, { ref: ref, isVisible: isIntersecting, animation: function () {
2265
+ return (React__default.createElement(Container$2, { ref: ref, isVisible: isIntersecting, animation: function () {
2256
2266
  switch (type) {
2257
2267
  case 'bottom-to-top':
2258
2268
  return fadeInFromBottom;
@@ -2265,8 +2275,120 @@ function Fade(props) {
2265
2275
  }
2266
2276
  } }, children));
2267
2277
  }
2268
- var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
2269
- var templateObject_1;
2278
+ var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
2279
+ var templateObject_1$2;
2280
+
2281
+ function Slider(props) {
2282
+ 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, onSlideChange = props.onSlideChange;
2283
+ var wrapperRef = useRef(null);
2284
+ var _c = useState(1), currentSlide = _c[0], setCurrentSlide = _c[1];
2285
+ var _d = useState(0), translateX = _d[0], setTranslateX = _d[1];
2286
+ useImperativeHandle(forwardedRef, function () {
2287
+ return {
2288
+ goTo: function (option) { return goTo(option); },
2289
+ };
2290
+ }, [children, currentSlide]);
2291
+ var items = useMemo(function () {
2292
+ if (children.length > 1) {
2293
+ var slides = Children.map(children, function (child, index) { return (React__default.createElement(Slide, { key: index }, child)); });
2294
+ return __spreadArray(__spreadArray([
2295
+ React__default.createElement(Slide, { key: children.length + 1, style: { backgroundColor: "red" } }, children[children.length - 1])
2296
+ ], slides, true), [
2297
+ React__default.createElement(Slide, { key: children.length + 2, style: { backgroundColor: "red" } }, children[0])
2298
+ ], false);
2299
+ }
2300
+ return React__default.createElement(Slide, null, children[0]);
2301
+ }, []);
2302
+ useLayoutEffect(function () {
2303
+ setTranslateX(wrapperRef.current.clientWidth * currentSlide);
2304
+ }, []);
2305
+ useEffect(function () {
2306
+ if (onSlideChange) {
2307
+ onSlideChange(currentSlide);
2308
+ }
2309
+ }, [currentSlide, onSlideChange]);
2310
+ var goTo = useCallback(function (option) {
2311
+ wrapperRef.current.style.transitionDuration = '400ms';
2312
+ switch (option) {
2313
+ case 'prev':
2314
+ if (currentSlide <= 1) {
2315
+ setTranslateX(0);
2316
+ setCurrentSlide(children.length);
2317
+ }
2318
+ else {
2319
+ setTranslateX(wrapperRef.current.clientWidth * (currentSlide - 1));
2320
+ setCurrentSlide(function (prev) { return --prev; });
2321
+ }
2322
+ break;
2323
+ case 'next':
2324
+ if (currentSlide >= children.length) {
2325
+ setTranslateX(wrapperRef.current.clientWidth * (children.length + 1));
2326
+ setCurrentSlide(1);
2327
+ }
2328
+ else {
2329
+ setTranslateX(wrapperRef.current.clientWidth * (currentSlide + 1));
2330
+ setCurrentSlide(function (next) { return ++next; });
2331
+ }
2332
+ break;
2333
+ }
2334
+ }, [children, currentSlide]);
2335
+ useEffect(function () {
2336
+ var transitionEnd = function () {
2337
+ if (currentSlide <= 1) {
2338
+ wrapperRef.current.style.transitionDuration = '0ms';
2339
+ setTranslateX(wrapperRef.current.clientWidth * currentSlide);
2340
+ }
2341
+ if (currentSlide >= children.length) {
2342
+ wrapperRef.current.style.transitionDuration = '0ms';
2343
+ setTranslateX(wrapperRef.current.clientWidth * children.length);
2344
+ }
2345
+ };
2346
+ document.addEventListener("transitionend", transitionEnd);
2347
+ return function () {
2348
+ document.removeEventListener("transitionend", transitionEnd);
2349
+ };
2350
+ }, [currentSlide, children]);
2351
+ useEffect(function () {
2352
+ if (autoplayTicTime) {
2353
+ window.setInterval(function () {
2354
+ goTo('next');
2355
+ }, autoplayTicTime);
2356
+ }
2357
+ }, [goTo, autoplayTicTime]);
2358
+ return (React__default.createElement(Container$1, { visibleInactiveSlides: visibleInactiveSlides },
2359
+ React__default.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
2360
+ showArrowKeys && (React__default.createElement(React__default.Fragment, null,
2361
+ React__default.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
2362
+ React__default.createElement(Icon, { callback: function () { return goTo('next'); }, color: 'black', icon: 'arrow-long' })))));
2363
+ }
2364
+ var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow: ", ";\n width: 100%;\n button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"], ["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow: ", ";\n width: 100%;\n button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"])), function (props) { return props.visibleInactiveSlides ? 'visible' : 'hidden'; });
2365
+ var SlidesWrapper = newStyled.ul(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"], ["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"])), function (props) { return -props.translateX; });
2366
+ 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"])));
2367
+ var templateObject_1$1, templateObject_2$1, templateObject_3;
2368
+
2369
+ function Showcase(props) {
2370
+ var items = props.items, backgroundColor = props.backgroundColor;
2371
+ var _a = useState(undefined), hoveredItemKey = _a[0], setHoveredItemKey = _a[1];
2372
+ var eightItems = useMemo(function () {
2373
+ if (items.length >= 8) {
2374
+ return items.slice(0, 7);
2375
+ }
2376
+ var result = [];
2377
+ var i = 0;
2378
+ while (result.length < 8) {
2379
+ result.push(items[i % items.length]);
2380
+ i++;
2381
+ }
2382
+ return result;
2383
+ }, [items]);
2384
+ return (React__default.createElement(Container, { onMouseLeave: function () { return setHoveredItemKey(undefined); }, backgroundColor: backgroundColor }, eightItems.map(function (item, index) {
2385
+ 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 },
2386
+ React__default.createElement("span", null, formatText(item.label, 'uppercase')))) : React__default.createElement(React__default.Fragment, null);
2387
+ })));
2388
+ }
2389
+ var Container = newStyled.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 2px;\n padding: 2px 0;\n background-color: ", ";\n"], ["\n width: 100vw;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 2px;\n padding: 2px 0;\n background-color: ", ";\n"])), function (props) { return props.backgroundColor || 'white'; });
2390
+ var ShowcaseItem = newStyled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"], ["\n position: relative;\n height: 25vw;\n background-image: url(", ");\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: white;\n cursor: pointer;\n transition: 200ms;\n filter: ", ";\n span {\n z-index: 3;\n position: relative;\n letter-spacing: 2px;\n font-size: 1.1em;\n &::before{\n content: \"\";\n position: absolute;\n width: 40%;\n background-color: white;\n height: 2px;\n bottom: -8px;\n left: 30%;\n }\n }\n &::before{\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 30%;\n }\n"])), function (props) { return props.backgroundUrl; }, function (props) { return props.hoveredItemKey === props.itemKey || props.hoveredItemKey === undefined ? 'unset' : 'brightness(0.3)'; });
2391
+ var templateObject_1, templateObject_2;
2270
2392
 
2271
- export { Button, Fade, Hero, Navbar };
2393
+ export { Button, Fade, Hero, Icon, Navbar, Showcase, Slider };
2272
2394
  //# sourceMappingURL=index.esm.js.map