"use strict";
(globalThis["webpackChunkathemes_starter_sites"] = globalThis["webpackChunkathemes_starter_sites"] || []).push([["v2_onboarding_src_components_Steps_Pages_js"],{

/***/ "./v2/onboarding/src/components/Steps/Pages.js":
/*!*****************************************************!*\
  !*** ./v2/onboarding/src/components/Steps/Pages.js ***!
  \*****************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _Layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Layout */ "./v2/onboarding/src/components/Layout/index.js");
/* harmony import */ var _context_WizardContext__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../context/WizardContext */ "./v2/onboarding/src/context/WizardContext.js");
/* harmony import */ var _utils_api__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/api */ "./v2/onboarding/src/utils/api.js");
/* harmony import */ var _data_starter_sites__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../data/starter-sites */ "./v2/onboarding/src/data/starter-sites.js");
/* harmony import */ var _data_color_schemes__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../data/color-schemes */ "./v2/onboarding/src/data/color-schemes.js");
/* harmony import */ var _data_typography_pairs__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../data/typography-pairs */ "./v2/onboarding/src/data/typography-pairs.js");
/* harmony import */ var _utils_preload_helpers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/preload-helpers */ "./v2/onboarding/src/utils/preload-helpers.js");
/* harmony import */ var _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../utils/preview-bridge */ "./v2/onboarding/src/utils/preview-bridge.js");
/* harmony import */ var _utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../utils/use-preview-sync */ "./v2/onboarding/src/utils/use-preview-sync.js");
/* harmony import */ var _utils_is_botiga__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../utils/is-botiga */ "./v2/onboarding/src/utils/is-botiga.js");
/* harmony import */ var _data_botiga_non_variable_color_rules__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../data/botiga-non-variable-color-rules */ "./v2/onboarding/src/data/botiga-non-variable-color-rules.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__);
/**
 * Pages step component.
 *
 * @package Athemes Starter Sites
 */















/**
 * Transform color scheme data to preview-compatible format.
 *
 * @param {string} schemeId     The selected color scheme ID.
 * @param {Array}  colorSchemes Array of available color schemes.
 * @param {Object} customColors Custom generated colors when scheme is custom.
 * @return {Object|null} Color data ready for preview, or null if not available.
 */

const transformColors = (schemeId, colorSchemes, customColors) => {
  if (!schemeId) {
    return null;
  }

  // Handle custom colors.
  if (schemeId === 'custom' && customColors && typeof customColors === 'object' && Object.keys(customColors).length > 0) {
    return customColors;
  }
  if (schemeId === 'custom') {
    return null;
  }

  // Find the selected scheme.
  const selectedScheme = colorSchemes.find(scheme => scheme.id === schemeId);
  if (!selectedScheme || !selectedScheme.colors) {
    return null;
  }
  return selectedScheme.colors;
};

/**
 * Normalize Botiga demo URL to use the correct preview base.
 *
 * Some demo page URLs returned from the API may point to an incorrect
 * base path, such as `/apparel/` instead of `/botiga-apparel/`.
 * This helper replaces the base with the selected site's preview URL
 * while preserving the rest of the path and query parameters.
 *
 * @param {string} url          Original page URL.
 * @param {Object} selectedSite Selected site object.
 * @return {string} Normalized demo URL.
 */
const normalizeBotigaDemoUrl = (url, selectedSite) => {
  if (!_utils_is_botiga__WEBPACK_IMPORTED_MODULE_11__["default"] || !selectedSite?.preview || !url) {
    return url;
  }
  return url.replace(/^https:\/\/demo\.athemes\.com\/[^/]+\//, selectedSite.preview);
};

/**
 * Build a stable Botiga Elementor preview URL.
 *
 * Elementor demo page URLs may contain stale `page_id` query args from the XML export.
 * This helper rebuilds the preview URL from the selected site's preview base and the page slug.
 *
 * @param {Object} page         Current page object.
 * @param {Object} selectedSite Selected site object.
 * @param {string} builder      Active builder.
 * @return {string} Normalized preview URL.
 */
const normalizeBotigaElementorPreviewUrl = (page, selectedSite, builder) => {
  if (!_utils_is_botiga__WEBPACK_IMPORTED_MODULE_11__["default"] || builder !== 'elementor' || !selectedSite?.preview || !page?.url) {
    return page?.url || '';
  }
  const normalizedBase = selectedSite.preview.endsWith('/') ? selectedSite.preview : `${selectedSite.preview}/`;
  const pageTitle = page.title?.trim()?.toLowerCase() || '';
  const pageSlug = page.slug?.trim()?.toLowerCase() || '';
  if (pageTitle === 'home' || pageTitle === 'my front page' || pageSlug === 'home' || pageSlug === 'homepage') {
    return normalizedBase;
  }
  if (!pageSlug) {
    return page.url;
  }
  return `${normalizedBase}${pageSlug}/`;
};

/**
 * Get the effective preview URL for the current page.
 *
 * Keeps existing behavior intact for non-Botiga themes and Gutenberg,
 * while normalizing Botiga Elementor preview URLs.
 *
 * @param {Object} page         Current page object.
 * @param {Object} selectedSite Selected site object.
 * @param {string} builder      Active builder.
 * @return {string} Preview URL.
 */
const getPreviewUrl = (page, selectedSite, builder) => normalizeBotigaElementorPreviewUrl({
  ...page,
  url: normalizeBotigaDemoUrl(page?.url, selectedSite)
}, selectedSite, builder);

/**
 * Pages step component.
 *
 * @param {Object}   props                   Component props.
 * @param {Function} props.onBack            Callback to go to previous step.
 * @param {Function} props.onContinue        Callback to proceed to next step.
 * @param {boolean}  props.navigationLoading Whether navigation is in loading state.
 * @param {string}   props.navigationError   Navigation error message.
 * @return {JSX.Element} Pages component.
 */
function Pages({
  onBack,
  onContinue,
  navigationLoading,
  navigationError
}) {
  const {
    wizardData,
    prefetchedPages,
    siteTitle,
    builder
  } = (0,_context_WizardContext__WEBPACK_IMPORTED_MODULE_3__.useWizard)();
  const iframeRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
  const [pages, setPages] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
  const [selectedPages, setSelectedPages] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
  const [isLoading, setIsLoading] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
  const [error, setError] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
  const [currentPreviewPage, setCurrentPreviewPage] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
  const [isIframeLoading, setIsIframeLoading] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(true);

  // Get customization data from the Customize step.
  const customizeData = wizardData.customize || {};
  const designData = wizardData.design || {};
  const selectedSiteId = designData.selectedSiteId;

  // Get theme data for color schemes and typography pairs.
  const themeName = (0,_data_starter_sites__WEBPACK_IMPORTED_MODULE_5__.getThemeName)();
  const selectedSite = (0,_data_starter_sites__WEBPACK_IMPORTED_MODULE_5__.getStarterSiteById)(selectedSiteId);
  const colorSchemes = (0,_data_color_schemes__WEBPACK_IMPORTED_MODULE_6__.getColorSchemesForSite)(selectedSite, themeName);
  const typographyPairs = (0,_data_typography_pairs__WEBPACK_IMPORTED_MODULE_7__.getTypographyPairsForSite)(selectedSite, themeName);

  // Initialize preview bridge for this iframe.
  _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_9__["default"].setLocalPreview(!selectedSiteId);
  (0,_utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_10__.usePreviewBridgeInit)(iframeRef);

  /**
   * Build customizations object from wizard data.
   *
   * @return {Object} Preview customization updates.
   */
  const getCustomizations = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
    const updates = {};

    // Get colors.
    const colors = transformColors(customizeData.selectedColorScheme || '', colorSchemes, customizeData.customColors || {});
    if (colors) {
      updates.colors = colors;
    }

    // Get logo.
    const siteLogo = customizeData.siteLogo || {
      url: '',
      id: 0
    };
    const logoHeight = customizeData.logoHeight ?? 100;
    if (siteLogo.url) {
      updates.logo = {
        ...siteLogo,
        height: logoHeight
      };
      updates.logoHeight = logoHeight;
    }

    // Get site title.
    updates.title = siteTitle;
    updates.showTitle = customizeData.showSiteTitle ?? true;

    // Get typography.
    const selectedTypographyId = customizeData.selectedTypographyPair || '';
    if (selectedTypographyId) {
      const selectedPair = typographyPairs.find(pair => pair.id === selectedTypographyId);
      if (selectedPair) {
        updates.typography = selectedPair;
      }
    }
    return updates;
  }, [customizeData, colorSchemes, typographyPairs, siteTitle]);

  // Set pending customizations when component mounts or customizations change.
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    const customizations = getCustomizations();
    if (Object.keys(customizations).length > 0) {
      _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_9__["default"].storePendingCustomizations(customizations);
    }
  }, [getCustomizations]);
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    const fetchPages = async () => {
      const currentDesignData = wizardData.design;

      // Check if a site is selected.
      if (!currentDesignData?.selectedSiteId) {
        return;
      }

      // Use prefetched pages if available from the Customize step.
      if (prefetchedPages && prefetchedPages.length > 0) {
        setPages(prefetchedPages);

        // Load previously selected pages from wizard state if available.
        const previouslySelected = wizardData.pages?.selectedPages;
        if (previouslySelected && Array.isArray(previouslySelected) && previouslySelected.length > 0) {
          setSelectedPages(previouslySelected);
        } else {
          setSelectedPages(prefetchedPages.map(page => page.id));
        }

        // Set the first page as the default preview page.
        setCurrentPreviewPage(prefetchedPages[0] || null);
        return;
      }
      setIsLoading(true);
      setError(null);
      try {
        const pagesData = await (0,_utils_api__WEBPACK_IMPORTED_MODULE_4__.getDemoPages)(currentDesignData.selectedSiteId, builder);

        // Sort pages to ensure homepage appears first.
        const sortedPages = [...pagesData].sort((a, b) => {
          const aIsHome = /^(home|my front page)$/i.test(a.title.trim());
          const bIsHome = /^(home|my front page)$/i.test(b.title.trim());
          if (aIsHome && !bIsHome) {
            return -1;
          }
          if (!aIsHome && bIsHome) {
            return 1;
          }
          return 0;
        });

        // Filter out Sample Page and Test pages.
        const filteredPages = sortedPages.filter(page => {
          const title = page.title.trim();
          return !/^(sample page|test)$/i.test(title);
        });
        setPages(filteredPages);

        // Load previously selected pages from wizard state if available.
        const previouslySelected = wizardData.pages?.selectedPages;
        if (previouslySelected && Array.isArray(previouslySelected) && previouslySelected.length > 0) {
          setSelectedPages(previouslySelected);
        } else {
          setSelectedPages(filteredPages.map(page => page.id));
        }

        // Set the first page as the default preview page.
        setCurrentPreviewPage(filteredPages[0] || null);
      } catch (fetchError) {
        // eslint-disable-next-line no-console
        console.error('Failed to fetch pages:', fetchError);
        setError(fetchError.message || 'Failed to load pages');
      } finally {
        setIsLoading(false);
      }
    };
    fetchPages();
  }, [wizardData, prefetchedPages, builder]);

  /**
   * Handle page selection toggle.
   *
   * @param {number|string} pageId Page identifier.
   */
  const handlePageToggle = pageId => {
    setSelectedPages(prevSelected => {
      if (prevSelected.includes(pageId)) {
        return prevSelected.filter(id => id !== pageId);
      }
      return [...prevSelected, pageId];
    });
  };

  /**
   * Handle page click to update preview.
   *
   * @param {Object} page Page data.
   */
  const handlePageClick = page => {
    if (currentPreviewPage?.id === page.id) {
      return;
    }

    // Reset ready state before changing page.
    _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_9__["default"].resetReadyState();
    setCurrentPreviewPage(page);
    setIsIframeLoading(true);
  };

  // Add preconnect hints when pages are loaded for faster iframe loading.
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (!pages || pages.length === 0) {
      return;
    }
    pages.forEach(page => {
      const previewUrl = getPreviewUrl(page, selectedSite, builder);
      if (previewUrl) {
        (0,_utils_preload_helpers__WEBPACK_IMPORTED_MODULE_8__.addPreconnectHints)(previewUrl, 'data-atss-page-preconnect');
      }
    });
  }, [pages, selectedSite, builder]);

  // Add preconnect hints when preview page changes for faster iframe loading.
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    const previewUrl = getPreviewUrl(currentPreviewPage, selectedSite, builder);
    if (previewUrl) {
      (0,_utils_preload_helpers__WEBPACK_IMPORTED_MODULE_8__.addPreconnectHints)(previewUrl);
    }
  }, [currentPreviewPage, selectedSite, builder]);

  /**
   * Handle iframe load.
   *
   * Initializes bridge and applies pending customizations.
   */
  const handleIframeLoad = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
    setIsIframeLoading(false);
    if (iframeRef.current) {
      _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_9__["default"].init(iframeRef.current);
    }
  }, []);

  /**
   * Handle continue.
   */
  const handleContinue = () => {
    onContinue({
      selectedPages,
      selectedPageData: pages.filter(page => selectedPages.includes(page.id))
    });
  };
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (!_utils_is_botiga__WEBPACK_IMPORTED_MODULE_11__["default"]) {
      return;
    }
    const colors = transformColors(customizeData.selectedColorScheme || '', colorSchemes, customizeData.customColors || {});
    if (!colors || Object.keys(colors).length === 0) {
      _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_9__["default"].resetCustomCss('atss-botiga-non-variable-colors');
      return;
    }
    const nonVariableCss = (0,_data_botiga_non_variable_color_rules__WEBPACK_IMPORTED_MODULE_12__.buildBotigaNonVariableCss)(colors);
    const scopedVariableCss = (0,_data_botiga_non_variable_color_rules__WEBPACK_IMPORTED_MODULE_12__.buildBotigaScopedVariableOverrideCss)(colors);
    const css = [scopedVariableCss, nonVariableCss].filter(Boolean).join('\n\n');
    if (!css) {
      _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_9__["default"].resetCustomCss('atss-botiga-non-variable-colors');
      return;
    }
    _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_9__["default"].updateCustomCss(css, 'atss-botiga-non-variable-colors');
  }, [customizeData.selectedColorScheme, customizeData.customColors, colorSchemes]);
  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("div", {
    className: "atss-onboarding-wizard__step-wrapper flex",
    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("div", {
      className: "atss-onboarding-wizard__step atss-onboarding-wizard__step--pages",
      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("main", {
        className: "atss-onboarding-wizard__step-body",
        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("div", {
          className: "flex gap-md flex-col",
          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("span", {
            className: "atss-control__label text-sm font-medium",
            children: [(0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Select Pages to Import', 'athemes-starter-sites'), " (", selectedPages.length, "):"]
          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("p", {
            className: "text-xs",
            style: {
              margin: '0'
            },
            children: selectedPages.length === 0 ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("span", {
              style: {
                color: 'var(--atss-color-text-error)'
              },
              children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Select Pages to Import', 'athemes-starter-sites')
            }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.Fragment, {
              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("span", {
                className: "text-secondary",
                style: {
                  display: 'block'
                },
                children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Selected: ', 'athemes-starter-sites')
              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("span", {
                className: "text-heading",
                children: pages.filter(page => selectedPages.includes(page.id)).map(page => page.title).join(', ')
              })]
            })
          }), error && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("p", {
            style: {
              color: 'var(--atss-color-text-error)'
            },
            children: [(0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Error: ', 'athemes-starter-sites'), error]
          }), !isLoading && !error && pages.length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("div", {
            className: "atss-pages-grid",
            children: pages.map(page => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_Layout__WEBPACK_IMPORTED_MODULE_2__.PageCard, {
              id: page.id,
              title: page.title,
              url: getPreviewUrl(page, selectedSite, builder),
              thumbnail: page.thumbnail,
              isSelected: selectedPages.includes(page.id),
              onToggle: handlePageToggle,
              onClick: () => handlePageClick(page)
            }, page.id))
          }), !isLoading && !error && pages.length === 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("p", {
            children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('No pages found.', 'athemes-starter-sites')
          })]
        })
      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_Layout__WEBPACK_IMPORTED_MODULE_2__.Footer, {
        showBack: true,
        showSkip: false,
        continueText: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Continue', 'athemes-starter-sites'),
        onBack: onBack,
        onContinue: handleContinue,
        continueDisabled: selectedPages.length === 0,
        continueLoading: navigationLoading,
        continueError: navigationError
      })]
    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("div", {
      className: "atss-onboarding-wizard__preview",
      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("div", {
        className: "atss-onboarding-wizard__preview-inner atss-onboarding-wizard__preview-iframe--desktop",
        children: [isIframeLoading && currentPreviewPage && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("div", {
          className: "atss-onboarding-wizard__preview-loading",
          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_Layout__WEBPACK_IMPORTED_MODULE_2__.Spinner, {})
        }), !isLoading && currentPreviewPage && currentPreviewPage.url ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("iframe", {
          ref: iframeRef,
          id: "page-preview",
          src: (() => {
            let url = getPreviewUrl(currentPreviewPage, selectedSite, builder);
            if (!_utils_is_botiga__WEBPACK_IMPORTED_MODULE_11__["default"] && /^my front page$/i.test(currentPreviewPage.title?.trim())) {
              url = url.replace('?page_id=5', '');
            }

            // If builder is Gutenberg, append -gb to the URL slug if needed.
            if (builder === 'gutenberg') {
              // Clean up double dashes in URL.
              if (selectedSiteId !== 'resume') {
                url = url.replace(/--/g, '-');
              }
              if (_utils_is_botiga__WEBPACK_IMPORTED_MODULE_11__["default"]) {
                url = `${url}${url.includes('?') ? '&' : '?'}atss_preview=1`;
                return url;
              }

              // Transform:
              // https://demo.athemes.com/sydney-main/
              // to
              // https://demo.athemes.com/sydney-main-gb/
              if (!/-gb\/?(\?.*)?$/.test(url)) {
                url = url.replace(/\/([^/\?]+)(\/)?(\?.*)?$/, '/$1-gb$2$3');
              }
              if (selectedSiteId === 'cafe') {
                url = 'https://demo.athemes.com/sp-cafe-gb/';
              }
              if (selectedSiteId === 'author') {
                url = 'https://demo.athemes.com/sp-author-gb/';
              }
            }
            url = `${url}${url.includes('?') ? '&' : '?'}atss_preview=1`;
            return url;
          })(),
          title: currentPreviewPage.title || (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Page Preview', 'athemes-starter-sites'),
          onLoad: handleIframeLoad,
          style: {
            opacity: isIframeLoading ? 0 : 1
          },
          className: "atss-onboarding-wizard__preview-iframe"
        }) : !isLoading && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("div", {
          className: "atss-onboarding-wizard__preview-placeholder",
          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("p", {
            children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Select a page to preview', 'athemes-starter-sites')
          })
        })]
      })
    })]
  });
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Pages);

/***/ }),

/***/ "./v2/onboarding/src/data/botiga-non-variable-color-rules.js":
/*!*******************************************************************!*\
  !*** ./v2/onboarding/src/data/botiga-non-variable-color-rules.js ***!
  \*******************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   botigaNonVariableBackedColorControls: () => (/* binding */ botigaNonVariableBackedColorControls),
/* harmony export */   botigaNonVariableBackedColorControlsByGroup: () => (/* binding */ botigaNonVariableBackedColorControlsByGroup),
/* harmony export */   botigaNonVariableBackedRuleMap: () => (/* binding */ botigaNonVariableBackedRuleMap),
/* harmony export */   buildBotigaNonVariableCss: () => (/* binding */ buildBotigaNonVariableCss),
/* harmony export */   buildBotigaScopedVariableOverrideCss: () => (/* binding */ buildBotigaScopedVariableOverrideCss),
/* harmony export */   getBotigaNonVariablePaletteMap: () => (/* binding */ getBotigaNonVariablePaletteMap)
/* harmony export */ });
/**
 * Botiga non-variable-backed color rules.
 *
 * These selectors are not mapped to CSS custom properties in the theme,
 * so preview updates must be applied by injecting generated CSS.
 *
 * @package aThemes Starter Sites
 */

