@rabbitio/ui-kit 1.0.0-beta.84 → 1.0.0-beta.86

package/dist/index.module.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback, forwardRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import AnimateHeight from 'react-animate-height';
-import ResizeObserver from 'resize-observer-polyfill';
+import ResizeObserver$1 from 'resize-observer-polyfill';
 import { clearAllBodyScrollLocks, enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
 import animateScrollTo from 'animated-scroll-to';
 import copy from 'clipboard-copy';
@@ -2505,7 +2505,7 @@ var Dialog = function Dialog(_ref) {
   }, [animationConfiguration]);
   useEffect(function () {
     if (currentStepRef.current) {
-      resizeObserverRef.current = new ResizeObserver(function (entries) {
+      resizeObserverRef.current = new ResizeObserver$1(function (entries) {
         if (entries === void 0) {
           entries = [];
         }
@@ -7037,8 +7037,8 @@ var CoinPicker = function CoinPicker(_ref) {
     setIsListFull: setIsListFull,
     setIsSearchResultEmpty: setIsSearchResultEmpty,
     triggerLoadMoreCoins: triggerLoadMoreCoins,
-    coinsList: allCoins,
-    coinsBundle: allCoins.map(function (coin, index) {
+    coinsList: coins,
+    coinsBundle: coins == null ? void 0 : coins.map(function (coin, index) {
       return {
         coin: coin,
         component: function component() {
@@ -7579,7 +7579,7 @@ WaitlistSubscription.propTypes = {
   translations: PropTypes.object
 };
 
-var s = {"logo-carousel":"_CgRBd","logo-carousel-slide":"_hIh2D","slide":"_Gu7XN"};
+var s = {"logo-carousel":"_CgRBd","logo-carousel-wrapper":"_cVsiX","slide":"_Gu7XN","logo-carousel-slide":"_hIh2D","clickable":"_VuuGX","grayscale":"_P9ByJ","easeIn":"_i56By"};
 
 /**
  * LogoCarousel component renders a set of logos in a sliding carousel.
@@ -7588,11 +7588,43 @@ var s = {"logo-carousel":"_CgRBd","logo-carousel-slide":"_hIh2D","slide":"_Gu7XN
  *
  * @param {Object} props - The props object for this component.
  * @param {Array<{logo: string, url: string}>} props.logos - Array of objects representing logos and their corresponding URLs.
+ * @param {boolean} props.grayscale - Enable the grayscale mode for the logos.
  */
 var LogoCarousel = function LogoCarousel(_ref) {
-  var logos = _ref.logos;
+  var _wrapperRef$current;
+  var logos = _ref.logos,
+    _ref$grayscale = _ref.grayscale,
+    grayscale = _ref$grayscale === void 0 ? false : _ref$grayscale;
+  var _useState = useState(),
+    multiplier = _useState[0],
+    setMultiplier = _useState[1];
+  var _useState2 = useState(0),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var wrapperRef = useRef();
+  useEffect(function () {
+    var resizeObserver = new ResizeObserver(function (entries) {
+      return entries.map(function (entry) {
+        return setWidth(entry.contentRect.width);
+      });
+    });
+    if (wrapperRef.current) resizeObserver.observe(wrapperRef.current);
+    return function () {
+      if (wrapperRef.current) resizeObserver.unobserve(wrapperRef.current);
+    };
+  }, []);
+  useEffect(function () {
+    setMultiplier(wrapperRef.current.clientWidth / 120);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrapperRef, wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.clientWidth, logos, width]);
   return /*#__PURE__*/React.createElement("div", {
     className: s["logo-carousel"]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: s["logo-carousel-wrapper"],
+    ref: wrapperRef,
+    style: {
+      animationDuration: multiplier + "s"
+    }
   }, [].concat(Array(2)).map(function (z, i) {
     return /*#__PURE__*/React.createElement("div", {
       className: s["logo-carousel-slide"],
@@ -7600,20 +7632,25 @@ var LogoCarousel = function LogoCarousel(_ref) {
     }, logos.map(function (item, index) {
       return /*#__PURE__*/React.createElement("a", {
         key: "logo-carousel-slide-" + i + "-" + index,
-        href: item.url,
+        className: [item != null && item.url ? s["clickable"] : null, grayscale ? s["grayscale"] : null].join(" "),
+        href: item == null ? void 0 : item.url,
         target: "_blank"
       }, /*#__PURE__*/React.createElement("img", {
         src: item.logo,
         alt: "logo"
       }));
     }));
-  }));
+  })));
 };
 LogoCarousel.propTypes = {
   logos: PropTypes.arrayOf(PropTypes.shape({
     logo: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired
-  })).isRequired
+    url: PropTypes.string
+  })).isRequired,
+  grayscale: PropTypes.bool
+};
+LogoCarousel.defaultProps = {
+  grayscale: false
 };
 
 var PARAMETER_VALUES_SEPARATOR = "|*|"; // Sting that with high probability will not be in the user's data