@thecb/components 11.3.2 → 11.3.3-beta.0

package/dist/index.d.ts

@@ -513,45 +513,32 @@ declare function useConditionallyAddValidator(
  * @param {string} verifyURL - The URL of the Turnstile verification script.
  */
 declare const useTurnstileScript = verifyURL => {
-  const [scriptLoaded, setScriptLoaded] = useState(false);
-  const [scriptError, setScriptError] = useState(false);
-
-  const handleScriptError = () => {
-    setScriptError(true);
-    setScriptLoaded(false);
-  };
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
     if (typeof window === "undefined") {
-      setScriptLoaded(false);
+      setIsLoaded(false);
       return;
     }
     if (window.turnstile && window.turnstile.render) {
-      setScriptLoaded(true);
+      setIsLoaded(true);
       return;
     }
 
     const script = document.createElement("script");
     script.src = `${verifyURL}?render=explicit`;
     script.onload = () => {
-      setScriptLoaded(true);
-    };
-    script.onerror = () => {
-      handleScriptError();
-    };
-    script.onabort = () => {
-      handleScriptError();
+      setIsLoaded(true);
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
 
     return () => {
-      setScriptLoaded(false);
-      setScriptError(false);
+      setIsLoaded(false);
     };
   }, [verifyURL]);
 
-  return { scriptLoaded, scriptError };
+  return isLoaded;
 };
 
 

package/dist/index.esm.js

@@ -15934,7 +15934,9 @@ var TrashIcon = function TrashIcon(_ref) {
 };
 var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$2, "primary");
 
-var CustomerSearchIcon = function CustomerSearchIcon() {
+var CustomerSearchIcon = function CustomerSearchIcon(_ref) {
+  var _ref$fillPrimary = _ref.fillPrimary,
+    fillPrimary = _ref$fillPrimary === void 0 ? MATISSE_BLUE : _ref$fillPrimary;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -16000,13 +16002,17 @@ var CustomerSearchIcon = function CustomerSearchIcon() {
     fill: "#E4F4FD",
     d: "M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zM97 44a2 2 0 012 2v52a2 2 0 01-2 2H45a2 2 0 01-2-2V46a2 2 0 012-2h52zM80 70c-3.535 0-6.145 1.941-7.827 5.824C70.192 73.274 67.633 72 64.5 72c-5.912 0-9.773 4.536-11.585 13.608a2 2 0 001.83 2.388l.13.004h19.25l.148-.005a2 2 0 001.812-2.387 37.807 37.807 0 00-.733-3.045L75.184 82h11.893l.15-.005a2 2 0 001.797-2.451C87.534 73.18 84.526 70 80 70zm136-26c10.493 0 19 8.507 19 19s-8.507 19-19 19-19-8.507-19-19 8.507-19 19-19zM64.5 56a7 7 0 100 14 7 7 0 000-14zM216 58c-4.206 0-7.903 2.689-9.348 6.641a2.5 2.5 0 004.635 1.87l.061-.152.083-.214c.786-1.896 2.575-3.145 4.57-3.145 1.994 0 3.782 1.249 4.568 3.145l.083.214.061.152a2.5 2.5 0 004.635-1.87C223.903 60.69 220.207 58 216.001 58zM80 57a5.5 5.5 0 100 11 5.5 5.5 0 000-11z"
   }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#15749D",
+    fill: fillPrimary,
     fillRule: "nonzero",
     d: "M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.605 3.593v.035-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zM263.644 96c6.184 0 11.24 4.838 11.586 10.936l38.713 7.13c3.304.609 4.407 4.749 1.927 6.93l-.15.125L301 133v-10.5l2.891-2.151-31.014-5.712a11.586 11.586 0 01-8.881 4.569l-.352.005H257l-.2-.005a4 4 0 010-7.99l.2-.005h6.644l.191-.005a3.606 3.606 0 003.414-3.601c0-1.99-.358-3.259-2.403-5.238a361.04 361.04 0 00-4.65-4.395A3.998 3.998 0 01263.644 96zM97 40a6 6 0 016 6v52a6 6 0 01-6 6H45a6 6 0 01-6-6V46a6 6 0 016-6h52zm0 4H45a2 2 0 00-1.995 1.85L43 46v52a2 2 0 001.85 1.995L45 100h52a2 2 0 001.995-1.85L99 98V46a2 2 0 00-1.85-1.995L97 44zM80 70c4.526 0 7.534 3.181 9.024 9.544a2 2 0 01-1.798 2.45l-.149.006H75.184c.342 1.11.643 2.313.901 3.608a2 2 0 01-1.812 2.387l-.149.005H54.876a2 2 0 01-1.961-2.392C54.727 76.536 58.588 72 64.5 72c3.134 0 5.692 1.275 7.673 3.824C73.855 71.941 76.465 70 80 70zM64.5 56a7 7 0 110 14 7 7 0 010-14zM80 57a5.5 5.5 0 110 11 5.5 5.5 0 010-11z"
   }))))));
 };
 