/**
 * Botiga non-variable-backed controls grouped by palette slot.
 */
const botigaNonVariableBackedColorControlsByGroup = {
  color1: ['scrolltop_bg_color', 'single_product_tabs_border_color_active', 'single_product_tabs_text_color_active', 'single_product_tabs_text_color', 'shop_archive_header_button_color', 'shop_archive_header_button_border_color', 'ql_item_bg_hover', 'comments_comment_reply_link_background', 'wp_block_search_button_background', 'botiga_reading_progress_bar_background', 'botiga_tabs_nav_link_border_color_active', 'tags_links_color', 'tags_links_border_color', 'pagination_background_active', 'pagination_color_active', 'button_background'],
  color2: ['scrolltop_bg_color_hover', 'shop_archive_header_button_background_color_hover', 'shop_archive_header_button_border_color_hover', 'main_header_sticky_active_color_hover', 'main_header_color_hover', 'main_header_sticky_active_submenu_color_hover', 'main_header_submenu_color_hover', 'ql_item_color_hover', 'comments_comment_reply_link_background_hover', 'wp_block_search_button_background_hover', 'mobile_offcanvas_close_color_hover', 'site_info_link_color_hover', 'button_background_hover'],
  color3: ['main_header_submenu_color', 'main_header_sticky_active_submenu_color', 'single_product_title_color', 'shop_product_product_title', 'main_header_color', 'main_header_sticky_active_color', 'site_title_color', 'site_description_color', 'shop_archive_header_title_color', 'shop_archive_header_description_color', 'bhfb_search_icon_color', 'bhfb_woo_icons_color', 'bhfb_contact_info_icon_color', 'ql_item_color', 'botiga_accordion_item_arrow_border_color_hover', 'botiga_accordion_item_arrow_border_color_active', 'mobile_offcanvas_close_color', 'site_info_text_color', 'site_info_link_color', 'site_info_icon_color'],
  color5: ['single_product_tabs_remaining_borders', 'single_sticky_add_to_cart_style_color_border', 'botiga_header_row__above_header_row_border_bottom_color', 'botiga_header_row__main_header_row_border_bottom_color', 'botiga_header_row__below_header_row_border_bottom_color', 'botiga_footer_row__above_footer_row_border_top_color', 'botiga_footer_row__main_footer_row_border_top_color', 'botiga_footer_row__below_footer_row_border_top_color', 'ql_item_border_color', 'botiga_accordion_item_arrow_border_color', 'site_info_border_color'],
  color6: ['single_product_gallery_styles_background_color', 'single_sticky_add_to_cart_style_color_background', 'botiga_footer_row__above_footer_row_background_color', 'botiga_footer_row__main_footer_row_background_color', 'botiga_footer_row__below_footer_row_background_color', 'ql_background_color', 'botiga_tabs_nav_link_background', 'site_footer_background', 'footer_widgets_background'],
  color7: ['scrolltop_color', 'scrolltop_color_hover', 'single_product_reviews_advanced_section_bg_color', 'comments_comment_reply_link_color', 'comments_comment_reply_link_color_hover', 'wp_block_search_button_color', 'button_text'],
  color8: ['botiga_header_row__above_header_row_background_color', 'botiga_header_row__main_header_row_background_color', 'botiga_header_row__below_header_row_background_color', 'mobile_offcanvas_background_color', 'shop_archive_header_background_color', 'custom_background', 'button_text_hover']
};

/**
 * Botiga non-variable-backed controls in a flat list.
 */
const botigaNonVariableBackedColorControls = Object.values(botigaNonVariableBackedColorControlsByGroup).flat();

/**
 * Map control names to CSS rule builders.
 */
