@thecb/components 11.3.2-beta.0 → 11.3.2-beta.1

package/dist/index.cjs.js

@@ -24414,10 +24414,14 @@ var useTurnstileScript = function useTurnstileScript(verifyURL) {
     _useState2 = _slicedToArray(_useState, 2),
     scriptLoaded = _useState2[0],
     setScriptLoaded = _useState2[1];
-  var _useState3 = React.useState(null),
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     scriptError = _useState4[0],
     setScriptError = _useState4[1];
+  var handleScriptError = function handleScriptError() {
+    setScriptError(true);
+    setScriptLoaded(false);
+  };
   React.useEffect(function () {
     if (typeof window === "undefined") {
       setScriptLoaded(false);
@@ -24433,17 +24437,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 {
@@ -50003,15 +50006,15 @@ var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallback
 var TurnstileWidgetContainer = styled__default(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
@@ -50033,6 +50036,8 @@ var TurnstileWidget = /*#__PURE__*/React.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,
@@ -50091,40 +50096,59 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
     return "Something went wrong. Please refresh and try again.";
   };
 
+  // Reset the Turnstile widget when requested
+  var resetWidget = React.useCallback(function () {
+    if (widgetIdRef.current && window.turnstile) {
+      window.turnstile.reset(widgetIdRef.current);
+      clearError();
+    }
+  }, [clearError]);
+
   // Allow the parent component to reset the Turnstile widget
   React.useImperativeHandle(ref, function () {
     return {
-      reset: function reset() {
-        if (widgetIdRef.current && window.turnstile) {
-          window.turnstile.reset(widgetIdRef.current);
-          clearError();
-        }
-      }
+      reset: resetWidget
     };
-  }, []);
+  }, [resetWidget]);
   React.useEffect(function () {
+    if (scriptError) {
+      setError("Unable to load security verification. Please refresh the page.");
+      onError === null || onError === void 0 || onError({
+        type: "script_load_failed",
+        error: scriptError
+      });
+      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") {
-          handleError(errorCode);
+    try {
+      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") {
+            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({
+        type: "render_failed",
+        error: error
+      });
+    }
     return function () {
       if (widgetIdRef.current && window.turnstile) {
         window.turnstile.remove(widgetIdRef.current);
@@ -50136,6 +50160,7 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   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
@@ -50143,11 +50168,7 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
     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.")));
+  }, error)));
 });
 
 var pageBackground = "#FBFCFD";