@thecb/components 11.3.2-beta.0 → 11.3.2

package/dist/index.d.ts

@@ -514,7 +514,12 @@ declare function useConditionallyAddValidator(
  */
 declare const useTurnstileScript = verifyURL => {
   const [scriptLoaded, setScriptLoaded] = useState(false);
-  const [scriptError, setScriptError] = useState(null);
+  const [scriptError, setScriptError] = useState(false);
+
+  const handleScriptError = () => {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
 
   useEffect(() => {
     if (typeof window === "undefined") {
@@ -532,18 +537,17 @@ declare const useTurnstileScript = verifyURL => {
       setScriptLoaded(true);
     };
     script.onerror = () => {
-      setScriptError(true);
-      setScriptLoaded(false);
+      handleScriptError();
     };
     script.onabort = () => {
-      setScriptError(true);
-      setScriptLoaded(false);
+      handleScriptError();
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
 
     return () => {
       setScriptLoaded(false);
+      setScriptError(false);
     };
   }, [verifyURL]);
 

package/dist/index.esm.js

@@ -24406,10 +24406,14 @@ var useTurnstileScript = function useTurnstileScript(verifyURL) {
     _useState2 = _slicedToArray(_useState, 2),
     scriptLoaded = _useState2[0],
     setScriptLoaded = _useState2[1];
-  var _useState3 = useState(null),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     scriptError = _useState4[0],
     setScriptError = _useState4[1];
+  var handleScriptError = function handleScriptError() {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
   useEffect$1(function () {
     if (typeof window === "undefined") {
       setScriptLoaded(false);
@@ -24425,17 +24429,16 @@ var useTurnstileScript = function useTurnstileScript(verifyURL) {
       setScriptLoaded(true);
     };
     script.onerror = function () {
-      setScriptError(true);
-      setScriptLoaded(false);
+      handleScriptError();
     };
     script.onabort = function () {
-      setScriptError(true);
-      setScriptLoaded(false);
+      handleScriptError();
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
     return function () {
       setScriptLoaded(false);
+      setScriptError(false);
     };
   }, [verifyURL]);
   return {
@@ -49995,15 +49998,15 @@ var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallback
 var TurnstileWidgetContainer = styled(Box).withConfig({
   displayName: "TurnstileWidget__TurnstileWidgetContainer",
   componentId: "sc-btaugr-0"
-})(["display:flex;flex-direction:column;align-items:flex-end;padding:", ";justify-content:", ";align-items:", ";width:100%;"], function (_ref) {
+})(["display:flex;flex-direction:column;padding:", ";justify-content:", ";align-items:", ";width:100%;"], function (_ref) {
   var padding = _ref.padding;
   return padding;
 }, function (_ref2) {
   var justify = _ref2.justify;
   return justify;
 }, function (_ref3) {
-  var justify = _ref3.justify;
-  return justify;
+  var align = _ref3.align;
+  return align;
 });
 var FATAL_ERROR_CODES = [
 // Configuration errors
@@ -50025,6 +50028,8 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     padding = _ref4$padding === void 0 ? "1rem" : _ref4$padding,
     _ref4$justify = _ref4.justify,
     justify = _ref4$justify === void 0 ? "flex-end" : _ref4$justify,
+    _ref4$align = _ref4.align,
+    align = _ref4$align === void 0 ? "flex-end" : _ref4$align,
     _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? "normal" : _ref4$size,
     _ref4$tabindex = _ref4.tabindex,
@@ -50034,13 +50039,10 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     _ref4$theme = _ref4.theme,
     theme = _ref4$theme === void 0 ? "light" : _ref4$theme,
     _ref4$extraStyles = _ref4.extraStyles,
-    extraStyles = _ref4$extraStyles === void 0 ? "" : _ref4$extraStyles,
-    _ref4$maxErrorRetries = _ref4.maxErrorRetries,
-    maxErrorRetries = _ref4$maxErrorRetries === void 0 ? 3 : _ref4$maxErrorRetries;
+    extraStyles = _ref4$extraStyles === void 0 ? "" : _ref4$extraStyles;
   if (!verifyURL || !siteKey) return null;
   var widgetRef = useRef(null);
   var widgetIdRef = useRef(null);
-  var retryCountRef = useRef(0);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     error = _useState2[0],
@@ -50049,36 +50051,23 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     scriptLoaded = _useTurnstileScript.scriptLoaded,
     scriptError = _useTurnstileScript.scriptError;
 
-  // Clear the error state and reset retry count
+  // Clear the error state
   var clearError = function clearError() {
     setError(null);
-    retryCountRef.current = 0;
   };
 
   // Handle errors based on the retry strategy
   var handleError = function handleError(errorCode) {
-    retryCountRef.current += 1;
-    var currentRetryCount = retryCountRef.current;
-
-    // If we haven't exceeded max retries, reset and try again
-    if (currentRetryCount <= maxErrorRetries) {
-      window.turnstile.reset(widgetIdRef.current);
-      setError(null);
-      return;
-    }
-
-    // Max retries exceeded - show appropriate error message
-    if (errorCode) {
-      var errorMessage = getErrorMessage(errorCode);
-      setError(errorMessage);
-    }
-  };
-  var getErrorMessage = function getErrorMessage(errorCode) {
+    if (!errorCode) return;
     var isFatalError = FATAL_ERROR_CODES.some(function (pattern) {
       return pattern.test(errorCode);
     });
+    var errorMessage = getErrorMessage(isFatalError);
+    setError(errorMessage);
+  };
+  var getErrorMessage = function getErrorMessage(isFatalError) {
     if (isFatalError) {
-      return "Browser or system error. Please refresh the page or update your browser.";
+      return "Browser or system error. Please refresh the page or try a different browser.";
     }
     return "Something went wrong. Please refresh and try again.";
   };
@@ -50095,28 +50084,36 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     };
   }, []);
   useEffect$1(function () {
+    if (scriptError) {
+      setError("Unable to load security verification. Please refresh the page.");
+      onError === null || onError === void 0 || onError("script_load_failed");
+      return;
+    }
     if (widgetIdRef.current || !window.turnstile || !scriptLoaded) return;
-    widgetIdRef.current = window.turnstile.render(widgetRef.current, {
-      sitekey: siteKey,
-      size: size,
-      retry: retry,
-      tabindex: tabindex,
-      theme: theme,
-      callback: function callback(token) {
-        clearError();
-        onSuccess(token);
-      },
-      "error-callback": function errorCallback(errorCode) {
-        if (retry === "never") {
+    try {
+      widgetIdRef.current = window.turnstile.render(widgetRef.current, {
+        sitekey: siteKey,
+        size: size,
+        retry: retry,
+        tabindex: tabindex,
+        theme: theme,
+        callback: function callback(token) {
+          clearError();
+          onSuccess === null || onSuccess === void 0 || onSuccess(token);
+        },
+        "error-callback": function errorCallback(errorCode) {
           handleError(errorCode);
+          onError === null || onError === void 0 || onError(errorCode);
+        },
+        "expired-callback": function expiredCallback() {
+          clearError();
+          onExpired === null || onExpired === void 0 || onExpired();
         }
-        onError === null || onError === void 0 || onError(errorCode);
-      },
-      "expired-callback": function expiredCallback() {
-        clearError();
-        onExpired === null || onExpired === void 0 || onExpired();
-      }
-    });
+      });
+    } catch (error) {
+      setError("Unable to load security verification. Please refresh the page.");
+      onError === null || onError === void 0 || onError("render_failed");
+    }
     return function () {
       if (widgetIdRef.current && window.turnstile) {
         window.turnstile.remove(widgetIdRef.current);
@@ -50124,22 +50121,19 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
         clearError();
       }
     };
-  }, [scriptLoaded, siteKey]);
+  }, [scriptLoaded, scriptError, siteKey]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TurnstileWidgetContainer, {
     padding: padding,
     justify: justify,
+    align: align,
     extraStyles: extraStyles
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: widgetRef
   }), error && /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
-    extraStyles: "\n                word-break: break-word;\n                text-align: end;\n              "
-  }, error), scriptError && /*#__PURE__*/React__default.createElement(Text$1, {
-    color: ERROR_COLOR,
-    variant: "pXS",
-    extraStyles: "\n                word-break: break-word;\n                text-align: end;\n              "
-  }, "Unable to load security verification. Please refresh the page.")));
+    extraStyles: "\n                word-break: break-word;\n                text-align: end;\n                padding-top: 0.5rem;\n              "
+  }, error)));
 });
 
 var pageBackground = "#FBFCFD";