-var PaymentSearchIcon = function PaymentSearchIcon() {
+var PaymentSearchIcon = function PaymentSearchIcon(_ref) {
+  var _ref$fillPrimary = _ref.fillPrimary,
+    fillPrimary = _ref$fillPrimary === void 0 ? SEA_GREEN : _ref$fillPrimary,
+    _ref$fillSecondary = _ref.fillSecondary,
+    fillSecondary = _ref$fillSecondary === void 0 ? HINT_GREEN : _ref$fillSecondary;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -16072,10 +16078,10 @@ var PaymentSearchIcon = function PaymentSearchIcon() {
     filter: "url(#payment-search-filter-2)",
     xlinkHref: "#payment-search-path-1"
   }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#E8FFEF",
+    fill: fillSecondary,
     d: "M185 185c28.719 0 52 5.373 52 12s-23.281 12-52 12c-28.718 0-52-5.373-52-12s23.282-12 52-12zM97 44a2 2 0 012 2v52a2 2 0 01-2 2H45a2 2 0 01-2-2V46a2 2 0 012-2h52zM74.134 56h-5.268c-.441 0-.806.304-.86.696l-.006.1v2.456c-4.391.845-7.029 3.74-7.144 7.532l-.004.26v.072c0 5.135 4.208 6.644 9.66 7.865 3.408.801 4.302 1.333 4.351 2.348l.002.093v.073c0 1.077-1.025 1.723-2.963 1.723-2.717 0-5.28-.875-7.66-2.542a.896.896 0 00-1.112.082l-.078.081-2.845 3.336a.84.84 0 00.11 1.21c2.061 1.596 4.522 2.668 7.182 3.207l.5.095.001 2.581c0 .37.3.677.688.725l.108.007h5.407c.403 0 .737-.275.79-.632l.007-.1v-2.602c4.212-.902 6.88-3.587 6.996-7.58l.004-.273v-.072c0-4.705-3.659-6.572-9.513-7.83-3.483-.767-4.411-1.263-4.462-2.344l-.002-.097v-.072c0-.934.842-1.616 2.562-1.616 2.041 0 4.32.669 6.462 2.007a.9.9 0 001.13-.126l.073-.089 2.566-3.556a.841.841 0 00-.185-1.18 14.999 14.999 0 00-5.178-2.318l-.451-.103-.002-2.62c0-.44-.388-.797-.866-.797z"
   }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#317D4F",
+    fill: fillPrimary,
     fillRule: "nonzero",
     d: "M182 176v20a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-.2-7.995l.2-.005h10v-16h8zm14 0v16h10a4 4 0 013.995 3.8l.005.2a4 4 0 01-3.8 3.995l-.2.005h-14a4 4 0 01-3.995-3.8L188 196v-20h8zM69 128.5v9l-7.875 4.429 32.876 6.953c1.81-4.055 5.877-6.882 10.604-6.882a4 4 0 01.2 7.995l-.2.005a3.605 3.605 0 00-3.605 3.593v.035-.023a3.606 3.606 0 003.414 3.601l.191.005h6.644a4 4 0 01.2 7.995l-.2.005h-6.644c-5.246 0-9.679-3.48-11.115-8.259l-44.708-9.457c-3.58-.757-4.322-5.493-1.242-7.336l.175-.1L69 128.5zM263.644 96c6.184 0 11.24 4.838 11.586 10.936l38.713 7.13c3.304.609 4.407 4.749 1.927 6.93l-.15.125L301 133v-10.5l2.891-2.151-31.014-5.712a11.586 11.586 0 01-8.881 4.569l-.352.005H257l-.2-.005a4 4 0 010-7.99l.2-.005h6.644l.191-.005a3.606 3.606 0 003.414-3.601c0-1.99-.358-3.259-2.403-5.238a361.04 361.04 0 00-4.65-4.395A3.998 3.998 0 01263.644 96zM97 40a6 6 0 016 6v52a6 6 0 01-6 6H45a6 6 0 01-6-6V46a6 6 0 016-6h52zm0 4H45a2 2 0 00-1.995 1.85L43 46v52a2 2 0 001.85 1.995L45 100h52a2 2 0 001.995-1.85L99 98V46a2 2 0 00-1.85-1.995L97 44zM74.134 56c.478 0 .866.356.866.796l.002 2.621c2.128.452 3.983 1.265 5.629 2.42.383.27.457.804.185 1.181l-2.566 3.556c-.275.382-.801.466-1.203.215-2.142-1.338-4.42-2.007-6.462-2.007-1.72 0-2.562.682-2.562 1.616v.072c0 1.15.879 1.652 4.464 2.442C78.341 70.169 82 72.036 82 76.742v.07c0 4.144-2.692 6.932-7 7.854v2.602c0 .404-.357.732-.797.732h-5.407c-.44 0-.796-.328-.796-.732v-2.581c-2.852-.502-5.493-1.606-7.684-3.302a.84.84 0 01-.11-1.21l2.846-3.336a.898.898 0 011.19-.163c2.38 1.667 4.943 2.542 7.66 2.542 1.938 0 2.963-.646 2.963-1.723v-.073c0-1.076-.841-1.615-4.353-2.44-5.452-1.222-9.66-2.73-9.66-7.866v-.072c0-3.92 2.657-6.928 7.148-7.792v-2.456c0-.44.388-.796.866-.796h5.268z"
   }))))));
