@thecb/components 7.10.2 → 7.10.4-beta.0

package/dist/index.esm.js

@@ -39949,13 +39949,16 @@ var EditableList = function EditableList(_ref) {
       autoPayMethods = _ref.autoPayMethods,
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "p" : _ref$as,
+      _ref$listPadding = _ref.listPadding,
+      listPadding = _ref$listPadding === void 0 ? "0rem 0rem 1.5rem 0rem" : _ref$listPadding,
       qaPrefix = _ref.qaPrefix,
       ariaLabel = _ref.ariaLabel;
   var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React.createElement(Box, {
-    padding: "0rem 0rem 1.5rem 0rem",
+    padding: listPadding,
     as: "section",
-    "aria-labelledby": "li"
+    "aria-labelledby": typeof title === "string" ? "editable-list-".concat(createIdFromString(title)) : "",
+    "aria-label": !title && typeof itemName === "string" ? "editable-list-".concat(createIdFromString(itemName)) : ""
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0rem"
   }, title !== "" && /*#__PURE__*/React.createElement(Box, {
@@ -39964,7 +39967,8 @@ var EditableList = function EditableList(_ref) {
     as: as,
     weight: titleWeight,
     color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px; font-size: 1.125rem;"
+    extraStyles: "letter-spacing: 0.29px; font-size: 1.125rem;",
+    id: typeof title === "string" ? "editable-list-".concat(createIdFromString(title)) : ""
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -47276,6 +47280,227 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
 
 var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$M, "default");
 
+var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
+  var onCheck = _ref.onCheck,
+      isChecked = _ref.isChecked,
+      html = _ref.html,
+      terms = _ref.terms,
+      _ref$error = _ref.error,
+      error = _ref$error === void 0 ? false : _ref$error,
+      linkVariant = _ref.linkVariant;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showTerms = _useState2[0],
+      toggleShowTerms = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(DisplayBox$1, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Checkbox$1, {
+    name: "terms",
+    title: "Terms and Conditions",
+    error: error,
+    checked: isChecked,
+    onChange: onCheck
+  }), /*#__PURE__*/React.createElement(Box, {
+    padding: "0 0 0 58px"
+  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, html), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
+    link: "Learn More",
+    terms: terms,
+    isOpen: showTerms,
+    toggleOpen: toggleShowTerms,
+    linkVariant: linkVariant
+  })))));
+};
+
+/* 
+
+A utility function that can generate box-shadow values for components
+Takes a string representing an rgb color value and returns an object
+with values for standard, inset, and overlay shadows.
+
+The objects for standard and inset shadows contain versions approiate
+for base, hover, and active interaction states.
+
+*/
+
+/* 
+  Function to convert string representing rgb color to rgba value with provided opacity
+  ("rgb(41, 42, 51)", "0.1") => "rgba(41, 42, 51, 0.1)"
+
+*/
+var rgbToRgba = function rgbToRgba() {
+  var rgbValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+
+  if (typeof rgbValue !== "string" || typeof opacity !== "string" || rgbValue.charAt(0) === "#") {
+    return "";
+  }
+
+  return "".concat(rgbValue.slice(0, 3), "a").concat(rgbValue.slice(3, -1), ", ").concat(opacity).concat(rgbValue.slice(-1));
+};
+
+var generateShadows = function generateShadows(baseColorRGB) {
+  var colorTen = rgbToRgba(baseColorRGB, "0.1") || "rgba(41, 42, 51, 0.1)";
+  var colorTwenty = rgbToRgba(baseColorRGB, "0.2") || "rgba(41, 42, 51, 0.2)";
+  var colorTwentyFive = rgbToRgba(baseColorRGB, "0.25") || "rgba(41, 42, 51, 0.25)";
+  var colorThirty = rgbToRgba(baseColorRGB, "0.3") || "rgba(41, 42, 51, 0.3)";
+  var blackTwentyFive = "rgba(0, 0, 0, 0.25)";
+  var standard = {
+    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 6px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
+    hover: "0px 1px 2px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(blackTwentyFive, ", 0px 6px 12px 0px ").concat(colorTen),
+    active: "0px 2px 8px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(colorThirty, ", 0px 6px 12px 0px ").concat(colorTwentyFive)
+  };
+  var inset = {
+    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
+    hover: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwentyFive, ", 0px 4px 8px 0px ").concat(colorTen),
+    active: "0px 1px 2px 2px ".concat(colorTwenty, ", 0px 3px 6px 0px ").concat(colorThirty, ", 0px 4px 8px 0px ").concat(colorTwenty)
+  };
+  var overlay = {
+    base: "0px 7px 32px 0px ".concat(colorTwenty, ", 0px 1px 4px 0px ").concat(colorTwenty, ", 0px 1px 8px -1px ").concat(colorThirty)
+  };
+  return {
+    standard: standard,
+    inset: inset,
+    overlay: overlay
+  };
+};
+
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+var useScrollTo = function useScrollTo(id) {
+  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
+  var delay = arguments.length > 4 ? arguments[4] : undefined;
+  var scrollItem;
+
+  if (delay) {
+    setTimeout(function () {
+      var _scrollItem;
+
+      scrollItem = document.getElementById(id);
+      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
+        top: top,
+        left: left,
+        behavior: behavior
+      });
+    }, delay);
+  } else {
+    var _scrollItem2;
+
+    scrollItem = document.getElementById(id);
+    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
+      top: top,
+      left: left,
+      behavior: behavior
+    });
+  }
+};
+
+var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
+  var _ref$showCheckbox = _ref.showCheckbox,
+      showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
+      onCheck = _ref.onCheck,
+      isChecked = _ref.isChecked,
+      hasError = _ref.hasError,
+      _ref$errorMessage = _ref.errorMessage,
+      errorMessage = _ref$errorMessage === void 0 ? "Please accept Terms and Conditions" : _ref$errorMessage,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? "" : _ref$description,
+      _ref$linkText = _ref.linkText,
+      linkText = _ref$linkText === void 0 ? "Terms and Conditions" : _ref$linkText,
+      html = _ref.html,
+      terms = _ref.terms,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "terms-and-conditions" : _ref$id,
+      _ref$displayInline = _ref.displayInline,
+      displayInline = _ref$displayInline === void 0 ? true : _ref$displayInline,
+      _ref$modalVariant = _ref.modalVariant,
+      modalVariant = _ref$modalVariant === void 0 ? "default" : _ref$modalVariant,
+      _ref$containerBackgro = _ref.containerBackground,
+      containerBackground = _ref$containerBackgro === void 0 ? ATHENS_GREY : _ref$containerBackgro,
+      _ref$checkboxMargin = _ref.checkboxMargin,
+      checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
+      _ref$modalTitle = _ref.modalTitle,
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showTerms = _useState2[0],
+      toggleShowTerms = _useState2[1];
+
+  var standardBoxShadow = generateShadows().standard.base;
+
+  var toggleTerms = function toggleTerms(termsOpen) {
+    toggleShowTerms(termsOpen);
+
+    if (termsOpen) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: displayInline ? "0" : "1.5rem",
+    minWidth: displayInline ? "0" : "100%",
+    background: displayInline ? "transparent" : containerBackground,
+    boxShadow: displayInline ? "none" : standardBoxShadow,
+    borderRadius: displayInline ? "0" : "4px"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "0"
+  }, html && /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, html), /*#__PURE__*/React.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center",
+    nowrap: true
+  }, showCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
+    name: id,
+    error: hasError,
+    checked: isChecked,
+    onChange: onCheck,
+    checkboxMargin: checkboxMargin,
+    extraStyles: "align-self: flex-start;"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    childGap: "0.25rem",
+    fullHeight: true
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center",
+    nowrap: true,
+    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
+  }, description && /*#__PURE__*/React.createElement(Text$1, {
+    color: CHARADE_GREY
+  }, description), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
+    link: linkText,
+    terms: terms,
+    isOpen: showTerms,
+    toggleOpen: toggleTerms,
+    linkVariant: modalVariant,
+    title: modalTitle
+  })), showCheckbox && hasError && /*#__PURE__*/React.createElement(Text$1, {
+    variant: "pXS",
+    color: ERROR_COLOR,
+    id: "".concat(id, "-error-message")
+  }, errorMessage)))));
+};
+
+var _excluded$y = ["version"];
+
+var TermsAndConditions = function TermsAndConditions(_ref) {
+  var _ref$version = _ref.version,
+      version = _ref$version === void 0 ? "v1" : _ref$version,
+      rest = _objectWithoutProperties(_ref, _excluded$y);
+
+  var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
+  return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
+};
+
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
 
