@thecb/components 11.3.0-beta.0 → 11.3.1-beta.0

package/dist/index.esm.js

@@ -467,6 +467,7 @@ var ROYAL_BLUE_VIVID = "#3B5BDB";
 var ASTRAL_BLUE = "#3176AA";
 var SAPPHIRE_BLUE = "#116285";
 var PEACOCK_BLUE = "#0E506D";
+var HAWKES_BLUE = "#D9D9FB";
 // GREEN
 var FOREST_GREEN = "#19b03F";
 var MEADOW_GREEN = "#16C98D";
@@ -493,6 +494,9 @@ var RASPBERRY = "#ED125F";
 var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5";
+// PURPLE
+var LUCKY_POINT = "#281978";
+var LUCKY_POINT_DARK = "#201460";
 
 // Second level color constants
 var ERROR_COLOR = RAZZMATAZZ_RED;
@@ -606,6 +610,7 @@ var colors = /*#__PURE__*/Object.freeze({
   ASTRAL_BLUE: ASTRAL_BLUE,
   SAPPHIRE_BLUE: SAPPHIRE_BLUE,
   PEACOCK_BLUE: PEACOCK_BLUE,
+  HAWKES_BLUE: HAWKES_BLUE,
   FOREST_GREEN: FOREST_GREEN,
   MEADOW_GREEN: MEADOW_GREEN,
   POLAR_GREEN: POLAR_GREEN,
@@ -631,7 +636,9 @@ var colors = /*#__PURE__*/Object.freeze({
   ALERT_COLORS: ALERT_COLORS,
   PILL_COLORS: PILL_COLORS,
   ERROR_COLOR: ERROR_COLOR,
-  ERROR_BACKGROUND_COLOR: ERROR_BACKGROUND_COLOR
+  ERROR_BACKGROUND_COLOR: ERROR_BACKGROUND_COLOR,
+  LUCKY_POINT: LUCKY_POINT,
+  LUCKY_POINT_DARK: LUCKY_POINT_DARK
 });
 
 var TextSpan = styled.span.withConfig({
@@ -25683,9 +25690,80 @@ var ImageBox = function ImageBox(_ref) {
   }));
 };
 
+var color$a = "#15749D";
+var fallbackValues$s = {
+  color: color$a
+};
+
+var SpinnerSvgAnimation = styled.svg.withConfig({
+  displayName: "Spinner__SpinnerSvgAnimation",
+  componentId: "sc-vhupl9-0"
+})(["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) {
+  var size = _ref.size;
+  return size;
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size;
+}, function (_ref3) {
+  var color = _ref3.color;
+  return color;
+}, function (_ref4) {
+  var centerSpinner = _ref4.centerSpinner;
+  return centerSpinner ? css(["margin:0;"]) : "";
+});
+var SpinnerContainer$2 = styled.div.withConfig({
+  displayName: "Spinner__SpinnerContainer",
+  componentId: "sc-vhupl9-1"
+})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
+  var centerSpinner = _ref5.centerSpinner,
+    size = _ref5.size;
+  return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
+});
+
+/*
+  `centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
+  containers. Default is false to preserve legacy behavior for past uses.
+*/
+
+var Spinner$1 = function Spinner(_ref6) {
+  var _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? "24" : _ref6$size,
+    _ref6$centerSpinner = _ref6.centerSpinner,
+    centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
+    themeValues = _ref6.themeValues,
+    _ref6$color = _ref6.color,
+    color = _ref6$color === void 0 ? themeValues.color : _ref6$color,
+    _ref6$cx = _ref6.cx,
+    cx = _ref6$cx === void 0 ? "50" : _ref6$cx,
+    _ref6$cy = _ref6.cy,
+    cy = _ref6$cy === void 0 ? "50" : _ref6$cy,
+    _ref6$radius = _ref6.radius,
+    radius = _ref6$radius === void 0 ? "25" : _ref6$radius,
+    _ref6$strokeWidth = _ref6.strokeWidth,
+    strokeWidth = _ref6$strokeWidth === void 0 ? "6" : _ref6$strokeWidth;
+  return /*#__PURE__*/React__default.createElement(SpinnerContainer$2, {
+    centerSpinner: centerSpinner,
+    size: size
+  }, /*#__PURE__*/React__default.createElement(SpinnerSvgAnimation, {
+    size: size,
+    color: color,
+    centerSpinner: centerSpinner
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    className: "path",
+    cx: cx,
+    cy: cy,
+    r: radius,
+    fill: "none",
+    strokeWidth: strokeWidth
+  })));
+};
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$s);
+
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
     heading = _ref.heading,
+    _ref$isHeadingLoading = _ref.isHeadingLoading,
+    isHeadingLoading = _ref$isHeadingLoading === void 0 ? false : _ref$isHeadingLoading,
     buttonLink = _ref.buttonLink,
     subHeading = _ref.subHeading,
     buttonText = _ref.buttonText,