@@ -24404,47 +24410,29 @@ function useConditionallyAddValidator(condition, validatorFn, addValidator, remo
 var useTurnstileScript = function useTurnstileScript(verifyURL) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    scriptLoaded = _useState2[0],
-    setScriptLoaded = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scriptError = _useState4[0],
-    setScriptError = _useState4[1];
-  var handleScriptError = function handleScriptError() {
-    setScriptError(true);
-    setScriptLoaded(false);
-  };
+    isLoaded = _useState2[0],
+    setIsLoaded = _useState2[1];
   useEffect$1(function () {
     if (typeof window === "undefined") {
-      setScriptLoaded(false);
+      setIsLoaded(false);
       return;
     }
     if (window.turnstile && window.turnstile.render) {
-      setScriptLoaded(true);
+      setIsLoaded(true);
       return;
     }
     var script = document.createElement("script");
     script.src = "".concat(verifyURL, "?render=explicit");
     script.onload = function () {
-      setScriptLoaded(true);
-    };
-    script.onerror = function () {
-      handleScriptError();
-    };
-    script.onabort = function () {
-      handleScriptError();
+      setIsLoaded(true);
     };
     script.defer = true;
     document.getElementsByTagName("head")[0].appendChild(script);
     return function () {
-      setScriptLoaded(false);
-      setScriptError(false);
+      setIsLoaded(false);
     };
   }, [verifyURL]);
-  return {
-    scriptLoaded: scriptLoaded,
-    scriptError: scriptError
-  };
+  return isLoaded;
 };
 
 
@@ -49998,142 +49986,89 @@ 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;padding:", ";justify-content:", ";align-items:", ";width:100%;"], function (_ref) {
+})(["display:flex;padding:", ";justify-content:", ";width:100%;"], function (_ref) {
   var padding = _ref.padding;
   return padding;
 }, function (_ref2) {
   var justify = _ref2.justify;
   return justify;
-}, function (_ref3) {
-  var align = _ref3.align;
-  return align;
 });