const botigaNonVariableBackedRuleMap = {
  scrolltop_bg_color: color => `
		.back-to-top {
			background-color: ${color} !important;
		}
	`,
  single_product_tabs_border_color_active: color => `
		.botiga-tabs-style1 .woocommerce-tabs ul.tabs li.active a,
		.botiga-tabs-style1 .woocommerce-tabs ul.tabs li:hover a,
		.botiga-tabs-style4 .woocommerce-tabs ul.tabs li.active a,
		.botiga-tabs-style4 .woocommerce-tabs ul.tabs li:hover a {
			border-color: ${color} !important;
		}
	`,
  single_product_tabs_text_color_active: color => `
		.woocommerce-tabs ul.tabs li.active a,
		.woocommerce-tabs ul.tabs li.active a:hover {
			color: ${color} !important;
		}
	`,
  single_product_tabs_text_color: color => `
		.woocommerce-tabs ul.tabs li:not(.active) a,
		.woocommerce-tabs ul.tabs li:not(.active) a:hover {
			color: ${color} !important;
		}
	`,
  shop_archive_header_button_color: color => `
		.woocommerce-page-header .category-button {
			color: ${color} !important;
		}
	`,
  shop_archive_header_button_border_color: color => `
		.woocommerce-page-header .category-button {
			border-color: ${color} !important;
		}
	`,
  ql_item_bg_hover: color => `
		.botiga-quick-links .quick-link:hover {
			background-color: ${color} !important;
		}
	`,
  comments_comment_reply_link_background: color => `
		.comments-area .comment-reply-link {
			background-color: ${color} !important;
		}
	`,
  wp_block_search_button_background: color => `
		.wp-block-search .wp-block-search__button {
			background: ${color} !important;
		}
	`,
  botiga_reading_progress_bar_background: color => `
		.botiga-reading-progress__bar {
			background-color: ${color} !important;
		}
	`,
  botiga_tabs_nav_link_border_color_active: color => `
		.botiga-tabs-nav .botiga-tabs-nav-item.is-active .botiga-tabs-nav-link {
			border-bottom-color: ${color} !important;
		}
	`,
  tags_links_color: color => `
		.bhfb .botiga-credits a,
		.tags-links a {
			color: ${color} !important;
		}
	`,
  tags_links_border_color: color => `
		.tags-links a {
			border-color: ${color} !important;
		}
	`,
  pagination_background_active: color => `
		.navigation.pagination .page-numbers:hover,
		.navigation.pagination .page-numbers:focus,
		.navigation.pagination .page-numbers.current,
		.woocommerce-pagination li .page-numbers:hover,
		.woocommerce-pagination li .page-numbers:focus,
		.woocommerce-pagination li .page-numbers.current {
			background-color: ${color} !important;
		}
	`,
  pagination_color_active: color => `
		.navigation.pagination .page-numbers:hover,
		.navigation.pagination .page-numbers:focus,
		.navigation.pagination .page-numbers.current,
		.woocommerce-pagination li .page-numbers:hover,
		.woocommerce-pagination li .page-numbers:focus,
		.woocommerce-pagination li .page-numbers.current {
			color: ${color} !important;
		}
	`,
  scrolltop_bg_color_hover: color => `
		.back-to-top:hover {
			background-color: ${color} !important;
		}
	`,
  shop_archive_header_button_background_color_hover: color => `
		.woocommerce-page-header .category-button:hover {
			background-color: ${color} !important;
		}
	`,
  shop_archive_header_button_border_color_hover: color => `
		.woocommerce-page-header .category-button:hover {
			border-color: ${color} !important;
		}
	`,
  main_header_sticky_active_color_hover: color => `
		.sticky-header-active .bhfb .main-navigation a.botiga-dropdown-link:hover {
			color: ${color} !important;
		}

		.sticky-header-active .bhfb .main-navigation a.botiga-dropdown-link:hover + .dropdown-symbol svg {
			fill: ${color} !important;
		}
	`,
  main_header_color_hover: color => `
		.bhfb .main-navigation a.botiga-dropdown-link:hover {
			color: ${color} !important;
		}

		.bhfb .main-navigation a.botiga-dropdown-link:hover + .dropdown-symbol svg {
			fill: ${color} !important;
		}
	`,
  main_header_sticky_active_submenu_color_hover: color => `
		.sticky-header-active .bhfb .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link:hover {
			color: ${color} !important;
		}

		.sticky-header-active .bhfb .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link:hover + .dropdown-symbol svg {
			fill: ${color} !important;
		}
	`,
  main_header_submenu_color_hover: color => `
		.bhfb .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link:hover {
			color: ${color} !important;
		}

		.bhfb .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link:hover + .dropdown-symbol svg {
			fill: ${color} !important;
		}
	`,
  ql_item_color_hover: color => `
		.botiga-quick-links .quick-link:hover .ql-image.is-svg {
			background-color: ${color} !important;
		}
	`,
  comments_comment_reply_link_background_hover: color => `
		.comments-area .comment-reply-link:hover {
			background-color: ${color} !important;
		}
	`,
  wp_block_search_button_background_hover: color => `
		.wp-block-search .wp-block-search__button:hover {
			background: ${color} !important;
		}
	`,
  mobile_offcanvas_close_color_hover: color => `
		.bhfb-mobile_offcanvas .mobile-menu-close:hover svg {
			fill: ${color} !important;
		}
	`,
  site_info_link_color_hover: color => `
		.bhfb .botiga-credits a:hover,
		.site-info a:hover {
			color: ${color} !important;
		}
	`,
  main_header_submenu_color: color => `
		.bhfb .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link {
			color: ${color} !important;
		}

		.bhfb .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link + .dropdown-symbol svg {
			fill: ${color} !important;
		}
	`,
  main_header_sticky_active_submenu_color: color => `
		.sticky-header-active .bhfb .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link {
			color: ${color} !important;
		}

		.sticky-header-active .bhfb .main-navigation .sub-menu.botiga-dropdown-ul a.botiga-dropdown-link + .dropdown-symbol svg {
			fill: ${color} !important;
		}
	`,
  single_product_title_color: color => `
		.product-gallery-summary .product_title {
			color: ${color} !important;
		}
	`,
  shop_product_product_title: color => `
		ul.wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-title,
		ul.wc-block-grid__products li.wc-block-grid__product .woocommerce-loop-product__title,
		ul.wc-block-grid__products li.product .wc-block-grid__product-title,
		ul.wc-block-grid__products li.product .woocommerce-loop-product__title,
		ul.products li.wc-block-grid__product .wc-block-grid__product-title,
		ul.products li.wc-block-grid__product .woocommerce-loop-product__title,
		ul.products li.product .wc-block-grid__product-title,
		ul.products li.product .woocommerce-loop-product__title,
		ul.products li.product .woocommerce-loop-category__title,
		.woocommerce-loop-product__title .botiga-wc-loop-product__title {
			color: ${color} !important;
		}
	`,
  main_header_color: color => `
		.bhfb .main-navigation a.botiga-dropdown-link {
			color: ${color} !important;
		}

		.bhfb .main-navigation a.botiga-dropdown-link + .dropdown-symbol svg {
			fill: ${color} !important;
		}
	`,
  main_header_sticky_active_color: color => `
		.sticky-header-active .bhfb .main-navigation a.botiga-dropdown-link {
			color: ${color} !important;
		}

		.sticky-header-active .bhfb .main-navigation a.botiga-dropdown-link + .dropdown-symbol svg {
			fill: ${color} !important;
		}
	`,
  site_title_color: color => `
		.site-header .site-title a,
		.bhfb .site-title a {
			color: ${color} !important;
		}
	`,
  site_description_color: color => `
		.site-description,
		.bhfb .site-description {
			color: ${color} !important;
		}
	`,
  shop_archive_header_title_color: color => `
		.woocommerce-page-header h1 {
			color: ${color} !important;
		}
	`,
  shop_archive_header_description_color: color => `
		.woocommerce-page-header .page-description,
		.woocommerce-page-header .term-description {
			color: ${color} !important;
		}
	`,
  bhfb_search_icon_color: color => `
		.bhfb-component-search .header-search svg {
			fill: ${color} !important;
		}

		.bhfb-component-search .header-search .botiga-image.is-svg {
			background-color: ${color} !important;
		}
	`,
  bhfb_woo_icons_color: color => `
		.bhfb-component-woo_icons .header-item svg:not(.stroke-based) {
			fill: ${color} !important;
		}

		.bhfb-component-woo_icons .header-item svg.stroke-based {
			stroke: ${color} !important;
		}

		.bhfb-component-woo_icons .header-item .botiga-image.is-svg {
			background-color: ${color} !important;
		}
	`,
  bhfb_contact_info_icon_color: color => `
		.bhfb-component-contact_info .header-contact > a svg {
			fill: ${color} !important;
		}
	`,
  ql_item_color: color => `
		.botiga-quick-links .ql-image.is-svg {
			background-color: ${color} !important;
		}
	`,
  botiga_accordion_item_arrow_border_color_hover: color => `
		.botiga-accordion__item > a:hover:after {
			border-color: ${color} !important;
			border-bottom-color: transparent !important;
			border-left-color: transparent !important;
		}
	`,
  botiga_accordion_item_arrow_border_color_active: color => `
		.botiga-accordion__item > a.active:after {
			border-color: ${color} !important;
			border-bottom-color: transparent !important;
			border-left-color: transparent !important;
		}
	`,
  mobile_offcanvas_close_color: color => `
		.bhfb-mobile_offcanvas .mobile-menu-close svg {
			fill: ${color} !important;
		}
	`,
  site_info_text_color: color => `
		.site-info {
			color: ${color} !important;
		}
	`,
  site_info_link_color: color => `
		.site-info a {
			color: ${color} !important;
		}
	`,
  site_info_icon_color: color => `
		.bhfb-component-mobile_hamburger .menu-toggle svg,
		.bhfb-footer .bhfb-component-social .social-profile > a svg,
		.bhfb-component-social .social-profile > a svg,
		.site-info .ws-svg-icon svg {
			fill: ${color} !important;
		}
	`,
  header_search_form_select_arrow_color: color => `
		.botiga-select:before {
			border-color: ${color} !important;
			border-bottom-color: transparent !important;
			border-left-color: transparent !important;
		}
	`,
  single_product_tabs_remaining_borders: color => `
		.botiga-tabs-style1 .woocommerce-tabs ul.tabs,
		.botiga-tabs-style3 .woocommerce-tabs ul.tabs {
			border-bottom-color: ${color} !important;
		}
	`,
  single_sticky_add_to_cart_style_color_border: color => `
		.botiga-single-sticky-add-to-cart-wrapper {
			border-color: ${color} !important;
		}
	`,
  botiga_header_row__above_header_row_border_bottom_color: color => `
		.bhfb-above_header_row {
			border-bottom-color: ${color} !important;
		}
	`,
  botiga_header_row__main_header_row_border_bottom_color: color => `
		.bhfb-main_header_row {
			border-bottom-color: ${color} !important;
		}
	`,
  botiga_header_row__below_header_row_border_bottom_color: color => `
		.bhfb-below_header_row {
			border-bottom-color: ${color} !important;
		}
	`,
  botiga_footer_row__above_footer_row_border_top_color: color => `
		.bhfb-above_footer_row {
			border-top-color: ${color} !important;
		}
	`,
  botiga_footer_row__main_footer_row_border_top_color: color => `
		.bhfb-main_footer_row {
			border-top-color: ${color} !important;
		}
	`,
  botiga_footer_row__below_footer_row_border_top_color: color => `
		.bhfb-below_footer_row {
			border-top-color: ${color} !important;
		}
	`,
  ql_item_border_color: color => `
		.botiga-quick-links .quick-link,
		.botiga-quick-links.pos-left .quick-link,
		.botiga-quick-links.pos-right .quick-link {
			border-color: ${color} !important;
		}
	`,
  botiga_accordion_item_arrow_border_color: color => `
		.botiga-accordion__item > a:after {
			border-color: ${color} !important;
			border-bottom-color: transparent !important;
			border-left-color: transparent !important;
		}
	`,
  site_info_border_color: color => `
		.site-info {
			border-color: ${color} !important;
		}
	`,
  single_product_gallery_styles_background_color: color => `
		.product-gallery-summary.gallery-showcase:before,
		.product-gallery-summary.gallery-full-width:before {
			background-color: ${color} !important;
		}
	`,
  single_sticky_add_to_cart_style_color_background: color => `
		.botiga-single-sticky-add-to-cart-wrapper,
		.botiga-single-sticky-add-to-cart-wrapper input[type="number"],
		.botiga-single-sticky-add-to-cart-wrapper select {
			background-color: ${color} !important;
		}
	`,
  botiga_footer_row__above_footer_row_background_color: color => `
		.bhfb-above_footer_row {
			background-color: ${color} !important;
		}
	`,
  botiga_footer_row__main_footer_row_background_color: color => `
		.bhfb-main_footer_row {
			background-color: ${color} !important;
		}
	`,
  botiga_footer_row__below_footer_row_background_color: color => `
		.bhfb-below_footer_row {
			background-color: ${color} !important;
		}
	`,
  ql_background_color: color => `
		.botiga-quick-links.pos-bottom-full,
		.botiga-quick-links:not(.pos-bottom-full) .quick-links-inner {
			background-color: ${color} !important;
		}
	`,
  botiga_tabs_nav_link_background: color => `
		.botiga-tabs-nav .botiga-tabs-nav-item .botiga-tabs-nav-link {
			background-color: ${color} !important;
		}
	`,
  site_footer_background: color => `
		.site-footer {
			background-color: ${color} !important;
		}
	`,
  footer_widgets_background: color => `
		.footer-widgets {
			background-color: ${color} !important;
		}
	`,
  scrolltop_color: color => `
		.back-to-top {
			color: ${color} !important;
		}

		.back-to-top svg {
			stroke: ${color} !important;
		}
	`,
  scrolltop_color_hover: color => `
		.back-to-top:hover {
			color: ${color} !important;
		}

		.back-to-top:hover svg {
			stroke: ${color} !important;
		}
	`,
  single_product_reviews_advanced_section_bg_color: color => `
		.single-product .site-main > .product > section.products.botiga-adv-reviews:after,
		.botiga-reviews-orderby {
			background-color: ${color} !important;
		}
	`,
  comments_comment_reply_link_color: color => `
		.comments-area .comment-reply-link {
			color: ${color} !important;
		}
	`,
  comments_comment_reply_link_color_hover: color => `
		.comments-area .comment-reply-link:hover {
			color: ${color} !important;
		}
	`,
  wp_block_search_button_color: color => `
		.wp-block-search .wp-block-search__button {
			color: ${color} !important;
		}
	`,
  botiga_header_row__above_header_row_background_color: color => `
		.bhfb-above_header_row {
			background-color: ${color} !important;
		}
	`,
  botiga_header_row__main_header_row_background_color: color => `
		.bhfb-main_header_row {
			background-color: ${color} !important;
		}
	`,
  botiga_header_row__below_header_row_background_color: color => `
		.bhfb-below_header_row {
			background-color: ${color} !important;
		}
	`,
  mobile_offcanvas_background_color: color => `
		.bhfb-mobile_offcanvas,
		.botiga-offcanvas-menu {
			background-color: ${color} !important;
		}
	`,
  shop_archive_header_background_color: color => `
		.woocommerce-page-header {
			background-color: ${color} !important;
		}
	`,
  custom_background: color => `
		.header-search-form form button,
		.custom-background {
			background-color: ${color} !important;
		}
	`,
  button_background: color => `
		button:not(.has-background),
		a.button:not(.has-background),
		.wp-block-button .wp-block-button__link:not(.has-background),
		.wp-block-button__link:not(.has-background),
		.wp-block-search .wp-block-search__button:not(.has-background),
		input[type="button"]:not(.has-background),
		input[type="reset"]:not(.has-background),
		input[type="submit"]:not(.has-background),
		.comments-area .comment-reply-link:not(.has-background),
		.botiga-sc-product-quantity {
			background-color: ${color} !important;
		}
		button,a.button,
		.wp-block-button .wp-block-button__link,
		.wp-block-button__link,
		input[type="button"],
		input[type="reset"],
		input[type="submit"] {
			border-color: ${color} !important;
		}
	`,
  button_background_hover: color => `
		.is-style-outline .wp-block-button__link:not(.has-background):hover,
		button:not(.has-background):hover,
		a.button:not(.has-background):hover,
		.wp-block-button .wp-block-button__link:not(.has-background):hover,
		.wp-block-button__link:not(.has-background):hover,
		.wp-block-search .wp-block-search__button:not(.has-background):hover,
		input[type="button"]:not(.has-background):hover,
		input[type="reset"]:not(.has-background):hover,
		input[type="submit"]:not(.has-background):hover,
		.comments-area .comment-reply-link:not(.has-background):hover {
			background-color: ${color} !important;
		}
		button:hover,
		a.button:hover,
		.wp-block-button .wp-block-button__link:hover,
		.wp-block-button__link:hover,
		input[type="button"]:hover,
		input[type="reset"]:hover,
		input[type="submit"]:hover {
			border-color: ${color} !important;
		}
	`,
  button_text: color => `
		.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
		button:not(.has-text-color),
		a.button:not(.wc-forward):not(.has-text-color),
		a.button.checkout:not(.has-text-color),
		.checkout-button.button:not(.has-text-color),
		.wp-block-button .wp-block-button__link:not(.has-text-color),
		.wp-block-button__link:not(.has-text-color),
		input[type="button"]:not(.has-text-color),
		input[type="reset"]:not(.has-text-color),
		input[type="submit"]:not(.has-text-color),
		.woocommerce-message .button.wc-forward:not(.has-text-color),
		.comments-area .comment-reply-link:not(.has-text-color),
		.wp-block-search .wp-block-search__button:not(.has-text-color),
		.botiga-sc-product-quantity {
			color: ${color} !important;
		}
		.woocommerce-product-search .search-submit svg,
		#masthead-mobile .search-submit svg:not(.stroke-based),
		ul.wc-block-grid__products li.wc-block-grid__product .wp-block-button__link svg,
		ul.wc-block-grid__products li.product .wp-block-button__link svg,
		ul.products li.wc-block-grid__product .wp-block-button__link svg,
		ul.products li.product .button svg {
			fill: ${color} !important;
		}
	`,
  button_text_hover: color => `
		.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
		button:hover,
		a.button:not(.wc-forward):not(.has-text-color):hover,
		a.button.checkout:not(.has-text-color):hover,
		.checkout-button.button:not(.has-text-color):hover,
		.wp-block-button .wp-block-button__link:not(.has-text-color):hover,
		.wp-block-button__link:not(.has-text-color):hover,
		input[type="button"]:not(.has-text-color):hover,
		input[type="reset"]:not(.has-text-color):hover,
		input[type="submit"]:not(.has-text-color):hover,
		.woocommerce-message .button.wc-forward:not(.has-text-color):hover,
		.comments-area .comment-reply-link:not(.has-text-color):hover,
		.wp-block-search .wp-block-search__button:not(.has-text-color):hover {
			color: ${color} !important;
		}
		.woocommerce-product-search .search-submit:hover svg,
		#masthead-mobile .search-submit:hover svg:not(.stroke-based),
		ul.wc-block-grid__products li.wc-block-grid__product .wp-block-button__link:hover svg,
		ul.wc-block-grid__products li.product .wp-block-button__link:hover svg,
		ul.products li.wc-block-grid__product .wp-block-button__link:hover svg,
		ul.products li.product .button:hover svg {
		    fill: ${color} !important;
		}
	`
};

