@codecademy/tracking 1.1.0 → 1.1.1-alpha.a64a969cdf.0

package/dist/events/track.js

@@ -32,7 +32,7 @@ export const createTracker = _ref => {
       if (navigator.sendBeacon && navigator.sendBeacon(uri, form)) {
         return;
       }
-    } catch {
+    } catch (_unused) {
       // Even with the proper scoping, Chrome 79-80 still gives "Illegal invocation" crashes. Sigh.
     }
 
@@ -74,7 +74,7 @@ export const createTracker = _ref => {
       client: getClientType()
     }) : userData;
     if (verbose) {
-      console.groupCollapsed(`%cTracking Event Fired: ${category}:${event}`, 'color: #4b35ef; font-style: italic;');
+      console.groupCollapsed("%cTracking Event Fired: ".concat(category, ":").concat(event), 'color: #4b35ef; font-style: italic;');
       console.log({
         category,
         event,
@@ -90,14 +90,14 @@ export const createTracker = _ref => {
     if (typeof window !== 'undefined') {
       // This allows the UTM query params to get registered in the user session.
       const queryParams = window.location.search;
-      beacon(`${basePath}/${category}${queryParams}`, {
+      beacon("".concat(basePath, "/").concat(category).concat(queryParams), {
         category,
         event,
         properties: JSON.stringify(properties),
-        gdpr_safe: `${options.gdprSafe}`
+        gdpr_safe: "".concat(options.gdprSafe)
       });
     } else {
-      serverSideBeacon(`${basePath}/${category}`, {
+      serverSideBeacon("".concat(basePath, "/").concat(category), {
         category,
         event,
         properties: JSON.stringify(properties)
@@ -110,7 +110,8 @@ export const createTracker = _ref => {
     impression: data => event('user', 'impression', data),
     visit: data => event('user', 'visit', data),
     pushDataLayerEvent: eventName => {
-      (window.dataLayer ||= []).push({
+      var _ref6;
+      ((_ref6 = window).dataLayer || (_ref6.dataLayer = [])).push({
         event: eventName
       });
     }

package/dist/events/user.js

@@ -1,5 +1,5 @@
 export const fetchUser = async apiBaseUrl => {
-  const response = await fetch(`${apiBaseUrl}/users/web`, {
+  const response = await fetch("".concat(apiBaseUrl, "/users/web"), {
     method: 'GET',
     headers: {
       'Content-type': 'application/json',

package/dist/integrations/fides.js

@@ -4,466 +4,51 @@ import { theme } from '@codecademy/gamut-styles';
  */
 
 const PROPERTY_ID = 'FDS-3RC5S1';
-const FIDES_TIMEOUT = 10000; // 10 seconds
-
 const ot_fides_mapping = encodeURIComponent(JSON.stringify({
   C0001: ['essential'],
   C0002: ['analytics'],
   C0003: ['functional'],
   C0004: ['marketing']
 }));
-export const initializeFides = () => {
-  return new Promise((resolve, reject) => {
-    const timeout = setTimeout(() => {
-      reject(new Error('Fides initialization timed out'));
-    }, FIDES_TIMEOUT);
-    window.addEventListener('FidesInitialized', () => {
-      clearTimeout(timeout);
-      const fides = window.Fides;
-      try {
-        fides.gtm();
-        const unsubscribe = fides.onFidesEvent('FidesUIShown', detail => {
-          if (detail.extraDetails.servingComponent === 'banner') {
-            const banner = document.getElementById('fides-banner');
-            if (banner) {
-              banner.setAttribute('tabIndex', '-1');
-            }
-          }
-          unsubscribe();
-        });
-        resolve();
-      } catch (err) {
-        console.error('Error initializing Fides', err);
-        reject(err);
+const importFides = async () => {
+  var _win$define;
+  const win = window;
+  // Disable AMD globals for the Fides script
+  const oldAmd = (_win$define = win.define) === null || _win$define === void 0 ? void 0 : _win$define.amd;
+  if (oldAmd) {
+    win.define.amd = undefined;
+  }
+  // Fides gets stored on the window object
+  await import(/* webpackIgnore: true */"https://skillsoft-codecademy.fides-cdn.ethyca.com/fides.js?property_id=".concat(PROPERTY_ID, "&ot_fides_mapping=").concat(ot_fides_mapping));
+  if (oldAmd) {
+    win.define.amd = oldAmd;
+  }
+  if (!win.Fides) {
+    throw new Error('Failed to import Fides');
+  }
+  return win.Fides;
+};
+export const initializeFides = async () => {
+  try {
+    const fides = await importFides();
+    fides.gtm();
+    const unsubscribe = fides.onFidesEvent('FidesUIShown', detail => {
+      if (detail.extraDetails.servingComponent === 'banner') {
+        const banner = document.getElementById('fides-banner');
+        if (banner) {
+          banner.setAttribute('tabIndex', '-1');
+        }
       }
+      unsubscribe();
     });
-    const script = document.createElement('script');
-    script.setAttribute('async', 'true');
-    script.setAttribute('src', `https://skillsoft-codecademy.fides-cdn.ethyca.com/fides.js?property_id=${PROPERTY_ID}&ot_fides_mapping=${ot_fides_mapping}`);
-    script.setAttribute('type', 'text/javascript');
-    document.body.appendChild(script);
-    const style = document.createElement('style');
-    style.textContent = rawStyles;
-    document.body.appendChild(style);
-  });
+  } catch (err) {
+    console.error('Error initializing Fides', err);
+  }
+  const style = document.createElement('style');
+  style.textContent = rawStyles;
+  document.body.appendChild(style);
 };
 
 // For now, these three values duplicate theme colors from gamut-styles
 // We don't want to take a full dependency on that package here...
-const rawStyles = `
-:root {
-  /* Colors */
-
-  --fides-overlay-primary-color: ${theme.colors.hyper};
-  --fides-overlay-body-font-color: #484848;
-
-  /* Buttons */
-
-  --fides-overlay-primary-button-background-hover-color: ${theme.colors.hyper};
-
-  /* Toggles */
-  --fides-overlay-primary-active-color: var(--fides-overlay-primary-color);
-  --fides-overlay-primary-active-disabled-color: #bda4f7;
-  --fides-overlay-inactive-color: #cbd5e0;
-  --fides-overlay-disabled-color: #e1e7ee;
-
-  /* Everything else */
-  --fides-overlay-button-border-radius: ${theme.borderRadii.md};
-  --fides-overlay-font-family: inherit;
-  --fides-overlay-font-size-body: 0.875rem !important;
-  --fides-overlay-line-height: 1.375rem !important;
-  --fides-overlay-padding: padding: 1rem !important;
-  --fides-overlay-padding: 0.875rem 1rem !important;
-}
-
-.fides-banner, .fides-modal-container {
- -webkit-font-smoothing: auto;
-}
-
-div#fides-overlay {
-  font-size: var(--fides-overlay-font-size-body);
-  line-height: var(--fides-overlay-line-height);
-  z-index: 1000;
-  position: fixed;
-  white-space: pre-line;
-  font-family: inherit;
-  line-height: calc(1em + 0.4rem);
-  -webkit-font-smoothing: auto;
-  z-index: 9948031 !important
-}
-
-#fides-modal-link {
-  cursor: pointer;
-  display: none;
-}
-
-#fides-modal .fides-notice-toggle-title:hover {
-  background-color: ${theme.colors.white} !important
-}
-
-#fides-modal .fides-modal-content {
-  background-color: ${theme.colors.white} !important;
-  border:0;
-  font-size: 14px;
-  line-height: 1.4;
-}
-
-.fides-modal-description a:focus {
-  outline: 1px solid ${theme.colors.black} !important;
-}
-
-.fides-notice-toggle-title a:focus {
-  outline: 1px solid ${theme.colors.black} !important;
-}
-
-#fides-modal .fides-notice-toggle, #fides-modal  fides-notice-toggle-expanded {
-  background-color: ${theme.colors.white} !important;
-}
-
-#fides-modal .fides-banner-button-secondary.fides-save-button {
-  color: var(--fides-overlay-primary-button-background-color) !important;
-}
-
-#fides-modal .fides-modal-footer {
-  background-color: ${theme.colors.white}
-}
-
-#fides-modal .fides-toggle-display {
-  color: transparent;
-  padding: 0;
-  padding-block: 2px;
-  --offset: 0.2em !important;
-  --diameter: 1.2em !important;
-  background-color: #828285
-}
-
-.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {
-  background-color: var(--fides-overlay-primary-active-color) !important;
-}
-
-#fides-modal .fides-divider {
-  display: none !important
-}
-
-#fides-modal .fides-modal-title {
-  text-align: left !important;
-  font-size: 20px !important;
-}
-
-div#fides-banner-container {
-  bottom: 0 !important;
-  left: 0 !important;
-}
-
-div#fides-banner-container button.fides-banner-button {
-  font-size: 16px !important;
-}
-
-div#fides-banner {
-  line-height: var(--fides-overlay-line-height);
-  color: var(--fides-overlay-body-font-color) !important;
-  width: 100% !important;
-  overflow-y: hidden;
-  border: 0 !important;
-  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2) !important;
-  background-color: ${theme.colors.white};
-  -webkit-font-smoothing: auto;
-  bottom: 1px;
-}
-
-div#fides-banner:focus {
-  outline: 1px solid ${theme.colors.black} !important
-}
-
-div#fides-banner-inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 1436px;
-  margin: 0 auto;
-  row-gap: 16px;
-  row-gap: unset !important
-}
-
-/* Responsive banner */
-
-div#fides-banner-description {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-div#fides-banner-description span {
-  line-height: 1.375rem !important;
-}
-
-div#fides-banner-description > div {
-  text-align: center;
-}
-
-div#fides-banner-description > div a {
-  font-weight: bold;
-}
-
-div#fides-button-group {
-  justify-content: center;
-  gap: 2em;
-  background-color: transparent;
-}
-
-#fides-banner div#fides-button-group {
-  margin-top: 0.5em;
-  display: flex;
-  display: flex;
-  justify-content: center;
-  background-color: transparent;
-  gap: 16px !important;
-}
-
-div#fides-button-group .fides-banner-secondary-actions > button {
-  cursor: pointer;
-  text-decoration: none;
-  font-weight: bold;
-  padding: 10px 16px !important
-  padding-top: 3px !important;
-  margin-top: 0;
-  border: 1px solid var(--fides-overlay-primary-color);
-  border-radius: 2px;
-  box-sizing: border-box;
-}
-
-#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {
-  margin-right: 0px !important;
-}
-
-.fides-modal-footer div#fides-button-group {
-  width: 100% !important
-}
-
-#fides-modal .fides-modal-button-group.fides-modal-primary-actions {
-  margin-left: 0 !important;
-}
-
-.fides-gpc-label {
-  display: none !important;
-}
-
-button.fides-banner-button.fides-banner-button-tertiary {
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--fides-overlay-link-font-color);
-  text-decoration: underline;
-  cursor: pointer;
-  line-height: 2em;
-}
-
-/** Modal */
-
-div.fides-modal-content {
-  line-height: var(--fides-overlay-line-height);
-  color: var(--fides-overlay-body-font-color) !important;
-  box-sizing: border-box;
-  padding: var(--fides-overlay-padding);
-  border: 1px solid var(--fides-overlay-primary-color);
-  background-color: var(--fides-overlay-background-color);
-  border-radius: var(--fides-overlay-component-border-radius);
-  max-height: 100%;
-  max-width: 100%;
-  overflow-y: scroll;
-  z-index: 2;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.fides-toggle .fides-toggle-display {
-  --offset: 0.1em;
-  --diameter: 1em;
-  /** Because we have a "hidden" attr on this toggle element, some CSS libs customers use may include a global display: none on the hidden attr. To prevent our toggles from being hidden we use !important here **/
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: space-around;
-  width: calc(var(--diameter) * 2 + var(--offset) * 2);
-  height: calc(var(--diameter) + var(--offset) * 2);
-  box-sizing: content-box;
-  position: relative;
-  border-radius: 100vw;
-  background-color: var(--fides-overlay-inactive-color);
-  transition: 250ms;
-}
-
-/* Checked/unchecked states */
-.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {
-  background-color: var(--fides-overlay-primary-active-color);
-}
-.fides-toggle .fides-toggle-input:checked + .fides-toggle-display::before {
-  transform: translate(100%, -50%);
-}
-
-/* Disabled state */
-.fides-toggle .fides-toggle-input:disabled {
-  cursor: not-allowed;
-}
-.fides-toggle .fides-toggle-input:disabled + .fides-toggle-display {
-  background-color: var(--fides-overlay-disabled-color);
-}
-.fides-toggle .fides-toggle-input:disabled:checked + .fides-toggle-display {
-  background-color: var(--fides-overlay-primary-active-disabled-color);
-}
-
-/* Focus ring when using keyboard */
-.fides-toggle .fides-toggle-input:focus + .fides-toggle-display {
-  /* Firefox only has Highlight, not -webkit-focus-ring-color */
-  outline: 1px auto Highlight;
-  outline: 1px auto -webkit-focus-ring-color;
-}
-
-/* Disclosure */
-
-.fides-notice-toggle .fides-notice-toggle-title {
-  border: 0;
-}
-
-#fides-modal .fides-modal-secondary-actions {
-  display: none !important;
-}
-
-.fides-notice-toggle .fides-notice-toggle-trigger {
-  padding-left: 4px;
-  position: relative;
-  left: -4px;
-}
-
-.fides-notice-toggle-trigger > .fides-flex-center.fides-justify-space-between {
-  font-weight: bold
-}
-
-/* Tabs */
-
-.fides-tab-button::focus-visible {
-  outline: 1px auto ${theme.colors.black};
-}
-
-.fides-tab-button:focus:not(:focus-visible) {
-  outline: 4px solid ${theme.colors.hyper} !important;
-}
-
-.fides-toggle-input.focus-visible + .fides-toggle-display,
-.fides-banner-button.fides-banner-button-primary.focus-visible,
-.fides-banner-button.fides-banner-button-secondary.focus-visible,
-.fides-banner-button.fides-banner-button-tertiary.focus-visible {
-  outline: 3px solid ${theme.colors.hyper} !important;
-  outline-offset: 2px;
-}
-
-/* Table */
-
-.fides-cookies-table {
-  border-collapse: collapse;
-  width: 100%;
-  text-align: left;
-}
-
-.fides-cookies-table th {
-  text-transform: uppercase;
-}
-
-.fides-cookies-table td, .fides-cookies-table th {
-  border: 1px solid var(--fides-overlay-row-divider-color);
-  padding-left: 1.1em;
-  padding-right: 0.6em;
-}
-
-#fides-banner #fides-button-group button {
-  font-weight: bold;
-  padding: 10px 16px;
-  margin-top: 0;
-  border: 1px solid var(--fides-overlay-primary-color);
-  border-radius: 2px;
-}
-
-#fides-banner #fides-button-group div:nth-child(2) > button:nth-child(1) {
-  background-color: white;
-  color: #3a10e5;
-}
-
-#fides-banner-button-tertiary {
-  display: none;
-}
-
-#fides-banner-heading {
-  display: none !important;
-}
-
-div#fides-banner-inner div#fides-button-group {
-  flex-direction: row !important;
-}
-
-.fides-banner-description a:hover, .fides-modal-description a:hover {
-    text-decoration: none;
-}
-
-#fides-banner-inner-container a.focus-visible {
-  outline: 1px solid ${theme.colors.black} !important;
-}
-
-div#fides-banner-inner div#fides-button-group {
-  padding-top: 0 !important
-}
-
-#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {
-  width: auto !important
-}
-
-#fides-banner .fides-banner-button-group.fides-banner-primary-actions {
-  align-items: flex-end !important;
-  align-self: stretch !important
-}
-
-#fides-banner .fides-banner-button-group.fides-banner-secondary-actions {
-  align-items: flex-start !important;
-}
-
-.fides-notice-toggle:focus-visible {
-    outline: 1px solid ${theme.colors.black} !important;
-}
-
-@media (min-width: 37.5rem) {
-  #fides-banner {
-    padding: 0.875rem 1rem !important;
-  }
-}
-
-${theme.breakpoints.sm} {
-  div#fides-button-group .fides-banner-secondary-actions > button {
-    padding: 4px 16px !important
-  }
-
-  div#fides-banner-inner {
-   row-gap: 16px;
-  }
-
-  #fides-banner {
-    padding: 0.875rem 1.25rem !important;
-  }
-}
-
-@media only screen and (min-width: 1650px) {
-  #fides-banner-inner {
-    flex-direction: row !important;
-    max-width: 1600px !important;
-  }
-
-  #fides-banner-inner-container {
-    width: 72%;
-  }
-
-  #fides-banner div#fides-button-group {
-    width: 28% !important;
-  }
-
-  div#fides-banner-description {
-    margin-bottom: 0 !important;
-  }
-}`;
+const rawStyles = "\n:root {\n  /* Colors */\n\n  --fides-overlay-primary-color: ".concat(theme.colors.hyper, ";\n  --fides-overlay-body-font-color: #484848;\n\n  /* Buttons */\n\n  --fides-overlay-primary-button-background-hover-color: ").concat(theme.colors.hyper, ";\n\n  /* Toggles */\n  --fides-overlay-primary-active-color: var(--fides-overlay-primary-color);\n  --fides-overlay-primary-active-disabled-color: #bda4f7;\n  --fides-overlay-inactive-color: #cbd5e0;\n  --fides-overlay-disabled-color: #e1e7ee;\n\n  /* Everything else */\n  --fides-overlay-button-border-radius: ").concat(theme.borderRadii.md, ";\n  --fides-overlay-font-family: inherit;\n  --fides-overlay-font-size-body: 0.875rem !important;\n  --fides-overlay-line-height: 1.375rem !important;\n  --fides-overlay-padding: padding: 1rem !important;\n  --fides-overlay-padding: 0.875rem 1rem !important;\n}\n\n.fides-banner, .fides-modal-container {\n -webkit-font-smoothing: auto;\n}\n\ndiv#fides-overlay {\n  font-size: var(--fides-overlay-font-size-body);\n  line-height: var(--fides-overlay-line-height);\n  z-index: 1000;\n  position: fixed;\n  white-space: pre-line;\n  font-family: inherit;\n  line-height: calc(1em + 0.4rem);\n  -webkit-font-smoothing: auto;\n  z-index: 9948031 !important\n}\n\n#fides-modal-link {\n  cursor: pointer;\n  display: none;\n}\n\n#fides-modal .fides-notice-toggle-title:hover {\n  background-color: ").concat(theme.colors.white, " !important\n}\n\n#fides-modal .fides-modal-content {\n  background-color: ").concat(theme.colors.white, " !important;\n  border:0;\n  font-size: 14px;\n  line-height: 1.4;\n}\n\n.fides-modal-description a:focus {\n  outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n.fides-notice-toggle-title a:focus {\n  outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n#fides-modal .fides-notice-toggle, #fides-modal  fides-notice-toggle-expanded {\n  background-color: ").concat(theme.colors.white, " !important;\n}\n\n#fides-modal .fides-banner-button-secondary.fides-save-button {\n  color: var(--fides-overlay-primary-button-background-color) !important;\n}\n\n#fides-modal .fides-modal-footer {\n  background-color: ").concat(theme.colors.white, "\n}\n\n#fides-modal .fides-toggle-display {\n  color: transparent;\n  padding: 0;\n  padding-block: 2px;\n  --offset: 0.2em !important;\n  --diameter: 1.2em !important;\n  background-color: #828285\n}\n\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {\n  background-color: var(--fides-overlay-primary-active-color) !important;\n}\n\n#fides-modal .fides-divider {\n  display: none !important\n}\n\n#fides-modal .fides-modal-title {\n  text-align: left !important;\n  font-size: 20px !important;\n}\n\ndiv#fides-banner-container {\n  bottom: 0 !important;\n  left: 0 !important;\n}\n\ndiv#fides-banner-container button.fides-banner-button {\n  font-size: 16px !important;\n}\n\ndiv#fides-banner {\n  line-height: var(--fides-overlay-line-height);\n  color: var(--fides-overlay-body-font-color) !important;\n  width: 100% !important;\n  overflow-y: hidden;\n  border: 0 !important;\n  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2) !important;\n  background-color: ").concat(theme.colors.white, ";\n  -webkit-font-smoothing: auto;\n  bottom: 1px;\n}\n\ndiv#fides-banner:focus {\n  outline: 1px solid ").concat(theme.colors.black, " !important\n}\n\ndiv#fides-banner-inner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 1436px;\n  margin: 0 auto;\n  row-gap: 16px;\n  row-gap: unset !important\n}\n\n/* Responsive banner */\n\ndiv#fides-banner-description {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\ndiv#fides-banner-description span {\n  line-height: 1.375rem !important;\n}\n\ndiv#fides-banner-description > div {\n  text-align: center;\n}\n\ndiv#fides-banner-description > div a {\n  font-weight: bold;\n}\n\ndiv#fides-button-group {\n  justify-content: center;\n  gap: 2em;\n  background-color: transparent;\n}\n\n#fides-banner div#fides-button-group {\n  margin-top: 0.5em;\n  display: flex;\n  display: flex;\n  justify-content: center;\n  background-color: transparent;\n  gap: 16px !important;\n}\n\ndiv#fides-button-group .fides-banner-secondary-actions > button {\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: bold;\n  padding: 10px 16px !important\n  padding-top: 3px !important;\n  margin-top: 0;\n  border: 1px solid var(--fides-overlay-primary-color);\n  border-radius: 2px;\n  box-sizing: border-box;\n}\n\n#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {\n  margin-right: 0px !important;\n}\n\n.fides-modal-footer div#fides-button-group {\n  width: 100% !important\n}\n\n#fides-modal .fides-modal-button-group.fides-modal-primary-actions {\n  margin-left: 0 !important;\n}\n\n.fides-gpc-label {\n  display: none !important;\n}\n\nbutton.fides-banner-button.fides-banner-button-tertiary {\n  background: none;\n  border: none;\n  padding: 0;\n  color: var(--fides-overlay-link-font-color);\n  text-decoration: underline;\n  cursor: pointer;\n  line-height: 2em;\n}\n\n/** Modal */\n\ndiv.fides-modal-content {\n  line-height: var(--fides-overlay-line-height);\n  color: var(--fides-overlay-body-font-color) !important;\n  box-sizing: border-box;\n  padding: var(--fides-overlay-padding);\n  border: 1px solid var(--fides-overlay-primary-color);\n  background-color: var(--fides-overlay-background-color);\n  border-radius: var(--fides-overlay-component-border-radius);\n  max-height: 100%;\n  max-width: 100%;\n  overflow-y: scroll;\n  z-index: 2;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.fides-toggle .fides-toggle-display {\n  --offset: 0.1em;\n  --diameter: 1em;\n  /** Because we have a \"hidden\" attr on this toggle element, some CSS libs customers use may include a global display: none on the hidden attr. To prevent our toggles from being hidden we use !important here **/\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: space-around;\n  width: calc(var(--diameter) * 2 + var(--offset) * 2);\n  height: calc(var(--diameter) + var(--offset) * 2);\n  box-sizing: content-box;\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--fides-overlay-inactive-color);\n  transition: 250ms;\n}\n\n/* Checked/unchecked states */\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display {\n  background-color: var(--fides-overlay-primary-active-color);\n}\n.fides-toggle .fides-toggle-input:checked + .fides-toggle-display::before {\n  transform: translate(100%, -50%);\n}\n\n/* Disabled state */\n.fides-toggle .fides-toggle-input:disabled {\n  cursor: not-allowed;\n}\n.fides-toggle .fides-toggle-input:disabled + .fides-toggle-display {\n  background-color: var(--fides-overlay-disabled-color);\n}\n.fides-toggle .fides-toggle-input:disabled:checked + .fides-toggle-display {\n  background-color: var(--fides-overlay-primary-active-disabled-color);\n}\n\n/* Focus ring when using keyboard */\n.fides-toggle .fides-toggle-input:focus + .fides-toggle-display {\n  /* Firefox only has Highlight, not -webkit-focus-ring-color */\n  outline: 1px auto Highlight;\n  outline: 1px auto -webkit-focus-ring-color;\n}\n\n/* Disclosure */\n\n.fides-notice-toggle .fides-notice-toggle-title {\n  border: 0;\n}\n\n#fides-modal .fides-modal-secondary-actions {\n  display: none !important;\n}\n\n.fides-notice-toggle .fides-notice-toggle-trigger {\n  padding-left: 4px;\n  position: relative;\n  left: -4px;\n}\n\n.fides-notice-toggle-trigger > .fides-flex-center.fides-justify-space-between {\n  font-weight: bold\n}\n\n/* Tabs */\n\n.fides-tab-button::focus-visible {\n  outline: 1px auto ").concat(theme.colors.black, ";\n}\n\n.fides-tab-button:focus:not(:focus-visible) {\n  outline: 4px solid ").concat(theme.colors.hyper, " !important;\n}\n\n.fides-toggle-input.focus-visible + .fides-toggle-display,\n.fides-banner-button.fides-banner-button-primary.focus-visible,\n.fides-banner-button.fides-banner-button-secondary.focus-visible,\n.fides-banner-button.fides-banner-button-tertiary.focus-visible {\n  outline: 3px solid ").concat(theme.colors.hyper, " !important;\n  outline-offset: 2px;\n}\n\n/* Table */\n\n.fides-cookies-table {\n  border-collapse: collapse;\n  width: 100%;\n  text-align: left;\n}\n\n.fides-cookies-table th {\n  text-transform: uppercase;\n}\n\n.fides-cookies-table td, .fides-cookies-table th {\n  border: 1px solid var(--fides-overlay-row-divider-color);\n  padding-left: 1.1em;\n  padding-right: 0.6em;\n}\n\n#fides-banner #fides-button-group button {\n  font-weight: bold;\n  padding: 10px 16px;\n  margin-top: 0;\n  border: 1px solid var(--fides-overlay-primary-color);\n  border-radius: 2px;\n}\n\n#fides-banner #fides-button-group div:nth-child(2) > button:nth-child(1) {\n  background-color: white;\n  color: #3a10e5;\n}\n\n#fides-banner-button-tertiary {\n  display: none;\n}\n\n#fides-banner-heading {\n  display: none !important;\n}\n\ndiv#fides-banner-inner div#fides-button-group {\n  flex-direction: row !important;\n}\n\n.fides-banner-description a:hover, .fides-modal-description a:hover {\n    text-decoration: none;\n}\n\n#fides-banner-inner-container a.focus-visible {\n  outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\ndiv#fides-banner-inner div#fides-button-group {\n  padding-top: 0 !important\n}\n\n#fides-banner .fides-acknowledge-button, #fides-banner .fides-manage-preferences-button {\n  width: auto !important\n}\n\n#fides-banner .fides-banner-button-group.fides-banner-primary-actions {\n  align-items: flex-end !important;\n  align-self: stretch !important\n}\n\n#fides-banner .fides-banner-button-group.fides-banner-secondary-actions {\n  align-items: flex-start !important;\n}\n\n.fides-notice-toggle:focus-visible {\n    outline: 1px solid ").concat(theme.colors.black, " !important;\n}\n\n@media (min-width: 37.5rem) {\n  #fides-banner {\n    padding: 0.875rem 1rem !important;\n  }\n}\n\n").concat(theme.breakpoints.sm, " {\n  div#fides-button-group .fides-banner-secondary-actions > button {\n    padding: 4px 16px !important\n  }\n\n  div#fides-banner-inner {\n   row-gap: 16px;\n  }\n\n  #fides-banner {\n    padding: 0.875rem 1.25rem !important;\n  }\n}\n\n@media only screen and (min-width: 1650px) {\n  #fides-banner-inner {\n    flex-direction: row !important;\n    max-width: 1600px !important;\n  }\n\n  #fides-banner-inner-container {\n    width: 72%;\n  }\n\n  #fides-banner div#fides-button-group {\n    width: 28% !important;\n  }\n\n  div#fides-banner-description {\n    margin-bottom: 0 !important;\n  }\n}");

package/dist/integrations/gtm.js

@@ -1,10 +1,11 @@
 export const OPT_OUT_DATALAYER_VAR = 'user_opted_out_external_tracking';
 export const initializeGTM = _ref => {
+  var _scope$dataLayer;
   let scope = _ref.scope,
     environment = _ref.environment,
     optedOutExternalTracking = _ref.optedOutExternalTracking,
     enablePartytown = _ref.enablePartytown;
-  scope.dataLayer ??= [];
+  (_scope$dataLayer = scope.dataLayer) !== null && _scope$dataLayer !== void 0 ? _scope$dataLayer : scope.dataLayer = [];
   scope.dataLayer.push({
     'gtm.start': new Date().getTime(),
     event: 'gtm.js'
@@ -21,7 +22,7 @@ export const initializeGTM = _ref => {
     preview_env = '&gtm_auth=VrQuCDuWXkLlTwNHJYEKTg&gtm_preview=env-232';
   }
   const gtm = document.createElement('script');
-  gtm.src = `https://www.googletagmanager.com/gtm.js?id=GTM-KTLK85W${preview_env}`;
+  gtm.src = "https://www.googletagmanager.com/gtm.js?id=GTM-KTLK85W".concat(preview_env);
   if (enablePartytown) {
     gtm.type = 'text/partytown';
   } else {

package/dist/integrations/onetrust.js

@@ -11,15 +11,15 @@ export const initializeOneTrust = async _ref => {
   script.setAttribute('async', 'true');
   script.setAttribute('src', 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js');
   script.setAttribute('type', 'text/javascript');
-  script.setAttribute('data-domain-script', `${scriptId}${environment === 'production' ? '' : '-test'}`);
+  script.setAttribute('data-domain-script', "".concat(scriptId).concat(environment === 'production' ? '' : '-test'));
   document.body.appendChild(script);
   const style = document.createElement('style');
   style.textContent = rawStyles;
   document.body.appendChild(style);
   return new Promise(resolve => {
     scope.OptanonWrapper = () => {
-      var _script$parentNode;
-      scope.dataLayer ??= [];
+      var _scope$dataLayer, _script$parentNode;
+      (_scope$dataLayer = scope.dataLayer) !== null && _scope$dataLayer !== void 0 ? _scope$dataLayer : scope.dataLayer = [];
       scope.dataLayer.push({
         event: 'OneTrustGroupsUpdated'
       });
@@ -31,190 +31,4 @@ export const initializeOneTrust = async _ref => {
 
 // For now, these three values duplicate theme colors from gamut-styles
 // We don't want to take a full dependency on that package here...
-const rawStyles = `
-:root {
-  --onetrust-brand-purple: #3A10E5;
-  --onetrust-color-gray-500: #828285;
-  --onetrust-color-white: #fff;
-}
-
-#onetrust-banner-sdk {
-  padding: 1rem !important;
-}
-#onetrust-banner-sdk > .ot-sdk-container {
-  width: 100% !important;
-}
-#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-  max-width: 1436px !important;
-  margin: 0 auto !important;
-}
-#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row:after {
-  content: none !important;
-}
-#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-  max-width: 1436px !important;
-  margin: 0 auto !important;
-}
-#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row:after {
-  content: none !important;
-}
-#onetrust-group-container {
-  display: flex !important;
-  justify-content: center;
-  float: none !important;
-  width: 100% !important;
-  max-width: 1148px !important;
-  margin-left: 0 !important;
-  margin-bottom: 0.625rem !important;
-}
-
-#onetrust-policy,
-#onetrust-policy-text {
-  margin: 0 !important;
-  font-size: 0.875rem !important;
-  line-height: 1.375rem !important;
-  text-align: center !important;
-  float: none !important;
-}
-#onetrust-policy-text a {
-  text-decoration: none;
-  line-height: 26px !important;
-  margin-left: 0 !important;
-}
-#onetrust-button-group-parent {
-  position: relative !important;
-  top: initial !important;
-  left: initial !important;
-  transform: initial !important;
-  width: 264px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  float: none !important;
-}
-#onetrust-button-group {
-  display: flex !important;
-  margin: 0 !important;
-}
-#onetrust-pc-btn-handler, #onetrust-accept-btn-handler {
-  min-width: initial !important;
-  padding: 0.375rem 1rem !important;
-  margin: 0 !important;
-  opacity: 1 !important;
-  border-radius: 2px !important;
-  line-height: 1.5 !important;
-  user-select: none !important;
-  font-size: 1rem !important;
-}
-#onetrust-pc-btn-handler:focus, #onetrust-accept-btn-handler:focus {
-  box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);
-  text-decoration: none !important;
-  outline: none !important;
-}
-#onetrust-pc-btn-handler{
-  color: var(--onetrust-brand-purple) !important;
-  border: 1px solid var(--onetrust-brand-purple)!important;
-  background: var(--onetrust-color-white) !important
-}
-#onetrust-accept-btn-handler {
-  color: var(--onetrust-color-white) !important;
-  background: var(--onetrust-brand-purple)!important;
-  margin-left: 1rem !important;
-}
-#onetrust-close-btn-container {
-  display: none !important;
-}
-
-.pc-logo {
-  display: none !important;
-}
-
-#accept-recommended-btn-handler,
-.ot-pc-refuse-all-handler,
-.save-preference-btn-handler {
-  margin-left: 4px !important;
-  font-size: 14px !important;
-}
-
-#accept-recommended-btn-handler:focus,
-#onetrust-pc-sdk .ot-pc-refuse-all-handler:focus,
-#onetrust-pc-sdk .save-preference-btn-handler:focus {
-  box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);
-  text-decoration: none !important;
-  outline: none !important;
-  opacity: 1 !important;
-}
-
-.ot-switch-label {
-  border: 1px solid var(--onetrust-color-gray-500) !important;
-  background-color: var(--onetrust-color-gray-500) !important;
-}
-
-.ot-switch-nob {
-  background: var(--onetrust-color-white) !important;
-}
-
-.ot-switch-inner:before {
-  background-color: var(--onetrust-brand-purple) !important;
-}
-
-.switch-checkbox:checked+.ot-switch-label .ot-switch-nob {
-  border-color: var(--onetrust-brand-purple) !important;
-}
-
-.ot-pc-footer-logo {
-  display: none !important;
-}
-
-#onetrust-banner-sdk>.ot-sdk-container {
-  overflow: visible !important;
-}
-
-#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus + .ot-switch-label  {
-  	outline-color: var(--onetrust-brand-purple) !important;
-}
-#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus+.ot-switch-label {
-   outline-width: 3px !important;
-   outline-offset: 2px !important;
-}
-
-@media (max-width: 30rem) {
-  #accept-recommended-btn-handler,
-  .ot-pc-refuse-all-handler,
-  .save-preference-btn-handler {
-    width: 96% !important;
-  }
-}
-
-@media (min-width: 37.5rem) {
-  #onetrust-banner-sdk {
-    padding: 0.875rem 1rem !important;
-  }
-}
-@media (min-width: 48rem) {
-  #onetrust-banner-sdk {
-    padding: 0.875rem 1.25rem !important;
-  }
-}
-@media (min-width: 1650px) {
-  #onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {
-    flex-direction: row !important;
-    justify-content: space-between !important;
-  }
-  #onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {
-    flex-direction: row !important;
-    justify-content: space-between !important;
-  }
-  #onetrust-group-container {
-    margin-bottom: 0 !important;
-  }
-  #onetrust-button-group {
-    flex-direction: row !important;
-  }
-}
-`;
+const rawStyles = "\n:root {\n  --onetrust-brand-purple: #3A10E5;\n  --onetrust-color-gray-500: #828285;\n  --onetrust-color-white: #fff;\n}\n\n#onetrust-banner-sdk {\n  padding: 1rem !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container {\n  width: 100% !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: center !important;\n  max-width: 1436px !important;\n  margin: 0 auto !important;\n}\n#onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row:after {\n  content: none !important;\n}\n#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: center !important;\n  max-width: 1436px !important;\n  margin: 0 auto !important;\n}\n#onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row:after {\n  content: none !important;\n}\n#onetrust-group-container {\n  display: flex !important;\n  justify-content: center;\n  float: none !important;\n  width: 100% !important;\n  max-width: 1148px !important;\n  margin-left: 0 !important;\n  margin-bottom: 0.625rem !important;\n}\n\n#onetrust-policy,\n#onetrust-policy-text {\n  margin: 0 !important;\n  font-size: 0.875rem !important;\n  line-height: 1.375rem !important;\n  text-align: center !important;\n  float: none !important;\n}\n#onetrust-policy-text a {\n  text-decoration: none;\n  line-height: 26px !important;\n  margin-left: 0 !important;\n}\n#onetrust-button-group-parent {\n  position: relative !important;\n  top: initial !important;\n  left: initial !important;\n  transform: initial !important;\n  width: 264px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  float: none !important;\n}\n#onetrust-button-group {\n  display: flex !important;\n  margin: 0 !important;\n}\n#onetrust-pc-btn-handler, #onetrust-accept-btn-handler {\n  min-width: initial !important;\n  padding: 0.375rem 1rem !important;\n  margin: 0 !important;\n  opacity: 1 !important;\n  border-radius: 2px !important;\n  line-height: 1.5 !important;\n  user-select: none !important;\n  font-size: 1rem !important;\n}\n#onetrust-pc-btn-handler:focus, #onetrust-accept-btn-handler:focus {\n  box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);\n  text-decoration: none !important;\n  outline: none !important;\n}\n#onetrust-pc-btn-handler{\n  color: var(--onetrust-brand-purple) !important;\n  border: 1px solid var(--onetrust-brand-purple)!important;\n  background: var(--onetrust-color-white) !important\n}\n#onetrust-accept-btn-handler {\n  color: var(--onetrust-color-white) !important;\n  background: var(--onetrust-brand-purple)!important;\n  margin-left: 1rem !important;\n}\n#onetrust-close-btn-container {\n  display: none !important;\n}\n\n.pc-logo {\n  display: none !important;\n}\n\n#accept-recommended-btn-handler,\n.ot-pc-refuse-all-handler,\n.save-preference-btn-handler {\n  margin-left: 4px !important;\n  font-size: 14px !important;\n}\n\n#accept-recommended-btn-handler:focus,\n#onetrust-pc-sdk .ot-pc-refuse-all-handler:focus,\n#onetrust-pc-sdk .save-preference-btn-handler:focus {\n  box-shadow: 0 0 0 2px var(--onetrust-color-white), 0 0 0 4px var(--onetrust-brand-purple);\n  text-decoration: none !important;\n  outline: none !important;\n  opacity: 1 !important;\n}\n\n.ot-switch-label {\n  border: 1px solid var(--onetrust-color-gray-500) !important;\n  background-color: var(--onetrust-color-gray-500) !important;\n}\n\n.ot-switch-nob {\n  background: var(--onetrust-color-white) !important;\n}\n\n.ot-switch-inner:before {\n  background-color: var(--onetrust-brand-purple) !important;\n}\n\n.switch-checkbox:checked+.ot-switch-label .ot-switch-nob {\n  border-color: var(--onetrust-brand-purple) !important;\n}\n\n.ot-pc-footer-logo {\n  display: none !important;\n}\n\n#onetrust-banner-sdk>.ot-sdk-container {\n  overflow: visible !important;\n}\n\n#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus + .ot-switch-label  {\n  \toutline-color: var(--onetrust-brand-purple) !important;\n}\n#onetrust-pc-sdk .category-item .ot-switch.ot-toggle input:focus+.ot-switch-label {\n   outline-width: 3px !important;\n   outline-offset: 2px !important;\n}\n\n@media (max-width: 30rem) {\n  #accept-recommended-btn-handler,\n  .ot-pc-refuse-all-handler,\n  .save-preference-btn-handler {\n    width: 96% !important;\n  }\n}\n\n@media (min-width: 37.5rem) {\n  #onetrust-banner-sdk {\n    padding: 0.875rem 1rem !important;\n  }\n}\n@media (min-width: 48rem) {\n  #onetrust-banner-sdk {\n    padding: 0.875rem 1.25rem !important;\n  }\n}\n@media (min-width: 1650px) {\n  #onetrust-banner-sdk > .ot-sdk-container > .ot-sdk-row {\n    flex-direction: row !important;\n    justify-content: space-between !important;\n  }\n  #onetrust-banner-sdk > div > .ot-sdk-container > .ot-sdk-row {\n    flex-direction: row !important;\n    justify-content: space-between !important;\n  }\n  #onetrust-group-container {\n    margin-bottom: 0 !important;\n  }\n  #onetrust-button-group {\n    flex-direction: row !important;\n  }\n}\n";

package/dist/integrations/partytown/config.js

@@ -30,14 +30,14 @@ export const partytownConfig = () => ({
      * see https://partytown.builder.io/facebook-pixel#proxy-requests
      */
     if (url.hostname === 'connect.facebook.net') {
-      return new URL(`partytown-fb${url.pathname}${url.search}`, location.origin);
+      return new URL("partytown-fb".concat(url.pathname).concat(url.search), location.origin);
     }
 
     /*
      * Proxy Reddit Pixel requests to resolve CORS issues
      */
     if (url.hostname === 'www.redditstatic.com') {
-      return new URL(`partytown-reddit${url.pathname}${url.search}`, location.origin);
+      return new URL("partytown-reddit".concat(url.pathname).concat(url.search), location.origin);
     }
 
     /*
@@ -49,21 +49,21 @@ export const partytownConfig = () => ({
         // Google Ads returns a redirect if path has a trailing slash
         p = p.slice(0, -1);
       }
-      return new URL(`partytown-googleads${p}${url.search}`, location.origin);
+      return new URL("partytown-googleads".concat(p).concat(url.search), location.origin);
     }
 
     /*
      * Proxy Bing requests to resolve CORS issues
      */
     if (url.hostname === 'bat.bing.com') {
-      return new URL(`partytown-bing${url.pathname}${url.search}`, location.origin);
+      return new URL("partytown-bing".concat(url.pathname).concat(url.search), location.origin);
     }
 
     /*
      * Proxy YouTube requests to resolve CORS issues
      */
     if (url.hostname === 'www.youtube.com') {
-      return new URL(`partytown-youtube${url.pathname}${url.search}`, location.origin);
+      return new URL("partytown-youtube".concat(url.pathname).concat(url.search), location.origin);
     }
     return url;
   }

package/dist/integrations/partytown/index.js

@@ -3,7 +3,7 @@ import { partytownConfig } from './config';
 import { gtmDoubleFrame } from './gtmDoubleFrame';
 
 // Encapsulate to avoid collision of global vars aliased in minification.
-const encapsulate = js => `(() => {${js}})();`;
+const encapsulate = js => "(() => {".concat(js, "})();");
 export function initializePartytown() {
   const ptScript = document.createElement('script');
   ptScript.innerHTML = encapsulate(partytownSnippet(partytownConfig()));
@@ -19,6 +19,6 @@ export function initializePartytown() {
    * restore the style (and remove the added whitespace).
    */
   const styles = document.createElement('style');
-  styles.innerText = `body > img[aria-hidden=true] { position: absolute; }`;
+  styles.innerText = "body > img[aria-hidden=true] { position: absolute; }";
   document.head.appendChild(styles);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/tracking",
   "description": "Tracking library for Codecademy",
-  "version": "1.1.0",
+  "version": "1.1.1-alpha.a64a969cdf.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@qwik.dev/partytown": "0.11.0"