-var FATAL_ERROR_CODES = [
-// Configuration errors
-/^100/, /^105/, /^110100$/, /^110110$/, /^110200$/, /^110420$/, /^110430$/, /^400020$/, /^400030$/, /^400040$/,
-// Browser/environment errors
-/^110500$/, /^110510$/, /^200010$/, /^200100$/,
-// Internal errors
-/^120/];
-var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var verifyURL = _ref4.verifyURL,
-    siteKey = _ref4.siteKey,
-    _ref4$onSuccess = _ref4.onSuccess,
-    onSuccess = _ref4$onSuccess === void 0 ? noop$1 : _ref4$onSuccess,
-    _ref4$onError = _ref4.onError,
-    onError = _ref4$onError === void 0 ? noop$1 : _ref4$onError,
-    _ref4$onExpired = _ref4.onExpired,
-    onExpired = _ref4$onExpired === void 0 ? noop$1 : _ref4$onExpired,
-    _ref4$padding = _ref4.padding,
-    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,
-    tabindex = _ref4$tabindex === void 0 ? 0 : _ref4$tabindex,
-    _ref4$retry = _ref4.retry,
-    retry = _ref4$retry === void 0 ? "never" : _ref4$retry,
-    _ref4$theme = _ref4.theme,
-    theme = _ref4$theme === void 0 ? "light" : _ref4$theme,
-    _ref4$extraStyles = _ref4.extraStyles,
-    extraStyles = _ref4$extraStyles === void 0 ? "" : _ref4$extraStyles;
+var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var verifyURL = _ref3.verifyURL,
+    siteKey = _ref3.siteKey,
+    _ref3$onSuccess = _ref3.onSuccess,
+    onSuccess = _ref3$onSuccess === void 0 ? noop$1 : _ref3$onSuccess,
+    _ref3$onError = _ref3.onError,
+    onError = _ref3$onError === void 0 ? noop$1 : _ref3$onError,
+    _ref3$onExpired = _ref3.onExpired,
+    onExpired = _ref3$onExpired === void 0 ? noop$1 : _ref3$onExpired,
+    _ref3$padding = _ref3.padding,
+    padding = _ref3$padding === void 0 ? "1rem" : _ref3$padding,
+    _ref3$justify = _ref3.justify,
+    justify = _ref3$justify === void 0 ? "flex-end" : _ref3$justify,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? "normal" : _ref3$size,
+    _ref3$tabindex = _ref3.tabindex,
+    tabindex = _ref3$tabindex === void 0 ? 0 : _ref3$tabindex,
+    _ref3$retry = _ref3.retry,
+    retry = _ref3$retry === void 0 ? "auto" : _ref3$retry,
+    _ref3$theme = _ref3.theme,
+    theme = _ref3$theme === void 0 ? "auto" : _ref3$theme,
+    _ref3$extraStyles = _ref3.extraStyles,
+    extraStyles = _ref3$extraStyles === void 0 ? "" : _ref3$extraStyles;
   if (!verifyURL || !siteKey) return null;
   var widgetRef = useRef(null);
-  var widgetIdRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    error = _useState2[0],
-    setError = _useState2[1];
-  var _useTurnstileScript = useTurnstileScript(verifyURL),
-    scriptLoaded = _useTurnstileScript.scriptLoaded,
-    scriptError = _useTurnstileScript.scriptError;
-
-  // Clear the error state
-  var clearError = function clearError() {
-    setError(null);
-  };
-
-  // Handle errors based on the retry strategy
-  var handleError = function handleError(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 try a different browser.";
-    }
-    return "Something went wrong. Please refresh and try again.";
-  };
+    widgetId = _useState2[0],
+    setWidgetId = _useState2[1];
+  var isTurnstileLoaded = useTurnstileScript(verifyURL);
 
   // Allow the parent component to reset the Turnstile widget
   useImperativeHandle(ref, function () {
     return {
       reset: function reset() {
-        if (widgetIdRef.current && window.turnstile) {
-          window.turnstile.reset(widgetIdRef.current);
-          clearError();
+        if (widgetId && window.turnstile) {
+          window.turnstile.reset(widgetId);
         }
       }
     };
-  }, []);
+  }, [widgetId]);
   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;
-    try {
-      widgetIdRef.current = window.turnstile.render(widgetRef.current, {
+    if (!widgetRef.current || !window.turnstile) return;
+    if (!widgetId) {
+      var newWidgetId = 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);
+          return onSuccess(token);
         },
-        "error-callback": function errorCallback(errorCode) {
-          handleError(errorCode);
-          onError === null || onError === void 0 || onError(errorCode);
+        "error-callback": function errorCallback() {
+          return onError();
         },
         "expired-callback": function expiredCallback() {
-          clearError();
-          onExpired === null || onExpired === void 0 || onExpired();
+          return onExpired();
         }
       });
-    } catch (error) {
-      setError("Unable to load security verification. Please refresh the page.");
-      onError === null || onError === void 0 || onError("render_failed");
+      setWidgetId(newWidgetId);
     }
     return function () {
-      if (widgetIdRef.current && window.turnstile) {
-        window.turnstile.remove(widgetIdRef.current);
-        widgetIdRef.current = null;
-        clearError();
+      if (widgetId && window.turnstile) {
+        window.turnstile.remove(widgetId);
+        setWidgetId(null);
       }
     };
-  }, [scriptLoaded, scriptError, siteKey]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TurnstileWidgetContainer, {
+  }, [isTurnstileLoaded, siteKey, widgetId]);
+  return /*#__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                padding-top: 0.5rem;\n              "
-  }, error)));
+  }));
 });
 
 var pageBackground = "#FBFCFD";