/**
 * Get Botiga palette slot colors from the existing variable-backed scheme colors.
 *
 * @param {Object} colors Scheme colors object.
 * @return {Object} Palette slot color map.
 */
const getBotigaNonVariablePaletteMap = colors => {
  if (!colors || 'object' !== typeof colors) {
    return {};
  }
  return {
    color1: colors['--bt-color-button-bg'] || '',
    color2: colors['--bt-color-button-bg-hover'] || '',
    color3: colors['--bt-color-post-title'] || '',
    color5: colors['--bt-color-forms-borders'] || '',
    color6: colors['--bt-color-content-cards-bg'] || '',
    color7: colors['--bt-color-bg'] || '',
    color8: colors['--bt-color-menu-bg'] || colors['--bt-color-bg'] || ''
  };
};

/**
 * Build Botiga non-variable-backed CSS from a colors object.
 *
 * @param {Object} colors Scheme colors object.
 * @return {string} Generated CSS string.
 */
const buildBotigaNonVariableCss = colors => {
  const paletteMap = getBotigaNonVariablePaletteMap(colors);
  return Object.entries(botigaNonVariableBackedColorControlsByGroup).flatMap(([groupName, controls]) => {
    const color = paletteMap[groupName];
    if (!color) {
      return [];
    }
    return controls.map(controlName => {
      const buildRule = botigaNonVariableBackedRuleMap[controlName];
      if (!buildRule) {
        return '';
      }
      return buildRule(color);
    });
  }).filter(Boolean).join('\n');
};

/**
 * Build Botiga scoped variable override CSS.
 *
 * This helps override theme-defined CSS variables that are set on more specific
 * selectors such as body, .single, and .blog.
 *
 * @param {Object} colors Scheme colors object.
 * @return {string} Generated CSS string.
 */
const buildBotigaScopedVariableOverrideCss = colors => {
  if (!colors || 'object' !== typeof colors) {
    return '';
  }
  const bodyVars = ['--bt-color-button-bg', '--bt-color-button-border', '--bt-color-link-default', '--bt-color-button-bg-hover', '--bt-color-button-border-hover', '--bt-color-link-hover', '--bt-color-forms-text', '--bt-color-heading-1', '--bt-color-heading-2', '--bt-color-heading-3', '--bt-color-heading-4', '--bt-color-heading-5', '--bt-color-heading-6', '--bt-color-body-text', '--bt-color-forms-placeholder', '--bt-color-post-meta', '--bt-color-loop-post-text', '--bt-color-forms-borders', '--bt-color-content-cards-bg', '--bt-color-menu-text', '--bt-color-menu-bg', '--bt-color-bg', '--bt-color-button', '--bt-color-button-hover', '--bt-color-forms-background'];
  const singleVars = ['--bt-color-post-title'];
  const blogVars = ['--bt-color-loop-post-meta', '--bt-color-loop-post-title'];
  const buildVarBlock = (selector, vars) => {
    const lines = vars.filter(property => colors[property]).map(property => `\t${property}: ${colors[property]} !important;`);
    if (0 === lines.length) {
      return '';
    }
    return `${selector} {\n${lines.join('\n')}\n}`;
  };
  return [buildVarBlock('body', bodyVars), buildVarBlock('.single', singleVars), buildVarBlock('.blog', blogVars)].filter(Boolean).join('\n\n');
};

/***/ }),

/***/ "./v2/onboarding/src/data/color-schemes.js":
/*!*************************************************!*\
  !*** ./v2/onboarding/src/data/color-schemes.js ***!
  \*************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   getColorSchemeById: () => (/* binding */ getColorSchemeById),
/* harmony export */   getColorSchemesForSite: () => (/* binding */ getColorSchemesForSite),
/* harmony export */   themeColorSchemes: () => (/* binding */ themeColorSchemes)
/* harmony export */ });
/**
 * Color schemes data for themes.
 *
 * @package aThemes Starter Sites
 */

/**
 * Theme-level default color schemes.
 * Each color scheme contains CSS custom properties and their values.
 */
