@thecb/components 11.2.17-beta.5 → 11.3.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +198 -87
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +36 -0
- package/dist/index.esm.js +199 -89
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/jumbo/Jumbo.js +3 -18
- package/src/components/atoms/spinner/Spinner.js +1 -2
- package/src/components/molecules/index.js +1 -0
- package/src/components/molecules/turnstile-widget/TurnstileWidget.js +86 -0
- package/src/components/molecules/turnstile-widget/index.js +3 -0
- package/src/hooks/index.js +1 -0
- package/src/hooks/use-turnstile-script/index.js +36 -0
- package/src/components/atoms/.DS_Store +0 -0
- package/src/components/atoms/jumbo/Jumbo.stories.js +0 -58
package/dist/index.d.ts
CHANGED
|
@@ -507,17 +507,53 @@ declare function useConditionallyAddValidator(
|
|
|
507
507
|
}, [condition, addValidator, removeValidator]);
|
|
508
508
|
}
|
|
509
509
|
|
|
510
|
+
/**
|
|
511
|
+
* A custom hook to dynamically load the Cloudflare Turnstile script.
|
|
512
|
+
*
|
|
513
|
+
* @param {string} verifyURL - The URL of the Turnstile verification script.
|
|
514
|
+
*/
|
|
515
|
+
declare const useTurnstileScript = verifyURL => {
|
|
516
|
+
const [isLoaded, setIsLoaded] = useState(false);
|
|
517
|
+
|
|
518
|
+
useEffect(() => {
|
|
519
|
+
if (typeof window === "undefined") {
|
|
520
|
+
setIsLoaded(false);
|
|
521
|
+
return;
|
|
522
|
+
}
|
|
523
|
+
if (window.turnstile && window.turnstile.render) {
|
|
524
|
+
setIsLoaded(true);
|
|
525
|
+
return;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
const script = document.createElement("script");
|
|
529
|
+
script.src = `${verifyURL}?render=explicit`;
|
|
530
|
+
script.onload = () => {
|
|
531
|
+
setIsLoaded(true);
|
|
532
|
+
};
|
|
533
|
+
script.defer = true;
|
|
534
|
+
document.getElementsByTagName("head")[0].appendChild(script);
|
|
535
|
+
|
|
536
|
+
return () => {
|
|
537
|
+
setIsLoaded(false);
|
|
538
|
+
};
|
|
539
|
+
}, [verifyURL]);
|
|
540
|
+
|
|
541
|
+
return isLoaded;
|
|
542
|
+
};
|
|
543
|
+
|
|
510
544
|
|
|
511
545
|
|
|
512
546
|
declare const index_useScrollTo: typeof useScrollTo;
|
|
513
547
|
declare const index_useToastNotification: typeof useToastNotification;
|
|
514
548
|
declare const index_useConditionallyAddValidator: typeof useConditionallyAddValidator;
|
|
549
|
+
declare const index_useTurnstileScript: typeof useTurnstileScript;
|
|
515
550
|
declare namespace index {
|
|
516
551
|
export {
|
|
517
552
|
useOutsideClickHook as useOutsideClick,
|
|
518
553
|
index_useScrollTo as useScrollTo,
|
|
519
554
|
index_useToastNotification as useToastNotification,
|
|
520
555
|
index_useConditionallyAddValidator as useConditionallyAddValidator,
|
|
556
|
+
index_useTurnstileScript as useTurnstileScript,
|
|
521
557
|
};
|
|
522
558
|
}
|
|
523
559
|
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { forwardRef, useContext, Fragment as Fragment$1, useRef, useState, useLayoutEffect, createContext, createElement, useEffect as useEffect$1, useCallback, useMemo, cloneElement, Children, isValidElement, createRef, memo } from 'react';
|
|
1
|
+
import React__default, { forwardRef, useContext, Fragment as Fragment$1, useRef, useState, useLayoutEffect, createContext, createElement, useEffect as useEffect$1, useCallback, useMemo, cloneElement, Children, isValidElement, createRef, memo, useImperativeHandle } from 'react';
|
|
2
2
|
import styled, { ThemeContext, css, ThemeProvider, keyframes as keyframes$2 } from 'styled-components';
|
|
3
3
|
import theme from 'styled-theming';
|
|
4
4
|
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
|
@@ -24389,6 +24389,39 @@ function useConditionallyAddValidator(condition, validatorFn, addValidator, remo
|
|
|
24389
24389
|
}, [condition, addValidator, removeValidator]);
|
|
24390
24390
|
}
|
|
24391
24391
|
|
|
24392
|
+
/**
|
|
24393
|
+
* A custom hook to dynamically load the Cloudflare Turnstile script.
|
|
24394
|
+
*
|
|
24395
|
+
* @param {string} verifyURL - The URL of the Turnstile verification script.
|
|
24396
|
+
*/
|
|
24397
|
+
var useTurnstileScript = function useTurnstileScript(verifyURL) {
|
|
24398
|
+
var _useState = useState(false),
|
|
24399
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
24400
|
+
isLoaded = _useState2[0],
|
|
24401
|
+
setIsLoaded = _useState2[1];
|
|
24402
|
+
useEffect$1(function () {
|
|
24403
|
+
if (typeof window === "undefined") {
|
|
24404
|
+
setIsLoaded(false);
|
|
24405
|
+
return;
|
|
24406
|
+
}
|
|
24407
|
+
if (window.turnstile && window.turnstile.render) {
|
|
24408
|
+
setIsLoaded(true);
|
|
24409
|
+
return;
|
|
24410
|
+
}
|
|
24411
|
+
var script = document.createElement("script");
|
|
24412
|
+
script.src = "".concat(verifyURL, "?render=explicit");
|
|
24413
|
+
script.onload = function () {
|
|
24414
|
+
setIsLoaded(true);
|
|
24415
|
+
};
|
|
24416
|
+
script.defer = true;
|
|
24417
|
+
document.getElementsByTagName("head")[0].appendChild(script);
|
|
24418
|
+
return function () {
|
|
24419
|
+
setIsLoaded(false);
|
|
24420
|
+
};
|
|
24421
|
+
}, [verifyURL]);
|
|
24422
|
+
return isLoaded;
|
|
24423
|
+
};
|
|
24424
|
+
|
|
24392
24425
|
|
|
24393
24426
|
|
|
24394
24427
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -24396,7 +24429,8 @@ var index$1 = /*#__PURE__*/Object.freeze({
|
|
|
24396
24429
|
useOutsideClick: useOutsideClickHook,
|
|
24397
24430
|
useScrollTo: useScrollTo,
|
|
24398
24431
|
useToastNotification: useToastNotification,
|
|
24399
|
-
useConditionallyAddValidator: useConditionallyAddValidator
|
|
24432
|
+
useConditionallyAddValidator: useConditionallyAddValidator,
|
|
24433
|
+
useTurnstileScript: useTurnstileScript
|
|
24400
24434
|
});
|
|
24401
24435
|
|
|
24402
24436
|
var hoverColor$4 = "#116285";
|
|
@@ -25649,80 +25683,9 @@ var ImageBox = function ImageBox(_ref) {
|
|
|
25649
25683
|
}));
|
|
25650
25684
|
};
|
|
25651
25685
|
|
|
25652
|
-
var color$a = "#15749D";
|
|
25653
|
-
var fallbackValues$s = {
|
|
25654
|
-
color: color$a
|
|
25655
|
-
};
|
|
25656
|
-
|
|
25657
|
-
var SpinnerSvgAnimation = styled.svg.withConfig({
|
|
25658
|
-
displayName: "Spinner__SpinnerSvgAnimation",
|
|
25659
|
-
componentId: "sc-vhupl9-0"
|
|
25660
|
-
})(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", ""], function (_ref) {
|
|
25661
|
-
var size = _ref.size;
|
|
25662
|
-
return size;
|
|
25663
|
-
}, function (_ref2) {
|
|
25664
|
-
var size = _ref2.size;
|
|
25665
|
-
return size;
|
|
25666
|
-
}, function (_ref3) {
|
|
25667
|
-
var color = _ref3.color;
|
|
25668
|
-
return color;
|
|
25669
|
-
}, function (_ref4) {
|
|
25670
|
-
var centerSpinner = _ref4.centerSpinner;
|
|
25671
|
-
return centerSpinner ? css(["margin:0;"]) : "";
|
|
25672
|
-
});
|
|
25673
|
-
var SpinnerContainer$2 = styled.div.withConfig({
|
|
25674
|
-
displayName: "Spinner__SpinnerContainer",
|
|
25675
|
-
componentId: "sc-vhupl9-1"
|
|
25676
|
-
})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
|
|
25677
|
-
var centerSpinner = _ref5.centerSpinner,
|
|
25678
|
-
size = _ref5.size;
|
|
25679
|
-
return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
|
|
25680
|
-
});
|
|
25681
|
-
|
|
25682
|
-
/*
|
|
25683
|
-
`centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
|
|
25684
|
-
containers. Default is false to preserve legacy behavior for past uses.
|
|
25685
|
-
*/
|
|
25686
|
-
|
|
25687
|
-
var Spinner$1 = function Spinner(_ref6) {
|
|
25688
|
-
var _ref6$size = _ref6.size,
|
|
25689
|
-
size = _ref6$size === void 0 ? "24" : _ref6$size,
|
|
25690
|
-
_ref6$centerSpinner = _ref6.centerSpinner,
|
|
25691
|
-
centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
|
|
25692
|
-
themeValues = _ref6.themeValues,
|
|
25693
|
-
_ref6$color = _ref6.color,
|
|
25694
|
-
color = _ref6$color === void 0 ? themeValues.color : _ref6$color,
|
|
25695
|
-
_ref6$cx = _ref6.cx,
|
|
25696
|
-
cx = _ref6$cx === void 0 ? "50" : _ref6$cx,
|
|
25697
|
-
_ref6$cy = _ref6.cy,
|
|
25698
|
-
cy = _ref6$cy === void 0 ? "50" : _ref6$cy,
|
|
25699
|
-
_ref6$radius = _ref6.radius,
|
|
25700
|
-
radius = _ref6$radius === void 0 ? "25" : _ref6$radius,
|
|
25701
|
-
_ref6$strokeWidth = _ref6.strokeWidth,
|
|
25702
|
-
strokeWidth = _ref6$strokeWidth === void 0 ? "6" : _ref6$strokeWidth;
|
|
25703
|
-
return /*#__PURE__*/React__default.createElement(SpinnerContainer$2, {
|
|
25704
|
-
centerSpinner: centerSpinner,
|
|
25705
|
-
size: size
|
|
25706
|
-
}, /*#__PURE__*/React__default.createElement(SpinnerSvgAnimation, {
|
|
25707
|
-
size: size,
|
|
25708
|
-
color: color,
|
|
25709
|
-
centerSpinner: centerSpinner
|
|
25710
|
-
}, /*#__PURE__*/React__default.createElement("circle", {
|
|
25711
|
-
className: "path",
|
|
25712
|
-
cx: cx,
|
|
25713
|
-
cy: cy,
|
|
25714
|
-
r: radius,
|
|
25715
|
-
fill: "none",
|
|
25716
|
-
strokeWidth: strokeWidth
|
|
25717
|
-
})));
|
|
25718
|
-
};
|
|
25719
|
-
var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$s);
|
|
25720
|
-
|
|
25721
25686
|
var Jumbo = function Jumbo(_ref) {
|
|
25722
25687
|
var showButton = _ref.showButton,
|
|
25723
25688
|
heading = _ref.heading,
|
|
25724
|
-
_ref$isHeadingLoading = _ref.isHeadingLoading,
|
|
25725
|
-
isHeadingLoading = _ref$isHeadingLoading === void 0 ? false : _ref$isHeadingLoading,
|
|
25726
25689
|
buttonLink = _ref.buttonLink,
|
|
25727
25690
|
subHeading = _ref.subHeading,
|
|
25728
25691
|
buttonText = _ref.buttonText,
|
|
@@ -25764,20 +25727,12 @@ var Jumbo = function Jumbo(_ref) {
|
|
|
25764
25727
|
}, /*#__PURE__*/React__default.createElement(Title$1, {
|
|
25765
25728
|
variant: isMobile ? "small" : "large",
|
|
25766
25729
|
as: "h1",
|
|
25767
|
-
color:
|
|
25730
|
+
color: "#ffffff",
|
|
25768
25731
|
className: "themeJumboHeading",
|
|
25769
25732
|
extraStyles: showCartStatus && isMobile && "max-width: 60%;"
|
|
25770
|
-
},
|
|
25771
|
-
size: "50",
|
|
25772
|
-
cx: "25",
|
|
25773
|
-
cy: "25",
|
|
25774
|
-
radius: "12.5",
|
|
25775
|
-
strokeWidth: "3",
|
|
25776
|
-
centerSpinner: true,
|
|
25777
|
-
color: WHITE
|
|
25778
|
-
}) : heading), subHeading && /*#__PURE__*/React__default.createElement(Heading$1, {
|
|
25733
|
+
}, heading), subHeading && /*#__PURE__*/React__default.createElement(Heading$1, {
|
|
25779
25734
|
variant: isMobile ? "h6" : "h2",
|
|
25780
|
-
color:
|
|
25735
|
+
color: "#ffffff",
|
|
25781
25736
|
className: "themeJumboSubheading"
|
|
25782
25737
|
}, subHeading), showButton && /*#__PURE__*/React__default.createElement(ButtonWithLink, {
|
|
25783
25738
|
url: buttonLink,
|
|
@@ -25808,7 +25763,7 @@ var fontWeight$4 = {
|
|
|
25808
25763
|
// fontsize Detail regular
|
|
25809
25764
|
large: "700" // fontsize Title small
|
|
25810
25765
|
};
|
|
25811
|
-
var fallbackValues$
|
|
25766
|
+
var fallbackValues$s = {
|
|
25812
25767
|
fontWeight: fontWeight$4
|
|
25813
25768
|
};
|
|
25814
25769
|
|
|
@@ -25867,7 +25822,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
|
|
|
25867
25822
|
var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
|
|
25868
25823
|
return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
|
|
25869
25824
|
};
|
|
25870
|
-
var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$
|
|
25825
|
+
var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$s, "default");
|
|
25871
25826
|
|
|
25872
25827
|
var weightTitle = {
|
|
25873
25828
|
"default": "600",
|
|
@@ -25877,7 +25832,7 @@ var detailVariant = {
|
|
|
25877
25832
|
"default": "large",
|
|
25878
25833
|
small: "small"
|
|
25879
25834
|
};
|
|
25880
|
-
var fallbackValues$
|
|
25835
|
+
var fallbackValues$t = {
|
|
25881
25836
|
weightTitle: weightTitle,
|
|
25882
25837
|
detailVariant: detailVariant
|
|
25883
25838
|
};
|
|
@@ -25925,7 +25880,74 @@ var LineItem = function LineItem(_ref) {
|
|
|
25925
25880
|
childGap: "0.25rem"
|
|
25926
25881
|
}, visibleCustomAttrs));
|
|
25927
25882
|
};
|
|
25928
|
-
var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$
|
|
25883
|
+
var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$t, "default");
|
|
25884
|
+
|
|
25885
|
+
var color$a = "#15749D";
|
|
25886
|
+
var fallbackValues$u = {
|
|
25887
|
+
color: color$a
|
|
25888
|
+
};
|
|
25889
|
+
|
|
25890
|
+
var SpinnerSvgAnimation = styled.svg.withConfig({
|
|
25891
|
+
displayName: "Spinner__SpinnerSvgAnimation",
|
|
25892
|
+
componentId: "sc-vhupl9-0"
|
|
25893
|
+
})(["animation:rotate 2s linear infinite;margin:-25px 0 0 -25px;width:", "px;height:", "px;& .path{stroke:", ";stroke-linecap:round;animation:dash 1.5s ease-in-out infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", ""], function (_ref) {
|
|
25894
|
+
var size = _ref.size;
|
|
25895
|
+
return size;
|
|
25896
|
+
}, function (_ref2) {
|
|
25897
|
+
var size = _ref2.size;
|
|
25898
|
+
return size;
|
|
25899
|
+
}, function (_ref3) {
|
|
25900
|
+
var color = _ref3.color;
|
|
25901
|
+
return color;
|
|
25902
|
+
}, function (_ref4) {
|
|
25903
|
+
var centerSpinner = _ref4.centerSpinner;
|
|
25904
|
+
return centerSpinner ? css(["margin:0;"]) : "";
|
|
25905
|
+
});
|
|
25906
|
+
var SpinnerContainer$2 = styled.div.withConfig({
|
|
25907
|
+
displayName: "Spinner__SpinnerContainer",
|
|
25908
|
+
componentId: "sc-vhupl9-1"
|
|
25909
|
+
})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
|
|
25910
|
+
var centerSpinner = _ref5.centerSpinner,
|
|
25911
|
+
size = _ref5.size;
|
|
25912
|
+
return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
|
|
25913
|
+
});
|
|
25914
|
+
|
|
25915
|
+
/*
|
|
25916
|
+
`centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
|
|
25917
|
+
containers. Default is false to preserve legacy behavior for past uses.
|
|
25918
|
+
*/
|
|
25919
|
+
|
|
25920
|
+
var Spinner$1 = function Spinner(_ref6) {
|
|
25921
|
+
var _ref6$size = _ref6.size,
|
|
25922
|
+
size = _ref6$size === void 0 ? "24" : _ref6$size,
|
|
25923
|
+
_ref6$centerSpinner = _ref6.centerSpinner,
|
|
25924
|
+
centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
|
|
25925
|
+
themeValues = _ref6.themeValues,
|
|
25926
|
+
_ref6$cx = _ref6.cx,
|
|
25927
|
+
cx = _ref6$cx === void 0 ? "50" : _ref6$cx,
|
|
25928
|
+
_ref6$cy = _ref6.cy,
|
|
25929
|
+
cy = _ref6$cy === void 0 ? "50" : _ref6$cy,
|
|
25930
|
+
_ref6$radius = _ref6.radius,
|
|
25931
|
+
radius = _ref6$radius === void 0 ? "25" : _ref6$radius,
|
|
25932
|
+
_ref6$strokeWidth = _ref6.strokeWidth,
|
|
25933
|
+
strokeWidth = _ref6$strokeWidth === void 0 ? "6" : _ref6$strokeWidth;
|
|
25934
|
+
return /*#__PURE__*/React__default.createElement(SpinnerContainer$2, {
|
|
25935
|
+
centerSpinner: centerSpinner,
|
|
25936
|
+
size: size
|
|
25937
|
+
}, /*#__PURE__*/React__default.createElement(SpinnerSvgAnimation, {
|
|
25938
|
+
size: size,
|
|
25939
|
+
color: themeValues.color,
|
|
25940
|
+
centerSpinner: centerSpinner
|
|
25941
|
+
}, /*#__PURE__*/React__default.createElement("circle", {
|
|
25942
|
+
className: "path",
|
|
25943
|
+
cx: cx,
|
|
25944
|
+
cy: cy,
|
|
25945
|
+
r: radius,
|
|
25946
|
+
fill: "none",
|
|
25947
|
+
strokeWidth: strokeWidth
|
|
25948
|
+
})));
|
|
25949
|
+
};
|
|
25950
|
+
var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$u);
|
|
25929
25951
|
|
|
25930
25952
|
var Loading = function Loading() {
|
|
25931
25953
|
return /*#__PURE__*/React__default.createElement(Box, {
|
|
@@ -49936,6 +49958,94 @@ var HeroImage = function HeroImage(_ref) {
|
|
|
49936
49958
|
};
|
|
49937
49959
|
var HeroImage$1 = withWindowSize(themeComponent(HeroImage, "HeroImage", fallbackValues$11, "v1"));
|
|
49938
49960
|
|
|
49961
|
+
var TurnstileWidgetContainer = styled(Box).withConfig({
|
|
49962
|
+
displayName: "TurnstileWidget__TurnstileWidgetContainer",
|
|
49963
|
+
componentId: "sc-btaugr-0"
|
|
49964
|
+
})(["display:flex;padding:", ";justify-content:", ";width:100%;"], function (_ref) {
|
|
49965
|
+
var padding = _ref.padding;
|
|
49966
|
+
return padding;
|
|
49967
|
+
}, function (_ref2) {
|
|
49968
|
+
var justify = _ref2.justify;
|
|
49969
|
+
return justify;
|
|
49970
|
+
});
|
|
49971
|
+
var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
49972
|
+
var verifyURL = _ref3.verifyURL,
|
|
49973
|
+
siteKey = _ref3.siteKey,
|
|
49974
|
+
_ref3$onSuccess = _ref3.onSuccess,
|
|
49975
|
+
onSuccess = _ref3$onSuccess === void 0 ? noop$1 : _ref3$onSuccess,
|
|
49976
|
+
_ref3$onError = _ref3.onError,
|
|
49977
|
+
onError = _ref3$onError === void 0 ? noop$1 : _ref3$onError,
|
|
49978
|
+
_ref3$onExpired = _ref3.onExpired,
|
|
49979
|
+
onExpired = _ref3$onExpired === void 0 ? noop$1 : _ref3$onExpired,
|
|
49980
|
+
_ref3$padding = _ref3.padding,
|
|
49981
|
+
padding = _ref3$padding === void 0 ? "1rem" : _ref3$padding,
|
|
49982
|
+
_ref3$justify = _ref3.justify,
|
|
49983
|
+
justify = _ref3$justify === void 0 ? "flex-end" : _ref3$justify,
|
|
49984
|
+
_ref3$size = _ref3.size,
|
|
49985
|
+
size = _ref3$size === void 0 ? "normal" : _ref3$size,
|
|
49986
|
+
_ref3$tabindex = _ref3.tabindex,
|
|
49987
|
+
tabindex = _ref3$tabindex === void 0 ? 0 : _ref3$tabindex,
|
|
49988
|
+
_ref3$retry = _ref3.retry,
|
|
49989
|
+
retry = _ref3$retry === void 0 ? "auto" : _ref3$retry,
|
|
49990
|
+
_ref3$theme = _ref3.theme,
|
|
49991
|
+
theme = _ref3$theme === void 0 ? "auto" : _ref3$theme,
|
|
49992
|
+
_ref3$extraStyles = _ref3.extraStyles,
|
|
49993
|
+
extraStyles = _ref3$extraStyles === void 0 ? "" : _ref3$extraStyles;
|
|
49994
|
+
if (!verifyURL || !siteKey) return null;
|
|
49995
|
+
var containerRef = useRef(null);
|
|
49996
|
+
var _useState = useState(null),
|
|
49997
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
49998
|
+
widgetId = _useState2[0],
|
|
49999
|
+
setWidgetId = _useState2[1];
|
|
50000
|
+
var isTurnstileLoaded = useTurnstileScript(verifyURL);
|
|
50001
|
+
|
|
50002
|
+
// Allow the parent component to reset the Turnstile widget
|
|
50003
|
+
useImperativeHandle(ref, function () {
|
|
50004
|
+
return {
|
|
50005
|
+
reset: function reset() {
|
|
50006
|
+
if (widgetId !== null) {
|
|
50007
|
+
var _window$turnstile;
|
|
50008
|
+
(_window$turnstile = window.turnstile) === null || _window$turnstile === void 0 || _window$turnstile.reset(widgetId);
|
|
50009
|
+
}
|
|
50010
|
+
}
|
|
50011
|
+
};
|
|
50012
|
+
});
|
|
50013
|
+
useEffect$1(function () {
|
|
50014
|
+
if (window.turnstile && containerRef.current && widgetId === null) {
|
|
50015
|
+
var newWidgetId = window.turnstile.render(containerRef.current, {
|
|
50016
|
+
sitekey: siteKey,
|
|
50017
|
+
size: size,
|
|
50018
|
+
retry: retry,
|
|
50019
|
+
tabindex: tabindex,
|
|
50020
|
+
theme: theme,
|
|
50021
|
+
callback: function callback(token) {
|
|
50022
|
+
return onSuccess(token);
|
|
50023
|
+
},
|
|
50024
|
+
"error-callback": function errorCallback() {
|
|
50025
|
+
return onError();
|
|
50026
|
+
},
|
|
50027
|
+
"expired-callback": function expiredCallback() {
|
|
50028
|
+
return onExpired();
|
|
50029
|
+
}
|
|
50030
|
+
});
|
|
50031
|
+
setWidgetId(newWidgetId);
|
|
50032
|
+
}
|
|
50033
|
+
return function () {
|
|
50034
|
+
if (widgetId !== null) {
|
|
50035
|
+
var _window$turnstile2;
|
|
50036
|
+
(_window$turnstile2 = window.turnstile) === null || _window$turnstile2 === void 0 || _window$turnstile2.reset(widgetId);
|
|
50037
|
+
}
|
|
50038
|
+
};
|
|
50039
|
+
}, [isTurnstileLoaded, siteKey, widgetId]);
|
|
50040
|
+
return /*#__PURE__*/React__default.createElement(TurnstileWidgetContainer, {
|
|
50041
|
+
padding: padding,
|
|
50042
|
+
justify: justify,
|
|
50043
|
+
extraStyles: extraStyles
|
|
50044
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
50045
|
+
ref: containerRef
|
|
50046
|
+
}));
|
|
50047
|
+
});
|
|
50048
|
+
|
|
49939
50049
|
var pageBackground = "#FBFCFD";
|
|
49940
50050
|
var fallbackValues$12 = {
|
|
49941
50051
|
pageBackground: pageBackground
|
|
@@ -50268,5 +50378,5 @@ var index$2 = /*#__PURE__*/Object.freeze({
|
|
|
50268
50378
|
useLogoutTimers: useLogoutTimers
|
|
50269
50379
|
});
|
|
50270
50380
|
|
|
50271
|
-
export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, ContactCard, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HeroImage$1 as HeroImage, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, IdleModal, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaydotImage, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationBanner$1 as RegistrationBanner, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$1 as hooks, index$2 as util, withWindowSize };
|
|
50381
|
+
export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, AgencyIcon, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CaretArrowDown$1 as CaretArrowDown, CaretArrowUp$1 as CaretArrowUp, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, ContactCard, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HeroImage$1 as HeroImage, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, IdleModal, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, MultipleSelectFilter$1 as MultipleSelectFilter, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaydotImage, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentStatusIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PersonIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, PopupMenu$1 as PopupMenu, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationBanner$1 as RegistrationBanner, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, Search$1 as Search, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, SortableTableHeading$1 as SortableTableHeading, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TrashIconV2$1 as TrashIconV2, TurnstileWidget, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$1 as hooks, index$2 as util, withWindowSize };
|
|
50272
50382
|
//# sourceMappingURL=index.esm.js.map
|