wex-ui-lib 1.1.0 → 1.1.2

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
@@ -96,6 +96,8 @@ type SliderProps = {
96
96
  visibleInactiveSlides?: boolean;
97
97
  forwardedRef?: React$1.Ref<SliderRef>;
98
98
  showArrowKeys?: boolean;
99
+ showRadioButtons?: boolean;
100
+ radioButtonsColor?: string;
99
101
  onSlideChange?: (slide: number) => void;
100
102
  };
101
103
 
package/dist/index.esm.js CHANGED
@@ -2006,8 +2006,8 @@ function Button(props) {
2006
2006
  var DefaultButton = newStyled.button(templateObject_1$7 || (templateObject_1$7 = __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; });
2007
2007
  var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$6 || (templateObject_2$6 = __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; });
2008
2008
  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 "])));
2009
- var RoundedButton = newStyled(DefaultButton)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
2010
- var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$1;
2009
+ var RoundedButton = newStyled(DefaultButton)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
2010
+ var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$2;
2011
2011
 
2012
2012
  function insertWithoutScoping(cache, serialized) {
2013
2013
  if (cache.inserted[serialized.name] === undefined) {
@@ -2152,10 +2152,10 @@ var _createEmotion = createEmotion({
2152
2152
  var appearAnimation = keyframes(templateObject_1$6 || (templateObject_1$6 = __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"])));
2153
2153
  var disappearAnimation = keyframes(templateObject_2$5 || (templateObject_2$5 = __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"])));
2154
2154
  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"])));
2155
- 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"])));
2156
- 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"])));
2155
+ var fadeInFromRight = keyframes(templateObject_4$1 || (templateObject_4$1 = __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"])));
2156
+ var fadeInFromTop = keyframes(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
2157
2157
  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"])));
2158
- var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6;
2158
+ var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6;
2159
2159
 
2160
2160
  function Navbar(props) {
2161
2161
  var logo = props.logo, items = props.items, button = props.button, config = props.config;
@@ -2190,11 +2190,11 @@ function Hero(props) {
2190
2190
  var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
2191
2191
  var _b = useState(imageUrls && imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
2192
2192
  return (React__default.createElement(React__default.Fragment, null,
2193
- React__default.createElement(Container$4, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
2193
+ React__default.createElement(Container$3, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
2194
2194
  overlay && (React__default.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
2195
2195
  React__default.createElement(HeroContent, null, children))));
2196
2196
  }
2197
- var Container$4 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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; });
2197
+ var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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; });
2198
2198
  var Overlay = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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; });
2199
2199
  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"])));
2200
2200
  var templateObject_1$4, templateObject_2$3, templateObject_3$1;
@@ -2267,7 +2267,7 @@ function Fade(props) {
2267
2267
  root: document,
2268
2268
  rootMargin: "-10% 0% -10% 0%"
2269
2269
  }), isIntersecting = _b.isIntersecting, ref = _b.ref;
2270
- return (React__default.createElement(Container$3, { ref: ref, isVisible: isIntersecting, animation: function () {
2270
+ return (React__default.createElement(Container$2, { ref: ref, isVisible: isIntersecting, animation: function () {
2271
2271
  switch (type) {
2272
2272
  case 'bottom-to-top':
2273
2273
  return fadeInFromBottom;
@@ -2280,14 +2280,14 @@ function Fade(props) {
2280
2280
  }
2281
2281
  } }, children));
2282
2282
  }
2283
- var Container$3 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
2283
+ var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
2284
2284
  var templateObject_1$3;
2285
2285
 
2286
2286
  function Slider(props) {
2287
- 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;
2287
+ 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;
2288
2288
  var wrapperRef = useRef(null);
2289
- var _c = useState(1), currentSlide = _c[0], setCurrentSlide = _c[1];
2290
- var _d = useState(0), translateX = _d[0], setTranslateX = _d[1];
2289
+ var _d = useState(1), currentSlide = _d[0], setCurrentSlide = _d[1];
2290
+ var _e = useState(0), translateX = _e[0], setTranslateX = _e[1];
2291
2291
  useImperativeHandle(forwardedRef, function () {
2292
2292
  return {
2293
2293
  goTo: function (option) { return goTo(option); },
@@ -2302,7 +2302,7 @@ function Slider(props) {
2302
2302
  React__default.createElement(Slide, { key: children.length + 2, style: { backgroundColor: "red" } }, children[0])
2303
2303
  ], false);
2304
2304
  }
2305
- return React__default.createElement(Slide, null, children[0]);
2305
+ return [React__default.createElement(Slide, null, children[0])];
2306
2306
  }, []);
2307
2307
  useLayoutEffect(function () {
2308
2308
  setTranslateX(wrapperRef.current.clientWidth * currentSlide);
@@ -2335,6 +2335,10 @@ function Slider(props) {
2335
2335
  setCurrentSlide(function (next) { return ++next; });
2336
2336
  }
2337
2337
  break;
2338
+ default:
2339
+ setTranslateX(wrapperRef.current.clientWidth * (option));
2340
+ setCurrentSlide(option);
2341
+ break;
2338
2342
  }
2339
2343
  }, [children, currentSlide]);
2340
2344
  useEffect(function () {
@@ -2360,16 +2364,20 @@ function Slider(props) {
2360
2364
  }, autoplayTicTime);
2361
2365
  }
2362
2366
  }, [goTo, autoplayTicTime]);
2363
- return (React__default.createElement(Container$2, { visibleInactiveSlides: visibleInactiveSlides },
2364
- React__default.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
2365
- showArrowKeys && (React__default.createElement(React__default.Fragment, null,
2366
- React__default.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
2367
- React__default.createElement(Icon, { callback: function () { return goTo('next'); }, color: 'black', icon: 'arrow-long' })))));
2367
+ return (React__default.createElement(React__default.Fragment, null,
2368
+ React__default.createElement(SliderContainer, { visibleInactiveSlides: visibleInactiveSlides },
2369
+ React__default.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
2370
+ showArrowKeys && (React__default.createElement(React__default.Fragment, null,
2371
+ React__default.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
2372
+ React__default.createElement(Icon, { callback: function () { return goTo('next'); }, color: 'black', icon: 'arrow-long' })))),
2373
+ showRadioButtons && (React__default.createElement(RadiosContainer, null, children.map(function (item, index) { return (React__default.createElement(RadioButton, { key: index, onClick: function () { return goTo(index + 1); }, radioButtonsColor: radioButtonsColor, isSelected: currentSlide === index + 1 })); })))));
2368
2374
  }
2369
- var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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'; });
2375
+ var SliderContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow-X: ", ";\n overflow-y: visible;\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-X: ", ";\n overflow-y: visible;\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'; });
2370
2376
  var SlidesWrapper = newStyled.ul(templateObject_2$2 || (templateObject_2$2 = __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; });
2371
2377
  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"])));
2372
- var templateObject_1$2, templateObject_2$2, templateObject_3;
2378
+ 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"])));
2379
+ 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"; });
2380
+ var templateObject_1$2, templateObject_2$2, templateObject_3, templateObject_4, templateObject_5;
2373
2381
 
2374
2382
  function Showcase(props) {
2375
2383
  var items = props.items, backgroundColor = props.backgroundColor;
@@ -2396,7 +2404,7 @@ var ShowcaseItem = newStyled.a(templateObject_2$1 || (templateObject_2$1 = __mak
2396
2404
  var templateObject_1$1, templateObject_2$1;
2397
2405
 
2398
2406
  function Footer(props) {
2399
- var logoUrl = props.logoUrl, subtitle = props.subtitle; props.backgroundColor; var _a = props.socialMediaUrls, socialMediaUrls = _a === undefined ? {
2407
+ var logoUrl = props.logoUrl, subtitle = props.subtitle, backgroundColor = props.backgroundColor, _a = props.socialMediaUrls, socialMediaUrls = _a === undefined ? {
2400
2408
  instagram: "",
2401
2409
  twitter: "",
2402
2410
  facebook: "",
@@ -2409,7 +2417,7 @@ function Footer(props) {
2409
2417
  address: "",
2410
2418
  address2: "",
2411
2419
  } : _b, navItems = props.navItems;
2412
- return (React__default.createElement(Container, null,
2420
+ return (React__default.createElement(Container, { backgroundColor: backgroundColor },
2413
2421
  React__default.createElement("div", { className: 'left' },
2414
2422
  React__default.createElement("img", { src: logoUrl, alt: "logo" }),
2415
2423
  React__default.createElement("h5", null, subtitle),
@@ -2428,7 +2436,7 @@ function Footer(props) {
2428
2436
  contactData.email2 && React__default.createElement("p", null, contactData.email2)),
2429
2437
  React__default.createElement("nav", null, navItems && navItems.map(function (item) { return React__default.createElement("a", { href: '#', onClick: function () { return item.callback; } }, item.label); })))));
2430
2438
  }
2431
- 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 }\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 }\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"])), theme.black2, theme.primary);
2439
+ 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 }\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 }\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);
2432
2440
  newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n"], ["\n\n"])));
2433
2441
  var templateObject_1, templateObject_2;
2434
2442