const themeColorSchemes = {
  sydney: [{
    id: 'default',
    name: 'Default',
    colors: {
      '--sydney-global-color-1': '#d65050',
      '--sydney-global-color-2': '#b73d3d',
      '--sydney-global-color-3': '#233452',
      '--sydney-global-color-4': '#00102E',
      '--sydney-global-color-5': '#6d7685',
      '--sydney-global-color-6': '#00102E',
      '--sydney-global-color-7': '#F4F5F7',
      '--sydney-global-color-8': '#dbdbdb',
      '--sydney-global-color-9': '#ffffff'
    }
  }, {
    id: 'vibrant-blue',
    name: 'Vibrant Blue',
    colors: {
      '--sydney-global-color-1': '#2563eb',
      '--sydney-global-color-2': '#1d4ed8',
      '--sydney-global-color-3': '#334155',
      '--sydney-global-color-4': '#0f172a',
      '--sydney-global-color-5': '#64748b',
      '--sydney-global-color-6': '#1e293b',
      '--sydney-global-color-7': '#f8fafc',
      '--sydney-global-color-8': '#e2e8f0',
      '--sydney-global-color-9': '#ffffff'
    }
  }, {
    id: 'sunset-warmth',
    name: 'Sunset Warmth',
    colors: {
      '--sydney-global-color-1': '#f97316',
      '--sydney-global-color-2': '#ea580c',
      '--sydney-global-color-3': '#44403c',
      '--sydney-global-color-4': '#1c1917',
      '--sydney-global-color-5': '#78716c',
      '--sydney-global-color-6': '#292524',
      '--sydney-global-color-7': '#fafaf9',
      '--sydney-global-color-8': '#e7e5e4',
      '--sydney-global-color-9': '#ffffff'
    }
  }, {
    id: 'forest-green',
    name: 'Forest Green',
    colors: {
      '--sydney-global-color-1': '#16a34a',
      '--sydney-global-color-2': '#15803d',
      '--sydney-global-color-3': '#3f3f46',
      '--sydney-global-color-4': '#18181b',
      '--sydney-global-color-5': '#71717a',
      '--sydney-global-color-6': '#27272a',
      '--sydney-global-color-7': '#fafafa',
      '--sydney-global-color-8': '#e4e4e7',
      '--sydney-global-color-9': '#ffffff'
    }
  }, {
    id: 'royal-purple',
    name: 'Royal Purple',
    colors: {
      '--sydney-global-color-1': '#9333ea',
      '--sydney-global-color-2': '#7e22ce',
      '--sydney-global-color-3': '#3f3f46',
      '--sydney-global-color-4': '#18181b',
      '--sydney-global-color-5': '#71717a',
      '--sydney-global-color-6': '#27272a',
      '--sydney-global-color-7': '#fafafa',
      '--sydney-global-color-8': '#e4e4e7',
      '--sydney-global-color-9': '#ffffff'
    }
  }, {
    id: 'crimson-red',
    name: 'Crimson Red',
    colors: {
      '--sydney-global-color-1': '#dc2626',
      '--sydney-global-color-2': '#b91c1c',
      '--sydney-global-color-3': '#374151',
      '--sydney-global-color-4': '#111827',
      '--sydney-global-color-5': '#6b7280',
      '--sydney-global-color-6': '#1f2937',
      '--sydney-global-color-7': '#f9fafb',
      '--sydney-global-color-8': '#e5e7eb',
      '--sydney-global-color-9': '#ffffff'
    }
  }, {
    id: 'teal-aqua',
    name: 'Teal Aqua',
    colors: {
      '--sydney-global-color-1': '#14b8a6',
      '--sydney-global-color-2': '#0d9488',
      '--sydney-global-color-3': '#334155',
      '--sydney-global-color-4': '#0f172a',
      '--sydney-global-color-5': '#64748b',
      '--sydney-global-color-6': '#1e293b',
      '--sydney-global-color-7': '#f8fafc',
      '--sydney-global-color-8': '#e2e8f0',
      '--sydney-global-color-9': '#ffffff'
    }
  }],
  botiga: [{
    id: 'palette1',
    name: 'Palette 1',
    colors: {
      '--bt-color-button-bg': '#212121',
      '--bt-color-button-border': '#212121',
      '--bt-color-link-default': '#212121',
      '--bt-color-button-bg-hover': '#757575',
      '--bt-color-button-border-hover': '#757575',
      '--bt-color-link-hover': '#757575',
      '--bt-color-post-title': '#212121',
      '--bt-color-forms-text': '#212121',
      '--bt-color-loop-post-title': '#212121',
      '--bt-color-heading-1': '#212121',
      '--bt-color-heading-2': '#212121',
      '--bt-color-heading-3': '#212121',
      '--bt-color-heading-4': '#212121',
      '--bt-color-heading-5': '#212121',
      '--bt-color-heading-6': '#212121',
      '--bt-color-menu-text': '#212121',
      '--bt-color-body-text': '#212121',
      '--bt-color-forms-placeholder': '#212121',
      '--bt-color-post-meta': '#212121',
      '--bt-color-loop-post-meta': '#212121',
      '--bt-color-loop-post-text': '#212121',
      '--bt-color-forms-borders': '#212121',
      '--bt-color-content-cards-bg': '#f5f5f5',
      '--bt-color-bg': '#ffffff',
      '--bt-color-button': '#ffffff',
      '--bt-color-button-hover': '#ffffff',
      '--bt-color-forms-background': '#ffffff',
      '--bt-color-menu-bg': '#ffffff'
    }
  }, {
    id: 'palette2',
    name: 'Palette 2',
    colors: {
      '--bt-color-button-bg': '#438061',
      '--bt-color-button-border': '#438061',
      '--bt-color-link-default': '#438061',
      '--bt-color-button-bg-hover': '#214E3A',
      '--bt-color-button-border-hover': '#214E3A',
      '--bt-color-link-hover': '#214E3A',
      '--bt-color-post-title': '#214E3A',
      '--bt-color-forms-text': '#214E3A',
      '--bt-color-loop-post-title': '#214E3A',
      '--bt-color-heading-1': '#214E3A',
      '--bt-color-heading-2': '#214E3A',
      '--bt-color-heading-3': '#214E3A',
      '--bt-color-heading-4': '#214E3A',
      '--bt-color-heading-5': '#214E3A',
      '--bt-color-heading-6': '#214E3A',
      '--bt-color-menu-text': '#214E3A',
      '--bt-color-body-text': '#222222',
      '--bt-color-forms-placeholder': '#222222',
      '--bt-color-post-meta': '#222222',
      '--bt-color-loop-post-meta': '#222222',
      '--bt-color-loop-post-text': '#222222',
      '--bt-color-forms-borders': '#757575',
      '--bt-color-content-cards-bg': '#ECEEEC',
      '--bt-color-bg': '#FFFFFF',
      '--bt-color-button': '#FFFFFF',
      '--bt-color-button-hover': '#FFFFFF',
      '--bt-color-forms-background': '#FFFFFF',
      '--bt-color-menu-bg': '#ffffff'
    }
  }, {
    id: 'palette3',
    name: 'Palette 3',
    colors: {
      '--bt-color-button-bg': '#7877E6',
      '--bt-color-button-border': '#7877E6',
      '--bt-color-link-default': '#7877E6',
      '--bt-color-button-bg-hover': '#4B49DE',
      '--bt-color-button-border-hover': '#4B49DE',
      '--bt-color-link-hover': '#4B49DE',
      '--bt-color-post-title': '#000000',
      '--bt-color-forms-text': '#000000',
      '--bt-color-loop-post-title': '#000000',
      '--bt-color-heading-1': '#000000',
      '--bt-color-heading-2': '#000000',
      '--bt-color-heading-3': '#000000',
      '--bt-color-heading-4': '#000000',
      '--bt-color-heading-5': '#000000',
      '--bt-color-heading-6': '#000000',
      '--bt-color-menu-text': '#000000',
      '--bt-color-body-text': '#222222',
      '--bt-color-forms-placeholder': '#222222',
      '--bt-color-post-meta': '#222222',
      '--bt-color-loop-post-meta': '#222222',
      '--bt-color-loop-post-text': '#222222',
      '--bt-color-forms-borders': '#4F4F4F',
      '--bt-color-content-cards-bg': '#F4F4F3',
      '--bt-color-bg': '#ffffff',
      '--bt-color-button': '#ffffff',
      '--bt-color-button-hover': '#ffffff',
      '--bt-color-forms-background': '#ffffff',
      '--bt-color-menu-bg': '#ffffff'
    }
  }, {
    id: 'palette4',
    name: 'Palette 4',
    colors: {
      '--bt-color-button-bg': '#1470AF',
      '--bt-color-button-border': '#1470AF',
      '--bt-color-link-default': '#1470AF',
      '--bt-color-button-bg-hover': '#105787',
      '--bt-color-button-border-hover': '#105787',
      '--bt-color-link-hover': '#105787',
      '--bt-color-post-title': '#072B43',
      '--bt-color-forms-text': '#072B43',
      '--bt-color-loop-post-title': '#072B43',
      '--bt-color-heading-1': '#072B43',
      '--bt-color-heading-2': '#072B43',
      '--bt-color-heading-3': '#072B43',
      '--bt-color-heading-4': '#072B43',
      '--bt-color-heading-5': '#072B43',
      '--bt-color-heading-6': '#072B43',
      '--bt-color-menu-text': '#072B43',
      '--bt-color-body-text': '#212C34',
      '--bt-color-forms-placeholder': '#212C34',
      '--bt-color-post-meta': '#212C34',
      '--bt-color-loop-post-meta': '#212C34',
      '--bt-color-loop-post-text': '#212C34',
      '--bt-color-forms-borders': '#9A9D9F',
      '--bt-color-content-cards-bg': '#F3F4F4',
      '--bt-color-bg': '#ffffff',
      '--bt-color-button': '#ffffff',
      '--bt-color-button-hover': '#ffffff',
      '--bt-color-forms-background': '#ffffff',
      '--bt-color-menu-bg': '#ffffff'
    }
  }, {
    id: 'palette5',
    name: 'Palette 5',
    colors: {
      '--bt-color-button-bg': '#FDB336',
      '--bt-color-button-border': '#FDB336',
      '--bt-color-link-default': '#FDB336',
      '--bt-color-button-bg-hover': '#DD8B02',
      '--bt-color-button-border-hover': '#DD8B02',
      '--bt-color-link-hover': '#DD8B02',
      '--bt-color-post-title': '#FFFFFF',
      '--bt-color-forms-text': '#FFFFFF',
      '--bt-color-loop-post-title': '#FFFFFF',
      '--bt-color-heading-1': '#FFFFFF',
      '--bt-color-heading-2': '#FFFFFF',
      '--bt-color-heading-3': '#FFFFFF',
      '--bt-color-heading-4': '#FFFFFF',
      '--bt-color-heading-5': '#FFFFFF',
      '--bt-color-heading-6': '#FFFFFF',
      '--bt-color-menu-text': '#FFFFFF',
      '--bt-color-body-text': '#948F87',
      '--bt-color-forms-placeholder': '#948F87',
      '--bt-color-post-meta': '#948F87',
      '--bt-color-loop-post-meta': '#948F87',
      '--bt-color-loop-post-text': '#948F87',
      '--bt-color-forms-borders': '#1E2933',
      '--bt-color-content-cards-bg': '#0F141A',
      '--bt-color-bg': '#141B22',
      '--bt-color-button': '#141B22',
      '--bt-color-button-hover': '#141B22',
      '--bt-color-forms-background': '#141B22',
      '--bt-color-menu-bg': '#141B22'
    }
  }, {
    id: 'palette6',
    name: 'Palette 6',
    colors: {
      '--bt-color-button-bg': '#FF524D',
      '--bt-color-button-border': '#FF524D',
      '--bt-color-link-default': '#FF524D',
      '--bt-color-button-bg-hover': '#E80600',
      '--bt-color-button-border-hover': '#E80600',
      '--bt-color-link-hover': '#E80600',
      '--bt-color-post-title': '#40140F',
      '--bt-color-forms-text': '#40140F',
      '--bt-color-loop-post-title': '#40140F',
      '--bt-color-heading-1': '#40140F',
      '--bt-color-heading-2': '#40140F',
      '--bt-color-heading-3': '#40140F',
      '--bt-color-heading-4': '#40140F',
      '--bt-color-heading-5': '#40140F',
      '--bt-color-heading-6': '#40140F',
      '--bt-color-menu-text': '#40140F',
      '--bt-color-body-text': '#5B3F3E',
      '--bt-color-forms-placeholder': '#5B3F3E',
      '--bt-color-post-meta': '#5B3F3E',
      '--bt-color-loop-post-meta': '#5B3F3E',
      '--bt-color-loop-post-text': '#5B3F3E',
      '--bt-color-forms-borders': '#ACA2A1',
      '--bt-color-content-cards-bg': '#F4E3E0',
      '--bt-color-bg': '#FFFFFF',
      '--bt-color-button': '#FFFFFF',
      '--bt-color-button-hover': '#FFFFFF',
      '--bt-color-forms-background': '#FFFFFF',
      '--bt-color-menu-bg': '#FFFFFF'
    }
  }, {
    id: 'palette7',
    name: 'Palette 7',
    colors: {
      '--bt-color-button-bg': '#E97B6B',
      '--bt-color-button-border': '#E97B6B',
      '--bt-color-link-default': '#E97B6B',
      '--bt-color-button-bg-hover': '#C84835',
      '--bt-color-button-border-hover': '#C84835',
      '--bt-color-link-hover': '#C84835',
      '--bt-color-post-title': '#131B51',
      '--bt-color-forms-text': '#131B51',
      '--bt-color-loop-post-title': '#131B51',
      '--bt-color-heading-1': '#131B51',
      '--bt-color-heading-2': '#131B51',
      '--bt-color-heading-3': '#131B51',
      '--bt-color-heading-4': '#131B51',
      '--bt-color-heading-5': '#131B51',
      '--bt-color-heading-6': '#131B51',
      '--bt-color-menu-text': '#131B51',
      '--bt-color-body-text': '#3E425B',
      '--bt-color-forms-placeholder': '#3E425B',
      '--bt-color-post-meta': '#3E425B',
      '--bt-color-loop-post-meta': '#3E425B',
      '--bt-color-loop-post-text': '#3E425B',
      '--bt-color-forms-borders': '#A1A3AC',
      '--bt-color-content-cards-bg': '#F7EAE8',
      '--bt-color-bg': '#FFFFFF',
      '--bt-color-button': '#FFFFFF',
      '--bt-color-button-hover': '#FFFFFF',
      '--bt-color-forms-background': '#FFFFFF',
      '--bt-color-menu-bg': '#FFFFFF'
    }
  }, {
    id: 'palette8',
    name: 'Palette 8',
    colors: {
      '--bt-color-button-bg': '#0AA99D',
      '--bt-color-button-border': '#0AA99D',
      '--bt-color-link-default': '#0AA99D',
      '--bt-color-button-bg-hover': '#066B63',
      '--bt-color-button-border-hover': '#066B63',
      '--bt-color-link-hover': '#066B63',
      '--bt-color-post-title': '#0B0C0F',
      '--bt-color-forms-text': '#0B0C0F',
      '--bt-color-loop-post-title': '#0B0C0F',
      '--bt-color-heading-1': '#0B0C0F',
      '--bt-color-heading-2': '#0B0C0F',
      '--bt-color-heading-3': '#0B0C0F',
      '--bt-color-heading-4': '#0B0C0F',
      '--bt-color-heading-5': '#0B0C0F',
      '--bt-color-heading-6': '#0B0C0F',
      '--bt-color-menu-text': '#0B0C0F',
      '--bt-color-body-text': '#202833',
      '--bt-color-forms-placeholder': '#202833',
      '--bt-color-post-meta': '#202833',
      '--bt-color-loop-post-meta': '#202833',
      '--bt-color-loop-post-text': '#202833',
      '--bt-color-forms-borders': '#C5C7C8',
      '--bt-color-content-cards-bg': '#E9F3F2',
      '--bt-color-bg': '#FFFFFF',
      '--bt-color-button': '#FFFFFF',
      '--bt-color-button-hover': '#FFFFFF',
      '--bt-color-forms-background': '#FFFFFF',
      '--bt-color-menu-bg': '#FFFFFF'
    }
  }]
};

/**
 * Get color schemes for a starter site.
 *
 * @param {Object|null} siteData  The starter site data object.
 * @param {string}      themeName The theme name (sydney, botiga, etc.).
 * @return {Array} Array of color scheme objects.
 */
const getColorSchemesForSite = (siteData, themeName) => {
  // 1. If site has custom color schemes, return those
  if (siteData?.colorSchemes && 0 < siteData.colorSchemes.length) {
    return siteData.colorSchemes;
  }

  // 2. Otherwise, return theme defaults using themeName from atssOnboarding
  return themeColorSchemes[themeName.toLowerCase()] || themeColorSchemes.sydney;
};

/**
 * Get a single color scheme by ID from a list of schemes.
 *
 * @param {Array}  schemes  Array of color scheme objects.
 * @param {string} schemeId The ID of the color scheme to find.
 * @return {Object|null} The color scheme object or null if not found.
 */
const getColorSchemeById = (schemes, schemeId) => {
  return schemes.find(scheme => scheme.id === schemeId) || null;
};

/***/ }),

/***/ "./v2/onboarding/src/data/starter-sites.js":
/*!*************************************************!*\
  !*** ./v2/onboarding/src/data/starter-sites.js ***!
  \*************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   getOnboardingSettings: () => (/* binding */ getOnboardingSettings),
/* harmony export */   getRawDemos: () => (/* binding */ getRawDemos),
/* harmony export */   getStarterSiteById: () => (/* binding */ getStarterSiteById),
/* harmony export */   getStarterSites: () => (/* binding */ getStarterSites),
/* harmony export */   getThemeName: () => (/* binding */ getThemeName)
/* harmony export */ });
/**
 * Starter sites data getter.
 *
 * @package Athemes Starter Sites
 */

/**
 * Get the raw demos object from the localized data.
 *
 * @return {Object} The demos object.
 */
const getRawDemos = () => {
  return window.atssOnboarding?.demos || {};
};

/**
 * Get all available starter sites as an array.
 *
 * @return {Array} Array of demo objects.
 */
const getStarterSites = () => {
  const demos = getRawDemos();
  return Object.entries(demos).map(([id, data]) => ({
    id,
    ...data
  }));
};

/**
 * Get a single starter site by its ID.
 *
 * @param {string} id The demo ID.
 * @return {Object|null} The demo object or null if not found.
 */
const getStarterSiteById = id => {
  const demos = getRawDemos();
  return demos[id] ? {
    id,
    ...demos[id]
  } : null;
};

/**
 * Get the onboarding settings.
 *
 * @return {Object} The settings object.
 */
const getOnboardingSettings = () => {
  return window.atssOnboarding?.settings || {};
};

/**
 * Get the current theme name.
 *
 * @return {string} The theme name (e.g., 'sydney', 'botiga').
 */
const getThemeName = () => {
  return window.atssOnboarding?.themeName || 'sydney';
};

/***/ }),

/***/ "./v2/onboarding/src/data/typography-pairs.js":
/*!****************************************************!*\
  !*** ./v2/onboarding/src/data/typography-pairs.js ***!
  \****************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   getTypographyPairById: () => (/* binding */ getTypographyPairById),
/* harmony export */   getTypographyPairsForSite: () => (/* binding */ getTypographyPairsForSite),
/* harmony export */   typographyPairs: () => (/* binding */ typographyPairs)
/* harmony export */ });
/**
 * Typography pairs data for themes.
 *
 * @package aThemes Starter Sites
 */

/**
 * Universal typography pairs that work across all themes.
 * Each pair contains heading and body font families.
 * Font weights are hardcoded in the component (500 for headings, 400 for body).
 */
