@codecademy/tracking 1.0.47-alpha.f992711c01.0 → 1.0.47

package/dist/events/track.js

@@ -32,7 +32,7 @@ export const createTracker = _ref => {
       if (navigator.sendBeacon && navigator.sendBeacon(uri, form)) {
         return;
       }
-    } catch (_unused) {
+    } catch {
       // 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: ".concat(category, ":").concat(event), 'color: #4b35ef; font-style: italic;');
+      console.groupCollapsed(`%cTracking Event Fired: ${category}:${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("".concat(basePath, "/").concat(category).concat(queryParams), {
+      beacon(`${basePath}/${category}${queryParams}`, {
         category,
         event,
         properties: JSON.stringify(properties),
-        gdpr_safe: "".concat(options.gdprSafe)
+        gdpr_safe: `${options.gdprSafe}`
       });
     } else {
-      serverSideBeacon("".concat(basePath, "/").concat(category), {
+      serverSideBeacon(`${basePath}/${category}`, {
         category,
         event,
         properties: JSON.stringify(properties)
@@ -110,8 +110,7 @@ export const createTracker = _ref => {
     impression: data => event('user', 'impression', data),
     visit: data => event('user', 'visit', data),
     pushDataLayerEvent: eventName => {
-      var _ref6;
-      ((_ref6 = window).dataLayer || (_ref6.dataLayer = [])).push({
+      (window.dataLayer ||= []).push({
         event: eventName
       });
     }

package/dist/events/user.js

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

package/dist/integrations/fides.js

@@ -7,7 +7,7 @@ const PROPERTY_ID = 'FDS-3RC5S1';
 export const initializeFides = () => {
   const script = document.createElement('script');
   script.setAttribute('async', 'true');
-  script.setAttribute('src', "https://skillsoft-codecademy.fides-cdn.ethyca.com/fides.js?property_id=".concat(PROPERTY_ID));
+  script.setAttribute('src', `https://skillsoft-codecademy.fides-cdn.ethyca.com/fides.js?property_id=${PROPERTY_ID}`);
   script.setAttribute('type', 'text/javascript');
   script.addEventListener('load', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -32,4 +32,419 @@ export const initializeFides = () => {
 
 // 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 = "\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}\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}");
+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;
+}
+
+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;
+  }
+}`;

package/dist/integrations/gtm.js

@@ -1,11 +1,10 @@
 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) !== null && _scope$dataLayer !== void 0 ? _scope$dataLayer : scope.dataLayer = [];
+  scope.dataLayer ??= [];
   scope.dataLayer.push({
     'gtm.start': new Date().getTime(),
     event: 'gtm.js'
@@ -22,7 +21,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".concat(preview_env);
+  gtm.src = `https://www.googletagmanager.com/gtm.js?id=GTM-KTLK85W${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', "".concat(scriptId).concat(environment === 'production' ? '' : '-test'));
+  script.setAttribute('data-domain-script', `${scriptId}${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 _scope$dataLayer, _script$parentNode;
-      (_scope$dataLayer = scope.dataLayer) !== null && _scope$dataLayer !== void 0 ? _scope$dataLayer : scope.dataLayer = [];
+      var _script$parentNode;
+      scope.dataLayer ??= [];
       scope.dataLayer.push({
         event: 'OneTrustGroupsUpdated'
       });
@@ -31,4 +31,190 @@ 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 = "\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";
+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;
+  }
+}
+`;

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".concat(url.pathname).concat(url.search), location.origin);
+      return new URL(`partytown-fb${url.pathname}${url.search}`, location.origin);
     }
 
     /*
      * Proxy Reddit Pixel requests to resolve CORS issues
      */
     if (url.hostname === 'www.redditstatic.com') {
-      return new URL("partytown-reddit".concat(url.pathname).concat(url.search), location.origin);
+      return new URL(`partytown-reddit${url.pathname}${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".concat(p).concat(url.search), location.origin);
+      return new URL(`partytown-googleads${p}${url.search}`, location.origin);
     }
 
     /*
      * Proxy Bing requests to resolve CORS issues
      */
     if (url.hostname === 'bat.bing.com') {
-      return new URL("partytown-bing".concat(url.pathname).concat(url.search), location.origin);
+      return new URL(`partytown-bing${url.pathname}${url.search}`, location.origin);
     }
 
     /*
      * Proxy YouTube requests to resolve CORS issues
      */
     if (url.hostname === 'www.youtube.com') {
-      return new URL("partytown-youtube".concat(url.pathname).concat(url.search), location.origin);
+      return new URL(`partytown-youtube${url.pathname}${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 => "(() => {".concat(js, "})();");
+const encapsulate = js => `(() => {${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.0.47-alpha.f992711c01.0",
+  "version": "1.0.47",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@qwik.dev/partytown": "0.11.0"