@stokr/components-library 3.0.40 → 3.0.42

package/dist/components/2FA/Connect2FA.js

@@ -5,7 +5,7 @@ import { Text } from "../Text/Text.styles.js";
 import { Button } from "../Button/Button.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { ModalWrapper, ModalInner } from "../Modal/Modal.styles.js";
-import QRCode from "react-qr-code";
+import { QRCodeSVG } from "qrcode.react";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import stdin_default$1 from "../CryptoAddress/CryptoAddress.js";
 import { useMobileView } from "../../utils/customHooks.js";
@@ -24,11 +24,10 @@ const Connect2FA = (props) => {
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
       totpData && /* @__PURE__ */ jsxs(ComponentWrapper, { center: true, noPaddingHorizontal: true, children: [
         !isMobile && /* @__PURE__ */ jsx(
-          QRCode,
+          QRCodeSVG,
           {
             size: 180,
-            value: totpData?.totpUri,
-            viewBox: `0 0 256 256`
+            value: totpData?.totpUri
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/components/Button/Button.styles.js

@@ -45,7 +45,6 @@ const Button = styled.button.withConfig({
   user-select: none;
   cursor: pointer;
   transition:
-    color 0.2s,
     background-color 0.2s,
     border-color 0.2s;
 

package/dist/components/Header/Header.js

@@ -298,7 +298,15 @@ function HeaderView({
       ] }),
       /* @__PURE__ */ jsxs(MobileMenu, { isActive: currentActiveMenu === "main", withSidebar, children: [
         /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsxs("ul", { children: [
-          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/featured-assets", "data-cy": "invest-nav-link", children: "Invest" }) }),
+          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
+            MobileMenuLink,
+            {
+              to: newPlatformUrl + "/featured-assets",
+              "data-cy": "invest-nav-link",
+              onClick: () => toggleMenu("main"),
+              children: "Invest"
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             RenderSubMenu,
             {
@@ -323,7 +331,7 @@ function HeaderView({
               }
             }
           ),
-          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/team", children: "Team" }) })
+          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/team", onClick: () => toggleMenu("main"), children: "Team" }) })
         ] }) }) }) }),
         hasLoggedInSession(user) ? /* @__PURE__ */ jsxs(Fragment, { children: [
           !signupFlow && /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, flexColumn: true, borderTop: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsx("ul", { children: isAdmin ? /* @__PURE__ */ jsx(Fragment, { children: isVentureDashboard ? /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(stdin_default$1, { to: "/settings", children: "Settings" }) }) : /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(stdin_default$1, { to: getConfig("adminUrl"), onClick: () => toggleMenu("main"), children: "Dashboard" }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/HeroBlock/HeroVideoBlock.js

@@ -1,6 +1,6 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useRef, useEffect } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 const VideoContainer = styled.div`
   position: relative;
@@ -16,14 +16,41 @@ const VideoBackground = styled.video`
   top: 0;
   left: 0;
 `;
-const now = Date.now();
+const CLOUDINARY_BASE = "https://res.cloudinary.com/stokr/video/upload";
+const CLOUDINARY_VERSION = "v1745923531";
+const CLOUDINARY_PUBLIC_ID = "Static/Hero_section_video_kuatj1";
+const VIDEO_SRC_DESKTOP = `${CLOUDINARY_BASE}/f_auto,q_auto:good,vc_auto,w_1920,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.mp4`;
+const VIDEO_SRC_MOBILE = `${CLOUDINARY_BASE}/f_auto,q_auto:good,vc_auto,w_1280,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.mp4`;
+const VIDEO_POSTER = `${CLOUDINARY_BASE}/so_0,f_auto,q_auto:good,w_1920,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.jpg`;
+const shouldLoadVideo = () => {
+  if (typeof navigator === "undefined") return true;
+  const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+  if (conn) {
+    if (conn.saveData) return false;
+    if (conn.effectiveType && ["slow-2g", "2g"].includes(conn.effectiveType)) return false;
+  }
+  if (typeof window !== "undefined" && window.matchMedia) {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
+  }
+  return true;
+};
 const HeroVideoBlock = () => {
   const videoRef = useRef(null);
   const lastTimeRef = useRef(0);
-  const lastVisibleTime = useRef(now);
-  const playVideo = () => {
-    if (!videoRef.current) return;
+  const lastVisibleTime = useRef(0);
+  const visibilityTimeoutRef = useRef(null);
+  const hasTriggeredLoadRef = useRef(false);
+  const [shouldAutoplay] = useState(() => shouldLoadVideo());
+  const playVideo = useCallback(() => {
+    if (!videoRef.current || !shouldAutoplay) return;
     const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    if (!hasTriggeredLoadRef.current) {
+      hasTriggeredLoadRef.current = true;
+      try {
+        videoRef.current.load();
+      } catch (_e) {
+      }
+    }
     if (videoRef.current.currentTime > 0) {
       lastTimeRef.current = videoRef.current.currentTime;
     }
@@ -40,7 +67,7 @@ const HeroVideoBlock = () => {
         }
       });
     }
-  };
+  }, [shouldAutoplay]);
   const handleVisibilityChange = (isVisible) => {
     if (isVisible) {
       lastVisibleTime.current = Date.now();
@@ -59,13 +86,13 @@ const HeroVideoBlock = () => {
     }
   });
   useEffect(() => {
-    let visibilityTimeoutId;
     const handleDocVisibilityChange = () => {
       if (document.visibilityState === "visible") {
         lastVisibleTime.current = Date.now();
-        if (visibilityTimeoutId != null) clearTimeout(visibilityTimeoutId);
-        visibilityTimeoutId = setTimeout(() => {
+        if (visibilityTimeoutRef.current) clearTimeout(visibilityTimeoutRef.current);
+        visibilityTimeoutRef.current = setTimeout(() => {
           playVideo();
+          visibilityTimeoutRef.current = null;
         }, 300);
       } else if (videoRef.current) {
         lastTimeRef.current = videoRef.current.currentTime;
@@ -74,29 +101,27 @@ const HeroVideoBlock = () => {
     document.addEventListener("visibilitychange", handleDocVisibilityChange);
     playVideo();
     return () => {
-      if (visibilityTimeoutId != null) clearTimeout(visibilityTimeoutId);
+      if (visibilityTimeoutRef.current) clearTimeout(visibilityTimeoutRef.current);
       document.removeEventListener("visibilitychange", handleDocVisibilityChange);
     };
-  }, []);
+  }, [playVideo]);
   return /* @__PURE__ */ jsx("div", { ref: windowViewportRef, children: /* @__PURE__ */ jsx(VideoContainer, { children: /* @__PURE__ */ jsx(
     VideoBackground,
     {
       ref: videoRef,
-      autoPlay: true,
+      autoPlay: shouldAutoplay,
       muted: true,
       loop: true,
       playsInline: true,
-      preload: "metadata",
+      preload: "none",
+      disableRemotePlayback: true,
+      poster: VIDEO_POSTER,
       "data-vsc-ignore": "true",
       fetchPriority: "high",
-      children: /* @__PURE__ */ jsx(
-        "source",
-        {
-          src: "https://res.cloudinary.com/stokr/video/upload/f_auto,q_auto:best/v1745923531/Static/Hero_section_video_kuatj1.mp4",
-          type: "video/mp4",
-          fetchPriority: "high"
-        }
-      )
+      children: shouldAutoplay && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("source", { src: VIDEO_SRC_MOBILE, type: "video/mp4", media: "(max-width: 767px)" }),
+        /* @__PURE__ */ jsx("source", { src: VIDEO_SRC_DESKTOP, type: "video/mp4", media: "(min-width: 768px)" })
+      ] })
     }
   ) }) });
 };

package/dist/components/Input/Select.js

@@ -97,6 +97,7 @@ const Select = (props) => {
     multiple = false,
     menuHeight,
     selectedLabel = "Selected",
+    floatingLabel = true,
     formatCreateLabel,
     dataCy,
     onChange,
@@ -157,9 +158,15 @@ const Select = (props) => {
     }
     return options?.find((o) => o.value === value) || null;
   }, [multiple, creatable, value, options]);
+  const hasValue = useMemo(() => {
+    if (multiple) return currentValue.length > 0;
+    return currentValue != null && currentValue.value !== "";
+  }, [multiple, currentValue]);
+  const isLabelUp = floatingLabel ? hasFocus || hasValue : Boolean(label);
+  const effectivePlaceholder = label ? hasFocus && placeholder ? placeholder : "" : placeholder;
   return /* @__PURE__ */ jsxs(Wrapper, { children: [
     /* @__PURE__ */ jsx(IoniconsStyles, {}),
-    label && /* @__PURE__ */ jsx(Label, { isUp: Boolean(label), active: hasFocus, error: error && touched, htmlFor: id, children: label }),
+    label && /* @__PURE__ */ jsx(Label, { isUp: isLabelUp, active: hasFocus, error: error && touched, htmlFor: id, children: label }),
     /* @__PURE__ */ jsx(
       SelectComponent,
       {
@@ -168,7 +175,7 @@ const Select = (props) => {
         name,
         options,
         value: currentValue,
-        placeholder,
+        placeholder: effectivePlaceholder,
         isMulti: multiple,
         isDisabled: disabled,
         isSearchable: search,
@@ -242,6 +249,8 @@ Select.propTypes = {
   menuHeight: PropTypes.number,
   /** Heading shown above the chips list in multi mode (default: "Selected"). */
   selectedLabel: PropTypes.string,
+  /** Input-like floating label behavior: label starts in-field, moves up on focus/value. */
+  floatingLabel: PropTypes.bool,
   formatCreateLabel: PropTypes.func,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,

package/dist/components/icons/LinkIcon.js

@@ -17,13 +17,13 @@ const LinkIcon = () => /* @__PURE__ */ jsxs(
       /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M312.453,199.601c-6.066-6.102-12.792-11.511-20.053-16.128c-19.232-12.315-41.59-18.859-64.427-18.859\n			c-31.697-0.059-62.106,12.535-84.48,34.987L34.949,308.23c-22.336,22.379-34.89,52.7-34.91,84.318\n			c-0.042,65.98,53.41,119.501,119.39,119.543c31.648,0.11,62.029-12.424,84.395-34.816l89.6-89.6\n			c1.628-1.614,2.537-3.816,2.524-6.108c-0.027-4.713-3.87-8.511-8.583-8.484h-3.413c-18.72,0.066-37.273-3.529-54.613-10.581\n			c-3.195-1.315-6.867-0.573-9.301,1.877l-64.427,64.512c-20.006,20.006-52.442,20.006-72.448,0\n			c-20.006-20.006-20.006-52.442,0-72.448l108.971-108.885c19.99-19.965,52.373-19.965,72.363,0\n			c13.472,12.679,34.486,12.679,47.957,0c5.796-5.801,9.31-13.495,9.899-21.675C322.976,216.108,319.371,206.535,312.453,199.601z"
+          d: "M312.453,199.601c-6.066-6.102-12.792-11.511-20.053-16.128c-19.232-12.315-41.59-18.859-64.427-18.859\r\n			c-31.697-0.059-62.106,12.535-84.48,34.987L34.949,308.23c-22.336,22.379-34.89,52.7-34.91,84.318\r\n			c-0.042,65.98,53.41,119.501,119.39,119.543c31.648,0.11,62.029-12.424,84.395-34.816l89.6-89.6\r\n			c1.628-1.614,2.537-3.816,2.524-6.108c-0.027-4.713-3.87-8.511-8.583-8.484h-3.413c-18.72,0.066-37.273-3.529-54.613-10.581\r\n			c-3.195-1.315-6.867-0.573-9.301,1.877l-64.427,64.512c-20.006,20.006-52.442,20.006-72.448,0\r\n			c-20.006-20.006-20.006-52.442,0-72.448l108.971-108.885c19.99-19.965,52.373-19.965,72.363,0\r\n			c13.472,12.679,34.486,12.679,47.957,0c5.796-5.801,9.31-13.495,9.899-21.675C322.976,216.108,319.371,206.535,312.453,199.601z"
         }
       ) }) }),
       /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M477.061,34.993c-46.657-46.657-122.303-46.657-168.96,0l-89.515,89.429c-2.458,2.47-3.167,6.185-1.792,9.387\n			c1.359,3.211,4.535,5.272,8.021,5.205h3.157c18.698-0.034,37.221,3.589,54.528,10.667c3.195,1.315,6.867,0.573,9.301-1.877\n			l64.256-64.171c20.006-20.006,52.442-20.006,72.448,0c20.006,20.006,20.006,52.442,0,72.448l-80.043,79.957l-0.683,0.768\n			l-27.989,27.819c-19.99,19.965-52.373,19.965-72.363,0c-13.472-12.679-34.486-12.679-47.957,0\n			c-5.833,5.845-9.35,13.606-9.899,21.845c-0.624,9.775,2.981,19.348,9.899,26.283c9.877,9.919,21.433,18.008,34.133,23.893\n			c1.792,0.853,3.584,1.536,5.376,2.304c1.792,0.768,3.669,1.365,5.461,2.048c1.792,0.683,3.669,1.28,5.461,1.792l5.035,1.365\n			c3.413,0.853,6.827,1.536,10.325,2.133c4.214,0.626,8.458,1.025,12.715,1.195h5.973h0.512l5.12-0.597\n			c1.877-0.085,3.84-0.512,6.059-0.512h2.901l5.888-0.853l2.731-0.512l4.949-1.024h0.939c20.961-5.265,40.101-16.118,55.381-31.403\n			l108.629-108.629C523.718,157.296,523.718,81.65,477.061,34.993z"
+          d: "M477.061,34.993c-46.657-46.657-122.303-46.657-168.96,0l-89.515,89.429c-2.458,2.47-3.167,6.185-1.792,9.387\r\n			c1.359,3.211,4.535,5.272,8.021,5.205h3.157c18.698-0.034,37.221,3.589,54.528,10.667c3.195,1.315,6.867,0.573,9.301-1.877\r\n			l64.256-64.171c20.006-20.006,52.442-20.006,72.448,0c20.006,20.006,20.006,52.442,0,72.448l-80.043,79.957l-0.683,0.768\r\n			l-27.989,27.819c-19.99,19.965-52.373,19.965-72.363,0c-13.472-12.679-34.486-12.679-47.957,0\r\n			c-5.833,5.845-9.35,13.606-9.899,21.845c-0.624,9.775,2.981,19.348,9.899,26.283c9.877,9.919,21.433,18.008,34.133,23.893\r\n			c1.792,0.853,3.584,1.536,5.376,2.304c1.792,0.768,3.669,1.365,5.461,2.048c1.792,0.683,3.669,1.28,5.461,1.792l5.035,1.365\r\n			c3.413,0.853,6.827,1.536,10.325,2.133c4.214,0.626,8.458,1.025,12.715,1.195h5.973h0.512l5.12-0.597\r\n			c1.877-0.085,3.84-0.512,6.059-0.512h2.901l5.888-0.853l2.731-0.512l4.949-1.024h0.939c20.961-5.265,40.101-16.118,55.381-31.403\r\n			l108.629-108.629C523.718,157.296,523.718,81.65,477.061,34.993z"
         }
       ) }) }),
       /* @__PURE__ */ jsx("g", {}),

package/dist/runtime-config.js

@@ -1,4 +1,4 @@
-const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false, "VITE_ADMIN_URL": "https://admin.stokr.info", "VITE_API_URL": "https://platform-api.stokr.info/api/v1", "VITE_BASE_URL_PUBLIC": "https://platform-api-no-auth.stokr.info/api/v1", "VITE_COOKIE_DOMAIN": "localhost", "VITE_DASHBOARD_URL": "https://dashboard.stokr.info", "VITE_FIREBASE_API_KEY": "AIzaSyBBp_3Romnfv--YpUuV0mJgDymvSp3oq0c", "VITE_FIREBASE_APP_ID": "1:568229412804:web:2391857e3e2a0b02346e91", "VITE_FIREBASE_AUTH_DOMAIN": "stokr-development-env.firebaseapp.com", "VITE_FIREBASE_MEASUREMENT_ID": "G-CP53SZVSMN", "VITE_FIREBASE_MESSAGING_SENDER_ID": "568229412804", "VITE_FIREBASE_PROJECT_ID": "stokr-development-env", "VITE_FIREBASE_STORAGE_BUCKET": "stokr-development-env.appspot.com", "VITE_MIXPANEL_TOKEN": "a7bb1e881f9b2600762fded84d8ce0ea", "VITE_ONBOARDING_URL": "https://signup.stokr.info", "VITE_PHOTO_API_URL": "https://platform-api.stokr.info/api/v1", "VITE_REGISTER_URL": "https://stokr.info/signup", "VITE_WEBSITE_DOMAIN": "stokr.info" };
+const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false };
 const _overrides = {};
 const ENV_KEY_BY_CONFIG = {
   apiUrl: "VITE_API_URL",