const typographyPairs = [{
  id: 'system',
  name: 'System Default',
  label: 'System Default',
  headingFont: {
    family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif'
  },
  bodyFont: {
    family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif'
  },
  googleFontsUrl: '' // No Google Fonts needed for system fonts
}, {
  id: 'default',
  name: 'Default',
  label: 'Inter',
  headingFont: {
    family: 'Inter'
  },
  bodyFont: {
    family: 'Inter'
  },
  googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'
}, {
  id: 'classic-elegant',
  name: 'Classic Elegant',
  label: 'Playfair Display & Source Sans Pro',
  headingFont: {
    family: 'Playfair Display'
  },
  bodyFont: {
    family: 'Source Sans Pro'
  },
  googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Source+Sans+Pro:wght@400&display=swap'
}, {
  id: 'modern-clean',
  name: 'Modern Clean',
  label: 'Poppins',
  headingFont: {
    family: 'Poppins'
  },
  bodyFont: {
    family: 'Poppins'
  },
  googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'
}, {
  id: 'professional',
  name: 'Professional',
  label: 'Roboto Slab & Roboto',
  headingFont: {
    family: 'Roboto Slab'
  },
  bodyFont: {
    family: 'Roboto'
  },
  googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&family=Roboto:wght@400&display=swap'
}, {
  id: 'creative-bold',
  name: 'Creative Bold',
  label: 'Montserrat & Open Sans',
  headingFont: {
    family: 'Montserrat'
  },
  bodyFont: {
    family: 'Open Sans'
  },
  googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Open+Sans:wght@400&display=swap'
}, {
  id: 'editorial',
  name: 'Editorial',
  label: 'Merriweather & Lato',
  headingFont: {
    family: 'Merriweather'
  },
  bodyFont: {
    family: 'Lato'
  },
  googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Merriweather:wght@500&family=Lato:wght@400&display=swap'
}, {
  id: 'minimal-sans',
  name: 'Minimal Sans',
  label: 'Work Sans',
  headingFont: {
    family: 'Work Sans'
  },
  bodyFont: {
    family: 'Work Sans'
  },
  googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap'
}];

/**
 * Get typography pairs for a starter site.
 * Currently returns the same universal pairs for all sites.
 *
 * @param {Object|null} siteData  The starter site data object (unused for now).
 * @param {string}      themeName The theme name (unused for now).
 * @return {Array} Array of typography pair objects.
 */
const getTypographyPairsForSite = (siteData, themeName) => {
  // For now, return universal pairs for all themes
  // In the future, this could be extended to support site-specific or theme-specific pairs
  return typographyPairs;
};

/**
 * Get a single typography pair by ID from a list of pairs.
 *
 * @param {Array}  pairs  Array of typography pair objects.
 * @param {string} pairId The ID of the typography pair to find.
 * @return {Object|null} The typography pair object or null if not found.
 */
const getTypographyPairById = (pairs, pairId) => {
  return pairs.find(pair => pair.id === pairId) || null;
};

/***/ }),

/***/ "./v2/onboarding/src/utils/image-utils.js":
/*!************************************************!*\
  !*** ./v2/onboarding/src/utils/image-utils.js ***!
  \************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   convertLogoForPreview: () => (/* binding */ convertLogoForPreview),
/* harmony export */   imageUrlToDataUrl: () => (/* binding */ imageUrlToDataUrl),
/* harmony export */   isLocalUrl: () => (/* binding */ isLocalUrl)
/* harmony export */ });
/**
 * Image utilities - Handle image conversion for preview sync.
 *
 * @package Athemes Starter Sites
 */

/**
 * Check if a URL is from a local/development environment.
 *
 * @param {string} url The URL to check.
 * @return {boolean} True if the URL is local.
 */
const isLocalUrl = url => {
  if (!url) {
    return false;
  }
  try {
    const urlObj = new URL(url);
    const hostname = urlObj.hostname.toLowerCase();

    // Check for localhost
    if (hostname === 'localhost') {
      return true;
    }

    // Check for .local domains
    if (hostname.endsWith('.local')) {
      return true;
    }

    // Check for .test domains
    if (hostname.endsWith('.test')) {
      return true;
    }

    // Check for IP addresses (127.x.x.x, 192.168.x.x, 10.x.x.x, 172.16-31.x.x)
    const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
    if (ipv4Regex.test(hostname)) {
      const parts = hostname.split('.').map(Number);
      // 127.x.x.x (loopback)
      if (parts[0] === 127) {
        return true;
      }
      // 192.168.x.x (private)
      if (parts[0] === 192 && parts[1] === 168) {
        return true;
      }
      // 10.x.x.x (private)
      if (parts[0] === 10) {
        return true;
      }
      // 172.16.x.x - 172.31.x.x (private)
      if (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) {
        return true;
      }
    }

    // Check for IPv6 localhost
    if (hostname === '::1' || hostname === '[::1]') {
      return true;
    }
    return false;
  } catch (e) {
    // If URL parsing fails, assume it's not local
    return false;
  }
};

/**
 * Convert an image URL to a data URL.
 *
 * @param {string} imageUrl The image URL to convert.
 * @return {Promise<string>} Promise that resolves to a data URL.
 */
const imageUrlToDataUrl = imageUrl => {
  return new Promise((resolve, reject) => {
    const img = new Image();

    // Set crossOrigin to anonymous to allow CORS
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      try {
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        // Convert to data URL
        const dataUrl = canvas.toDataURL('image/png');
        resolve(dataUrl);
      } catch (error) {
        reject(error);
      }
    };
    img.onerror = () => {
      reject(new Error('Failed to load image'));
    };
    img.src = imageUrl;
  });
};

/**
 * Convert a logo object to preview-safe format.
 * If the logo URL is local, converts it to a data URL to avoid CORS issues.
 *
 * @param {Object} logo Logo object with url and id properties.
 * @return {Promise<Object>} Promise that resolves to a logo object safe for preview.
 */
const convertLogoForPreview = async logo => {
  if (!logo || !logo.url) {
    return logo;
  }

  // If the logo URL is not local, return as-is
  if (!isLocalUrl(logo.url)) {
    return logo;
  }
  try {
    // Convert local image to data URL
    const dataUrl = await imageUrlToDataUrl(logo.url);
    return {
      ...logo,
      url: dataUrl,
      originalUrl: logo.url // Keep original URL for reference
    };
  } catch (error) {
    // If conversion fails, return original logo
    // The preview will fail to load, but the logo will still be imported correctly
    // eslint-disable-next-line no-console
    console.warn('[Image Utils] Failed to convert logo to data URL:', error);
    return logo;
  }
};

/***/ }),

/***/ "./v2/onboarding/src/utils/preload-helpers.js":
/*!****************************************************!*\
  !*** ./v2/onboarding/src/utils/preload-helpers.js ***!
  \****************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   addPagePreconnectHints: () => (/* binding */ addPagePreconnectHints),
/* harmony export */   addPreconnectHints: () => (/* binding */ addPreconnectHints),
/* harmony export */   removePagePreconnectHints: () => (/* binding */ removePagePreconnectHints),
/* harmony export */   removePreconnectHints: () => (/* binding */ removePreconnectHints)
/* harmony export */ });
/* harmony import */ var _data_starter_sites__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../data/starter-sites */ "./v2/onboarding/src/data/starter-sites.js");
/**
 * Preload helpers for starter site previews.
 *
 * @package Athemes Starter Sites
 */



/**
 * Add preconnect and DNS prefetch hints for a preview URL.
 * Optimizes iframe loading by establishing early connections to the origin.
 *
 * @param {string} previewUrl The preview URL to add hints for.
 * @param {string} dataAttr   Optional data attribute for tracking (default: 'data-atss-preconnect').
 */
const addPreconnectHints = (previewUrl, dataAttr = 'data-atss-preconnect') => {
  if (!previewUrl) {
    return;
  }
  try {
    const url = new URL(previewUrl);
    const origin = url.origin;

    // Check if hints for this origin already exist
    const existingHint = document.querySelector(`link[${dataAttr}="${origin}"]`);
    if (existingHint) {
      return;
    }

    // DNS prefetch - resolves domain early
    const dnsPrefetch = document.createElement('link');
    dnsPrefetch.rel = 'dns-prefetch';
    dnsPrefetch.href = origin;
    dnsPrefetch.setAttribute(dataAttr, origin);
    document.head.appendChild(dnsPrefetch);

    // Preconnect - establishes early connection (DNS + TCP + TLS)
    const preconnect = document.createElement('link');
    preconnect.rel = 'preconnect';
    preconnect.href = origin;
    preconnect.setAttribute(dataAttr, origin);
    document.head.appendChild(preconnect);
  } catch (e) {

    // Invalid URL, skip silently
  }
};

/**
 * Remove preconnect hints for a specific origin or all hints.
 *
 * @param {string} origin     Optional origin to remove hints for. If not provided, removes all.
 * @param {string} dataAttr   Optional data attribute for tracking (default: 'data-atss-preconnect').
 */
const removePreconnectHints = (origin = null, dataAttr = 'data-atss-preconnect') => {
  let selector = `link[${dataAttr}]`;
  if (origin) {
    selector = `link[${dataAttr}="${origin}"]`;
  }
  const links = document.querySelectorAll(selector);
  links.forEach(link => link.remove());
};

/**
 * Add preconnect hints for an array of page URLs.
 * Used to optimize page iframe loading in the Pages step.
 *
 * @param {Array} pages Array of page objects with 'url' property.
 */
const addPagePreconnectHints = pages => {
  if (!pages || !Array.isArray(pages)) {
    return;
  }
  pages.forEach(page => {
    if (page.url) {
      addPreconnectHints(page.url, 'data-atss-page-preconnect');
    }
  });
};

/**
 * Remove all page preconnect hints.
 */
const removePagePreconnectHints = () => {
  removePreconnectHints(null, 'data-atss-page-preconnect');
};

/***/ }),

/***/ "./v2/onboarding/src/utils/preview-bridge.js":
/*!***************************************************!*\
  !*** ./v2/onboarding/src/utils/preview-bridge.js ***!
  \***************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _utils_is_botiga__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/is-botiga */ "./v2/onboarding/src/utils/is-botiga.js");
/**
 * Preview Bridge - Handles communication with the preview iframe.
 *
 * @package Athemes Starter Sites
 */


/**
 * PreviewBridge class manages all postMessage communication with preview iframe.
 */
class PreviewBridge {
  /**
   * Constructor.
   *
   * @param {string} iframeId The ID of the iframe element.
   */
  constructor(iframeId = 'demo-preview') {
    this.iframeId = iframeId;
    this.iframe = null;
    this.isReady = false;
    this.isLocalPreview = false;
    this.messageQueue = [];
    this.debug = window.atssOnboarding?.debug || false;
    this.messageHandler = null;
    this.pendingCustomizations = null;
    this.readyReceivedWithoutIframe = false;
    this.appliedColors = [];
    this.appliedTypography = {
      elements: [],
      fontLink: null
    };
  }

  /**
   * Initialize the bridge with an iframe element.
   *
   * @param {HTMLIFrameElement} iframe The iframe element.
   */
  init(iframe) {
    this.log('info', 'init() called with iframe:', iframe ? iframe.id || 'unnamed' : 'null');

    // If called with null, just set up the message handler but don't update iframe ref
    if (!iframe) {
      // Only set up message handler if not already set
      if (!this.messageHandler) {
        this.setupMessageHandler();
      }
      return;
    }

    // Skip if same iframe (avoid re-initialization)
    if (this.iframe === iframe) {
      this.log('info', 'init() called with same iframe, skipping');
      return;
    }

    // Check if we previously received PREVIEW_READY but had no iframe to send to
    const hadPendingReady = this.readyReceivedWithoutIframe;
    this.log('info', 'Initializing bridge with new iframe');
    this.iframe = iframe;
    this.readyReceivedWithoutIframe = false;

    // Set up message handler if not already set
    if (!this.messageHandler) {
      this.setupMessageHandler();
    }

    // If we had received PREVIEW_READY but couldn't send (no iframe), send now
    if (hadPendingReady && this.pendingCustomizations) {
      this.log('info', 'Had pending ready state, applying customizations now');
      this.isReady = true;
      this.batchUpdate(this.pendingCustomizations);
    }
  }

  /**
   * Set up the message handler for PREVIEW_READY signals.
   */
  setupMessageHandler() {
    // Remove previous handler if exists
    if (this.messageHandler) {
      window.removeEventListener('message', this.messageHandler);
    }

    // Create bound message handler
    this.messageHandler = event => {
      if ('ATSS_PREVIEW_READY' === event.data?.type) {
        this.log('info', 'Received ATSS_PREVIEW_READY signal');
        this.isReady = true;

        // If we don't have an iframe reference yet, remember that ready was received
        if (!this.iframe) {
          this.log('info', 'No iframe reference yet, marking readyReceivedWithoutIframe');
          this.readyReceivedWithoutIframe = true;
          return;
        }
        this.flushMessageQueue();

        // Apply pending customizations if any
        if (this.pendingCustomizations) {
          this.log('info', 'Applying pending customizations');
          this.batchUpdate(this.pendingCustomizations);
        }
      }
    };

    // Listen for iframe ready message
    window.addEventListener('message', this.messageHandler);
    this.log('info', 'Message handler set up');
  }

  /**
   * Reset the ready state when iframe navigates to a new page.
   * Call this before the iframe src changes.
   */
  resetReadyState() {
    this.isReady = false;
    this.messageQueue = [];
    this.readyReceivedWithoutIframe = false;
    this.log('info', 'Ready state reset for new page load');
  }