@@ -25727,12 +25805,20 @@ var Jumbo = function Jumbo(_ref) {
   }, /*#__PURE__*/React__default.createElement(Title$1, {
     variant: isMobile ? "small" : "large",
     as: "h1",
-    color: "#ffffff",
+    color: WHITE,
     className: "themeJumboHeading",
     extraStyles: showCartStatus && isMobile && "max-width: 60%;"
-  }, heading), subHeading && /*#__PURE__*/React__default.createElement(Heading$1, {
+  }, isHeadingLoading ? /*#__PURE__*/React__default.createElement(Spinner$2, {
+    size: "50",
+    cx: "25",
+    cy: "25",
+    radius: "12.5",
+    strokeWidth: "3",
+    centerSpinner: true,
+    color: WHITE
+  }) : heading), subHeading && /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: isMobile ? "h6" : "h2",
-    color: "#ffffff",
+    color: WHITE,
     className: "themeJumboSubheading"
   }, subHeading), showButton && /*#__PURE__*/React__default.createElement(ButtonWithLink, {
     url: buttonLink,
@@ -25763,7 +25849,7 @@ var fontWeight$4 = {
   // fontsize Detail regular
   large: "700" // fontsize Title small
 };
-var fallbackValues$s = {
+var fallbackValues$t = {
   fontWeight: fontWeight$4
 };
 
@@ -25822,7 +25908,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$s, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$t, "default");
 
 var weightTitle = {
   "default": "600",
@@ -25832,7 +25918,7 @@ var detailVariant = {
   "default": "large",
   small: "small"
 };
-var fallbackValues$t = {
+var fallbackValues$u = {
   weightTitle: weightTitle,
   detailVariant: detailVariant
 };
@@ -25880,74 +25966,7 @@ var LineItem = function LineItem(_ref) {
     childGap: "0.25rem"
   }, visibleCustomAttrs));
 };
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$t, "default");
-
-var color$a = "#15749D";
-var fallbackValues$u = {
-  color: color$a
-};
-
-var SpinnerSvgAnimation = styled.svg.withConfig({
-  displayName: "Spinner__SpinnerSvgAnimation",
-  componentId: "sc-vhupl9-0"
-})(["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) {
-  var size = _ref.size;
-  return size;
-}, function (_ref2) {
-  var size = _ref2.size;
-  return size;
-}, function (_ref3) {
-  var color = _ref3.color;
-  return color;
-}, function (_ref4) {
-  var centerSpinner = _ref4.centerSpinner;
-  return centerSpinner ? css(["margin:0;"]) : "";
-});
-var SpinnerContainer$2 = styled.div.withConfig({
-  displayName: "Spinner__SpinnerContainer",
-  componentId: "sc-vhupl9-1"
-})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
-  var centerSpinner = _ref5.centerSpinner,
-    size = _ref5.size;
-  return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
-});
-
-/*
-  `centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
-  containers. Default is false to preserve legacy behavior for past uses.
-*/
-
-var Spinner$1 = function Spinner(_ref6) {
-  var _ref6$size = _ref6.size,
-    size = _ref6$size === void 0 ? "24" : _ref6$size,
-    _ref6$centerSpinner = _ref6.centerSpinner,
-    centerSpinner = _ref6$centerSpinner === void 0 ? false : _ref6$centerSpinner,
-    themeValues = _ref6.themeValues,
-    _ref6$cx = _ref6.cx,
-    cx = _ref6$cx === void 0 ? "50" : _ref6$cx,
-    _ref6$cy = _ref6.cy,
-    cy = _ref6$cy === void 0 ? "50" : _ref6$cy,
-    _ref6$radius = _ref6.radius,
-    radius = _ref6$radius === void 0 ? "25" : _ref6$radius,
-    _ref6$strokeWidth = _ref6.strokeWidth,
-    strokeWidth = _ref6$strokeWidth === void 0 ? "6" : _ref6$strokeWidth;
-  return /*#__PURE__*/React__default.createElement(SpinnerContainer$2, {
-    centerSpinner: centerSpinner,
-    size: size
-  }, /*#__PURE__*/React__default.createElement(SpinnerSvgAnimation, {
-    size: size,
-    color: themeValues.color,
-    centerSpinner: centerSpinner
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    className: "path",
-    cx: cx,
-    cy: cy,
-    r: radius,
-    fill: "none",
-    strokeWidth: strokeWidth
-  })));
-};
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$u);
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$u, "default");
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -49992,7 +50011,7 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     _ref3$extraStyles = _ref3.extraStyles,
     extraStyles = _ref3$extraStyles === void 0 ? "" : _ref3$extraStyles;
   if (!verifyURL || !siteKey) return null;
-  var containerRef = useRef(null);
+  var widgetRef = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     widgetId = _useState2[0],
@@ -50003,16 +50022,16 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   useImperativeHandle(ref, function () {
     return {
       reset: function reset() {
-        if (widgetId !== null) {
-          var _window$turnstile;
-          (_window$turnstile = window.turnstile) === null || _window$turnstile === void 0 || _window$turnstile.reset(widgetId);
+        if (widgetId && window.turnstile) {
+          window.turnstile.reset(widgetId);
         }
       }
     };
-  });
+  }, [widgetId]);
   useEffect$1(function () {
-    if (window.turnstile && containerRef.current && widgetId === null) {
-      var newWidgetId = window.turnstile.render(containerRef.current, {
+    if (!widgetRef.current || !window.turnstile) return;
+    if (!widgetId) {
+      var newWidgetId = window.turnstile.render(widgetRef.current, {
         sitekey: siteKey,
         size: size,
         retry: retry,
@@ -50031,9 +50050,9 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref3, ref) {
       setWidgetId(newWidgetId);
     }
     return function () {
-      if (widgetId !== null) {
-        var _window$turnstile2;
-        (_window$turnstile2 = window.turnstile) === null || _window$turnstile2 === void 0 || _window$turnstile2.reset(widgetId);
+      if (widgetId && window.turnstile) {
+        window.turnstile.remove(widgetId);
+        setWidgetId(null);
       }
     };
   }, [isTurnstileLoaded, siteKey, widgetId]);
@@ -50042,7 +50061,7 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     justify: justify,
     extraStyles: extraStyles
   }, /*#__PURE__*/React__default.createElement("div", {
-    ref: containerRef
+    ref: widgetRef
   }));
 });