@@ -47295,9 +47520,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
-      termsContent = _ref.termsContent,
-      _ref$termsTitle = _ref.termsTitle,
-      termsTitle = _ref$termsTitle === void 0 ? "Terms & Conditions" : _ref$termsTitle;
+      termsContent = _ref.termsContent;
 
   if (clearOnDismount) {
     useEffect$1(function () {
@@ -47317,13 +47540,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       showAccount = _useState4[0],
       toggleShowAccount = _useState4[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      termsModalOpen = _useState6[0],
-      setTermsModalOpen = _useState6[1];
-
   var showTerms = !!termsContent;
-  var showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
 
   var nameErrors = _defineProperty({}, required.error, "Name is required");
 
@@ -47442,18 +47659,12 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: saveToWallet
   }), showTerms && /*#__PURE__*/React.createElement(Cover, {
     singleChild: true
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    childGap: 0
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    variant: showTermsLinkVariant
-  }, "View\xA0"), /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
-    link: termsTitle,
-    linkVariant: showTermsLinkVariant,
-    terms: termsContent,
-    title: termsTitle,
-    isOpen: termsModalOpen,
-    toggleOpen: setTermsModalOpen
-  }))))));
+  }, /*#__PURE__*/React.createElement(TermsAndConditions, {
+    version: "v2",
+    showCheckbox: false,
+    description: "View",
+    terms: termsContent
+  })))));
 };
 
 var formConfig$6 = {
@@ -47508,20 +47719,12 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
       deniedCards = _ref.deniedCards,
-      termsContent = _ref.termsContent,
-      _ref$termsTitle = _ref.termsTitle,
-      termsTitle = _ref$termsTitle === void 0 ? "Terms & Conditions" : _ref$termsTitle;
+      termsContent = _ref.termsContent;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      termsModalOpen = _useState2[0],
-      setTermsModalOpen = _useState2[1];
-
   var showTerms = !!termsContent;
-  var showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
   useEffect$1(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -47639,18 +47842,12 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onChange: saveToWallet
   }), showTerms && /*#__PURE__*/React.createElement(Cover, {
     singleChild: true
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    childGap: 0
-  }, /*#__PURE__*/React.createElement(Text$1, {
-    variant: showTermsLinkVariant
-  }, "View\xA0"), /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
-    link: termsTitle,
-    linkVariant: showTermsLinkVariant,
-    terms: termsContent,
-    title: termsTitle,
-    isOpen: termsModalOpen,
-    toggleOpen: setTermsModalOpen
-  }))))));
+  }, /*#__PURE__*/React.createElement(TermsAndConditions, {
+    version: "v2",
+    showCheckbox: false,
+    description: "View",
+    terms: termsContent
+  })))));
 };
 
 var PaymentFormCard$1 = withWindowSize(PaymentFormCard);