  /**
   * Set pending customizations to be applied when iframe becomes ready.
   *
   * @param {Object} customizations The customizations to apply.
   */
  setPendingCustomizations(customizations) {
    this.pendingCustomizations = customizations;
    this.log('info', 'Pending customizations set', customizations);
  }

  /**
   * Clear pending customizations.
   */
  clearPendingCustomizations() {
    this.pendingCustomizations = null;
  }

  /**
   * Store customizations to be re-applied when iframe navigates.
   *
   * @param {Object} updates Partial customization updates to merge.
   */
  storePendingCustomizations(updates) {
    if (!updates || 'object' !== typeof updates) {
      return;
    }
    if (!this.pendingCustomizations) {
      this.pendingCustomizations = {};
    }
    const mergedUpdates = {
      ...updates
    };
    if (mergedUpdates.customCss) {
      const existingCustomCss = this.pendingCustomizations.customCss || {};
      if (mergedUpdates.customCss.styleId && 'string' === typeof mergedUpdates.customCss.css) {
        mergedUpdates.customCss = {
          ...existingCustomCss,
          [mergedUpdates.customCss.styleId]: mergedUpdates.customCss
        };
      } else {
        mergedUpdates.customCss = {
          ...existingCustomCss,
          ...mergedUpdates.customCss
        };
      }
    }
    this.pendingCustomizations = {
      ...this.pendingCustomizations,
      ...mergedUpdates
    };
  }

  /**
   * Send a message to the iframe.
   *
   * @param {Object} message The message object to send.
   * @return {boolean} Whether the message was sent successfully.
   */
  send(message) {
    if (!this.iframe?.contentWindow) {
      this.log('error', 'Iframe not available', message);
      return false;
    }

    // Local preview: apply directly to iframe DOM
    if (this.isLocalPreview) {
      return this.applyDirect(message);
    }

    // If iframe is not ready, queue the message
    if (!this.isReady) {
      this.messageQueue.push(message);
      this.log('info', 'Message queued (iframe not ready)', message);
      return false;
    }
    try {
      this.iframe.contentWindow.postMessage(message, '*');
      this.log('info', 'Message sent', message);
      return true;
    } catch (error) {
      this.log('error', 'Failed to send message', {
        message,
        error
      });
      return false;
    }
  }

  /**
   * Flush queued messages.
   */
  flushMessageQueue() {
    if (0 === this.messageQueue.length) {
      return;
    }
    this.log('info', `Flushing ${this.messageQueue.length} queued messages`);
    while (0 < this.messageQueue.length) {
      const message = this.messageQueue.shift();
      this.send(message);
    }
  }

  /**
   * Update colors in the preview.
   *
   * @param {Object} colors Object with CSS variable names as keys and color values.
   * @return {boolean} Whether the update was sent successfully.
   */
  updateColors(colors) {
    if (!colors || 'object' !== typeof colors) {
      this.log('error', 'Invalid colors object', colors);
      return false;
    }

    // Store colors to re-apply on page navigation
    this.storePendingCustomizations({
      colors
    });
    return this.send({
      type: 'ATSS_COLOR_UPDATE',
      colors
    });
  }

  /**
   * Reset colors in the preview to their original values.
   *
   * @return {boolean} Whether the reset was sent successfully.
   */
  resetColors() {
    return this.send({
      type: 'ATSS_COLOR_RESET'
    });
  }

  /**
   * Update logo in the preview.
   *
   * @param {Object} logo Logo data object with url and id.
   * @return {boolean} Whether the update was sent successfully.
   */
  updateLogo(logo) {
    if (!logo) {
      this.log('error', 'Invalid logo object', logo);
      return false;
    }

    // Store logo to re-apply on page navigation
    this.storePendingCustomizations({
      logo
    });
    if (_utils_is_botiga__WEBPACK_IMPORTED_MODULE_0__["default"] && logo.url) {
      this.resetCustomCss('atss-preview-botiga-title-css');
    }
    return this.send({
      type: 'ATSS_LOGO_UPDATE',
      logo
    });
  }

  /**
   * Update logo height in the preview.
   *
   * @param {number} height Logo height in pixels.
   * @return {boolean} Whether the update was sent successfully.
   */
  updateLogoHeight(height) {
    if (_utils_is_botiga__WEBPACK_IMPORTED_MODULE_0__["default"]) {
      this.storePendingCustomizations({
        customCss: {
          css: `.site-branding img { width: ${height}px !important; max-height: none !important; height: auto !important; }`,
          styleId: 'atss-preview-logo-width-css'
        }
      });
      return this.send({
        type: 'ATSS_CUSTOM_CSS_UPDATE',
        css: `.site-branding img { width: ${height}px !important; max-height: none !important; height: auto !important; }`,
        styleId: 'atss-preview-logo-width-css'
      });
    }

    // Store logo height to re-apply on page navigation
    this.storePendingCustomizations({
      logoHeight: height
    });
    return this.send({
      type: 'ATSS_LOGO_HEIGHT_UPDATE',
      height
    });
  }

  /**
   * Update site title in the preview.
   *
   * @param {string}  title     The site title.
   * @param {boolean} showTitle Whether to show the title.
   * @param {Object}  logo      Logo data object with url and id.
   * @return {boolean} Whether the update was sent successfully.
   */
  updateSiteTitle(title, showTitle, logo) {
    const hasLogo = !!logo?.url;
    this.storePendingCustomizations({
      title,
      showTitle
    });
    const sent = this.send({
      type: 'ATSS_SITE_TITLE_UPDATE',
      title,
      showTitle
    });
    if (!_utils_is_botiga__WEBPACK_IMPORTED_MODULE_0__["default"]) {
      return sent;
    }
    if (!showTitle) {
      this.resetCustomCss('atss-preview-botiga-title-css');
      return sent;
    }
    return this.updateCustomCss(`
			${!hasLogo ? '.custom-logo-link { display: none !important; }' : ''}
			.site-title, .site-description { position: relative !important; }
			${hasLogo ? '.site-branding { gap: 0 !important; flex-direction: column !important; }' : ''}
			`, 'atss-preview-botiga-title-css');
  }

  /**
   * Update typography in the preview.
   *
   * @param {Object} typography Typography data object.
   * @return {boolean} Whether the update was sent successfully.
   */
  updateTypography(typography) {
    if (!typography || 'object' !== typeof typography) {
      this.log('error', 'Invalid typography object', typography);
      return false;
    }

    // Store typography to re-apply on page navigation
    this.storePendingCustomizations({
      typography
    });
    return this.send({
      type: 'ATSS_TYPOGRAPHY_UPDATE',
      typography
    });
  }

  /**
   * Reset typography in the preview to their original values.
   *
   * @return {boolean} Whether the reset was sent successfully.
   */
  resetTypography() {
    return this.send({
      type: 'ATSS_TYPOGRAPHY_RESET'
    });
  }

  /**
   * Update custom CSS in the preview.
   *
   * @param {string} css     The CSS string to inject.
   * @param {string} styleId The ID of the style element.
   * @return {boolean} Whether the update was sent successfully.
   */
  updateCustomCss(css, styleId = 'atss-preview-custom-css') {
    if ('string' !== typeof css) {
      this.log('error', 'Invalid CSS string', css);
      return false;
    }
    this.storePendingCustomizations({
      customCss: {
        css,
        styleId
      }
    });
    return this.send({
      type: 'ATSS_CUSTOM_CSS_UPDATE',
      css,
      styleId
    });
  }

  /**
   * Reset custom CSS in the preview.
   *
   * @param {string} styleId The ID of the style element.
   * @return {boolean} Whether the reset was sent successfully.
   */
  resetCustomCss(styleId = 'atss-preview-custom-css') {
    if (this.pendingCustomizations?.customCss?.[styleId]) {
      delete this.pendingCustomizations.customCss[styleId];
      if (0 === Object.keys(this.pendingCustomizations.customCss).length) {
        delete this.pendingCustomizations.customCss;
      }
      if (0 === Object.keys(this.pendingCustomizations).length) {
        this.pendingCustomizations = null;
      }
    }
    return this.send({
      type: 'ATSS_CUSTOM_CSS_RESET',
      styleId
    });
  }

  /**
   * Send batch updates to the preview.
   *
   * @param {Object} updates Object containing multiple update types.
   * @return {boolean} Whether the update was sent successfully.
   */
  batchUpdate(updates) {
    const sentBatch = this.send({
      type: 'ATSS_BATCH_UPDATE',
      updates: {
        ...updates,
        customCss: undefined
      }
    });
    if (updates?.customCss) {
      Object.values(updates.customCss).forEach(cssEntry => {
        this.send({
          type: 'ATSS_CUSTOM_CSS_UPDATE',
          css: cssEntry.css,
          styleId: cssEntry.styleId
        });
      });
    }
    return sentBatch;
  }

  /**
   * Mark iframe as ready (for testing or manual control).
   */
  markReady() {
    this.isReady = true;
    this.flushMessageQueue();
  }

  /**
   * Log messages if debug mode is enabled.
   *
   * @param {string} level   Log level (info, warn, error).
   * @param {string} message Log message.
   * @param {*}      data    Additional data to log.
   */
  log(level, message, data) {
    if (!this.debug) {
      return;
    }
    const prefix = '[PreviewBridge]';
    /* eslint-disable no-console */
    switch (level) {
      case 'error':
        console.error(prefix, message, data);
        break;
      case 'warn':
        console.warn(prefix, message, data);
        break;
      default:
        console.log(prefix, message, data);
    }
    /* eslint-enable no-console */
  }

  /**
   * Set whether this is a local (same-origin) preview.
   * When true, changes are applied directly to the iframe DOM instead of using postMessage.
   *
   * @param {boolean} isLocal Whether the preview is local.
   */
  setLocalPreview(isLocal) {
    this.isLocalPreview = isLocal;
    this.log('info', `Local preview mode: ${isLocal}`);
  }

  /**
   * Get the iframe's document for direct DOM manipulation.
   *
   * @return {Document|null} The iframe document, or null if not accessible.
   */
  getIframeDoc() {
    try {
      return this.iframe?.contentDocument || this.iframe?.contentWindow?.document || null;
    } catch (e) {
      return null;
    }
  }

  /**
   * Apply a message directly to the iframe DOM (same-origin only).
   *
   * @param {Object} message The message to apply.
   * @return {boolean} Whether the message was applied.
   */
  applyDirect(message) {
    const doc = this.getIframeDoc();
    if (!doc) {
      this.log('error', 'Cannot access iframe document for direct apply', message);
      return false;
    }
    switch (message.type) {
      case 'ATSS_COLOR_UPDATE':
        this.directUpdateColors(doc, message.colors);
        break;
      case 'ATSS_COLOR_RESET':
        this.directResetColors(doc);
        break;
      case 'ATSS_LOGO_UPDATE':
        this.directUpdateLogo(doc, message.logo);
        break;
      case 'ATSS_LOGO_HEIGHT_UPDATE':
        this.directUpdateLogoHeight(doc, message.height);
        break;
      case 'ATSS_SITE_TITLE_UPDATE':
        this.directUpdateSiteTitle(doc, message.title, message.showTitle);
        break;
      case 'ATSS_TYPOGRAPHY_UPDATE':
        this.directUpdateTypography(doc, message.typography);
        break;
      case 'ATSS_TYPOGRAPHY_RESET':
        this.directResetTypography(doc);
        break;
      case 'ATSS_CUSTOM_CSS_UPDATE':
        this.directUpdateCustomCss(doc, message.css, message.styleId);
        break;
      case 'ATSS_CUSTOM_CSS_RESET':
        this.directResetCustomCss(doc, message.styleId);
        break;
      case 'ATSS_BATCH_UPDATE':
        if (message.updates) {
          const u = message.updates;
          if (u.colors) {
            this.directUpdateColors(doc, u.colors);
          }
          if (u.logo) {
            this.directUpdateLogo(doc, u.logo);
          }
          if (undefined !== u.logoHeight) {
            this.directUpdateLogoHeight(doc, u.logoHeight);
          }
          if (undefined !== u.title) {
            this.directUpdateSiteTitle(doc, u.title, u.showTitle);
          }
          if (u.typography) {
            this.directUpdateTypography(doc, u.typography);
          }
          if (u.customCss) {
            Object.values(u.customCss).forEach(cssEntry => {
              this.directUpdateCustomCss(doc, cssEntry.css, cssEntry.styleId);
            });
          }
        }
        break;
      default:
        return false;
    }
    this.log('info', 'Direct DOM apply', message.type);
    return true;
  }

