Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

4 files changed, 5277 insertions, 0 deletions

diff --git a/browser/components/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
new file mode 100644
index 0000000000..cb4e9004f8
--- /dev/null
+++ b/browser/components/aboutwelcome/content/aboutwelcome.bundle.js
@@ -0,0 +1,2678 @@
+/*!
+ * 
+ * NOTE: This file is generated by webpack from aboutwelcome.jsx
+ * using the npm bundle task.
+ *
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ([
+/* 0 */,
+/* 1 */
+/***/ ((module) => {
+
+module.exports = React;
+
+/***/ }),
+/* 2 */
+/***/ ((module) => {
+
+module.exports = ReactDOM;
+
+/***/ }),
+/* 3 */
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "AboutWelcomeUtils": () => (/* binding */ AboutWelcomeUtils),
+/* harmony export */   "DEFAULT_RTAMO_CONTENT": () => (/* binding */ DEFAULT_RTAMO_CONTENT)
+/* harmony export */ });
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// If the container has a "page" data attribute, then this is
+// a Spotlight modal or Feature Callout. Otherwise, this is
+// about:welcome and we should return the current page.
+const page =
+  document.querySelector(
+    "#multi-stage-message-root.onboardingContainer[data-page]"
+  )?.dataset.page || document.location.href;
+
+const AboutWelcomeUtils = {
+  handleUserAction(action) {
+    return window.AWSendToParent("SPECIAL_ACTION", action);
+  },
+  sendImpressionTelemetry(messageId, context) {
+    window.AWSendEventTelemetry?.({
+      event: "IMPRESSION",
+      event_context: {
+        ...context,
+        page,
+      },
+      message_id: messageId,
+    });
+  },
+  sendActionTelemetry(messageId, elementId, eventName = "CLICK_BUTTON") {
+    const ping = {
+      event: eventName,
+      event_context: {
+        source: elementId,
+        page,
+      },
+      message_id: messageId,
+    };
+    window.AWSendEventTelemetry?.(ping);
+  },
+  sendDismissTelemetry(messageId, elementId) {
+    // Don't send DISMISS telemetry in spotlight modals since they already send
+    // their own equivalent telemetry.
+    if (page !== "spotlight") {
+      this.sendActionTelemetry(messageId, elementId, "DISMISS");
+    }
+  },
+  async fetchFlowParams(metricsFlowUri) {
+    let flowParams;
+    try {
+      const response = await fetch(metricsFlowUri, {
+        credentials: "omit",
+      });
+      if (response.status === 200) {
+        const { deviceId, flowId, flowBeginTime } = await response.json();
+        flowParams = { deviceId, flowId, flowBeginTime };
+      } else {
+        console.error("Non-200 response", response);
+      }
+    } catch (e) {
+      flowParams = null;
+    }
+    return flowParams;
+  },
+  sendEvent(type, detail) {
+    document.dispatchEvent(
+      new CustomEvent(`AWPage:${type}`, {
+        bubbles: true,
+        detail,
+      })
+    );
+  },
+  getLoadingStrategyFor(url) {
+    return url?.startsWith("http") ? "lazy" : "eager";
+  },
+};
+
+const DEFAULT_RTAMO_CONTENT = {
+  template: "return_to_amo",
+  utm_term: "rtamo",
+  content: {
+    position: "split",
+    title: { string_id: "mr1-return-to-amo-subtitle" },
+    has_noodles: false,
+    subtitle: {
+      string_id: "mr1-return-to-amo-addon-title",
+    },
+    backdrop:
+      "var(--mr-welcome-background-color) var(--mr-welcome-background-gradient)",
+    background:
+      "url('chrome://activity-stream/content/data/content/assets/mr-rtamo-background-image.svg') no-repeat center",
+    progress_bar: true,
+    primary_button: {
+      label: { string_id: "mr1-return-to-amo-add-extension-label" },
+      source_id: "ADD_EXTENSION_BUTTON",
+      action: {
+        type: "INSTALL_ADDON_FROM_URL",
+        data: { url: null, telemetrySource: "rtamo" },
+      },
+    },
+    secondary_button: {
+      label: {
+        string_id: "onboarding-not-now-button-label",
+      },
+      source_id: "RTAMO_START_BROWSING_BUTTON",
+      action: {
+        type: "OPEN_AWESOME_BAR",
+      },
+    },
+    secondary_button_top: {
+      label: {
+        string_id: "mr1-onboarding-sign-in-button-label",
+      },
+      source_id: "RTAMO_FXA_SIGNIN_BUTTON",
+      action: {
+        data: {
+          entrypoint: "activity-stream-firstrun",
+          where: "tab",
+        },
+        type: "SHOW_FIREFOX_ACCOUNTS",
+        addFlowParams: true,
+      },
+    },
+  },
+};
+
+
+/***/ }),
+/* 4 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MultiStageAboutWelcome": () => (/* binding */ MultiStageAboutWelcome),
+/* harmony export */   "SecondaryCTA": () => (/* binding */ SecondaryCTA),
+/* harmony export */   "StepsIndicator": () => (/* binding */ StepsIndicator),
+/* harmony export */   "ProgressBar": () => (/* binding */ ProgressBar),
+/* harmony export */   "WelcomeScreen": () => (/* binding */ WelcomeScreen)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
+/* harmony import */ var _LanguageSwitcher__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
+/* harmony import */ var _SubmenuButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(15);
+/* harmony import */ var _lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(19);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+
+
+
+
+// Amount of milliseconds for all transitions to complete (including delays).
+const TRANSITION_OUT_TIME = 1000;
+const LANGUAGE_MISMATCH_SCREEN_ID = "AW_LANGUAGE_MISMATCH";
+const MultiStageAboutWelcome = props => {
+  let {
+    defaultScreens
+  } = props;
+  const didFilter = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  const [didMount, setDidMount] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  const [screens, setScreens] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(defaultScreens);
+  const [index, setScreenIndex] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(props.startScreen);
+  const [previousOrder, setPreviousOrder] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(props.startScreen - 1);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    (async () => {
+      // If we want to load index from history state, we don't want to send impression yet
+      if (!didMount) {
+        return;
+      }
+      // On about:welcome first load, screensVisited should be empty
+      let screensVisited = didFilter.current ? screens.slice(0, index) : [];
+      let upcomingScreens = defaultScreens.filter(s => !screensVisited.find(v => v.id === s.id))
+      // Filter out Language Mismatch screen from upcoming
+      // screens if screens set from useLanguageSwitcher hook
+      // has filtered language screen
+      .filter(upcomingScreen => !(!screens.find(s => s.id === LANGUAGE_MISMATCH_SCREEN_ID) && upcomingScreen.id === LANGUAGE_MISMATCH_SCREEN_ID));
+      let filteredScreens = screensVisited.concat((await window.AWEvaluateScreenTargeting(upcomingScreens)) ?? upcomingScreens);
+
+      // Use existing screen for the filtered screen to carry over any modification
+      // e.g. if AW_LANGUAGE_MISMATCH exists, use it from existing screens
+      setScreens(filteredScreens.map(filtered => screens.find(s => s.id === filtered.id) ?? filtered));
+      didFilter.current = true;
+      const screenInitials = filteredScreens.map(({
+        id
+      }) => id?.split("_")[1]?.[0]).join("");
+      // Send impression ping when respective screen first renders
+      filteredScreens.forEach((screen, order) => {
+        if (index === order) {
+          const messageId = `${props.message_id}_${order}_${screen.id}_${screenInitials}`;
+          _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendImpressionTelemetry(messageId, {
+            screen_family: props.message_id,
+            screen_index: order,
+            screen_id: screen.id,
+            screen_initials: screenInitials
+          });
+          window.AWAddScreenImpression?.(screen);
+        }
+      });
+
+      // Remember that a new screen has loaded for browser navigation
+      if (props.updateHistory && index > window.history.state) {
+        window.history.pushState(index, "");
+      }
+
+      // Remember the previous screen index so we can animate the transition
+      setPreviousOrder(index);
+    })();
+  }, [index, didMount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const [flowParams, setFlowParams] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const {
+    metricsFlowUri
+  } = props;
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    (async () => {
+      if (metricsFlowUri) {
+        setFlowParams(await _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.fetchFlowParams(metricsFlowUri));
+      }
+    })();
+  }, [metricsFlowUri]);
+
+  // Allow "in" style to render to actually transition towards regular state,
+  // which also makes using browser back/forward navigation skip transitions.
+  const [transition, setTransition] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(props.transitions ? "in" : "");
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (transition === "in") {
+      requestAnimationFrame(() => requestAnimationFrame(() => setTransition("")));
+    }
+  }, [transition]);
+
+  // Transition to next screen, opening about:home on last screen button CTA
+  const handleTransition = () => {
+    // Only handle transitioning out from a screen once.
+    if (transition === "out") {
+      return;
+    }
+
+    // Start transitioning things "out" immediately when moving forwards.
+    setTransition(props.transitions ? "out" : "");
+
+    // Actually move forwards after all transitions finish.
+    setTimeout(() => {
+      if (index < screens.length - 1) {
+        setTransition(props.transitions ? "in" : "");
+        setScreenIndex(prevState => prevState + 1);
+      } else {
+        window.AWFinish();
+      }
+    }, props.transitions ? TRANSITION_OUT_TIME : 0);
+  };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    // When about:welcome loads (on refresh or pressing back button
+    // from about:home), ensure history state usEffect runs before
+    // useEffect hook that send impression telemetry
+    setDidMount(true);
+    if (props.updateHistory) {
+      // Switch to the screen tracked in state (null for initial state)
+      // or last screen index if a user navigates by pressing back
+      // button from about:home
+      const handler = ({
+        state
+      }) => {
+        if (transition === "out") {
+          return;
+        }
+        setTransition(props.transitions ? "out" : "");
+        setTimeout(() => {
+          setTransition(props.transitions ? "in" : "");
+          setScreenIndex(Math.min(state, screens.length - 1));
+        }, props.transitions ? TRANSITION_OUT_TIME : 0);
+      };
+
+      // Handle page load, e.g., going back to about:welcome from about:home
+      const {
+        state
+      } = window.history;
+      if (state) {
+        setScreenIndex(Math.min(state, screens.length - 1));
+        setPreviousOrder(Math.min(state, screens.length - 1));
+      }
+
+      // Watch for browser back/forward button navigation events
+      window.addEventListener("popstate", handler);
+      return () => window.removeEventListener("popstate", handler);
+    }
+    return false;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const [multiSelects, setMultiSelects] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
+
+  // Save the active multi select state for each screen as an object keyed by
+  // screen id. Each screen id has an array containing checkbox ids used in
+  // handleAction to update MULTI_ACTION data. This allows us to remember the
+  // state of each screen's multi select checkboxes when navigating back and
+  // forth between screens, while also allowing a message to have more than one
+  // multi select screen.
+  const [activeMultiSelects, setActiveMultiSelects] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
+
+  // Get the active theme so the rendering code can make it selected
+  // by default.
+  const [activeTheme, setActiveTheme] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const [initialTheme, setInitialTheme] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    (async () => {
+      let theme = await window.AWGetSelectedTheme();
+      setInitialTheme(theme);
+      setActiveTheme(theme);
+    })();
+  }, []);
+  const {
+    negotiatedLanguage,
+    langPackInstallPhase,
+    languageFilteredScreens
+  } = (0,_LanguageSwitcher__WEBPACK_IMPORTED_MODULE_4__.useLanguageSwitcher)(props.appAndSystemLocaleInfo, screens, index, setScreenIndex);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    setScreens(languageFilteredScreens);
+  }, [languageFilteredScreens]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: `outer-wrapper onboardingContainer proton transition-${transition}`,
+    style: props.backdrop ? {
+      background: props.backdrop
+    } : {}
+  }, screens.map((screen, order) => {
+    const isFirstScreen = screen === screens[0];
+    const isLastScreen = screen === screens[screens.length - 1];
+    const totalNumberOfScreens = screens.length;
+    const isSingleScreen = totalNumberOfScreens === 1;
+    const setActiveMultiSelect = valueOrFn => setActiveMultiSelects(prevState => ({
+      ...prevState,
+      [screen.id]: typeof valueOrFn === "function" ? valueOrFn(prevState[screen.id]) : valueOrFn
+    }));
+    const setScreenMultiSelects = valueOrFn => setMultiSelects(prevState => ({
+      ...prevState,
+      [screen.id]: typeof valueOrFn === "function" ? valueOrFn(prevState[screen.id]) : valueOrFn
+    }));
+    return index === order ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(WelcomeScreen, {
+      key: screen.id + order,
+      id: screen.id,
+      totalNumberOfScreens: totalNumberOfScreens,
+      isFirstScreen: isFirstScreen,
+      isLastScreen: isLastScreen,
+      isSingleScreen: isSingleScreen,
+      order: order,
+      previousOrder: previousOrder,
+      content: screen.content,
+      navigate: handleTransition,
+      messageId: `${props.message_id}_${order}_${screen.id}`,
+      UTMTerm: props.utm_term,
+      flowParams: flowParams,
+      activeTheme: activeTheme,
+      initialTheme: initialTheme,
+      setActiveTheme: setActiveTheme,
+      setInitialTheme: setInitialTheme,
+      screenMultiSelects: multiSelects[screen.id],
+      setScreenMultiSelects: setScreenMultiSelects,
+      activeMultiSelect: activeMultiSelects[screen.id],
+      setActiveMultiSelect: setActiveMultiSelect,
+      autoAdvance: screen.auto_advance,
+      negotiatedLanguage: negotiatedLanguage,
+      langPackInstallPhase: langPackInstallPhase,
+      forceHideStepsIndicator: screen.force_hide_steps_indicator,
+      ariaRole: props.ariaRole,
+      aboveButtonStepsIndicator: screen.above_button_steps_indicator
+    }) : null;
+  })));
+};
+const SecondaryCTA = props => {
+  const targetElement = props.position ? `secondary_button_${props.position}` : `secondary_button`;
+  let buttonStyling = props.content.secondary_button?.has_arrow_icon ? `secondary arrow-icon` : `secondary`;
+  const isPrimary = props.content.secondary_button?.style === "primary";
+  const isTextLink = !["split", "callout"].includes(props.content.position) && props.content.tiles?.type !== "addons-picker" && !isPrimary;
+  const isSplitButton = props.content.submenu_button?.attached_to === targetElement;
+  let className = "secondary-cta";
+  if (props.position) {
+    className += ` ${props.position}`;
+  }
+  if (isSplitButton) {
+    className += " split-button-container";
+  }
+  const isDisabled = react__WEBPACK_IMPORTED_MODULE_0___default().useCallback(disabledValue => disabledValue === "hasActiveMultiSelect" ? !(props.activeMultiSelect?.length > 0) : disabledValue, [props.activeMultiSelect?.length]);
+  if (isTextLink) {
+    buttonStyling += " text-link";
+  }
+  if (isPrimary) {
+    buttonStyling = props.content.secondary_button?.has_arrow_icon ? `primary arrow-icon` : `primary`;
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: className
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: props.content[targetElement].text
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: props.content[targetElement].label
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: buttonStyling,
+    value: targetElement,
+    disabled: isDisabled(props.content.secondary_button?.disabled),
+    onClick: props.handleAction
+  })), isSplitButton ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SubmenuButton__WEBPACK_IMPORTED_MODULE_5__.SubmenuButton, {
+    content: props.content,
+    handleAction: props.handleAction
+  }) : null);
+};
+const StepsIndicator = props => {
+  let steps = [];
+  for (let i = 0; i < props.totalNumberOfScreens; i++) {
+    let className = `${i === props.order ? "current" : ""} ${i < props.order ? "complete" : ""}`;
+    steps.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      key: i,
+      className: `indicator ${className}`,
+      role: "presentation"
+    }));
+  }
+  return steps;
+};
+const ProgressBar = ({
+  step,
+  previousStep,
+  totalNumberOfScreens
+}) => {
+  const [progress, setProgress] = react__WEBPACK_IMPORTED_MODULE_0___default().useState(previousStep / totalNumberOfScreens);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    // We don't need to hook any dependencies because any time the step changes,
+    // the screen's entire DOM tree will be re-rendered.
+    setProgress(step / totalNumberOfScreens);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "indicator",
+    role: "presentation",
+    style: {
+      "--progress-bar-progress": `${progress * 100}%`
+    }
+  });
+};
+class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+  constructor(props) {
+    super(props);
+    this.handleAction = this.handleAction.bind(this);
+  }
+  handleOpenURL(action, flowParams, UTMTerm) {
+    let {
+      type,
+      data
+    } = action;
+    if (type === "SHOW_FIREFOX_ACCOUNTS") {
+      let params = {
+        ..._lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_6__.BASE_PARAMS,
+        utm_term: `${UTMTerm}-screen`
+      };
+      if (action.addFlowParams && flowParams) {
+        params = {
+          ...params,
+          ...flowParams
+        };
+      }
+      data = {
+        ...data,
+        extraParams: params
+      };
+    } else if (type === "OPEN_URL") {
+      let url = new URL(data.args);
+      (0,_lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_6__.addUtmParams)(url, `${UTMTerm}-screen`);
+      if (action.addFlowParams && flowParams) {
+        url.searchParams.append("device_id", flowParams.deviceId);
+        url.searchParams.append("flow_id", flowParams.flowId);
+        url.searchParams.append("flow_begin_time", flowParams.flowBeginTime);
+      }
+      data = {
+        ...data,
+        args: url.toString()
+      };
+    }
+    return _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.handleUserAction({
+      type,
+      data
+    });
+  }
+  async handleAction(event) {
+    let {
+      props
+    } = this;
+    const value = event.currentTarget.value ?? event.currentTarget.getAttribute("value");
+    const source = event.source || value;
+    let targetContent = props.content[value] || props.content.tiles || props.content.languageSwitcher;
+    if (value === "submenu_button" && event.action) {
+      targetContent = {
+        action: event.action
+      };
+    }
+    if (!(targetContent && targetContent.action)) {
+      return;
+    }
+    // Send telemetry before waiting on actions
+    _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(props.messageId, source, event.name);
+
+    // Send additional telemetry if a messaging surface like feature callout is
+    // dismissed via the dismiss button. Other causes of dismissal will be
+    // handled separately by the messaging surface's own code.
+    if (value === "dismiss_button" && !event.name) {
+      _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendDismissTelemetry(props.messageId, source);
+    }
+    let {
+      action
+    } = targetContent;
+    action = JSON.parse(JSON.stringify(action));
+    if (action.collectSelect) {
+      this.setMultiSelectActions(action);
+    }
+    let actionResult;
+    if (["OPEN_URL", "SHOW_FIREFOX_ACCOUNTS"].includes(action.type)) {
+      actionResult = await this.handleOpenURL(action, props.flowParams, props.UTMTerm);
+    } else if (action.type) {
+      actionResult = await _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.handleUserAction(action);
+      if (action.type === "FXA_SIGNIN_FLOW") {
+        _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(props.messageId, actionResult ? "sign_in" : "sign_in_cancel", "FXA_SIGNIN_FLOW");
+      }
+      // Wait until migration closes to complete the action
+      const hasMigrate = a => a.type === "SHOW_MIGRATION_WIZARD" || a.type === "MULTI_ACTION" && a.data?.actions?.some(hasMigrate);
+      if (hasMigrate(action)) {
+        await window.AWWaitForMigrationClose();
+        _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(props.messageId, "migrate_close");
+      }
+    }
+
+    // A special tiles.action.theme value indicates we should use the event's value vs provided value.
+    if (action.theme) {
+      let themeToUse = action.theme === "<event>" ? event.currentTarget.value : this.props.initialTheme || action.theme;
+      this.props.setActiveTheme(themeToUse);
+      window.AWSelectTheme(themeToUse);
+    }
+
+    // If the action has persistActiveTheme: true, we set the initial theme to the currently active theme
+    // so that it can be reverted to in the event that the user navigates away from the screen
+    if (action.persistActiveTheme) {
+      this.props.setInitialTheme(this.props.activeTheme);
+    }
+
+    // `navigate` and `dismiss` can be true/false/undefined, or they can be a
+    // string "actionResult" in which case we should use the actionResult
+    // (boolean resolved by handleUserAction)
+    const shouldDoBehavior = behavior => behavior === "actionResult" ? actionResult : behavior;
+    if (shouldDoBehavior(action.navigate)) {
+      props.navigate();
+    }
+    if (shouldDoBehavior(action.dismiss)) {
+      window.AWFinish();
+    }
+  }
+  setMultiSelectActions(action) {
+    let {
+      props
+    } = this;
+    // Populate MULTI_ACTION data actions property with selected checkbox
+    // actions from tiles data
+    if (action.type !== "MULTI_ACTION") {
+      console.error("collectSelect is only supported for MULTI_ACTION type actions");
+      action.type = "MULTI_ACTION";
+    }
+    if (!Array.isArray(action.data?.actions)) {
+      console.error("collectSelect is only supported for MULTI_ACTION type actions with an array of actions");
+      action.data = {
+        actions: []
+      };
+    }
+
+    // Prepend the multi-select actions to the CTA's actions array, but keep
+    // the actions in the same order they appear in. This way the CTA action
+    // can go last, after the multi-select actions are processed. For example,
+    // 1. checkbox action 1
+    // 2. checkbox action 2
+    // 3. radio action
+    // 4. CTA action (which perhaps depends on the radio action)
+    let multiSelectActions = [];
+    for (const checkbox of props.content?.tiles?.data ?? []) {
+      let checkboxAction;
+      if (props.activeMultiSelect?.includes(checkbox.id)) {
+        checkboxAction = checkbox.checkedAction ?? checkbox.action;
+      } else {
+        checkboxAction = checkbox.uncheckedAction;
+      }
+      if (checkboxAction) {
+        multiSelectActions.push(checkboxAction);
+      }
+    }
+    action.data.actions.unshift(...multiSelectActions);
+
+    // Send telemetry with selected checkbox ids
+    _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(props.messageId, props.activeMultiSelect, "SELECT_CHECKBOX");
+  }
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_3__.MultiStageProtonScreen, {
+      content: this.props.content,
+      id: this.props.id,
+      order: this.props.order,
+      previousOrder: this.props.previousOrder,
+      activeTheme: this.props.activeTheme,
+      screenMultiSelects: this.props.screenMultiSelects,
+      setScreenMultiSelects: this.props.setScreenMultiSelects,
+      activeMultiSelect: this.props.activeMultiSelect,
+      setActiveMultiSelect: this.props.setActiveMultiSelect,
+      totalNumberOfScreens: this.props.totalNumberOfScreens,
+      appAndSystemLocaleInfo: this.props.appAndSystemLocaleInfo,
+      negotiatedLanguage: this.props.negotiatedLanguage,
+      langPackInstallPhase: this.props.langPackInstallPhase,
+      handleAction: this.handleAction,
+      messageId: this.props.messageId,
+      isFirstScreen: this.props.isFirstScreen,
+      isLastScreen: this.props.isLastScreen,
+      isSingleScreen: this.props.isSingleScreen,
+      startsWithCorner: this.props.startsWithCorner,
+      autoAdvance: this.props.autoAdvance,
+      forceHideStepsIndicator: this.props.forceHideStepsIndicator,
+      ariaRole: this.props.ariaRole,
+      aboveButtonStepsIndicator: this.props.aboveButtonStepsIndicator
+    });
+  }
+}
+
+/***/ }),
+/* 5 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "CONFIGURABLE_STYLES": () => (/* binding */ CONFIGURABLE_STYLES),
+/* harmony export */   "Localized": () => (/* binding */ Localized)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+const CONFIGURABLE_STYLES = ["color", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "marginBlock", "marginInline", "paddingBlock", "paddingInline", "whiteSpace"];
+const ZAP_SIZE_THRESHOLD = 160;
+
+/**
+ * Based on the .text prop, localizes an inner element if a string_id
+ * is provided, OR renders plain text, OR hides it if nothing is provided.
+ * Allows configuring of some styles including zap underline and color.
+ *
+ * Examples:
+ *
+ * Localized text
+ * ftl:
+ *  title = Welcome
+ * jsx:
+ *   <Localized text={{string_id: "title"}}><h1 /></Localized>
+ * output:
+ *   <h1 data-l10n-id="title">Welcome</h1>
+ *
+ * Unlocalized text
+ * jsx:
+ *   <Localized text="Welcome"><h1 /></Localized>
+ *   <Localized text={{raw: "Welcome"}}><h1 /></Localized>
+ * output:
+ *   <h1>Welcome</h1>
+ */
+
+const Localized = ({
+  text,
+  children
+}) => {
+  // Dynamically determine the size of the zap style.
+  const zapRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    const {
+      current
+    } = zapRef;
+    if (current) {
+      requestAnimationFrame(() => current?.classList.replace("short", current.getBoundingClientRect().width > ZAP_SIZE_THRESHOLD ? "long" : "short"));
+    }
+  });
+
+  // Skip rendering of children with no text.
+  if (!text) {
+    return null;
+  }
+
+  // Allow augmenting existing child container properties.
+  const props = {
+    children: [],
+    className: "",
+    style: {},
+    ...children?.props
+  };
+  // Support nested Localized by starting with their children.
+  const textNodes = Array.isArray(props.children) ? props.children : [props.children];
+
+  // Pick desired fluent or raw/plain text to render.
+  if (text.string_id) {
+    // Set the key so React knows not to reuse when switching to plain text.
+    props.key = text.string_id;
+    props["data-l10n-id"] = text.string_id;
+    if (text.args) {
+      props["data-l10n-args"] = JSON.stringify(text.args);
+    }
+  } else if (text.raw) {
+    textNodes.push(text.raw);
+  } else if (typeof text === "string") {
+    textNodes.push(text);
+  }
+
+  // Add zap style and content in a way that allows fluent to insert too.
+  if (text.zap) {
+    props.className += " welcomeZap";
+    textNodes.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+      className: "short zap",
+      "data-l10n-name": "zap",
+      ref: zapRef
+    }, text.zap));
+  }
+  if (text.aria_label) {
+    props["aria-label"] = text.aria_label;
+  }
+
+  // Apply certain configurable styles.
+  CONFIGURABLE_STYLES.forEach(style => {
+    if (text[style] !== undefined) {
+      props.style[style] = text[style];
+    }
+  });
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().cloneElement(
+  // Provide a default container for the text if necessary.
+  children ?? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null), props,
+  // Conditionally pass in as void elements can't accept empty array.
+  textNodes.length ? textNodes : null);
+};
+
+/***/ }),
+/* 6 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MultiStageProtonScreen": () => (/* binding */ MultiStageProtonScreen),
+/* harmony export */   "ProtonScreenActionButtons": () => (/* binding */ ProtonScreenActionButtons),
+/* harmony export */   "ProtonScreen": () => (/* binding */ ProtonScreen)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _MobileDownloads__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
+/* harmony import */ var _MultiSelect__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
+/* harmony import */ var _Themes__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9);
+/* harmony import */ var _MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4);
+/* harmony import */ var _LanguageSwitcher__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(10);
+/* harmony import */ var _CTAParagraph__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(11);
+/* harmony import */ var _HeroImage__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(12);
+/* harmony import */ var _OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(13);
+/* harmony import */ var _AdditionalCTA__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(14);
+/* harmony import */ var _EmbeddedMigrationWizard__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(16);
+/* harmony import */ var _AddonsPicker__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(17);
+/* harmony import */ var _LinkParagraph__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(18);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MultiStageProtonScreen = props => {
+  const {
+    autoAdvance,
+    handleAction,
+    order
+  } = props;
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (autoAdvance) {
+      const timer = setTimeout(() => {
+        handleAction({
+          currentTarget: {
+            value: autoAdvance
+          },
+          name: "AUTO_ADVANCE"
+        });
+      }, 20000);
+      return () => clearTimeout(timer);
+    }
+    return () => {};
+  }, [autoAdvance, handleAction, order]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ProtonScreen, {
+    content: props.content,
+    id: props.id,
+    order: props.order,
+    activeTheme: props.activeTheme,
+    screenMultiSelects: props.screenMultiSelects,
+    setScreenMultiSelects: props.setScreenMultiSelects,
+    activeMultiSelect: props.activeMultiSelect,
+    setActiveMultiSelect: props.setActiveMultiSelect,
+    totalNumberOfScreens: props.totalNumberOfScreens,
+    handleAction: props.handleAction,
+    isFirstScreen: props.isFirstScreen,
+    isLastScreen: props.isLastScreen,
+    isSingleScreen: props.isSingleScreen,
+    previousOrder: props.previousOrder,
+    autoAdvance: props.autoAdvance,
+    isRtamo: props.isRtamo,
+    addonName: props.addonName,
+    isTheme: props.isTheme,
+    iconURL: props.iconURL,
+    messageId: props.messageId,
+    negotiatedLanguage: props.negotiatedLanguage,
+    langPackInstallPhase: props.langPackInstallPhase,
+    forceHideStepsIndicator: props.forceHideStepsIndicator,
+    ariaRole: props.ariaRole,
+    aboveButtonStepsIndicator: props.aboveButtonStepsIndicator
+  });
+};
+const ProtonScreenActionButtons = props => {
+  const {
+    content,
+    addonName,
+    activeMultiSelect
+  } = props;
+  const defaultValue = content.checkbox?.defaultValue;
+  const [isChecked, setIsChecked] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(defaultValue || false);
+  const buttonRef = react__WEBPACK_IMPORTED_MODULE_0___default().useRef(null);
+  const shouldFocusButton = content?.primary_button?.should_focus_button;
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (shouldFocusButton) {
+      buttonRef.current?.focus();
+    }
+  }, [shouldFocusButton]);
+  if (!content.primary_button && !content.secondary_button && !content.additional_button) {
+    return null;
+  }
+
+  // If we have a multi-select screen, we want to disable the primary button
+  // until the user has selected at least one item.
+  const isPrimaryDisabled = primaryDisabledValue => primaryDisabledValue === "hasActiveMultiSelect" ? !(activeMultiSelect?.length > 0) : primaryDisabledValue;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: `action-buttons ${content.additional_button ? "additional-cta-container" : ""}`,
+    flow: content.additional_button?.flow,
+    alignment: content.additional_button?.alignment
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.primary_button?.label
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    ref: buttonRef,
+    className: `${content.primary_button?.style ?? "primary"}${content.primary_button?.has_arrow_icon ? " arrow-icon" : ""}`
+    // Whether or not the checkbox is checked determines which action
+    // should be handled. By setting value here, we indicate to
+    // this.handleAction() where in the content tree it should take
+    // the action to execute from.
+    ,
+    value: isChecked ? "checkbox" : "primary_button",
+    disabled: isPrimaryDisabled(content.primary_button?.disabled),
+    onClick: props.handleAction,
+    "data-l10n-args": addonName ? JSON.stringify({
+      "addon-name": addonName
+    }) : ""
+  })), content.additional_button ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdditionalCTA__WEBPACK_IMPORTED_MODULE_11__.AdditionalCTA, {
+    content: content,
+    handleAction: props.handleAction
+  }) : null, content.checkbox ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "checkbox-container"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    type: "checkbox",
+    id: "action-checkbox",
+    checked: isChecked,
+    onChange: () => {
+      setIsChecked(!isChecked);
+    }
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.checkbox.label
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    htmlFor: "action-checkbox"
+  }))) : null, content.secondary_button ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.SecondaryCTA, {
+    content: content,
+    handleAction: props.handleAction,
+    activeMultiSelect: activeMultiSelect
+  }) : null);
+};
+class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+  componentDidMount() {
+    this.mainContentHeader.focus();
+  }
+  getScreenClassName(isFirstScreen, isLastScreen, includeNoodles, isVideoOnboarding, isAddonsPicker) {
+    const screenClass = `screen-${this.props.order % 2 !== 0 ? 1 : 2}`;
+    if (isVideoOnboarding) {
+      return "with-video";
+    }
+    if (isAddonsPicker) {
+      return "addons-picker";
+    }
+    return `${isFirstScreen ? `dialog-initial` : ``} ${isLastScreen ? `dialog-last` : ``} ${includeNoodles ? `with-noodles` : ``} ${screenClass}`;
+  }
+  renderTitle({
+    title,
+    title_logo
+  }) {
+    if (title_logo) {
+      const {
+        alignment,
+        ...rest
+      } = title_logo;
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+        className: "inline-icon-container",
+        alignment: alignment ?? "center"
+      }, this.renderPicture({
+        ...rest
+      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+        text: title
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h1", {
+        id: "mainContentHeader"
+      })));
+    }
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+      text: title
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h1", {
+      id: "mainContentHeader"
+    }));
+  }
+  renderPicture({
+    imageURL = "chrome://branding/content/about-logo.svg",
+    darkModeImageURL,
+    reducedMotionImageURL,
+    darkModeReducedMotionImageURL,
+    alt = "",
+    width,
+    height,
+    marginBlock,
+    marginInline,
+    className = "logo-container"
+  }) {
+    function getLoadingStrategy() {
+      for (let url of [imageURL, darkModeImageURL, reducedMotionImageURL, darkModeReducedMotionImageURL]) {
+        if (_lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.getLoadingStrategyFor(url) === "lazy") {
+          return "lazy";
+        }
+      }
+      return "eager";
+    }
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("picture", {
+      className: className,
+      style: {
+        marginInline,
+        marginBlock
+      }
+    }, darkModeReducedMotionImageURL ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
+      srcSet: darkModeReducedMotionImageURL,
+      media: "(prefers-color-scheme: dark) and (prefers-reduced-motion: reduce)"
+    }) : null, darkModeImageURL ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
+      srcSet: darkModeImageURL,
+      media: "(prefers-color-scheme: dark)"
+    }) : null, reducedMotionImageURL ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
+      srcSet: reducedMotionImageURL,
+      media: "(prefers-reduced-motion: reduce)"
+    }) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+      text: alt
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "sr-only logo-alt"
+    })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+      className: "brand-logo",
+      style: {
+        height,
+        width
+      },
+      src: imageURL,
+      alt: "",
+      loading: getLoadingStrategy(),
+      role: alt ? null : "presentation"
+    }));
+  }
+  renderContentTiles() {
+    const {
+      content
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, content.tiles && content.tiles.type === "addons-picker" && content.tiles.data ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AddonsPicker__WEBPACK_IMPORTED_MODULE_13__.AddonsPicker, {
+      content: content,
+      message_id: this.props.messageId,
+      handleAction: this.props.handleAction
+    }) : null, content.tiles && content.tiles.type === "theme" && content.tiles.data ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Themes__WEBPACK_IMPORTED_MODULE_5__.Themes, {
+      content: content,
+      activeTheme: this.props.activeTheme,
+      handleAction: this.props.handleAction
+    }) : null, content.tiles && content.tiles.type === "mobile_downloads" && content.tiles.data ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MobileDownloads__WEBPACK_IMPORTED_MODULE_3__.MobileDownloads, {
+      data: content.tiles.data,
+      handleAction: this.props.handleAction
+    }) : null, content.tiles && content.tiles.type === "multiselect" && content.tiles.data ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiSelect__WEBPACK_IMPORTED_MODULE_4__.MultiSelect, {
+      content: content,
+      screenMultiSelects: this.props.screenMultiSelects,
+      setScreenMultiSelects: this.props.setScreenMultiSelects,
+      activeMultiSelect: this.props.activeMultiSelect,
+      setActiveMultiSelect: this.props.setActiveMultiSelect
+    }) : null, content.tiles && content.tiles.type === "migration-wizard" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_EmbeddedMigrationWizard__WEBPACK_IMPORTED_MODULE_12__.EmbeddedMigrationWizard, {
+      handleAction: this.props.handleAction
+    }) : null);
+  }
+  renderNoodles() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "noodle orange-L"
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "noodle purple-C"
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "noodle solid-L"
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "noodle outline-L"
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "noodle yellow-circle"
+    }));
+  }
+  renderLanguageSwitcher() {
+    return this.props.content.languageSwitcher ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_LanguageSwitcher__WEBPACK_IMPORTED_MODULE_7__.LanguageSwitcher, {
+      content: this.props.content,
+      handleAction: this.props.handleAction,
+      negotiatedLanguage: this.props.negotiatedLanguage,
+      langPackInstallPhase: this.props.langPackInstallPhase,
+      messageId: this.props.messageId
+    }) : null;
+  }
+  renderDismissButton() {
+    const {
+      size,
+      marginBlock,
+      marginInline,
+      label
+    } = this.props.content.dismiss_button;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+      className: "dismiss-button",
+      onClick: this.props.handleAction,
+      value: "dismiss_button",
+      "data-l10n-id": label?.string_id || "spotlight-dialog-close-button",
+      "button-size": size,
+      style: {
+        marginBlock,
+        marginInline
+      }
+    });
+  }
+  renderStepsIndicator() {
+    const currentStep = (this.props.order ?? 0) + 1;
+    const previousStep = (this.props.previousOrder ?? -1) + 1;
+    const {
+      content,
+      totalNumberOfScreens: total
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      id: "steps",
+      className: `steps${content.progress_bar ? " progress-bar" : ""}`,
+      "data-l10n-id": content.steps_indicator?.string_id || "onboarding-welcome-steps-indicator-label",
+      "data-l10n-args": JSON.stringify({
+        current: currentStep,
+        total: total ?? 0
+      }),
+      "data-l10n-attrs": "aria-label",
+      role: "progressbar",
+      "aria-valuenow": currentStep,
+      "aria-valuemin": 1,
+      "aria-valuemax": total
+    }, content.progress_bar ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.ProgressBar, {
+      step: currentStep,
+      previousStep: previousStep,
+      totalNumberOfScreens: total
+    }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.StepsIndicator, {
+      order: this.props.order,
+      totalNumberOfScreens: total
+    }));
+  }
+  renderSecondarySection(content) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: `section-secondary ${content.hide_secondary_section ? "with-secondary-section-hidden" : ""}`,
+      style: content.background ? {
+        background: content.background,
+        "--mr-secondary-background-position-y": content.split_narrow_bkg_position
+      } : {}
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+      text: content.image_alt_text
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "sr-only image-alt",
+      role: "img"
+    })), content.hero_image ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_HeroImage__WEBPACK_IMPORTED_MODULE_9__.HeroImage, {
+      url: content.hero_image.url
+    }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "message-text"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "spacer-top"
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+      text: content.hero_text
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h1", null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "spacer-bottom"
+    }))));
+  }
+  renderOrderedContent(content) {
+    const elements = [];
+    for (const item of content) {
+      switch (item.type) {
+        case "text":
+          elements.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_LinkParagraph__WEBPACK_IMPORTED_MODULE_14__.LinkParagraph, {
+            text_content: item,
+            handleAction: this.props.handleAction
+          }));
+          break;
+        case "image":
+          elements.push(this.renderPicture({
+            imageURL: item.url,
+            darkModeImageURL: item.darkModeImageURL,
+            height: item.height,
+            width: item.width,
+            alt: item.alt_text,
+            marginInline: item.marginInline,
+            className: "inline-image"
+          }));
+      }
+    }
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, elements);
+  }
+  render() {
+    const {
+      autoAdvance,
+      content,
+      isRtamo,
+      isTheme,
+      isFirstScreen,
+      isLastScreen,
+      isSingleScreen,
+      forceHideStepsIndicator,
+      ariaRole,
+      aboveButtonStepsIndicator
+    } = this.props;
+    const includeNoodles = content.has_noodles;
+    // The default screen position is "center"
+    const isCenterPosition = content.position === "center" || !content.position;
+    const hideStepsIndicator = autoAdvance || content?.video_container || isSingleScreen || forceHideStepsIndicator;
+    const textColorClass = content.text_color ? `${content.text_color}-text` : "";
+    // Assign proton screen style 'screen-1' or 'screen-2' to centered screens
+    // by checking if screen order is even or odd.
+    const screenClassName = isCenterPosition ? this.getScreenClassName(isFirstScreen, isLastScreen, includeNoodles, content?.video_container, content.tiles?.type === "addons-picker") : "";
+    const isEmbeddedMigration = content.tiles?.type === "migration-wizard";
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("main", {
+      className: `screen ${this.props.id || ""}
+          ${screenClassName} ${textColorClass}`,
+      role: ariaRole ?? "alertdialog",
+      layout: content.layout,
+      pos: content.position || "center",
+      tabIndex: "-1",
+      "aria-labelledby": "mainContentHeader",
+      ref: input => {
+        this.mainContentHeader = input;
+      }
+    }, isCenterPosition ? null : this.renderSecondarySection(content), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: `section-main ${isEmbeddedMigration ? "embedded-migration" : ""}`,
+      "hide-secondary-section": content.hide_secondary_section ? String(content.hide_secondary_section) : null,
+      role: "document"
+    }, content.secondary_button_top ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_6__.SecondaryCTA, {
+      content: content,
+      handleAction: this.props.handleAction,
+      position: "top"
+    }) : null, includeNoodles ? this.renderNoodles() : null, content.dismiss_button ? this.renderDismissButton() : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: `main-content ${hideStepsIndicator ? "no-steps" : ""}`,
+      style: {
+        background: content.background && isCenterPosition ? content.background : null,
+        width: content.width && content.position !== "split" ? content.width : null
+      }
+    }, content.logo ? this.renderPicture(content.logo) : null, isRtamo ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "rtamo-icon"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+      className: `${isTheme ? "rtamo-theme-icon" : "brand-logo"}`,
+      src: this.props.iconURL,
+      loading: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.getLoadingStrategyFor(this.props.iconURL),
+      alt: "",
+      role: "presentation"
+    })) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "main-content-inner"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: `welcome-text ${content.title_style || ""}`
+    }, content.title ? this.renderTitle(content) : null, content.subtitle ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+      text: content.subtitle
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+      "data-l10n-args": JSON.stringify({
+        "addon-name": this.props.addonName,
+        ...this.props.appAndSystemLocaleInfo?.displayNames
+      }),
+      "aria-flowto": this.props.messageId?.includes("FEATURE_TOUR") ? "steps" : ""
+    })) : null, content.cta_paragraph ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_CTAParagraph__WEBPACK_IMPORTED_MODULE_8__.CTAParagraph, {
+      content: content.cta_paragraph,
+      handleAction: this.props.handleAction
+    }) : null), content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__.OnboardingVideo, {
+      content: content.video_container,
+      handleAction: this.props.handleAction
+    }) : null, content.above_button_content ? this.renderOrderedContent(content.above_button_content) : null, this.renderContentTiles(), this.renderLanguageSwitcher(), !hideStepsIndicator && aboveButtonStepsIndicator ? this.renderStepsIndicator() : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ProtonScreenActionButtons, {
+      content: content,
+      addonName: this.props.addonName,
+      handleAction: this.props.handleAction,
+      activeMultiSelect: this.props.activeMultiSelect
+    })), !hideStepsIndicator && !aboveButtonStepsIndicator ? this.renderStepsIndicator() : null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+      text: content.info_text
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+      className: "info-text"
+    })));
+  }
+}
+
+/***/ }),
+/* 7 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MarketplaceButtons": () => (/* binding */ MarketplaceButtons),
+/* harmony export */   "MobileDownloads": () => (/* binding */ MobileDownloads)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+const MarketplaceButtons = props => {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "mobile-download-buttons"
+  }, props.buttons.includes("ios") ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "ios"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    "data-l10n-id": "spotlight-ios-marketplace-button",
+    value: "ios",
+    onClick: props.handleAction
+  })) : null, props.buttons.includes("android") ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "android"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    "data-l10n-id": "spotlight-android-marketplace-button",
+    value: "android",
+    onClick: props.handleAction
+  })) : null);
+};
+const MobileDownloads = props => {
+  const {
+    QR_code: QRCode
+  } = props.data;
+  const showEmailLink = props.data.email && window.AWSendToDeviceEmailsSupported();
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "mobile-downloads"
+  }, QRCode ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+    "data-l10n-id": QRCode.alt_text.string_id ? QRCode.alt_text.string_id : null,
+    className: "qr-code-image",
+    alt: typeof QRCode.alt_text === "string" ? QRCode.alt_text : "",
+    src: QRCode.image_url,
+    loading: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.getLoadingStrategyFor(QRCode.image_url)
+  }) : null, showEmailLink ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: props.data.email.link_text
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: "email-link",
+    value: "email_link",
+    onClick: props.handleAction
+  }))) : null, props.data.marketplace_buttons ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MarketplaceButtons, {
+    buttons: props.data.marketplace_buttons,
+    handleAction: props.handleAction
+  }) : null);
+};
+
+/***/ }),
+/* 8 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MultiSelect": () => (/* binding */ MultiSelect)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const MULTI_SELECT_STYLES = [..._MSLocalized__WEBPACK_IMPORTED_MODULE_1__.CONFIGURABLE_STYLES, "flexDirection", "flexWrap", "flexFlow", "flexGrow", "flexShrink", "justifyContent", "alignItems", "gap"];
+const MULTI_SELECT_ICON_STYLES = [..._MSLocalized__WEBPACK_IMPORTED_MODULE_1__.CONFIGURABLE_STYLES, "width", "height", "background", "backgroundColor", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundOrigin", "backgroundClip", "border", "borderRadius", "appearance", "fill", "stroke", "outline", "outlineOffset", "boxShadow"];
+function getValidStyle(style, validStyles, allowVars) {
+  if (!style) {
+    return null;
+  }
+  return Object.keys(style).filter(key => validStyles.includes(key) || allowVars && key.startsWith("--")).reduce((obj, key) => {
+    obj[key] = style[key];
+    return obj;
+  }, {});
+}
+const MultiSelect = ({
+  content,
+  screenMultiSelects,
+  setScreenMultiSelects,
+  activeMultiSelect,
+  setActiveMultiSelect
+}) => {
+  const {
+    data
+  } = content.tiles;
+  const refs = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({});
+  const handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
+    const newActiveMultiSelect = [];
+    Object.keys(refs.current).forEach(key => {
+      if (refs.current[key]?.checked) {
+        newActiveMultiSelect.push(key);
+      }
+    });
+    setActiveMultiSelect(newActiveMultiSelect);
+  }, [setActiveMultiSelect]);
+  const items = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
+    function getOrderedIds() {
+      if (screenMultiSelects) {
+        return screenMultiSelects;
+      }
+      let orderedIds = data.map(item => ({
+        id: item.id,
+        rank: item.randomize ? Math.random() : NaN
+      })).sort((a, b) => b.rank - a.rank).map(({
+        id
+      }) => id);
+      setScreenMultiSelects(orderedIds);
+      return orderedIds;
+    }
+    return getOrderedIds().map(id => data.find(item => item.id === id));
+  }, [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const containerStyle = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => getValidStyle(content.tiles.style, MULTI_SELECT_STYLES, true), [content.tiles.style]);
+
+  // When screen renders for first time, update state
+  // with checkbox ids that has defaultvalue true
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (!activeMultiSelect) {
+      let newActiveMultiSelect = [];
+      items.forEach(({
+        id,
+        defaultValue
+      }) => {
+        if (defaultValue && id) {
+          newActiveMultiSelect.push(id);
+        }
+      });
+      setActiveMultiSelect(newActiveMultiSelect);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "multi-select-container",
+    style: containerStyle,
+    role: items.some(({
+      type,
+      group
+    }) => type === "radio" && group) ? "radiogroup" : "group",
+    "aria-labelledby": "multi-stage-multi-select-label"
+  }, content.tiles.label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.tiles.label
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+    id: "multi-stage-multi-select-label"
+  })) : null, items.map(({
+    id,
+    label,
+    icon,
+    type = "checkbox",
+    group,
+    style
+  }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    key: id + label,
+    className: "checkbox-container multi-select-item",
+    style: getValidStyle(style, MULTI_SELECT_STYLES)
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    type: type // checkbox or radio
+    ,
+    id: id,
+    value: id,
+    name: group,
+    checked: activeMultiSelect?.includes(id),
+    style: getValidStyle(icon?.style, MULTI_SELECT_ICON_STYLES),
+    onChange: handleChange,
+    ref: el => refs.current[id] = el
+  }), label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: label
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    htmlFor: id
+  })) : null)));
+};
+
+/***/ }),
+/* 9 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Themes": () => (/* binding */ Themes)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const Themes = props => {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "tiles-theme-container"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("fieldset", {
+    className: "tiles-theme-section"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: props.content.subtitle
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("legend", {
+    className: "sr-only"
+  })), props.content.tiles.data.map(({
+    theme,
+    label,
+    tooltip,
+    description
+  }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    key: theme + label,
+    text: typeof tooltip === "object" ? tooltip : {}
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "theme",
+    title: theme + label
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: typeof description === "object" ? description : {}
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    type: "radio",
+    value: theme,
+    name: "theme",
+    checked: theme === props.activeTheme,
+    className: "sr-only input",
+    onClick: props.handleAction
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: `icon ${theme === props.activeTheme ? " selected" : ""} ${theme}`
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: label
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "text"
+  }))))))));
+};
+
+/***/ }),
+/* 10 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "useLanguageSwitcher": () => (/* binding */ useLanguageSwitcher),
+/* harmony export */   "LanguageSwitcher": () => (/* binding */ LanguageSwitcher)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+/**
+ * The language switcher implements a hook that should be placed at a higher level
+ * than the actual language switcher component, as it needs to preemptively fetch
+ * and install langpacks for the user if there is a language mismatch screen.
+ */
+function useLanguageSwitcher(appAndSystemLocaleInfo, screens, screenIndex, setScreenIndex) {
+  const languageMismatchScreenIndex = screens.findIndex(({
+    id
+  }) => id === "AW_LANGUAGE_MISMATCH");
+  const screen = screens[languageMismatchScreenIndex];
+
+  // Ensure fluent messages have the negotiatedLanguage args set, as they are rendered
+  // before the negotiatedLanguage is known. If the arg isn't present then Firefox will
+  // crash in development mode.
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (screen?.content?.languageSwitcher) {
+      for (const text of Object.values(screen.content.languageSwitcher)) {
+        if (text?.args && text.args.negotiatedLanguage === undefined) {
+          text.args.negotiatedLanguage = "";
+        }
+      }
+    }
+  }, [screen]);
+
+  // If there is a mismatch, then Firefox can negotiate a better langpack to offer
+  // the user.
+  const [negotiatedLanguage, setNegotiatedLanguage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function getNegotiatedLanguage() {
+    if (!appAndSystemLocaleInfo) {
+      return;
+    }
+    if (appAndSystemLocaleInfo.matchType !== "language-mismatch") {
+      // There is no language mismatch, so there is no need to negotiate a langpack.
+      return;
+    }
+    (async () => {
+      const {
+        langPack,
+        langPackDisplayName
+      } = await window.AWNegotiateLangPackForLanguageMismatch(appAndSystemLocaleInfo);
+      if (langPack) {
+        setNegotiatedLanguage({
+          langPackDisplayName,
+          appDisplayName: appAndSystemLocaleInfo.displayNames.appLanguage,
+          langPack,
+          requestSystemLocales: [langPack.target_locale, appAndSystemLocaleInfo.appLocaleRaw],
+          originalAppLocales: [appAndSystemLocaleInfo.appLocaleRaw]
+        });
+      } else {
+        setNegotiatedLanguage({
+          langPackDisplayName: null,
+          appDisplayName: null,
+          langPack: null,
+          requestSystemLocales: null
+        });
+      }
+    })();
+  }, [appAndSystemLocaleInfo]);
+
+  /**
+   * @type {
+   *  "before-installation"
+   *  | "installing"
+   *  | "installed"
+   *  | "installation-error"
+   *  | "none-available"
+   * }
+   */
+  const [langPackInstallPhase, setLangPackInstallPhase] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("before-installation");
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function ensureLangPackInstalled() {
+    if (!negotiatedLanguage) {
+      // There are no negotiated languages to download yet.
+      return;
+    }
+    setLangPackInstallPhase("installing");
+    window.AWEnsureLangPackInstalled(negotiatedLanguage, screen?.content).then(content => {
+      // Update screen content with strings that might have changed.
+      screen.content = content;
+      setLangPackInstallPhase("installed");
+    }, error => {
+      console.error(error);
+      setLangPackInstallPhase("installation-error");
+    });
+  }, [negotiatedLanguage, screen]);
+  const [languageFilteredScreens, setLanguageFilteredScreens] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(screens);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function filterScreen() {
+    // Remove the language screen if it exists (already removed for no live
+    // reload) and we either don't-need-to or can't switch.
+    if (screen && (appAndSystemLocaleInfo?.matchType !== "language-mismatch" || negotiatedLanguage?.langPack === null)) {
+      if (screenIndex > languageMismatchScreenIndex) {
+        setScreenIndex(screenIndex - 1);
+      }
+      setLanguageFilteredScreens(screens.filter(s => s.id !== "AW_LANGUAGE_MISMATCH"));
+    } else {
+      setLanguageFilteredScreens(screens);
+    }
+  },
+  // Removing screenIndex as a dependency as it's causing infinite re-renders (1873019)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [appAndSystemLocaleInfo?.matchType, languageMismatchScreenIndex, negotiatedLanguage, screen, screens, setScreenIndex]);
+  return {
+    negotiatedLanguage,
+    langPackInstallPhase,
+    languageFilteredScreens
+  };
+}
+
+/**
+ * The language switcher is a separate component as it needs to perform some asynchronous
+ * network actions such as retrieving the list of langpacks available, and downloading
+ * a new langpack. On a fast connection, this won't be noticeable, but on slow or unreliable
+ * internet this may fail for a user.
+ */
+function LanguageSwitcher(props) {
+  const {
+    content,
+    handleAction,
+    negotiatedLanguage,
+    langPackInstallPhase,
+    messageId
+  } = props;
+  const [isAwaitingLangpack, setIsAwaitingLangpack] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+
+  // Determine the status of the langpack installation.
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (isAwaitingLangpack && langPackInstallPhase !== "installing") {
+      window.AWSetRequestedLocales(negotiatedLanguage.requestSystemLocales);
+      requestAnimationFrame(() => {
+        handleAction(
+        // Simulate the click event.
+        {
+          currentTarget: {
+            value: "download_complete"
+          }
+        });
+      });
+    }
+  }, [handleAction, isAwaitingLangpack, langPackInstallPhase, negotiatedLanguage?.requestSystemLocales]);
+  let showWaitingScreen = false;
+  let showPreloadingScreen = false;
+  let showReadyScreen = false;
+  if (isAwaitingLangpack && langPackInstallPhase !== "installed") {
+    showWaitingScreen = true;
+  } else if (langPackInstallPhase === "before-installation") {
+    showPreloadingScreen = true;
+  } else {
+    showReadyScreen = true;
+  }
+
+  // Use {display: "none"} rather than if statements to prevent layout thrashing with
+  // the localized text elements rendering as blank, then filling in the text.
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "action-buttons language-switcher-container"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    style: {
+      display: showPreloadingScreen ? "block" : "none"
+    }
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: "primary",
+    value: "primary_button",
+    disabled: true,
+    type: "button"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+    className: "language-loader",
+    src: "chrome://browser/skin/tabbrowser/tab-connecting.png",
+    alt: ""
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.languageSwitcher.waiting
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "secondary-cta"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.languageSwitcher.skip
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    value: "decline_waiting",
+    type: "button",
+    className: "secondary text-link arrow-icon",
+    onClick: handleAction
+  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    style: {
+      display: showWaitingScreen ? "block" : "none"
+    }
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: "primary",
+    value: "primary_button",
+    disabled: true,
+    type: "button"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+    className: "language-loader",
+    src: "chrome://browser/skin/tabbrowser/tab-connecting.png",
+    alt: ""
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.languageSwitcher.downloading
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "secondary-cta"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.languageSwitcher.cancel
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    type: "button",
+    className: "secondary text-link",
+    onClick: () => {
+      setIsAwaitingLangpack(false);
+      handleAction({
+        currentTarget: {
+          value: "cancel_waiting"
+        }
+      });
+    }
+  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    style: {
+      display: showReadyScreen ? "block" : "none"
+    }
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: "primary",
+    value: "primary_button",
+    onClick: () => {
+      _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendActionTelemetry(messageId, "download_langpack");
+      setIsAwaitingLangpack(true);
+    }
+  }, content.languageSwitcher.switch ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.languageSwitcher.switch
+  }) :
+  // This is the localized name from the Intl.DisplayNames API.
+  negotiatedLanguage?.langPackDisplayName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    type: "button",
+    className: "primary",
+    value: "decline",
+    onClick: event => {
+      window.AWSetRequestedLocales(negotiatedLanguage.originalAppLocales);
+      handleAction(event);
+    }
+  }, content.languageSwitcher.continue ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.languageSwitcher.continue
+  }) :
+  // This is the localized name from the Intl.DisplayNames API.
+  negotiatedLanguage?.appDisplayName))));
+}
+
+/***/ }),
+/* 11 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "CTAParagraph": () => (/* binding */ CTAParagraph)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const CTAParagraph = props => {
+  const {
+    content,
+    handleAction
+  } = props;
+  if (!content?.text) {
+    return null;
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", {
+    className: "cta-paragraph"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.text
+  }, content.text.string_name && typeof handleAction === "function" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    "data-l10n-id": content.text.string_id,
+    onClick: handleAction,
+    onKeyUp: event => ["Enter", " "].includes(event.key) ? handleAction(event) : null,
+    value: "cta_paragraph",
+    role: "button",
+    tabIndex: "0"
+  }, " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    role: "button",
+    tabIndex: "0",
+    "data-l10n-name": content.text.string_name
+  }, " ")) : null));
+};
+
+/***/ }),
+/* 12 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "HeroImage": () => (/* binding */ HeroImage)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const HeroImage = props => {
+  const {
+    height,
+    url,
+    alt
+  } = props;
+  if (!url) {
+    return null;
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "hero-image"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+    style: height ? {
+      height
+    } : null,
+    src: url,
+    loading: _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.getLoadingStrategyFor(url),
+    alt: alt || "",
+    role: alt ? null : "presentation"
+  }));
+};
+
+/***/ }),
+/* 13 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "OnboardingVideo": () => (/* binding */ OnboardingVideo)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+const OnboardingVideo = props => {
+  const vidUrl = props.content.video_url;
+  const autoplay = props.content.autoPlay;
+  const handleVideoAction = event => {
+    props.handleAction({
+      currentTarget: {
+        value: event
+      }
+    });
+  };
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
+    // eslint-disable-line jsx-a11y/media-has-caption
+    controls: true,
+    autoPlay: autoplay,
+    src: vidUrl,
+    width: "604px",
+    height: "340px",
+    onPlay: () => handleVideoAction("video_start"),
+    onEnded: () => handleVideoAction("video_end")
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("source", {
+    src: vidUrl
+  })));
+};
+
+/***/ }),
+/* 14 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "AdditionalCTA": () => (/* binding */ AdditionalCTA)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* harmony import */ var _SubmenuButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(15);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+const AdditionalCTA = ({
+  content,
+  handleAction
+}) => {
+  let buttonStyle = "";
+  const isSplitButton = content.submenu_button?.attached_to === "additional_button";
+  let className = "additional-cta-box";
+  if (isSplitButton) {
+    className += " split-button-container";
+  }
+  if (!content.additional_button?.style) {
+    buttonStyle = "primary";
+  } else {
+    buttonStyle = content.additional_button?.style === "link" ? "cta-link" : content.additional_button?.style;
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: className
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.additional_button?.label
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: `${buttonStyle} additional-cta`,
+    onClick: handleAction,
+    value: "additional_button",
+    disabled: content.additional_button?.disabled === true
+  })), isSplitButton ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SubmenuButton__WEBPACK_IMPORTED_MODULE_2__.SubmenuButton, {
+    content: content,
+    handleAction: handleAction
+  }) : null);
+};
+
+/***/ }),
+/* 15 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "SubmenuButton": () => (/* binding */ SubmenuButton)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const SubmenuButton = props => {
+  return document.createXULElement ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SubmenuButtonInner, props) : null;
+};
+function translateMenuitem(item, element) {
+  let {
+    label
+  } = item;
+  if (!label) {
+    return;
+  }
+  if (label.raw) {
+    element.setAttribute("label", label.raw);
+  }
+  if (label.access_key) {
+    element.setAttribute("accesskey", label.access_key);
+  }
+  if (label.aria_label) {
+    element.setAttribute("aria-label", label.aria_label);
+  }
+  if (label.tooltip_text) {
+    element.setAttribute("tooltiptext", label.tooltip_text);
+  }
+  if (label.string_id) {
+    element.setAttribute("data-l10n-id", label.string_id);
+    if (label.args) {
+      element.setAttribute("data-l10n-args", JSON.stringify(label.args));
+    }
+  }
+}
+function addMenuitems(items, popup) {
+  for (let item of items) {
+    switch (item.type) {
+      case "separator":
+        popup.appendChild(document.createXULElement("menuseparator"));
+        break;
+      case "menu":
+        let menu = document.createXULElement("menu");
+        menu.className = "fxms-multi-stage-menu";
+        translateMenuitem(item, menu);
+        if (item.id) {
+          menu.value = item.id;
+        }
+        if (item.icon) {
+          menu.classList.add("menu-iconic");
+          menu.setAttribute("image", item.icon);
+        }
+        popup.appendChild(menu);
+        let submenuPopup = document.createXULElement("menupopup");
+        menu.appendChild(submenuPopup);
+        addMenuitems(item.submenu, submenuPopup);
+        break;
+      case "action":
+        let menuitem = document.createXULElement("menuitem");
+        translateMenuitem(item, menuitem);
+        menuitem.config = item;
+        if (item.id) {
+          menuitem.value = item.id;
+        }
+        if (item.icon) {
+          menuitem.classList.add("menuitem-iconic");
+          menuitem.setAttribute("image", item.icon);
+        }
+        popup.appendChild(menuitem);
+        break;
+    }
+  }
+}
+const SubmenuButtonInner = ({
+  content,
+  handleAction
+}) => {
+  const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const isPrimary = content.submenu_button?.style === "primary";
+  const onCommand = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {
+    let {
+      config
+    } = event.target;
+    let mockEvent = {
+      currentTarget: ref.current,
+      source: config.id,
+      name: "command",
+      action: config.action
+    };
+    handleAction(mockEvent);
+  }, [handleAction]);
+  const onClick = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
+    let button = ref.current;
+    let submenu = button?.querySelector(".fxms-multi-stage-submenu");
+    if (submenu && !button.hasAttribute("open")) {
+      submenu.openPopup(button, {
+        position: "after_end"
+      });
+    }
+  }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    let button = ref.current;
+    if (!button || button.querySelector(".fxms-multi-stage-submenu")) {
+      return null;
+    }
+    let menupopup = document.createXULElement("menupopup");
+    menupopup.className = "fxms-multi-stage-submenu";
+    addMenuitems(content.submenu_button.submenu, menupopup);
+    button.appendChild(menupopup);
+    let stylesheet;
+    if (!document.head.querySelector(`link[href="chrome://global/content/widgets.css"], link[href="chrome://global/skin/global.css"]`)) {
+      stylesheet = document.createElement("link");
+      stylesheet.rel = "stylesheet";
+      stylesheet.href = "chrome://global/content/widgets.css";
+      document.head.appendChild(stylesheet);
+    }
+    if (!menupopup.listenersRegistered) {
+      menupopup.addEventListener("command", onCommand);
+      menupopup.addEventListener("popupshowing", event => {
+        if (event.target === menupopup && event.target.anchorNode) {
+          event.target.anchorNode.toggleAttribute("open", true);
+        }
+      });
+      menupopup.addEventListener("popuphiding", event => {
+        if (event.target === menupopup && event.target.anchorNode) {
+          event.target.anchorNode.toggleAttribute("open", false);
+        }
+      });
+      menupopup.listenersRegistered = true;
+    }
+    return () => {
+      menupopup?.remove();
+      stylesheet?.remove();
+    };
+  }, [onCommand]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: content.submenu_button.label ?? {}
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: `submenu-button ${isPrimary ? "primary" : "secondary"}`,
+    value: "submenu_button",
+    onClick: onClick,
+    ref: ref
+  }));
+};
+
+/***/ }),
+/* 16 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "EmbeddedMigrationWizard": () => (/* binding */ EmbeddedMigrationWizard)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+const EmbeddedMigrationWizard = ({
+  handleAction
+}) => {
+  const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    const handleBeginMigration = () => {
+      handleAction({
+        currentTarget: {
+          value: "migrate_start"
+        },
+        source: "primary_button"
+      });
+    };
+    const handleClose = () => {
+      handleAction({
+        currentTarget: {
+          value: "migrate_close"
+        }
+      });
+    };
+    const {
+      current
+    } = ref;
+    current?.addEventListener("MigrationWizard:BeginMigration", handleBeginMigration);
+    current?.addEventListener("MigrationWizard:Close", handleClose);
+    return () => {
+      current?.removeEventListener("MigrationWizard:BeginMigration", handleBeginMigration);
+      current?.removeEventListener("MigrationWizard:Close", handleClose);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("migration-wizard", {
+    "force-show-import-all": "false",
+    "auto-request-state": "",
+    ref: ref
+  });
+};
+
+/***/ }),
+/* 17 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Loader": () => (/* binding */ Loader),
+/* harmony export */   "InstallButton": () => (/* binding */ InstallButton),
+/* harmony export */   "AddonsPicker": () => (/* binding */ AddonsPicker)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+const Loader = () => {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    className: "primary"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "loaderContainer"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: "loader"
+  })));
+};
+const InstallButton = props => {
+  const [installing, setInstalling] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  const [installComplete, setInstallComplete] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  let buttonLabel = installComplete ? "Installed" : "Add to Firefox";
+  function onClick(event) {
+    props.handleAction(event);
+    // Replace the label with the spinner
+    setInstalling(true);
+    window.AWEnsureAddonInstalled(props.addonId).then(value => {
+      if (value === "complete") {
+        // Set the label to "Installed"
+        setInstallComplete(true);
+      }
+      // Whether the addon installs or not, we want to remove the spinner
+      setInstalling(false);
+    });
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "install-button-wrapper"
+  }, installing ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Loader, null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_2__.Localized, {
+    text: buttonLabel
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    id: props.name,
+    value: props.index,
+    onClick: onClick,
+    disabled: installComplete,
+    className: "primary"
+  })));
+};
+const AddonsPicker = props => {
+  const {
+    content
+  } = props;
+  if (!content) {
+    return null;
+  }
+  function handleAction(event) {
+    const {
+      message_id
+    } = props;
+    let {
+      action,
+      source_id
+    } = content.tiles.data[event.currentTarget.value];
+    let {
+      type,
+      data
+    } = action;
+    if (type === "INSTALL_ADDON_FROM_URL") {
+      if (!data) {
+        return;
+      }
+    }
+    _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.handleUserAction({
+      type,
+      data
+    });
+    _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.sendActionTelemetry(message_id, source_id);
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "addons-picker-container"
+  }, content.tiles.data.map(({
+    id,
+    name,
+    type,
+    description,
+    icon
+  }, index) => name ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    key: id,
+    className: "addon-container"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "rtamo-icon"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+    className: `${type === "theme" ? "rtamo-theme-icon" : "brand-logo"}`,
+    src: icon,
+    role: "presentation",
+    alt: ""
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "addon-details"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_2__.Localized, {
+    text: name
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "addon-title"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_2__.Localized, {
+    text: description
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "addon-description"
+  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(InstallButton, {
+    key: id,
+    addonId: id,
+    name: name,
+    handleAction: handleAction,
+    index: index
+  })) : null));
+};
+
+/***/ }),
+/* 18 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "LinkParagraph": () => (/* binding */ LinkParagraph)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _MSLocalized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+const LinkParagraph = props => {
+  const {
+    text_content,
+    handleAction
+  } = props;
+  const handleParagraphAction = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {
+    if (event.target.closest("a")) {
+      handleAction({
+        ...event,
+        currentTarget: event.target
+      });
+    }
+  }, [handleAction]);
+  const onKeyPress = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {
+    if (event.key === "Enter" && !event.repeat) {
+      handleParagraphAction(event);
+    }
+  }, [handleParagraphAction]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
+    text: text_content.text
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: text_content.font_styles === "legal" ? "legal-paragraph" : "link-paragraph",
+    onClick: handleParagraphAction,
+    value: "link_paragraph",
+    onKeyPress: onKeyPress
+  }, text_content.link_keys?.map(link => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    key: link,
+    value: link,
+    role: "link",
+    className: "text-link",
+    "data-l10n-name": link
+    // must pass in tabIndex when no href is provided
+    ,
+    tabIndex: "0"
+  }, " "))));
+};
+
+/***/ }),
+/* 19 */
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "BASE_PARAMS": () => (/* binding */ BASE_PARAMS),
+/* harmony export */   "addUtmParams": () => (/* binding */ addUtmParams)
+/* harmony export */ });
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * BASE_PARAMS keys/values can be modified from outside this file
+ */
+const BASE_PARAMS = {
+  utm_source: "activity-stream",
+  utm_campaign: "firstrun",
+  utm_medium: "referral",
+};
+
+/**
+ * Takes in a url as a string or URL object and returns a URL object with the
+ * utm_* parameters added to it. If a URL object is passed in, the paraemeters
+ * are added to it (the return value can be ignored in that case as it's the
+ * same object).
+ */
+function addUtmParams(url, utmTerm) {
+  let returnUrl = url;
+  if (typeof returnUrl === "string") {
+    returnUrl = new URL(url);
+  }
+  for (let [key, value] of Object.entries(BASE_PARAMS)) {
+    if (!returnUrl.searchParams.has(key)) {
+      returnUrl.searchParams.append(key, value);
+    }
+  }
+  returnUrl.searchParams.append("utm_term", utmTerm);
+  return returnUrl;
+}
+
+
+/***/ }),
+/* 20 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "ReturnToAMO": () => (/* binding */ ReturnToAMO)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var _MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
+/* harmony import */ var _lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19);
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+class ReturnToAMO extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+  constructor(props) {
+    super(props);
+    this.fetchFlowParams = this.fetchFlowParams.bind(this);
+    this.handleAction = this.handleAction.bind(this);
+  }
+  async fetchFlowParams() {
+    if (this.props.metricsFlowUri) {
+      this.setState({
+        flowParams: await _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.fetchFlowParams(this.props.metricsFlowUri)
+      });
+    }
+  }
+  componentDidUpdate() {
+    this.fetchFlowParams();
+  }
+  handleAction(event) {
+    const {
+      content,
+      message_id,
+      url,
+      utm_term
+    } = this.props;
+    let {
+      action,
+      source_id
+    } = content[event.currentTarget.value];
+    let {
+      type,
+      data
+    } = action;
+    if (type === "INSTALL_ADDON_FROM_URL") {
+      if (!data) {
+        return;
+      }
+      // Set add-on url in action.data.url property from JSON
+      data = {
+        ...data,
+        url
+      };
+    } else if (type === "SHOW_FIREFOX_ACCOUNTS") {
+      let params = {
+        ..._lib_addUtmParams_mjs__WEBPACK_IMPORTED_MODULE_3__.BASE_PARAMS,
+        utm_term: `aboutwelcome-${utm_term}-screen`
+      };
+      if (action.addFlowParams && this.state.flowParams) {
+        params = {
+          ...params,
+          ...this.state.flowParams
+        };
+      }
+      data = {
+        ...data,
+        extraParams: params
+      };
+    }
+    _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.handleUserAction({
+      type,
+      data
+    });
+    _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.AboutWelcomeUtils.sendActionTelemetry(message_id, source_id);
+  }
+  render() {
+    const {
+      content,
+      type
+    } = this.props;
+    if (!content) {
+      return null;
+    }
+    if (content?.primary_button.label) {
+      content.primary_button.label.string_id = type.includes("theme") ? "return-to-amo-add-theme-label" : "mr1-return-to-amo-add-extension-label";
+    }
+
+    // For experiments, when needed below rendered UI allows settings hard coded strings
+    // directly inside JSON except for ReturnToAMOText which picks add-on name and icon from fluent string
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "outer-wrapper onboardingContainer proton",
+      style: content.backdrop ? {
+        background: content.backdrop
+      } : {}
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageProtonScreen__WEBPACK_IMPORTED_MODULE_2__.MultiStageProtonScreen, {
+      content: content,
+      isRtamo: true,
+      isTheme: type.includes("theme"),
+      id: this.props.message_id,
+      order: this.props.order || 0,
+      totalNumberOfScreens: 1,
+      isSingleScreen: true,
+      autoAdvance: this.props.auto_advance,
+      iconURL: type.includes("theme") ? this.props.themeScreenshots[0]?.url : this.props.iconURL,
+      addonName: this.props.name,
+      handleAction: this.handleAction
+    }));
+  }
+}
+ReturnToAMO.defaultProps = _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_1__.DEFAULT_RTAMO_CONTENT;
+
+/***/ })
+/******/ 	]);
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
+/* harmony import */ var _components_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
+/* harmony import */ var _components_ReturnToAMO__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(20);
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+
+
+
+
+class AboutWelcome extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
+  constructor(props) {
+    super(props);
+    this.state = {
+      metricsFlowUri: null
+    };
+    this.fetchFxAFlowUri = this.fetchFxAFlowUri.bind(this);
+  }
+  async fetchFxAFlowUri() {
+    this.setState({
+      metricsFlowUri: await window.AWGetFxAMetricsFlowURI?.()
+    });
+  }
+  componentDidMount() {
+    if (!this.props.skipFxA) {
+      this.fetchFxAFlowUri();
+    }
+    if (document.location.href === "about:welcome") {
+      // Record impression with performance data after allowing the page to load
+      const recordImpression = domState => {
+        const {
+          domComplete,
+          domInteractive
+        } = performance.getEntriesByType("navigation").pop();
+        _lib_aboutwelcome_utils_mjs__WEBPACK_IMPORTED_MODULE_2__.AboutWelcomeUtils.sendImpressionTelemetry(this.props.messageId, {
+          domComplete,
+          domInteractive,
+          mountStart: performance.getEntriesByName("mount").pop().startTime,
+          domState,
+          source: this.props.UTMTerm
+        });
+      };
+      if (document.readyState === "complete") {
+        // Page might have already triggered a load event because it waited for async data,
+        // e.g., attribution, so the dom load timing could be of a empty content
+        // with domState in telemetry captured as 'complete'
+        recordImpression(document.readyState);
+      } else {
+        window.addEventListener("load", () => recordImpression("load"), {
+          once: true
+        });
+      }
+
+      // Captures user has seen about:welcome by setting
+      // firstrun.didSeeAboutWelcome pref to true and capturing welcome UI unique messageId
+      window.AWSendToParent("SET_WELCOME_MESSAGE_SEEN", this.props.messageId);
+    }
+  }
+  render() {
+    const {
+      props
+    } = this;
+    if (props.template === "return_to_amo") {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_ReturnToAMO__WEBPACK_IMPORTED_MODULE_4__.ReturnToAMO, {
+        message_id: props.messageId,
+        type: props.type,
+        name: props.name,
+        url: props.url,
+        iconURL: props.iconURL,
+        themeScreenshots: props.screenshots,
+        metricsFlowUri: this.state.metricsFlowUri
+      });
+    }
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_3__.MultiStageAboutWelcome, {
+      message_id: props.messageId,
+      defaultScreens: props.screens,
+      updateHistory: !props.disableHistoryUpdates,
+      metricsFlowUri: this.state.metricsFlowUri,
+      utm_term: props.UTMTerm,
+      transitions: props.transitions,
+      backdrop: props.backdrop,
+      startScreen: props.startScreen || 0,
+      appAndSystemLocaleInfo: props.appAndSystemLocaleInfo,
+      ariaRole: props.aria_role
+    });
+  }
+}
+
+// Computes messageId and UTMTerm info used in telemetry
+function ComputeTelemetryInfo(welcomeContent, experimentId, branchId) {
+  let messageId = welcomeContent.template === "return_to_amo" ? `RTAMO_DEFAULT_WELCOME_${welcomeContent.type.toUpperCase()}` : "DEFAULT_ID";
+  let UTMTerm = "aboutwelcome-default";
+  if (welcomeContent.id) {
+    messageId = welcomeContent.id.toUpperCase();
+  }
+  if (experimentId && branchId) {
+    UTMTerm = `aboutwelcome-${experimentId}-${branchId}`.toLowerCase();
+  }
+  return {
+    messageId,
+    UTMTerm
+  };
+}
+async function retrieveRenderContent() {
+  // Feature config includes RTAMO attribution data if exists
+  // else below data in order specified
+  // user prefs
+  // experiment data
+  // defaults
+  let featureConfig = await window.AWGetFeatureConfig();
+  let {
+    messageId,
+    UTMTerm
+  } = ComputeTelemetryInfo(featureConfig, featureConfig.slug, featureConfig.branch && featureConfig.branch.slug);
+  return {
+    featureConfig,
+    messageId,
+    UTMTerm
+  };
+}
+async function mount() {
+  let {
+    featureConfig: aboutWelcomeProps,
+    messageId,
+    UTMTerm
+  } = await retrieveRenderContent();
+  react_dom__WEBPACK_IMPORTED_MODULE_1___default().render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AboutWelcome, _extends({
+    messageId: messageId,
+    UTMTerm: UTMTerm
+  }, aboutWelcomeProps)), document.getElementById("multi-stage-message-root"));
+}
+performance.mark("mount");
+mount();
+})();
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css
new file mode 100644
index 0000000000..63608bd48a
--- /dev/null
+++ b/browser/components/aboutwelcome/content/aboutwelcome.css
@@ -0,0 +1,2536 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* stylelint-disable max-nesting-depth */
+#feature-callout {
+  --fc-background: var(--fc-background-light, #fff);
+  --fc-color: var(--fc-color-light, rgb(21, 20, 26));
+  --fc-border: var(--fc-border-light, #CFCFD8);
+  --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
+  --fc-button-background: var(--fc-button-background-light, #F0F0F4);
+  --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
+  --fc-button-border: var(--fc-button-border-light, transparent);
+  --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
+  --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
+  --fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
+  --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
+  --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
+  --fc-button-border-active: var(--fc-button-border-active-light, transparent);
+  --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0);
+  --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
+  --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
+  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb);
+  --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
+  --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
+  --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94);
+  --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
+  --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
+  --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
+  --fc-link-color: var(--fc-link-color-light, #0061E0);
+  --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
+  --fc-link-color-active: var(--fc-link-color-active-light, #053E94);
+  position: absolute;
+  z-index: 2147483647;
+  outline: none;
+  color: var(--fc-color);
+  accent-color: var(--fc-accent-color);
+  -moz-theme: non-native;
+  --arrow-width: 33.9411px;
+  --arrow-square-size: calc(var(--arrow-width) / sqrt(2));
+  --extra-width-from-rotation: calc(var(--arrow-width) - var(--arrow-square-size));
+  --arrow-visible-height: calc(var(--arrow-width) / 2);
+  --arrow-visible-size: calc(var(--arrow-square-size) / 2);
+  --arrow-center-inset: calc(50% - var(--arrow-visible-size));
+  --arrow-offset: calc(1.5px - var(--arrow-visible-size));
+  --arrow-corner-distance: 12px;
+  --arrow-corner-inset: calc(var(--arrow-corner-distance) + (var(--extra-width-from-rotation) / 2));
+  --arrow-overlap-magnitude: 5px;
+}
+@media (prefers-color-scheme: dark) {
+  #feature-callout {
+    --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
+    --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
+    --fc-border: var(--fc-border-dark, #3A3944);
+    --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
+    --fc-button-background: var(--fc-button-background-dark, #2B2A33);
+    --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
+    --fc-button-border: var(--fc-button-border-dark, transparent);
+    --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
+    --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
+    --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
+    --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
+    --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
+    --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
+    --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
+    --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
+    --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
+    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
+    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
+    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
+    --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
+    --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
+    --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
+    --fc-link-color: var(--fc-link-color-dark, #00DDFF);
+    --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
+    --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
+  }
+}
+@media (prefers-contrast) {
+  #feature-callout {
+    --fc-background: var(--fc-background-hcm, -moz-dialog);
+    --fc-color: var(--fc-color-hcm, -moz-dialogtext);
+    --fc-border: var(--fc-border-hcm, -moz-dialogtext);
+    --fc-accent-color: var(--fc-accent-color-hcm, LinkText);
+    --fc-button-background: var(--fc-button-background-hcm, ButtonFace);
+    --fc-button-color: var(--fc-button-color-hcm, ButtonText);
+    --fc-button-border: var(--fc-button-border-hcm, ButtonText);
+    --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText);
+    --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace);
+    --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText);
+    --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText);
+    --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
+    --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
+    --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText);
+    --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace);
+    --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace);
+    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem);
+    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText);
+    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText);
+    --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText);
+    --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem);
+    --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem);
+    --fc-step-color: var(--fc-accent-color-hcm, LinkText);
+    --fc-link-color: var(--fc-link-color-hcm, LinkText);
+    --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
+    --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
+  }
+}
+#feature-callout.simulateContent {
+  color-scheme: env(-moz-content-preferred-color-scheme);
+}
+@media (-moz-content-prefers-color-scheme: light) {
+  #feature-callout.simulateContent {
+    --fc-background: var(--fc-background-light, #fff);
+    --fc-color: var(--fc-color-light, rgb(21, 20, 26));
+    --fc-border: var(--fc-border-light, #CFCFD8);
+    --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
+    --fc-button-background: var(--fc-button-background-light, #F0F0F4);
+    --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
+    --fc-button-border: var(--fc-button-border-light, transparent);
+    --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
+    --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
+    --fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
+    --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
+    --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
+    --fc-button-border-active: var(--fc-button-border-active-light, transparent);
+    --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0);
+    --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
+    --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
+    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb);
+    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
+    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
+    --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94);
+    --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
+    --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
+    --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
+    --fc-link-color: var(--fc-link-color-light, #0061E0);
+    --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
+    --fc-link-color-active: var(--fc-link-color-active-light, #053E94);
+  }
+}
+@media (-moz-content-prefers-color-scheme: dark) {
+  #feature-callout.simulateContent {
+    --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
+    --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
+    --fc-border: var(--fc-border-dark, #3A3944);
+    --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
+    --fc-button-background: var(--fc-button-background-dark, #2B2A33);
+    --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
+    --fc-button-border: var(--fc-button-border-dark, transparent);
+    --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
+    --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
+    --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
+    --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
+    --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
+    --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
+    --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
+    --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
+    --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
+    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
+    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
+    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
+    --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
+    --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
+    --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
+    --fc-link-color: var(--fc-link-color-dark, #00DDFF);
+    --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
+    --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
+  }
+}
+@media (prefers-contrast) {
+  #feature-callout.simulateContent {
+    --fc-background: var(--fc-background-hcm, -moz-dialog);
+    --fc-color: var(--fc-color-hcm, -moz-dialogtext);
+    --fc-border: var(--fc-border-hcm, -moz-dialogtext);
+    --fc-accent-color: var(--fc-accent-color-hcm, LinkText);
+    --fc-button-background: var(--fc-button-background-hcm, ButtonFace);
+    --fc-button-color: var(--fc-button-color-hcm, ButtonText);
+    --fc-button-border: var(--fc-button-border-hcm, ButtonText);
+    --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText);
+    --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace);
+    --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText);
+    --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText);
+    --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
+    --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
+    --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText);
+    --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace);
+    --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace);
+    --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem);
+    --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText);
+    --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText);
+    --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText);
+    --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem);
+    --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem);
+    --fc-step-color: var(--fc-accent-color-hcm, LinkText);
+    --fc-link-color: var(--fc-link-color-hcm, LinkText);
+    --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
+    --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
+  }
+}
+panel#feature-callout {
+  --panel-color: var(--fc-color);
+  --panel-shadow: none;
+  --panel-shadow-margin: 6px;
+  --panel-arrow-space: calc(var(--panel-shadow-margin) + var(--arrow-visible-height) - 1.5px);
+  --panel-margin-offset: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2)));
+}
+
+panel#feature-callout::part(content) {
+  width: initial;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: var(--panel-shadow-margin);
+  background: none;
+  color: inherit;
+  overflow: visible !important;
+}
+
+div#feature-callout {
+  transition: opacity 0.5s ease;
+}
+div#feature-callout.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#feature-callout .onboardingContainer,
+#feature-callout .onboardingContainer .outer-wrapper {
+  --transition: none;
+  height: auto;
+}
+#feature-callout:dir(rtl) {
+  transform: none;
+  direction: ltr;
+}
+#feature-callout .outer-wrapper:dir(rtl) {
+  transform: none;
+  direction: rtl;
+}
+#feature-callout .screen:dir(rtl) {
+  transform: none;
+}
+#feature-callout .screen[pos=callout] {
+  height: fit-content;
+  min-height: unset;
+  overflow: visible;
+}
+#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content,
+#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps {
+  width: 18em;
+  padding-inline: 16px;
+  padding-block: 0;
+}
+#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content .welcome-text,
+#feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps .welcome-text {
+  height: 24px;
+  margin-block: 12px;
+  margin-inline: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+#feature-callout .screen[pos=callout][layout=inline] .section-main .dismiss-button {
+  height: 24px;
+  width: 24px;
+  min-height: 24px;
+  min-width: 24px;
+  margin: 0;
+  top: calc(50% - 12px);
+  inset-inline-end: 12px;
+}
+#feature-callout .screen[pos=callout] .logo-container {
+  display: flex;
+  justify-content: center;
+}
+#feature-callout .screen[pos=callout] .logo-container .brand-logo {
+  margin: 0;
+}
+#feature-callout .screen[pos=callout] .logo-container .brand-logo:dir(rtl) {
+  transform: rotateY(180deg);
+}
+#feature-callout .screen[pos=callout] .welcome-text {
+  align-items: baseline;
+  text-align: start;
+  margin: 0;
+  padding: 0;
+  gap: 8px;
+}
+#feature-callout .screen[pos=callout] .welcome-text h1,
+#feature-callout .screen[pos=callout] .welcome-text h2 {
+  font-size: 0.813em;
+  margin: 0;
+  color: inherit;
+}
+#feature-callout .screen[pos=callout] .welcome-text h1 {
+  font-weight: 600;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container {
+  height: 16px;
+  width: 16px;
+  margin-inline-end: 6px;
+  box-sizing: border-box;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container img {
+  height: 16px;
+  width: 16px;
+  margin: 0;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top], #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] {
+  flex-wrap: nowrap;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] .logo-container, #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] .logo-container {
+  height: 1.5em;
+  align-items: center;
+  padding-bottom: 0.15em;
+  box-sizing: border-box;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] {
+  align-items: start;
+}
+#feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] {
+  align-items: end;
+}
+#feature-callout .screen[pos=callout] .multi-select-container {
+  margin: 0;
+  font-size: 0.813em;
+  row-gap: 12px;
+  color: inherit;
+  overflow: visible;
+}
+#feature-callout .screen[pos=callout] .multi-select-container #multi-stage-multi-select-label {
+  font-size: inherit;
+  margin: -4px 0 0;
+  color: inherit;
+}
+#feature-callout .screen[pos=callout] .cta-link {
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  color: var(--fc-link-color);
+  order: -1;
+  margin-inline-end: auto;
+  margin-block: 8px;
+}
+#feature-callout .screen[pos=callout] .cta-link:hover {
+  color: var(--fc-link-color-hover);
+}
+#feature-callout .screen[pos=callout] .cta-link:active {
+  color: var(--fc-link-color-active);
+}
+#feature-callout .screen[pos=callout] .section-secondary {
+  display: none;
+}
+#feature-callout .screen[pos=callout] .section-main {
+  height: fit-content;
+  width: fit-content;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--fc-border);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  padding: var(--callout-padding, 24px);
+  width: 25em;
+  gap: 16px;
+  background-color: var(--fc-background);
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner {
+  gap: 12px;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps {
+  height: auto;
+  position: absolute;
+  bottom: calc(var(--callout-padding, 24px) + 12px);
+  padding-block: 0;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator {
+  border: 4px solid var(--fc-step-color);
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current {
+  border-color: var(--fc-accent-color);
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) {
+  flex-flow: row nowrap;
+  gap: 8px;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) .indicator {
+  margin: 0;
+}
+#feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current, #feature-callout .screen[pos=callout] .section-main .main-content .steps.progress-bar .indicator.complete {
+  border-color: var(--fc-accent-color);
+}
+#feature-callout .screen[pos=callout] .section-main .dismiss-button {
+  font-size: 1em;
+  inset-block: 0 auto;
+  inset-inline: auto 0;
+  margin-block: 16px 0;
+  margin-inline: 0 16px;
+  background-color: var(--fc-background);
+}
+#feature-callout .screen[pos=callout] .section-main .dismiss-button[button-size=small] {
+  height: 24px;
+  width: 24px;
+  min-height: 24px;
+  min-width: 24px;
+}
+#feature-callout .screen[pos=callout] .action-buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: end;
+  gap: 10px;
+  margin-top: 4px;
+}
+#feature-callout .screen[pos=callout] .action-buttons[alignment=start] {
+  justify-content: start;
+}
+#feature-callout .screen[pos=callout] .action-buttons[alignment=space-between] {
+  justify-content: space-between;
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary-cta {
+  font-size: inherit;
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary,
+#feature-callout .screen[pos=callout] .action-buttons .secondary {
+  padding: 4px 16px;
+  margin: 0;
+  font-size: 0.813em;
+  font-weight: 600;
+  line-height: 16px;
+  min-height: 32px;
+  text-decoration: none;
+  cursor: default;
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary {
+  background-color: var(--fc-button-background);
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary {
+  background-color: var(--fc-primary-button-background);
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container {
+  align-items: stretch;
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container:not([hidden]) {
+  display: flex;
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:not(.submenu-button),
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:not(.submenu-button),
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:not(.submenu-button) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  margin-inline-end: 0;
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:focus-visible,
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:focus-visible,
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:focus-visible {
+  z-index: 2;
+}
+#feature-callout .screen[pos=callout] .action-buttons .split-button-container .submenu-button {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  margin-inline-start: 1px;
+  padding: 8px;
+  min-width: 30px;
+  box-sizing: border-box;
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary,
+#feature-callout .screen[pos=callout] .action-buttons .secondary,
+#feature-callout .screen[pos=callout] .dismiss-button {
+  border-radius: 4px;
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary:focus-visible,
+#feature-callout .screen[pos=callout] .action-buttons .secondary:focus-visible,
+#feature-callout .screen[pos=callout] .dismiss-button:focus-visible {
+  box-shadow: none;
+  outline: 2px solid var(--fc-accent-color);
+  outline-offset: 2px;
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary:disabled,
+#feature-callout .screen[pos=callout] .action-buttons .secondary:disabled,
+#feature-callout .screen[pos=callout] .dismiss-button:disabled {
+  opacity: 0.4;
+  cursor: auto;
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary,
+#feature-callout .screen[pos=callout] .dismiss-button {
+  border: 1px solid var(--fc-button-border);
+  color: var(--fc-button-color);
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .secondary[open],
+#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled),
+#feature-callout .screen[pos=callout] .dismiss-button[open] {
+  background-color: var(--fc-button-background-hover);
+  color: var(--fc-button-color-hover);
+  border: 1px solid var(--fc-button-border-hover);
+}
+#feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .secondary[open]:active,
+#feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled):active,
+#feature-callout .screen[pos=callout] .dismiss-button[open]:active {
+  background-color: var(--fc-button-background-active);
+  color: var(--fc-button-color-active);
+  border: 1px solid var(--fc-button-border-active);
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary {
+  border: 1px solid var(--fc-primary-button-border);
+  color: var(--fc-primary-button-color);
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .primary[open] {
+  background-color: var(--fc-primary-button-background-hover);
+  color: var(--fc-primary-button-color-hover);
+  border: 1px solid var(--fc-primary-button-border-hover);
+}
+#feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .primary[open]:active {
+  background-color: var(--fc-primary-button-background-active);
+  color: var(--fc-primary-button-color-active);
+  border: 1px solid var(--fc-primary-button-border-active);
+}
+panel#feature-callout:is([side=top], [side=bottom]):not([hide-arrow=permanent]) {
+  margin-inline: var(--panel-margin-offset);
+}
+
+panel#feature-callout:is([side=left], [side=right]):not([hide-arrow=permanent]) {
+  margin-block: var(--panel-margin-offset);
+}
+
+panel#feature-callout::part(content) {
+  position: relative;
+}
+
+#feature-callout .arrow-box {
+  position: absolute;
+  overflow: visible;
+  transform: rotate(45deg);
+  transform-style: preserve-3d;
+}
+#feature-callout:not([arrow-position]) .arrow-box, #feature-callout[hide-arrow] .arrow-box {
+  display: none;
+}
+#feature-callout .arrow {
+  width: var(--arrow-square-size);
+  height: var(--arrow-square-size);
+}
+#feature-callout .shadow-arrow-box {
+  z-index: -1;
+}
+#feature-callout .shadow-arrow {
+  background: transparent;
+  outline: 1px solid var(--fc-border);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+#feature-callout .background-arrow-box {
+  z-index: 1;
+  pointer-events: none;
+}
+#feature-callout .background-arrow {
+  background-color: var(--fc-background);
+  clip-path: var(--fc-arrow-clip-path);
+}
+#feature-callout[arrow-position=top] .arrow-box {
+  top: var(--arrow-offset);
+  inset-inline-start: var(--arrow-center-inset);
+  --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
+}
+panel#feature-callout[arrow-position=top]::part(content) {
+  margin-top: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=top] {
+  margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=bottom] .arrow-box {
+  bottom: var(--arrow-offset);
+  inset-inline-start: var(--arrow-center-inset);
+  --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
+}
+panel#feature-callout[arrow-position=bottom]::part(content) {
+  margin-bottom: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=bottom] {
+  margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-end] .arrow-box {
+  top: var(--arrow-center-inset);
+  inset-inline-end: var(--arrow-offset);
+  --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
+}
+panel#feature-callout[arrow-position=inline-end]::part(content) {
+  margin-inline-end: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-end] {
+  margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-start] .arrow-box {
+  top: var(--arrow-center-inset);
+  inset-inline-start: var(--arrow-offset);
+  --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
+}
+panel#feature-callout[arrow-position=inline-start]::part(content) {
+  margin-inline-start: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-start] {
+  margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=top-end] .arrow-box {
+  top: var(--arrow-offset);
+  inset-inline-end: var(--arrow-corner-inset);
+  --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
+}
+panel#feature-callout[arrow-position=top-end]::part(content) {
+  margin-top: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=top-end] {
+  margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=top-start] .arrow-box {
+  top: var(--arrow-offset);
+  inset-inline-start: var(--arrow-corner-inset);
+  --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0);
+}
+panel#feature-callout[arrow-position=top-start]::part(content) {
+  margin-top: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=top-start] {
+  margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=bottom-end] .arrow-box {
+  bottom: var(--arrow-offset);
+  inset-inline-end: var(--arrow-corner-inset);
+  --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
+}
+panel#feature-callout[arrow-position=bottom-end]::part(content) {
+  margin-bottom: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=bottom-end] {
+  margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=bottom-start] .arrow-box {
+  bottom: var(--arrow-offset);
+  inset-inline-start: var(--arrow-corner-inset);
+  --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%);
+}
+panel#feature-callout[arrow-position=bottom-start]::part(content) {
+  margin-bottom: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=bottom-start] {
+  margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-end-top] .arrow-box {
+  top: var(--arrow-corner-inset);
+  inset-inline-end: var(--arrow-offset);
+  --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
+}
+panel#feature-callout[arrow-position=inline-end-top]::part(content) {
+  margin-inline-end: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-end-top] {
+  margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-end-bottom] .arrow-box {
+  bottom: var(--arrow-corner-inset);
+  inset-inline-end: var(--arrow-offset);
+  --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0);
+}
+panel#feature-callout[arrow-position=inline-end-bottom]::part(content) {
+  margin-inline-end: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-end-bottom] {
+  margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-start-top] .arrow-box {
+  top: var(--arrow-corner-inset);
+  inset-inline-start: var(--arrow-offset);
+  --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
+}
+panel#feature-callout[arrow-position=inline-start-top]::part(content) {
+  margin-inline-start: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-start-top] {
+  margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout[arrow-position=inline-start-bottom] .arrow-box {
+  bottom: var(--arrow-corner-inset);
+  inset-inline-start: var(--arrow-offset);
+  --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0);
+}
+panel#feature-callout[arrow-position=inline-start-bottom]::part(content) {
+  margin-inline-start: var(--panel-arrow-space);
+}
+
+panel#feature-callout[arrow-position=inline-start-bottom] {
+  margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude)));
+}
+
+#feature-callout:focus-visible .screen[pos=callout] .section-main .main-content {
+  outline: 2px solid var(--fc-accent-color);
+  border-color: transparent;
+}
+@media (prefers-contrast) {
+  #feature-callout:focus-visible .screen[pos=callout] .section-main .main-content {
+    border-color: var(--fc-background);
+  }
+}
+#feature-callout:focus-visible .shadow-arrow {
+  outline: 2px solid var(--fc-accent-color);
+}
+
+/* stylelint-disable max-nesting-depth */
+.onboardingContainer.shopping {
+  height: auto;
+}
+.onboardingContainer.shopping .outer-wrapper {
+  height: auto;
+}
+
+.onboardingContainer.shopping .screen[pos=split] {
+  height: auto;
+  margin: 0 auto;
+  min-height: fit-content;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2);
+  overflow-x: auto;
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+  .onboardingContainer.shopping .screen[pos=split] {
+    box-shadow: 0 2px 6px #15141a;
+  }
+}
+.onboardingContainer.shopping .screen[pos=split]::before {
+  display: none;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main {
+  width: auto;
+  height: auto;
+  margin: 0 auto;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content {
+  border-radius: 4px;
+  color: inherit;
+  font: menu;
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+  .onboardingContainer.shopping .screen[pos=split] .section-main .main-content {
+    background-color: #52525E;
+  }
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content.no-steps {
+  padding: 16px 0 36px;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text {
+  text-align: start;
+  margin-block: 10px 12px;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h1 {
+  width: auto;
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: 1.7em;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .welcome-text h2 {
+  color: inherit;
+  font-size: 1em;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary,
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .secondary {
+  min-width: auto;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons .primary {
+  font-weight: 400;
+  padding: 4px 16px;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container {
+  align-items: center;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph {
+  font-size: 0.85em;
+  line-height: 1.5;
+  margin-block: 0 20px;
+  padding-inline: 30px;
+  text-align: start;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a {
+  text-decoration: underline;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .brand-logo {
+  width: 100%;
+  max-width: 294px;
+  max-height: 290px;
+  height: auto;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-main .dismiss-button {
+  top: 0;
+  margin: 14px 10px;
+}
+.onboardingContainer.shopping .screen[pos=split] .section-secondary {
+  display: none;
+}
+.onboardingContainer.shopping .screen[pos=split] .info-text, .onboardingContainer.shopping .screen[pos=split] .link-paragraph {
+  font-size: 1em;
+  margin: 10px auto;
+  line-height: 1.5;
+}
+.onboardingContainer.shopping .screen[pos=split] .link-paragraph {
+  margin-block: 0 10px;
+  padding-inline: 30px;
+  text-align: start;
+}
+.onboardingContainer.shopping .screen[pos=split] .link-paragraph a {
+  text-decoration: underline;
+}
+
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content {
+  padding: 12px;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner {
+  min-height: auto;
+  align-items: initial;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text {
+  align-items: initial;
+  padding: 0;
+  margin-top: 0;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1,
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 {
+  line-height: 20px;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h1 {
+  font-size: 1em;
+  font-weight: 590;
+  margin: 0;
+  margin-inline-end: 28px;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .welcome-text h2 {
+  color: inherit;
+  margin-block: 10px 0;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .action-buttons .cta-link {
+  padding: 4px;
+  margin-block: -4px;
+  outline-offset: 0;
+  min-height: revert;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container {
+  color: inherit;
+  padding: 0;
+  margin-block: 0 24px;
+  align-items: center;
+  overflow: visible;
+  font-size: 1em;
+  gap: 12px;
+  width: 100%;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container #multi-stage-multi-select-label {
+  color: inherit;
+  line-height: 20px;
+  margin-block: -2px 0;
+  font-size: 1em;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .multi-select-container .multi-select-item input {
+  margin-block: 0;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .main-content .main-content-inner .steps {
+  height: auto;
+  margin-bottom: 12px;
+}
+.onboardingContainer.shopping .screen[pos=split][layout=survey] .dismiss-button {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  margin: 10px;
+}
+
+.onboardingContainer.shopping shopping-message-bar {
+  font: menu;
+}
+
+/* stylelint-disable max-nesting-depth */
+html {
+  height: 100%;
+}
+
+.dummy {
+  background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color);
+}
+
+:root[dialogroot] {
+  background-color: transparent;
+}
+:root[dialogroot] body {
+  padding: 0;
+}
+:root[dialogroot] .onboardingContainer {
+  height: 100%;
+  background-color: transparent;
+}
+:root[dialogroot] .onboardingContainer:dir(rtl) {
+  transform: unset;
+}
+:root[dialogroot] .onboardingContainer .logo-container {
+  pointer-events: none;
+}
+:root[dialogroot] .onboardingContainer .screen:dir(rtl) {
+  transform: unset;
+}
+
+.welcome-container .onboardingContainer {
+  min-height: 610px;
+  min-width: fit-content;
+}
+
+.onboardingContainer {
+  --grey-subtitle-1: #696977;
+  --mr-welcome-background-color: #F8F6F4;
+  --mr-screen-heading-color: var(--in-content-text-color);
+  --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 20%) 0%, rgba(2, 144, 238, 20%) 100%);
+  --mr-screen-background-color: #F8F6F4;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  position: relative;
+  text-align: center;
+  height: 100vh;
+  --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
+}
+@media (prefers-color-scheme: dark) {
+  .onboardingContainer {
+    --grey-subtitle-1: #FFF;
+    --mr-welcome-background-color: #333336;
+    --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 30%) 0%, rgba(2, 144, 238, 30%) 100%);
+    --mr-screen-background-color: #62697A;
+  }
+}
+@media (prefers-contrast) {
+  .onboardingContainer {
+    --mr-screen-background-color: buttontext;
+    --mr-screen-heading-color: buttonface;
+    background-color: var(--in-content-page-background);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .onboardingContainer {
+    --translate: 30px;
+    --rotate: 20deg;
+    --scale: 0.4;
+    --progress-bar-transition: 0.6s translate;
+  }
+  .onboardingContainer:dir(rtl) {
+    --scale: -0.4 0.4;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .onboardingContainer {
+    --translate: 0;
+    --rotate: 0deg;
+    --scale: 1;
+    --progress-bar-transition: none;
+  }
+  .onboardingContainer:dir(rtl) {
+    --scale: -1 1;
+  }
+}
+.onboardingContainer:dir(rtl) {
+  transform: rotateY(180deg);
+}
+.onboardingContainer .section-main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 504px;
+  flex-shrink: 0;
+}
+.onboardingContainer .section-main:not(.embedded-migration) {
+  position: relative;
+}
+.onboardingContainer .main-content {
+  background-color: var(--in-content-page-background);
+  border-radius: 20px;
+  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 0;
+  transition: var(--transition);
+  z-index: 1;
+  box-sizing: border-box;
+}
+.onboardingContainer .main-content.no-steps {
+  padding-bottom: 48px;
+}
+.onboardingContainer .main-content .main-content-inner {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: space-around;
+}
+.onboardingContainer .main-content .no-steps .main-content {
+  padding-bottom: 48px;
+}
+.onboardingContainer .main-content .no-steps .steps {
+  display: none;
+}
+.onboardingContainer .screen {
+  display: flex;
+  position: relative;
+  flex-flow: row nowrap;
+  height: 100%;
+  min-height: 500px;
+  overflow: hidden;
+}
+.onboardingContainer .screen.light-text {
+  --in-content-page-color: rgb(251, 251, 254);
+  --in-content-primary-button-text-color: rgb(43, 42, 51);
+  --in-content-primary-button-text-color-hover: rgb(43, 42, 51);
+  --in-content-primary-button-background: rgb(0, 221, 255);
+  --in-content-primary-button-background-hover: rgb(128, 235, 255);
+  --in-content-primary-button-background-active: rgb(170, 242, 255);
+  --in-content-button-text-color: var(--in-content-page-color);
+}
+.onboardingContainer .screen.dark-text {
+  --in-content-page-color: rgb(21, 20, 26);
+  --in-content-primary-button-text-color: rgb(251, 251, 254);
+  --in-content-primary-button-text-color-hover: rgb(251, 251, 254);
+  --in-content-primary-button-background: #0061E0;
+  --in-content-primary-button-background-hover: #0250BB;
+  --in-content-primary-button-background-active: #053E94;
+  --in-content-primary-button-border-color: transparent;
+  --in-content-primary-button-border-hover: transparent;
+  --in-content-button-text-color: var(--in-content-page-color);
+}
+.onboardingContainer .screen:dir(rtl) {
+  transform: rotateY(180deg);
+}
+.onboardingContainer .screen[pos=center] {
+  background-color: rgba(21, 20, 26, 0.5);
+  min-width: 504px;
+}
+.onboardingContainer .screen[pos=center].with-noodles {
+  min-width: 610px;
+  min-height: 610px;
+}
+.onboardingContainer .screen[pos=center].with-noodles .section-main {
+  height: 504px;
+}
+.onboardingContainer .screen[pos=center].with-video {
+  justify-content: center;
+  background: none;
+  align-items: center;
+}
+.onboardingContainer .screen[pos=center].with-video .section-main {
+  width: 800px;
+  height: 550px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content {
+  background-color: var(--mr-welcome-background-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);
+  padding: 44px 85px 20px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .welcome-text {
+  margin: 0;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .main-content-inner {
+  justify-content: space-between;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content h1,
+.onboardingContainer .screen[pos=center].with-video .main-content h2 {
+  align-self: start;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content h1 {
+  font-size: 24px;
+  line-height: 28.8px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content h2 {
+  font-size: 15px;
+  line-height: 22px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta {
+  justify-content: end;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  text-decoration: none;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon::after {
+  content: "";
+  padding-inline-end: 12px;
+  margin-inline-start: 4px;
+  background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon:dir(rtl)::after {
+  background-image: url("chrome://browser/skin/back.svg");
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary {
+  background-color: var(--in-content-button-background);
+  border: 1px solid var(--in-content-button-border-color);
+  line-height: 12px;
+  font-size: 0.72em;
+  font-weight: 600;
+  padding: 8px 16px;
+  text-decoration: none;
+  cursor: default;
+  color: var(--in-content-button-text-color);
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open] {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+.onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open]:active {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+}
+.onboardingContainer .screen[pos=center].addons-picker {
+  justify-content: center;
+  align-items: center;
+  background: none;
+}
+.onboardingContainer .screen[pos=center].addons-picker .section-main {
+  width: 800px;
+  height: 550px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content {
+  background-color: var(--in-content-page-background);
+  border-radius: 8px;
+  box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2);
+  overflow: hidden;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .welcome-text {
+  display: flex;
+  margin: 0;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .main-content-inner {
+  padding: 25px 56px 0;
+  justify-content: space-between;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content h1,
+.onboardingContainer .screen[pos=center].addons-picker .main-content h2 {
+  align-self: start;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content h2 {
+  font-size: 15px;
+  text-align: start;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .brand-logo {
+  display: block;
+  margin: 40px 56px 0;
+  transition: var(--transition);
+  height: 30px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta {
+  display: block;
+  margin: 8px 0;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link {
+  background: none;
+  padding: 0;
+  font-weight: normal;
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--link-color);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:hover {
+  color: var(--link-color-hover);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
+  color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+  .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active {
+    text-decoration: none;
+  }
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.secondary:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta {
+  justify-content: end;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  text-decoration: none;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon::after {
+  content: "";
+  padding-inline-end: 12px;
+  margin-inline-start: 4px;
+  background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon:dir(rtl)::after {
+  background-image: url("chrome://browser/skin/back.svg");
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary {
+  background-color: var(--in-content-button-background);
+  border: 1px solid var(--in-content-button-border-color);
+  line-height: 12px;
+  font-size: 0.72em;
+  font-weight: 600;
+  padding: 8px 16px;
+  text-decoration: none;
+  cursor: default;
+  color: var(--in-content-button-text-color);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open] {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+.onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open]:active {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container {
+  display: flex;
+  border: 1px solid var(--in-content-border-color);
+  box-shadow: 0 1px 2px 0 var(--in-content-border-color);
+  border-radius: 4px;
+  margin: 5px auto;
+  text-align: start;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .rtamo-icon img {
+  margin: 10px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-details {
+  display: grid;
+  width: 70%;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-title {
+  margin: 10px 0 3px;
+  font-size: 16px;
+  font-weight: 600;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-description {
+  margin: 2px 0 10px;
+  font-size: 13px;
+  font-weight: 400;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container .install-button-wrapper {
+  display: flex;
+}
+.onboardingContainer .screen[pos=center].addons-picker .addon-container button {
+  align-self: center;
+  width: 124px;
+}
+.onboardingContainer .screen[pos=center].addons-picker .loader {
+  width: 1em;
+  height: 1em;
+  border: 3px solid var(--in-content-primary-button-text-color);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+  justify-self: center;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.onboardingContainer .screen[pos=center].addons-picker .loaderContainer {
+  display: flex;
+  padding: 1.5px 37.5px;
+  margin: auto;
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary {
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--link-color);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:hover {
+  color: var(--link-color-hover);
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
+  color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+  .onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active {
+    text-decoration: none;
+  }
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button {
+  color: #FFF;
+}
+.onboardingContainer .screen:not([pos=split]) .secondary-cta.top button:hover {
+  color: #E0E0E6;
+}
+.onboardingContainer .screen:not([pos=split]) migration-wizard {
+  padding: 5px 60px;
+}
+.onboardingContainer .screen:not([pos=split]) migration-wizard::part(header) {
+  text-align: center;
+}
+.onboardingContainer .screen:not([pos=split]) migration-wizard::part(buttons) {
+  margin: 32px auto 0;
+}
+.onboardingContainer .screen:not([pos=split]) .welcome-text:empty {
+  margin: 0;
+}
+.onboardingContainer .screen[pos=split] {
+  margin: auto;
+  min-height: 550px;
+}
+.onboardingContainer .screen[pos=split]::before {
+  content: "";
+  position: absolute;
+  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
+  width: 800px;
+  height: 550px;
+  border-radius: 8px;
+  inset: 0;
+  margin: auto;
+  pointer-events: none;
+}
+.onboardingContainer .screen[pos=split] .section-secondary,
+.onboardingContainer .screen[pos=split] .section-main {
+  width: 400px;
+  height: 550px;
+}
+.onboardingContainer .screen[pos=split] .secondary-cta.top {
+  position: fixed;
+  padding-inline-end: 0;
+}
+.onboardingContainer .screen[pos=split] .secondary-cta.top button {
+  padding: 7px 15px;
+}
+.onboardingContainer .screen[pos=split] .section-main {
+  flex-direction: row;
+  display: block;
+  margin: auto auto auto 0;
+}
+.onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
+  margin: auto 0 auto auto;
+}
+.onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content {
+  padding-block: 100px 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content {
+  border-radius: 0 8px 8px 0;
+  overflow: hidden;
+  padding-inline: 35px 20px;
+  padding-block: 120px 0;
+  box-shadow: none;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content.no-steps {
+  padding-bottom: 48px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content:dir(rtl) {
+  border-radius: 8px 0 0 8px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
+  min-height: 330px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons {
+  padding: 0;
+  margin-inline-start: -5px;
+  display: flex;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons button {
+  cursor: pointer;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .qr-code-image {
+  margin: 5px 0 10px;
+  display: flex;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .language-switcher-container .primary {
+  margin-bottom: 5px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
+  position: relative;
+  text-align: initial;
+  height: 100%;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
+  font-size: 13px;
+  margin-block: 1em;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container:not(.multi-select-item) {
+  transition: var(--transition);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container input,
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label {
+  vertical-align: middle;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box {
+  margin: 8px 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta {
+  margin: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link {
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--link-color);
+  padding: 0;
+  font-weight: normal;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:hover {
+  color: var(--link-color-hover);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active {
+  color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active {
+    text-decoration: none;
+  }
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary[open] {
+  background-color: var(--in-content-button-background-hover);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container {
+  flex-wrap: nowrap;
+  align-items: start;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
+  position: absolute;
+  bottom: -30px;
+  inset-inline-end: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary {
+  background-color: var(--in-content-button-background);
+  border: 1px solid var(--in-content-button-border-color);
+  line-height: 12px;
+  font-size: 0.72em;
+  font-weight: 600;
+  padding: 8px 16px;
+  text-decoration: none;
+  cursor: default;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open] {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open]:active {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  text-decoration: none;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon::after {
+  content: "";
+  padding-inline-end: 12px;
+  margin-inline-start: 4px;
+  background: url("chrome://browser/skin/forward.svg") no-repeat center/12px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon:dir(rtl)::after {
+  background-image: url("chrome://browser/skin/back.svg");
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
+  text-align: start;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .brand-logo {
+  height: 25px;
+  margin-block: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .logo-alt {
+  width: inherit;
+  height: inherit;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
+  margin-inline: 0 10px;
+  margin-block: 10px 35px;
+  text-align: initial;
+  align-items: initial;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text:empty {
+  margin: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1 {
+  font-size: 24px;
+  line-height: 1.2;
+  width: 300px;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
+  margin: 10px 0 0;
+  min-height: 1em;
+  font-size: 15px;
+  line-height: 1.5;
+}
+@media (prefers-contrast: no-preference) {
+  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
+    color: #5B5B66;
+  }
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1,
+.onboardingContainer .screen[pos=split] .section-main .main-content .primary {
+  margin: 0;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .steps {
+  z-index: 1;
+}
+.onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+  width: 400px;
+  margin-inline: -35px;
+}
+@media (prefers-contrast) {
+  .onboardingContainer .screen[pos=split] .section-main .main-content {
+    border: 1px solid var(--in-content-page-color);
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+    border-top: 1px solid var(--in-content-page-color);
+    background-color: var(--in-content-page-background);
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar .indicator {
+    background-color: var(--in-content-accent-color);
+  }
+}
+.onboardingContainer .screen[pos=split] .section-secondary {
+  --mr-secondary-position: center center / auto 350px;
+  border-radius: 8px 0 0 8px;
+  margin: auto 0 auto auto;
+  display: flex;
+  align-items: center;
+  -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
+  stroke: currentColor;
+}
+.onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
+  border-radius: 0 8px 8px 0;
+  margin: auto auto auto 0;
+}
+.onboardingContainer .screen[pos=split] .section-secondary h1 {
+  color: var(--mr-screen-heading-color);
+  font-weight: 700;
+  font-size: 47px;
+  line-height: 110%;
+  max-width: 340px;
+  text-align: initial;
+  white-space: pre-wrap;
+  text-shadow: none;
+  margin-inline: 40px 0;
+}
+.onboardingContainer .screen[pos=split] .section-secondary .image-alt {
+  width: inherit;
+  height: inherit;
+}
+.onboardingContainer .screen[pos=split] .section-secondary .hero-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  max-height: 100%;
+}
+.onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+  width: 100%;
+  max-width: 180px;
+  margin: 25px 0;
+  padding-bottom: 30px;
+}
+@media only screen and (width <= 800px) {
+  .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+    padding-bottom: unset;
+  }
+}
+.onboardingContainer .screen[pos=split] .multi-select-container {
+  margin-inline: 0 10px;
+}
+@media only screen and (width <= 800px) {
+  .onboardingContainer .screen[pos=split] .multi-select-container {
+    flex-direction: column;
+    align-self: center;
+    align-items: start;
+    justify-content: center;
+    width: 240px;
+    padding: 0 30px;
+    margin-inline: 0;
+    box-sizing: content-box;
+  }
+}
+.onboardingContainer .screen[pos=split] .tiles-theme-container {
+  margin-block: -20px auto;
+  align-items: initial;
+}
+.onboardingContainer .screen[pos=split] .tiles-theme-container .theme {
+  min-width: 38px;
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 {
+    color: #CFCFD8;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary {
+    background-color: #2B2A33;
+  }
+}
+@media only screen and (width >= 800px) {
+  .onboardingContainer .screen[pos=split] .tiles-theme-section {
+    margin-inline-start: -10px;
+  }
+}
+@media only screen and (width <= 800px) {
+  .onboardingContainer .screen[pos=split] {
+    flex-direction: column;
+    min-height: 550px;
+  }
+  .onboardingContainer .screen[pos=split]::before {
+    width: 400px;
+  }
+  .onboardingContainer .screen[pos=split] .section-secondary,
+.onboardingContainer .screen[pos=split] .section-main {
+    width: 400px;
+  }
+  .onboardingContainer .screen[pos=split] .section-secondary {
+    --mr-secondary-background-position-y: top;
+    --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
+    border-radius: 8px 8px 0 0;
+    margin: auto auto 0;
+    height: 100px;
+  }
+  .onboardingContainer .screen[pos=split] .section-secondary .hero-image img {
+    margin: 6px 0;
+  }
+  .onboardingContainer .screen[pos=split] .section-secondary .message-text {
+    margin-inline: auto;
+  }
+  .onboardingContainer .screen[pos=split] .section-secondary h1 {
+    font-size: 35px;
+    text-align: center;
+    white-space: normal;
+    margin-inline: auto;
+    margin-block: 14px 6px;
+  }
+  .onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) {
+    margin: auto auto 0;
+    border-radius: 8px 8px 0 0;
+  }
+  .onboardingContainer .screen[pos=split] .section-secondary.with-secondary-section-hidden {
+    display: none;
+  }
+  .onboardingContainer .screen[pos=split] migration-wizard::part(deck) {
+    min-width: 330px;
+    margin-inline: 36px;
+  }
+  .onboardingContainer .screen[pos=split] .section-main {
+    margin: 0 auto auto;
+    height: 450px;
+  }
+  .onboardingContainer .screen[pos=split] .section-main migration-wizard::part(buttons) {
+    flex-direction: column;
+    margin-inline: 46px;
+  }
+  .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] {
+    height: 550px;
+    margin: auto;
+  }
+  .onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content {
+    padding: 50px 0 0;
+    border-radius: 8px;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content {
+    border-radius: 0 0 8px 8px;
+    padding: 30px 0 0;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
+    align-items: center;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container {
+    text-align: center;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo {
+    min-height: 25px;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .brand-logo:dir(rtl) {
+    background-position: center;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container .logo-alt {
+    width: inherit;
+    height: inherit;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text {
+    align-items: center;
+    text-align: center;
+    margin-inline: 0;
+    padding-inline: 30px;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-bottom,
+.onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text .spacer-top {
+    display: none;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons {
+    text-align: center;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container {
+    display: none;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta {
+    position: relative;
+    margin-block: 10px 0;
+    bottom: 0;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .primary,
+.onboardingContainer .screen[pos=split] .section-main .main-content .secondary {
+    min-width: 240px;
+    margin-inline: 0;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .steps {
+    padding-block: 0;
+    margin: 0;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar {
+    margin-inline: 0;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .additional-cta.cta-link {
+    align-self: center;
+  }
+  .onboardingContainer .screen[pos=split] .section-main .dismiss-button {
+    top: -100px;
+  }
+  .onboardingContainer .screen[pos=split] .section-main:dir(rtl) {
+    margin: 0 auto auto;
+  }
+  .onboardingContainer .screen[pos=split] .section-main:dir(rtl) .main-content {
+    border-radius: 0 0 8px 8px;
+  }
+}
+@media only screen and (height <= 650px) and (800px <= width <= 990px) {
+  .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
+    display: none;
+  }
+}
+@media only screen and (height <= 650px) and (width <= 620px) {
+  .onboardingContainer .screen[pos=split] .section-main .secondary-cta.top {
+    position: absolute;
+    padding: 0;
+    top: 0;
+    inset-inline-end: 0;
+  }
+}
+.onboardingContainer .brand-logo {
+  margin-block: 60px 10px;
+  transition: var(--transition);
+  height: 80px;
+}
+.onboardingContainer .brand-logo.cta-top {
+  margin-top: 25px;
+}
+.onboardingContainer .brand-logo.hide {
+  visibility: hidden;
+  padding: unset;
+  margin-top: 50px;
+}
+.onboardingContainer .logo-alt {
+  width: inherit;
+  height: inherit;
+}
+.onboardingContainer .rtamo-theme-icon {
+  max-height: 30px;
+  border-radius: 2px;
+  margin-bottom: 10px;
+  margin-top: 24px;
+}
+.onboardingContainer .rtamo-icon {
+  text-align: start;
+}
+@media only screen and (width <= 800px) {
+  .onboardingContainer .rtamo-icon {
+    text-align: center;
+  }
+}
+.onboardingContainer .text-link {
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--link-color);
+}
+.onboardingContainer .text-link:hover {
+  color: var(--link-color-hover);
+}
+.onboardingContainer .text-link:active {
+  color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+  .onboardingContainer .text-link:active {
+    text-decoration: none;
+  }
+}
+.onboardingContainer .welcome-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5em 1em;
+  transition: var(--transition);
+}
+.onboardingContainer .welcome-text h1,
+.onboardingContainer .welcome-text h2 {
+  color: var(--in-content-page-color);
+  line-height: 1.5;
+}
+.onboardingContainer .welcome-text h1 {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 6px;
+  letter-spacing: -0.02em;
+  outline: none;
+}
+.onboardingContainer .welcome-text h2 {
+  font-size: 16px;
+  font-weight: normal;
+  margin: 10px 6px 0;
+  max-width: 750px;
+  letter-spacing: -0.01em;
+}
+.onboardingContainer .welcome-text.fancy h1 {
+  background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
+  background-clip: text;
+  background-size: 200%;
+}
+@media (prefers-contrast: no-preference) {
+  .onboardingContainer .welcome-text.fancy h1 {
+    color: transparent;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .onboardingContainer .welcome-text.fancy h1 {
+    background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
+  }
+  .onboardingContainer .welcome-text.fancy h1::selection {
+    color: #FFF;
+    background-color: #696977;
+  }
+}
+.onboardingContainer .welcome-text.shine h1 {
+  animation: shine 50s linear infinite;
+  background-size: 400%;
+}
+@keyframes shine {
+  to {
+    background-position: 400%;
+  }
+}
+.onboardingContainer .welcome-text .cta-paragraph a {
+  margin: 0;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.onboardingContainer .screen.light-text .welcome-text.fancy h1 {
+  background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
+}
+.onboardingContainer .screen.dark-text .welcome-text.fancy h1 {
+  background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
+}
+.onboardingContainer .welcomeZap span {
+  position: relative;
+  z-index: 1;
+  white-space: nowrap;
+}
+.onboardingContainer .welcomeZap .zap::after {
+  display: block;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  content: "";
+  position: absolute;
+  top: calc(100% - 0.15em);
+  width: 100%;
+  height: 0.3em;
+  left: 0;
+  z-index: -1;
+  transform: scaleY(3);
+}
+.onboardingContainer .welcomeZap .zap.short::after {
+  background-image: url("chrome://activity-stream/content/data/content/assets/short-zap.svg");
+}
+.onboardingContainer .welcomeZap .zap.long::after {
+  background-image: url("chrome://activity-stream/content/data/content/assets/long-zap.svg");
+}
+.onboardingContainer .language-loader {
+  filter: invert(1);
+  margin-inline-end: 10px;
+  position: relative;
+  top: 3px;
+  width: 16px;
+  height: 16px;
+  margin-top: -6px;
+}
+@media (prefers-color-scheme: dark) {
+  .onboardingContainer .language-loader {
+    filter: invert(0);
+  }
+}
+.onboardingContainer .tiles-theme-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px auto;
+}
+.onboardingContainer .sr-only {
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+}
+.onboardingContainer .sr-only.input {
+  height: 1px;
+  width: 1px;
+}
+.onboardingContainer .tiles-theme-section {
+  border: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: space-evenly;
+  margin-inline: 10px;
+  padding: 10px;
+  transition: var(--transition);
+}
+.onboardingContainer .tiles-theme-section:hover, .onboardingContainer .tiles-theme-section:active, .onboardingContainer .tiles-theme-section:focus-within {
+  border-radius: 8px;
+  outline: 2px solid var(--in-content-primary-button-background);
+}
+.onboardingContainer .tiles-theme-section .theme {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0;
+  min-width: 50px;
+  width: 180px;
+  color: #000;
+  box-shadow: none;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 0;
+}
+.onboardingContainer .tiles-theme-section .theme:focus, .onboardingContainer .tiles-theme-section .theme:active {
+  outline: initial;
+  outline-offset: initial;
+}
+.onboardingContainer .tiles-theme-section .theme .icon {
+  background-size: cover;
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+  outline: 1px solid var(--in-content-border-color);
+  outline-offset: -0.5px;
+  z-index: -1;
+}
+.onboardingContainer .tiles-theme-section .theme .icon:dir(rtl) {
+  transform: scaleX(-1);
+}
+.onboardingContainer .tiles-theme-section .theme .icon:focus, .onboardingContainer .tiles-theme-section .theme .icon:active, .onboardingContainer .tiles-theme-section .theme .icon.selected {
+  outline: 2px solid var(--in-content-primary-button-background);
+  outline-offset: 2px;
+}
+.onboardingContainer .tiles-theme-section .theme .icon.light {
+  background-image: url("resource://builtin-themes/light/icon.svg");
+}
+.onboardingContainer .tiles-theme-section .theme .icon.dark {
+  background-image: url("resource://builtin-themes/dark/icon.svg");
+}
+.onboardingContainer .tiles-theme-section .theme .icon.alpenglow {
+  background-image: url("resource://builtin-themes/alpenglow/icon.svg");
+}
+.onboardingContainer .tiles-theme-section .theme .icon.default, .onboardingContainer .tiles-theme-section .theme .icon.automatic {
+  background-image: url("resource://default-theme/icon.svg");
+}
+.onboardingContainer .tiles-theme-section .theme .text {
+  display: flex;
+  color: var(--in-content-page-color);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-inline-start: 0;
+  margin-top: 9px;
+}
+.onboardingContainer .tiles-theme-section legend {
+  cursor: default;
+}
+.onboardingContainer .tiles-container {
+  margin: 10px auto;
+}
+.onboardingContainer .tiles-container.info {
+  padding: 6px 12px 12px;
+}
+.onboardingContainer .tiles-container.info:hover, .onboardingContainer .tiles-container.info:focus {
+  background-color: rgba(217, 217, 227, 0.3);
+  border-radius: 4px;
+}
+.onboardingContainer .tiles-delayed {
+  animation: fadein 0.4s;
+}
+.onboardingContainer .multi-select-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  align-items: flex-start;
+  gap: 16px;
+  margin-block: -1em 2em;
+  margin-inline: 1em;
+  color: #5B5B66;
+  font-weight: 400;
+  font-size: 14px;
+  text-align: initial;
+  transition: var(--transition);
+  z-index: 1;
+}
+.onboardingContainer .multi-select-container #multi-stage-multi-select-label {
+  color: var(--in-content-page-color);
+  line-height: 1.5;
+  font-size: 16px;
+  font-weight: normal;
+  letter-spacing: -0.01em;
+  margin: calc(0.5em + 10px) 6px 0;
+  max-width: 750px;
+}
+.onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
+  margin: calc(-35px + 1em + 10px) 0 0;
+  min-height: 1em;
+  font-size: 15px;
+  line-height: 1.5;
+}
+@media (prefers-contrast: no-preference) {
+  .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
+    color: #5B5B66;
+  }
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+  .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label {
+    color: #CFCFD8;
+  }
+}
+
+.onboardingContainer .multi-select-container .checkbox-container {
+  display: flex;
+}
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+  .onboardingContainer .multi-select-container {
+    color: #CFCFD8;
+  }
+}
+.onboardingContainer .mobile-downloads .qr-code-image {
+  margin: 24px 0 10px;
+  width: 113px;
+  height: 113px;
+}
+.onboardingContainer .mobile-downloads .email-link {
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+  color: var(--link-color);
+  font-size: 16px;
+  font-weight: 400;
+}
+.onboardingContainer .mobile-downloads .email-link:hover {
+  color: var(--link-color-hover);
+}
+.onboardingContainer .mobile-downloads .email-link:active {
+  color: var(--link-color-active);
+}
+@media (prefers-contrast) {
+  .onboardingContainer .mobile-downloads .email-link:active {
+    text-decoration: none;
+  }
+}
+.onboardingContainer .mobile-downloads .email-link:hover {
+  background: none;
+}
+.onboardingContainer .mobile-downloads .ios button {
+  background-image: url("chrome://app-marketplace-icons/locale/ios.svg");
+}
+.onboardingContainer .mobile-downloads .android button {
+  background-image: url("chrome://app-marketplace-icons/locale/android.png");
+}
+.onboardingContainer .mobile-download-buttons {
+  list-style: none;
+  padding: 10px 0;
+  margin: 0;
+}
+.onboardingContainer .mobile-download-buttons li {
+  display: inline-block;
+}
+.onboardingContainer .mobile-download-buttons li button {
+  display: inline-block;
+  height: 45px;
+  width: 152px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  box-shadow: none;
+  border: 0;
+}
+.onboardingContainer .mobile-download-buttons li:not(:first-child) {
+  margin-inline: 5px 0;
+}
+.onboardingContainer .dismiss-button {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: auto;
+  right: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 16px;
+  display: block;
+  float: inline-end;
+  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px;
+  height: 32px;
+  width: 32px;
+  align-self: end;
+  min-height: 32px;
+  min-width: 32px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  transition: var(--transition);
+}
+.onboardingContainer .dismiss-button:dir(rtl) {
+  left: 0;
+  right: auto;
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+}
+.onboardingContainer .secondary-cta {
+  display: flex;
+  align-items: end;
+  flex-direction: row;
+  justify-content: center;
+  font-size: 14px;
+  transition: var(--transition);
+}
+.onboardingContainer .secondary-cta.top {
+  justify-content: end;
+  padding-inline-end: min(150px, 500px - 70vh);
+  padding-top: 4px;
+  position: absolute;
+  top: 10px;
+  inset-inline-end: 20px;
+  z-index: 2;
+}
+.onboardingContainer .secondary-cta span {
+  color: var(--grey-subtitle-1);
+  margin: 0 4px;
+}
+.onboardingContainer .message-text {
+  transition: var(--transition);
+}
+.onboardingContainer .helptext {
+  padding: 1em;
+  text-align: center;
+  color: var(--grey-subtitle-1);
+  font-size: 12px;
+  line-height: 18px;
+}
+.onboardingContainer .helptext.default {
+  align-self: center;
+  max-width: 40%;
+}
+.onboardingContainer .helptext span {
+  padding-inline-end: 4px;
+}
+.onboardingContainer .helptext-img {
+  height: 1.5em;
+  width: 1.5em;
+  margin-inline-end: 4px;
+  vertical-align: middle;
+}
+.onboardingContainer .helptext-img.end {
+  margin: 4px;
+}
+.onboardingContainer .helptext-img.footer {
+  vertical-align: bottom;
+}
+.onboardingContainer .steps {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 0;
+  padding-block: 16px 0;
+  transition: var(--transition);
+  z-index: -1;
+  height: 48px;
+  box-sizing: border-box;
+}
+.onboardingContainer .steps.has-helptext {
+  padding-bottom: 0;
+}
+.onboardingContainer .steps .indicator {
+  width: 0;
+  height: 0;
+  margin-inline-end: 4px;
+  margin-inline-start: 4px;
+  background: var(--grey-subtitle-1);
+  border-radius: 5px;
+  border: 3px solid var(--in-content-button-text-color);
+  opacity: 0.35;
+  box-sizing: inherit;
+}
+.onboardingContainer .steps .indicator.current {
+  opacity: 1;
+  border-color: var(--in-content-primary-button-background);
+}
+.onboardingContainer .steps .indicator.current:last-of-type:first-of-type {
+  opacity: 0;
+}
+.onboardingContainer .steps.progress-bar {
+  height: 6px;
+  padding-block: 0;
+  margin-block: 42px 0;
+  background-color: color-mix(in srgb, var(--in-content-button-text-color) 25%, transparent);
+  justify-content: start;
+  opacity: 1;
+  transition: none;
+}
+.onboardingContainer .steps.progress-bar .indicator {
+  width: 100%;
+  height: 100%;
+  margin-inline: -1px;
+  background-color: var(--in-content-primary-button-background);
+  border: 0;
+  border-radius: 0;
+  opacity: 1;
+  transition: var(--progress-bar-transition);
+  translate: calc(var(--progress-bar-progress, 0%) - 100%);
+}
+.onboardingContainer .steps.progress-bar .indicator:dir(rtl) {
+  translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%);
+}
+.onboardingContainer .additional-cta-container[flow] {
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+}
+.onboardingContainer .additional-cta-container[flow][flow=row] {
+  flex-direction: row;
+  justify-content: center;
+}
+.onboardingContainer .additional-cta-container[flow][flow=row] .secondary-cta {
+  flex-basis: 100%;
+}
+.onboardingContainer .primary,
+.onboardingContainer .secondary,
+.onboardingContainer .additional-cta,
+.onboardingContainer .submenu-button {
+  font-size: 13px;
+  line-height: 16px;
+  padding: 11px 15px;
+  transition: var(--transition);
+}
+.onboardingContainer .primary.rtamo,
+.onboardingContainer .secondary.rtamo,
+.onboardingContainer .additional-cta.rtamo,
+.onboardingContainer .submenu-button.rtamo {
+  margin-top: 24px;
+}
+.onboardingContainer .secondary {
+  background-color: var(--in-content-button-background);
+  color: var(--in-content-button-text-color);
+}
+.onboardingContainer .split-button-container,
+.onboardingContainer .screen .action-buttons .split-button-container {
+  align-items: stretch;
+}
+.onboardingContainer .split-button-container:not([hidden]),
+.onboardingContainer .screen .action-buttons .split-button-container:not([hidden]) {
+  display: flex;
+}
+.onboardingContainer .split-button-container .primary:not(.submenu-button),
+.onboardingContainer .split-button-container .secondary:not(.submenu-button),
+.onboardingContainer .split-button-container .additional-cta:not(.submenu-button),
+.onboardingContainer .screen .action-buttons .split-button-container .primary:not(.submenu-button),
+.onboardingContainer .screen .action-buttons .split-button-container .secondary:not(.submenu-button),
+.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:not(.submenu-button) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  margin-inline-end: 0;
+}
+.onboardingContainer .split-button-container .primary:focus-visible,
+.onboardingContainer .split-button-container .secondary:focus-visible,
+.onboardingContainer .split-button-container .additional-cta:focus-visible,
+.onboardingContainer .screen .action-buttons .split-button-container .primary:focus-visible,
+.onboardingContainer .screen .action-buttons .split-button-container .secondary:focus-visible,
+.onboardingContainer .screen .action-buttons .split-button-container .additional-cta:focus-visible {
+  z-index: 2;
+}
+.onboardingContainer .split-button-container .submenu-button,
+.onboardingContainer .screen .action-buttons .split-button-container .submenu-button {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  margin-inline-start: 1px;
+  padding: 8px;
+  min-width: 30px;
+  box-sizing: border-box;
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+.onboardingContainer .noodle {
+  display: block;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transition: var(--transition);
+}
+.onboardingContainer .noodle:dir(rtl) {
+  scale: -1 1;
+}
+.onboardingContainer .outline-L {
+  background-image: url("chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg");
+}
+.onboardingContainer .solid-L {
+  background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");
+  -moz-context-properties: fill;
+  fill: var(--in-content-page-background);
+  display: none;
+}
+.onboardingContainer .purple-C {
+  background-image: url("chrome://activity-stream/content/data/content/assets/noodle-C.svg");
+  -moz-context-properties: fill;
+  fill: #E7258C;
+}
+.onboardingContainer .orange-L {
+  background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");
+  -moz-context-properties: fill;
+  fill: #FFA437;
+}
+.onboardingContainer .screen-1 .section-main {
+  z-index: 1;
+  margin: auto;
+}
+.onboardingContainer .screen-1 .outline-L {
+  width: 87px;
+  height: 80px;
+  transform: rotate(10deg) translate(-30%, 200%);
+  transition-delay: 0.4s;
+  z-index: 2;
+}
+.onboardingContainer .screen-1 .orange-L {
+  width: 550px;
+  height: 660px;
+  transform: rotate(-155deg) translate(11%, -18%);
+  transition-delay: 0.2s;
+}
+.onboardingContainer .screen-1 .purple-C {
+  width: 310px;
+  height: 260px;
+  transform: translate(-18%, -67%);
+}
+.onboardingContainer .screen-1 .yellow-circle {
+  width: 165px;
+  height: 165px;
+  border-radius: 50%;
+  transform: translate(230%, -5%);
+  background: #952BB9;
+  transition-delay: -0.2s;
+}
+.onboardingContainer .dialog-initial .brand-logo {
+  transition-delay: 0.6s;
+}
+.onboardingContainer .dialog-initial .welcome-text {
+  transition-delay: 0.8s;
+}
+.onboardingContainer .dialog-initial .tiles-theme-section,
+.onboardingContainer .dialog-initial .multi-select-container,
+.onboardingContainer .dialog-initial migration-wizard {
+  transition-delay: 0.9s;
+}
+.onboardingContainer .dialog-initial .primary,
+.onboardingContainer .dialog-initial .secondary,
+.onboardingContainer .dialog-initial .secondary-cta,
+.onboardingContainer .dialog-initial .steps,
+.onboardingContainer .dialog-initial .cta-link {
+  transition-delay: 1s;
+}
+.onboardingContainer .screen:not(.dialog-initial) .tiles-theme-section,
+.onboardingContainer .screen:not(.dialog-initial) .multi-select-container {
+  transition-delay: 0.2s;
+}
+.onboardingContainer .screen:not(.dialog-initial) .primary,
+.onboardingContainer .screen:not(.dialog-initial) .secondary,
+.onboardingContainer .screen:not(.dialog-initial) .secondary-cta,
+.onboardingContainer .screen:not(.dialog-initial) .cta-link {
+  transition-delay: 0.4s;
+}
+.onboardingContainer .screen-2 .section-main {
+  z-index: 1;
+  margin: auto;
+}
+.onboardingContainer .screen-2 .outline-L {
+  width: 87px;
+  height: 80px;
+  transform: rotate(250deg) translate(-420%, 425%);
+  transition-delay: 0.2s;
+  z-index: 2;
+}
+.onboardingContainer .screen-2 .orange-L {
+  height: 800px;
+  width: 660px;
+  transform: rotate(35deg) translate(-10%, -7%);
+  transition-delay: -0.4s;
+}
+.onboardingContainer .screen-2 .purple-C {
+  width: 392px;
+  height: 394px;
+  transform: rotate(260deg) translate(-34%, -35%);
+  transition-delay: -0.2s;
+  fill: #952BB9;
+}
+.onboardingContainer .screen-2 .yellow-circle {
+  width: 165px;
+  height: 165px;
+  border-radius: 50%;
+  transform: translate(160%, 130%);
+  background: #E7258C;
+}
+.onboardingContainer.transition-in .noodle {
+  opacity: 0;
+  rotate: var(--rotate);
+  scale: var(--scale);
+}
+.onboardingContainer.transition-in .dialog-initial .main-content,
+.onboardingContainer.transition-in .dialog-initial .dismiss-button {
+  translate: 0 calc(-2 * var(--translate));
+}
+.onboardingContainer.transition-in .dialog-initial .brand-logo,
+.onboardingContainer.transition-in .dialog-initial .steps {
+  opacity: 0;
+  translate: 0 calc(-1 * var(--translate));
+}
+.onboardingContainer.transition-in .screen .welcome-text,
+.onboardingContainer.transition-in .screen .multi-select-container,
+.onboardingContainer.transition-in .screen .tiles-theme-section,
+.onboardingContainer.transition-in .screen .primary,
+.onboardingContainer.transition-in .screen .checkbox-container:not(.multi-select-item),
+.onboardingContainer.transition-in .screen .secondary,
+.onboardingContainer.transition-in .screen .secondary-cta:not(.top),
+.onboardingContainer.transition-in .screen .cta-link,
+.onboardingContainer.transition-in .screen migration-wizard {
+  opacity: 0;
+  translate: 0 calc(-1 * var(--translate));
+}
+.onboardingContainer.transition-in .screen:not(.dialog-initial) .steps:not(.progress-bar) {
+  opacity: 0.2;
+}
+.onboardingContainer.transition-out .noodle {
+  opacity: 0;
+  rotate: var(--rotate);
+  scale: var(--scale);
+  transition-delay: 0.2s;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .main-content {
+  overflow: hidden;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .welcome-text,
+.onboardingContainer.transition-out .screen:not(.dialog-last) .multi-select-container {
+  opacity: 0;
+  translate: 0 var(--translate);
+  transition-delay: 0.1s;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .tiles-theme-section,
+.onboardingContainer.transition-out .screen:not(.dialog-last) migration-wizard {
+  opacity: 0;
+  translate: 0 var(--translate);
+  transition-delay: 0.2s;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .primary,
+.onboardingContainer.transition-out .screen:not(.dialog-last) .checkbox-container:not(.multi-select-item),
+.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary,
+.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary-cta:not(.top),
+.onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link {
+  opacity: 0;
+  translate: 0 var(--translate);
+  transition-delay: 0.3s;
+}
+.onboardingContainer.transition-out .screen:not(.dialog-last) .steps:not(.progress-bar) {
+  opacity: 0.2;
+  transition-delay: 0.5s;
+}
+.onboardingContainer.transition-out .dialog-last .noodle {
+  transition-delay: 0s;
+}
+.onboardingContainer.transition-out .dialog-last .main-content,
+.onboardingContainer.transition-out .dialog-last .dismiss-button {
+  opacity: 0;
+  translate: 0 calc(2 * var(--translate));
+  transition-delay: 0.4s;
+}
+.onboardingContainer migration-wizard {
+  width: unset;
+  transition: var(--transition);
+}
+.onboardingContainer migration-wizard::part(buttons) {
+  margin-top: 24px;
+  justify-content: flex-start;
+}
+.onboardingContainer migration-wizard::part(deck) {
+  font-size: 0.83em;
+}
diff --git a/browser/components/aboutwelcome/content/aboutwelcome.html b/browser/components/aboutwelcome/content/aboutwelcome.html
new file mode 100644
index 0000000000..eb56c63110
--- /dev/null
+++ b/browser/components/aboutwelcome/content/aboutwelcome.html
@@ -0,0 +1,50 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
+   - You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; object-src 'none'; script-src resource: chrome:; media-src resource: chrome: https://assets.mozilla.net  https://www.mozilla.org; connect-src https:; img-src https: data: blob: chrome:; style-src resource: chrome:;"
+    />
+    <title data-l10n-id="onboarding-welcome-header"></title>
+    <link
+      rel="icon"
+      type="image/png"
+      href="chrome://branding/content/icon32.png"
+    />
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
+    <link
+      rel="stylesheet"
+      href="chrome://browser/content/aboutwelcome/aboutwelcome.css"
+    />
+    <link rel="localization" href="branding/brand.ftl" />
+    <link rel="localization" href="preview/onboarding.ftl" />
+    <link rel="localization" href="browser/newtab/onboarding.ftl" />
+    <link rel="localization" href="browser/spotlight.ftl" />
+    <link rel="localization" href="browser/migrationWizard.ftl" />
+    <link rel="localization" href="toolkit/branding/accounts.ftl" />
+    <link rel="localization" href="toolkit/branding/brandings.ftl" />
+  </head>
+  <body>
+    <div
+      id="multi-stage-message-root"
+      class="welcome-container"
+      role="presentation"
+    ></div>
+    <script src="resource://activity-stream/vendor/react.js"></script>
+    <script src="resource://activity-stream/vendor/react-dom.js"></script>
+    <script src="chrome://browser/content/contentTheme.js"></script>
+    <script src="chrome://browser/content/aboutwelcome/aboutwelcome.bundle.js"></script>
+    <script src="chrome://global/content/elements/named-deck.js" async></script>
+    <script src="chrome://global/content/elements/panel-list.js" async></script>
+    <script
+      src="chrome://browser/content/migration/migration-wizard.mjs"
+      type="module"
+    ></script>
+  </body>
+</html>
diff --git a/browser/components/aboutwelcome/content/onboarding.ftl b/browser/components/aboutwelcome/content/onboarding.ftl
new file mode 100644
index 0000000000..9a894baf88
--- /dev/null
+++ b/browser/components/aboutwelcome/content/onboarding.ftl
@@ -0,0 +1,13 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+### This file is not in a locales directory to prevent it from
+### being translated as the feature is still in heavy development
+### and strings are likely to change often.
+
+## AMO (Introduce Add-ons) onboarding screen strings
+
+amo-screen-title = Personalize your { -brand-short-name }
+amo-screen-subtitle = Add-ons are tiny apps that run in { -brand-short-name } and level up the way you browse — from ultimate privacy and safety to changing how { -brand-short-name } looks and behaves.
+amo-screen-primary-cta = Explore staff-recommended add-ons