@@ -48560,227 +48757,6 @@ var TabSidebar = function TabSidebar(_ref) {
 
 var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$P);
 
-var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
-  var onCheck = _ref.onCheck,
-      isChecked = _ref.isChecked,
-      html = _ref.html,
-      terms = _ref.terms,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showTerms = _useState2[0],
-      toggleShowTerms = _useState2[1];
-
-  return /*#__PURE__*/React.createElement(DisplayBox$1, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Checkbox$1, {
-    name: "terms",
-    title: "Terms and Conditions",
-    error: error,
-    checked: isChecked,
-    onChange: onCheck
-  }), /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 0 58px"
-  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
-    padding: "0"
-  }, html), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
-    link: "Learn More",
-    terms: terms,
-    isOpen: showTerms,
-    toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant
-  })))));
-};
-
-/* 
-
-A utility function that can generate box-shadow values for components
-Takes a string representing an rgb color value and returns an object
-with values for standard, inset, and overlay shadows.
-
-The objects for standard and inset shadows contain versions approiate
-for base, hover, and active interaction states.
-
-*/
-
-/* 
-  Function to convert string representing rgb color to rgba value with provided opacity
-  ("rgb(41, 42, 51)", "0.1") => "rgba(41, 42, 51, 0.1)"
-
-*/
-var rgbToRgba = function rgbToRgba() {
-  var rgbValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-
-  if (typeof rgbValue !== "string" || typeof opacity !== "string" || rgbValue.charAt(0) === "#") {
-    return "";
-  }
-
-  return "".concat(rgbValue.slice(0, 3), "a").concat(rgbValue.slice(3, -1), ", ").concat(opacity).concat(rgbValue.slice(-1));
-};
-
-var generateShadows = function generateShadows(baseColorRGB) {
-  var colorTen = rgbToRgba(baseColorRGB, "0.1") || "rgba(41, 42, 51, 0.1)";
-  var colorTwenty = rgbToRgba(baseColorRGB, "0.2") || "rgba(41, 42, 51, 0.2)";
-  var colorTwentyFive = rgbToRgba(baseColorRGB, "0.25") || "rgba(41, 42, 51, 0.25)";
-  var colorThirty = rgbToRgba(baseColorRGB, "0.3") || "rgba(41, 42, 51, 0.3)";
-  var blackTwentyFive = "rgba(0, 0, 0, 0.25)";
-  var standard = {
-    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 6px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
-    hover: "0px 1px 2px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(blackTwentyFive, ", 0px 6px 12px 0px ").concat(colorTen),
-    active: "0px 2px 8px 0px ".concat(colorTwenty, ", 0px 4px 8px 0px ").concat(colorThirty, ", 0px 6px 12px 0px ").concat(colorTwentyFive)
-  };
-  var inset = {
-    base: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwenty, ", inset 0px 1px 0px 0px ").concat(colorTen),
-    hover: "0px 1px 2px 0px ".concat(colorTen, ", 0px 2px 4px 0px ").concat(colorTwentyFive, ", 0px 4px 8px 0px ").concat(colorTen),
-    active: "0px 1px 2px 2px ".concat(colorTwenty, ", 0px 3px 6px 0px ").concat(colorThirty, ", 0px 4px 8px 0px ").concat(colorTwenty)
-  };
-  var overlay = {
-    base: "0px 7px 32px 0px ".concat(colorTwenty, ", 0px 1px 4px 0px ").concat(colorTwenty, ", 0px 1px 8px -1px ").concat(colorThirty)
-  };
-  return {
-    standard: standard,
-    inset: inset,
-    overlay: overlay
-  };
-};
-
-/* 
-  Hook that takes an ID selector for an element on the screen
-  And optionally values for top position, left position, smooth behavior
-  Finds element on screen and scrolls it to the provided coordinates
-
-  (string, number, number, string, number) => undefined;
-*/
-var useScrollTo = function useScrollTo(id) {
-  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
-  var delay = arguments.length > 4 ? arguments[4] : undefined;
-  var scrollItem;
-
-  if (delay) {
-    setTimeout(function () {
-      var _scrollItem;
-
-      scrollItem = document.getElementById(id);
-      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
-        top: top,
-        left: left,
-        behavior: behavior
-      });
-    }, delay);
-  } else {
-    var _scrollItem2;
-
-    scrollItem = document.getElementById(id);
-    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
-      top: top,
-      left: left,
-      behavior: behavior
-    });
-  }
-};
-
-var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
-  var _ref$showCheckbox = _ref.showCheckbox,
-      showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
-      onCheck = _ref.onCheck,
-      isChecked = _ref.isChecked,
-      hasError = _ref.hasError,
-      _ref$errorMessage = _ref.errorMessage,
-      errorMessage = _ref$errorMessage === void 0 ? "Please accept Terms and Conditions" : _ref$errorMessage,
-      _ref$description = _ref.description,
-      description = _ref$description === void 0 ? "" : _ref$description,
-      _ref$linkText = _ref.linkText,
-      linkText = _ref$linkText === void 0 ? "Terms and Conditions" : _ref$linkText,
-      html = _ref.html,
-      terms = _ref.terms,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? "terms-and-conditions" : _ref$id,
-      _ref$displayInline = _ref.displayInline,
-      displayInline = _ref$displayInline === void 0 ? true : _ref$displayInline,
-      _ref$modalVariant = _ref.modalVariant,
-      modalVariant = _ref$modalVariant === void 0 ? "default" : _ref$modalVariant,
-      _ref$containerBackgro = _ref.containerBackground,
-      containerBackground = _ref$containerBackgro === void 0 ? ATHENS_GREY : _ref$containerBackgro,
-      _ref$checkboxMargin = _ref.checkboxMargin,
-      checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
-      _ref$modalTitle = _ref.modalTitle,
-      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showTerms = _useState2[0],
-      toggleShowTerms = _useState2[1];
-
-  var standardBoxShadow = generateShadows().standard.base;
-
-  var toggleTerms = function toggleTerms(termsOpen) {
-    toggleShowTerms(termsOpen);
-
-    if (termsOpen) {
-      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: displayInline ? "0" : "1.5rem",
-    minWidth: displayInline ? "0" : "100%",
-    background: displayInline ? "transparent" : containerBackground,
-    boxShadow: displayInline ? "none" : standardBoxShadow,
-    borderRadius: displayInline ? "0" : "4px"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0"
-  }, html && /*#__PURE__*/React.createElement(Box, {
-    padding: "0"
-  }, html), /*#__PURE__*/React.createElement(Cluster, {
-    justify: "flex-start",
-    align: "center",
-    nowrap: true
-  }, showCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
-    name: id,
-    error: hasError,
-    checked: isChecked,
-    onChange: onCheck,
-    checkboxMargin: checkboxMargin,
-    extraStyles: "align-self: flex-start;"
-  }), /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0.25rem",
-    fullHeight: true
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    justify: "flex-start",
-    align: "center",
-    nowrap: true,
-    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
-  }, description && /*#__PURE__*/React.createElement(Text$1, {
-    color: CHARADE_GREY
-  }, description), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
-    link: linkText,
-    terms: terms,
-    isOpen: showTerms,
-    toggleOpen: toggleTerms,
-    linkVariant: modalVariant,
-    title: modalTitle
-  })), showCheckbox && hasError && /*#__PURE__*/React.createElement(Text$1, {
-    variant: "pXS",
-    color: ERROR_COLOR,
-    id: "".concat(id, "-error-message")
-  }, errorMessage)))));
-};
-
-var _excluded$y = ["version"];
-
-var TermsAndConditions = function TermsAndConditions(_ref) {
-  var _ref$version = _ref.version,
-      version = _ref$version === void 0 ? "v1" : _ref$version,
-      rest = _objectWithoutProperties(_ref, _excluded$y);
-
-  var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
-  return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
-};
-
 var Timeout = function Timeout(_ref) {
   var onLogout = _ref.onLogout;