  /**
   * Apply color CSS custom properties directly.
   */
  directUpdateColors(doc, colors) {
    if (!colors || 'object' !== typeof colors) {
      return;
    }
    const root = doc.documentElement;
    for (const [property, value] of Object.entries(colors)) {
      const cleanValue = 'string' === typeof value ? value.replace(/^['"]|['"]$/g, '') : value;
      if (property.startsWith('--')) {
        root.style.setProperty(property, cleanValue);
        if (!this.appliedColors.includes(property)) {
          this.appliedColors.push(property);
        }
      }
    }
  }

  /**
   * Reset applied color CSS custom properties.
   */
  directResetColors(doc) {
    const root = doc.documentElement;
    for (const property of this.appliedColors) {
      root.style.removeProperty(property);
    }
    this.appliedColors = [];
  }

  /**
   * Update logo directly in the iframe DOM.
   */
  directUpdateLogo(doc, logo) {
    const logoHeight = undefined !== logo?.height ? logo.height : 80;
    const branding = doc.querySelector('.site-branding');
    if (!logo || !logo.url) {
      // Remove logo link if we inserted one
      const insertedLink = branding?.querySelector('.atss-preview-logo');
      if (insertedLink) {
        insertedLink.remove();
      }
      // Also clear any existing logo images
      const imgs = branding?.querySelectorAll('.site-logo, .custom-logo');
      if (imgs) {
        imgs.forEach(img => img.remove());
      }
      if (branding) {
        branding.style.display = '';
        branding.style.gap = '';
        branding.style.alignItems = '';
      }
      return;
    }

    // Try to update existing logo images first
    const existingLogos = branding?.querySelectorAll('.site-logo, .custom-logo');
    if (existingLogos && existingLogos.length > 0) {
      existingLogos.forEach(img => {
        img.src = logo.url;
        img.style.maxHeight = logoHeight + 'px';
      });
    } else if (branding) {
      // Check if we already inserted a preview logo
      let previewLink = branding.querySelector('.atss-preview-logo');
      if (previewLink) {
        const img = previewLink.querySelector('img');
        if (img) {
          img.src = logo.url;
          img.style.maxHeight = logoHeight + 'px';
        }
      } else {
        // Create <a><img></a> matching Sydney's logo structure
        previewLink = doc.createElement('a');
        previewLink.className = 'desktop-logo-link atss-preview-logo';
        previewLink.href = window.atssOnboarding?.homeUrl || '/';
        const img = doc.createElement('img');
        img.className = 'site-logo';
        img.src = logo.url;
        img.style.maxHeight = logoHeight + 'px';
        previewLink.appendChild(img);
        branding.insertBefore(previewLink, branding.firstChild);
        branding.style.display = 'flex';
        branding.style.gap = '15px';
        branding.style.alignItems = 'center';
      }
    }
  }

  /**
   * Update logo height directly in the iframe DOM.
   */
  directUpdateLogoHeight(doc, height) {
    const logoHeight = undefined !== height && null !== height && 'number' === typeof height ? height : 80;
    const logos = doc.querySelectorAll('.site-branding .site-logo, .site-branding .custom-logo');
    logos.forEach(img => {
      img.style.maxHeight = logoHeight + 'px';
    });
  }

  /**
   * Update site title directly in the iframe DOM.
   */
  directUpdateSiteTitle(doc, title, showTitle) {
    const show = undefined !== showTitle ? showTitle : true;
    const elements = doc.querySelectorAll('.site-title');
    elements.forEach(el => {
      if (undefined !== title) {
        let anchor = el.querySelector('a');
        if ('A' === el.tagName) {
          el.textContent = title;
        } else if (anchor) {
          anchor.textContent = title;
        } else {
          el.innerHTML = '';
          anchor = doc.createElement('a');
          anchor.textContent = title;
          anchor.href = window.atssOnboarding?.homeUrl || '/';
          el.appendChild(anchor);
        }
      }
      el.style.display = show ? '' : 'none';
    });
  }

  /**
   * Update typography directly in the iframe DOM.
   */
  directUpdateTypography(doc, typography) {
    if (!typography || 'object' !== typeof typography) {
      return;
    }

    // Load or remove Google Fonts
    if (typography.googleFontsUrl && '' !== typography.googleFontsUrl.trim()) {
      if (this.appliedTypography.fontLink && this.appliedTypography.fontLink.parentNode) {
        this.appliedTypography.fontLink.parentNode.removeChild(this.appliedTypography.fontLink);
      }
      const link = doc.createElement('link');
      link.rel = 'stylesheet';
      link.href = typography.googleFontsUrl;
      link.id = 'atss-preview-typography-fonts';
      doc.head.appendChild(link);
      this.appliedTypography.fontLink = link;
    } else if (this.appliedTypography.fontLink && this.appliedTypography.fontLink.parentNode) {
      this.appliedTypography.fontLink.parentNode.removeChild(this.appliedTypography.fontLink);
      this.appliedTypography.fontLink = null;
    }

    // Apply heading font
    if (typography.headingFont?.family) {
      const headings = doc.querySelectorAll('h1, h2, h3, h4, h5, h6, .site-title');
      headings.forEach(el => {
        if (!el.dataset.originalFontFamily) {
          el.dataset.originalFontFamily = doc.defaultView.getComputedStyle(el).fontFamily;
        }
        el.style.fontFamily = typography.headingFont.family;
        if (!this.appliedTypography.elements.includes(el)) {
          this.appliedTypography.elements.push(el);
        }
      });
    }

    // Apply body font
    if (typography.bodyFont?.family) {
      const body = doc.body;
      if (body) {
        if (!body.dataset.originalFontFamily) {
          body.dataset.originalFontFamily = doc.defaultView.getComputedStyle(body).fontFamily;
        }
        body.style.fontFamily = typography.bodyFont.family;
        if (!this.appliedTypography.elements.includes(body)) {
          this.appliedTypography.elements.push(body);
        }
      }
    }
  }

  /**
   * Reset typography directly in the iframe DOM.
   */
  directResetTypography(doc) {
    for (const el of this.appliedTypography.elements) {
      if (el.dataset.originalFontFamily) {
        el.style.fontFamily = el.dataset.originalFontFamily;
        delete el.dataset.originalFontFamily;
      } else {
        el.style.fontFamily = '';
      }
    }
    if (this.appliedTypography.fontLink && this.appliedTypography.fontLink.parentNode) {
      this.appliedTypography.fontLink.parentNode.removeChild(this.appliedTypography.fontLink);
    }
    this.appliedTypography = {
      elements: [],
      fontLink: null
    };
  }

  /**
   * Update custom CSS directly in the iframe DOM.
   *
   * @param {Document} doc     The iframe document.
   * @param {string}   css     The CSS string to inject.
   * @param {string}   styleId The ID of the style element.
   */
  directUpdateCustomCss(doc, css, styleId = 'atss-preview-custom-css') {
    if ('string' !== typeof css) {
      return;
    }
    let styleEl = doc.getElementById(styleId);
    if (!styleEl) {
      styleEl = doc.createElement('style');
      styleEl.id = styleId;
      doc.head.appendChild(styleEl);
    }
    styleEl.textContent = css;
  }

  /**
   * Reset custom CSS directly in the iframe DOM.
   *
   * @param {Document} doc     The iframe document.
   * @param {string}   styleId The ID of the style element.
   */
  directResetCustomCss(doc, styleId = 'atss-preview-custom-css') {
    const styleEl = doc.getElementById(styleId);
    if (styleEl) {
      styleEl.remove();
    }
  }

  /**
   * Destroy the bridge and clean up.
   */
  destroy() {
    if (this.messageHandler) {
      window.removeEventListener('message', this.messageHandler);
      this.messageHandler = null;
    }
    this.iframe = null;
    this.isReady = false;
    this.messageQueue = [];
    this.pendingCustomizations = null;
    this.readyReceivedWithoutIframe = false;
  }
}

// Create a singleton instance
const previewBridge = new PreviewBridge();
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (previewBridge);

/***/ }),

/***/ "./v2/onboarding/src/utils/use-preview-sync.js":
/*!*****************************************************!*\
  !*** ./v2/onboarding/src/utils/use-preview-sync.js ***!
  \*****************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   useColorPreviewSync: () => (/* binding */ useColorPreviewSync),
/* harmony export */   useLogoHeightPreviewSync: () => (/* binding */ useLogoHeightPreviewSync),
/* harmony export */   useLogoPreviewSync: () => (/* binding */ useLogoPreviewSync),
/* harmony export */   usePreviewBridgeInit: () => (/* binding */ usePreviewBridgeInit),
/* harmony export */   useSiteTitlePreviewSync: () => (/* binding */ useSiteTitlePreviewSync),
/* harmony export */   useTypographyPreviewSync: () => (/* binding */ useTypographyPreviewSync)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _preview_bridge__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./preview-bridge */ "./v2/onboarding/src/utils/preview-bridge.js");
/* harmony import */ var _image_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./image-utils */ "./v2/onboarding/src/utils/image-utils.js");
/**
 * usePreviewSync hook - Syncs wizard data with preview iframe.
 *
 * @package Athemes Starter Sites
 */





/**
 * Transform color scheme data to preview-compatible format.
 *
 * @param {string} schemeId       The selected color scheme ID.
 * @param {Array}  colorSchemes   Array of available color schemes.
 * @param {Object} customColors   Custom generated colors (if scheme is 'custom').
 * @return {Object|null} Color data ready for preview, or null if not available.
 */
const transformColors = (schemeId, colorSchemes, customColors) => {
  if (!schemeId) {
    return null;
  }

  // Handle custom colors
  if ('custom' === schemeId) {
    // Validate that customColors has actual color properties
    if (!customColors || 'object' !== typeof customColors || 0 === Object.keys(customColors).length) {
      return null;
    }
    return customColors;
  }

  // Find the selected scheme
  const selectedScheme = colorSchemes.find(scheme => scheme.id === schemeId);
  if (!selectedScheme || !selectedScheme.colors) {
    return null;
  }
  return selectedScheme.colors;
};

/**
 * Hook to sync colors with the preview iframe.
 *
 * @param {Object} options Hook options.
 * @param {string} options.selectedColorScheme   The selected color scheme ID.
 * @param {Array}  options.colorSchemes         Array of available color schemes.
 * @param {Object} options.customColors         Custom generated colors.
 * @param {number} options.debounceMs           Debounce delay in milliseconds (default: 300).
 */
const useColorPreviewSync = ({
  selectedColorScheme,
  colorSchemes = [],
  customColors = {},
  debounceMs = 300
}) => {
  const timeoutRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    // Clear any pending timeout
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    // Debounce the color update
    timeoutRef.current = setTimeout(() => {
      const colors = transformColors(selectedColorScheme, colorSchemes, customColors);
      if (colors) {
        _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].updateColors(colors);
      }
    }, debounceMs);

    // Cleanup
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [selectedColorScheme, colorSchemes, customColors, debounceMs]);
};

/**
 * Hook to sync logo with the preview iframe.
 *
 * @param {Object} siteLogo Logo data object with url and id.
 * @param {number} logoHeight Optional logo height to include in the logo object.
 */
const useLogoPreviewSync = (siteLogo, logoHeight) => {
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (!siteLogo) {
      return;
    }

    // Convert logo to preview-safe format (handles local URLs)
    const syncLogo = async () => {
      try {
        // Include height in logo object if provided
        const logoWithHeight = logoHeight !== undefined && null !== logoHeight ? {
          ...siteLogo,
          height: logoHeight
        } : siteLogo;

        // Convert local URLs to data URLs to avoid CORS issues
        const previewSafeLogo = await (0,_image_utils__WEBPACK_IMPORTED_MODULE_2__.convertLogoForPreview)(logoWithHeight);
        _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].updateLogo(previewSafeLogo);
      } catch (error) {
        // If conversion fails, send original logo anyway
        // eslint-disable-next-line no-console
        console.warn('[useLogoPreviewSync] Failed to convert logo:', error);
        const logoWithHeight = logoHeight !== undefined && null !== logoHeight ? {
          ...siteLogo,
          height: logoHeight
        } : siteLogo;
        _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].updateLogo(logoWithHeight);
      }
    };
    syncLogo();
  }, [siteLogo, logoHeight]);
};

/**
 * Hook to sync logo height with the preview iframe.
 *
 * @param {number} logoHeight The logo height.
 */
const useLogoHeightPreviewSync = logoHeight => {
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (logoHeight !== undefined && null !== logoHeight) {
      _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].updateLogoHeight(logoHeight);
    }
  }, [logoHeight]);
};

/**
 * Hook to sync site title with the preview iframe.
 *
 * @param {string}  siteTitle     The site title.
 * @param {boolean} showSiteTitle Whether to show the title.
 * @param {Object}  siteLogo      Logo data object with url and id.
 */
const useSiteTitlePreviewSync = (siteTitle, showSiteTitle, siteLogo) => {
  const timeoutRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    // Clear any pending timeout
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    // Debounce the title update
    timeoutRef.current = setTimeout(() => {
      _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].updateSiteTitle(siteTitle, showSiteTitle, siteLogo);
    }, 500);

    // Cleanup
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [siteTitle, showSiteTitle, siteLogo]);
};

/**
 * Hook to sync typography with the preview iframe.
 *
 * @param {string} selectedTypographyPair The selected typography pair ID.
 * @param {Array}  typographyPairs       Array of available typography pairs.
 */
const useTypographyPreviewSync = (selectedTypographyPair, typographyPairs) => {
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (!selectedTypographyPair) {
      return;
    }
    const selectedPair = typographyPairs.find(pair => pair.id === selectedTypographyPair);
    if (selectedPair) {
      _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].updateTypography(selectedPair);
    }
  }, [selectedTypographyPair, typographyPairs]);
};

/**
 * Hook to initialize the preview bridge with an iframe.
 * This hook watches for the iframe element to become available and initializes the bridge.
 *
 * @param {Object} iframeRef React ref to the iframe element.
 */
const usePreviewBridgeInit = iframeRef => {
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    // Initialize immediately if iframe is available
    if (iframeRef?.current) {
      _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].init(iframeRef.current);
    }
  }, [iframeRef]);

  // Also watch for when the iframe element becomes available (for conditional rendering)
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    // If iframe ref exists and has a current value, and it's different from what bridge has
    if (iframeRef?.current && _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].iframe !== iframeRef.current) {
      _preview_bridge__WEBPACK_IMPORTED_MODULE_1__["default"].init(iframeRef.current);
    }
  });
};

/***/ })

}]);
//# sourceMappingURL=v2_onboarding_src_components_Steps_Pages_js.js.map?ver=1f1cf1ac1b94caceb5e3