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

/***/ "./node_modules/@wordpress/icons/build-module/library/desktop.js":
/*!***********************************************************************!*\
  !*** ./node_modules/@wordpress/icons/build-module/library/desktop.js ***!
  \***********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ desktop_default)
/* harmony export */ });
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
// packages/icons/src/library/desktop.tsx


var desktop_default = /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { d: "M20.5 16h-.7V8c0-1.1-.9-2-2-2H6.2c-1.1 0-2 .9-2 2v8h-.7c-.8 0-1.5.7-1.5 1.5h20c0-.8-.7-1.5-1.5-1.5zM5.7 8c0-.3.2-.5.5-.5h11.6c.3 0 .5.2.5.5v7.6H5.7V8z" }) });

//# sourceMappingURL=desktop.js.map


/***/ }),

/***/ "./node_modules/@wordpress/icons/build-module/library/mobile.js":
/*!**********************************************************************!*\
  !*** ./node_modules/@wordpress/icons/build-module/library/mobile.js ***!
  \**********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ mobile_default)
/* harmony export */ });
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
// packages/icons/src/library/mobile.tsx


var mobile_default = /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { d: "M15 4H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H9c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h6c.3 0 .5.2.5.5v12zm-4.5-.5h2V16h-2v1.5z" }) });

//# sourceMappingURL=mobile.js.map


/***/ }),

/***/ "./node_modules/@wordpress/icons/build-module/library/rotate-left.js":
/*!***************************************************************************!*\
  !*** ./node_modules/@wordpress/icons/build-module/library/rotate-left.js ***!
  \***************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ rotate_left_default)
/* harmony export */ });
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
// packages/icons/src/library/rotate-left.tsx


var rotate_left_default = /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { d: "M12 4V2.2L9 4.8l3 2.5V5.5c3.6 0 6.5 2.9 6.5 6.5 0 2.9-1.9 5.3-4.5 6.2v.2l-.1-.2c-.4.1-.7.2-1.1.2l.2 1.5c.3 0 .6-.1 1-.2 3.5-.9 6-4 6-7.7 0-4.4-3.6-8-8-8zm-7.9 7l1.5.2c.1-1.2.5-2.3 1.2-3.2l-1.1-.9C4.8 8.2 4.3 9.6 4.1 11zm1.5 1.8l-1.5.2c.1.7.3 1.4.5 2 .3.7.6 1.3 1 1.8l1.2-.8c-.3-.5-.6-1-.8-1.5s-.4-1.1-.4-1.7zm1.5 5.5c1.1.9 2.4 1.4 3.8 1.6l.2-1.5c-1.1-.1-2.2-.5-3.1-1.2l-.9 1.1z" }) });

//# sourceMappingURL=rotate-left.js.map


/***/ }),

/***/ "./node_modules/@wordpress/icons/build-module/library/tablet.js":
/*!**********************************************************************!*\
  !*** ./node_modules/@wordpress/icons/build-module/library/tablet.js ***!
  \**********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ tablet_default)
/* harmony export */ });
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
// packages/icons/src/library/tablet.tsx


var tablet_default = /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path, { d: "M17 4H7c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H7c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12zm-7.5-.5h4V16h-4v1.5z" }) });

//# sourceMappingURL=tablet.js.map


/***/ }),

/***/ "./node_modules/@wordpress/icons/build-module/library/trash.js":
/*!*********************************************************************!*\
  !*** ./node_modules/@wordpress/icons/build-module/library/trash.js ***!
  \*********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ trash_default)
/* harmony export */ });
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
// packages/icons/src/library/trash.tsx


var trash_default = /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(
  _wordpress_primitives__WEBPACK_IMPORTED_MODULE_0__.Path,
  {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z"
  }
) });

//# sourceMappingURL=trash.js.map


/***/ }),

/***/ "./v2/onboarding/src/assets/images/crown.svg":
/*!***************************************************!*\
  !*** ./v2/onboarding/src/assets/images/crown.svg ***!
  \***************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   ReactComponent: () => (/* binding */ SvgCrown),
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
var _path;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }

var SvgCrown = function SvgCrown(props) {
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
    xmlns: "http://www.w3.org/2000/svg",
    width: 16,
    height: 13,
    fill: "none"
  }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
    fill: "#335EEA",
    d: "M15.777 2.844a1.08 1.08 0 0 1-1.093 1.094h-.028l-1.394 7.601c-.055.41-.438.711-.848.711h-9.05c-.41 0-.794-.3-.848-.71L1.12 3.937h-.027A1.08 1.08 0 0 1 0 2.843C0 2.242.492 1.75 1.094 1.75c.574 0 1.094.492 1.094 1.094 0 .246-.11.465-.247.656l2.461 1.969a.875.875 0 0 0 1.313-.301L7.3 2.023c-.301-.191-.52-.52-.52-.93C6.781.494 7.273 0 7.902 0 8.504 0 8.97.492 8.97 1.094c0 .41-.219.738-.547.93l1.586 3.144c.246.492.902.629 1.34.3L13.78 3.5a1.3 1.3 0 0 1-.191-.656 1.08 1.08 0 0 1 1.094-1.094c.601 0 1.093.492 1.093 1.094"
  })));
};

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xNS43NzczIDIuODQzNzVDMTUuNzc3MyAzLjQ3MjY2IDE1LjI4NTIgMy45Mzc1IDE0LjY4MzYgMy45Mzc1QzE0LjY1NjIgMy45Mzc1IDE0LjY1NjIgMy45Mzc1IDE0LjY1NjIgMy45Mzc1TDEzLjI2MTcgMTEuNTM5MUMxMy4yMDcgMTEuOTQ5MiAxMi44MjQyIDEyLjI1IDEyLjQxNDEgMTIuMjVIMy4zNjMyOEMyLjk1MzEyIDEyLjI1IDIuNTcwMzEgMTEuOTQ5MiAyLjUxNTYyIDExLjUzOTFMMS4xMjEwOSAzLjkzNzVDMS4xMjEwOSAzLjkzNzUgMS4xMjEwOSAzLjkzNzUgMS4wOTM3NSAzLjkzNzVDMC40OTIxODggMy45Mzc1IDAgMy40NzI2NiAwIDIuODQzNzVDMCAyLjI0MjE5IDAuNDkyMTg4IDEuNzUgMS4wOTM3NSAxLjc1QzEuNjY3OTcgMS43NSAyLjE4NzUgMi4yNDIxOSAyLjE4NzUgMi44NDM3NUMyLjE4NzUgMy4wODk4NCAyLjA3ODEyIDMuMzA4NTkgMS45NDE0MSAzLjVMNC40MDIzNCA1LjQ2ODc1QzQuODM5ODQgNS43OTY4OCA1LjQ2ODc1IDUuNjYwMTYgNS43MTQ4NCA1LjE2Nzk3TDcuMzAwNzggMi4wMjM0NEM3IDEuODMyMDMgNi43ODEyNSAxLjUwMzkxIDYuNzgxMjUgMS4wOTM3NUM2Ljc4MTI1IDAuNDkyMTg4IDcuMjczNDQgMCA3LjkwMjM0IDBDOC41MDM5MSAwIDguOTY4NzUgMC40OTIxODggOC45Njg3NSAxLjA5Mzc1QzguOTY4NzUgMS41MDM5MSA4Ljc1IDEuODMyMDMgOC40MjE4OCAyLjAyMzQ0TDEwLjAwNzggNS4xNjc5N0MxMC4yNTM5IDUuNjYwMTYgMTAuOTEwMiA1Ljc5Njg4IDExLjM0NzcgNS40Njg3NUwxMy43ODEyIDMuNUMxMy42NzE5IDMuMzA4NTkgMTMuNTg5OCAzLjA4OTg0IDEzLjU4OTggMi44NDM3NUMxMy41ODk4IDIuMjQyMTkgMTQuMDU0NyAxLjc1IDE0LjY4MzYgMS43NUMxNS4yODUyIDEuNzUgMTUuNzc3MyAyLjI0MjE5IDE1Ljc3NzMgMi44NDM3NVoiIGZpbGw9IiMzMzVFRUEiLz4NCjwvc3ZnPg==");

/***/ }),

/***/ "./v2/onboarding/src/components/Controls/CustomColorsControl.js":
/*!**********************************************************************!*\
  !*** ./v2/onboarding/src/components/Controls/CustomColorsControl.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 _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/rotate-left.js");
/* harmony import */ var _utils_color_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/color-utils */ "./v2/onboarding/src/utils/color-utils.js");
/* harmony import */ var _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils/preview-bridge */ "./v2/onboarding/src/utils/preview-bridge.js");
/* harmony import */ var _utils_is_botiga__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/is-botiga */ "./v2/onboarding/src/utils/is-botiga.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);
/**
 * Custom Colors Control component.
 *
 * @package Athemes Starter Sites
 */









/**
 * Custom Colors Control component.
 *
 * @param {Object}   props                     Component props.
 * @param {string}   props.label               Label for the control.
 * @param {Array}    props.colorSchemes        Array of color scheme objects.
 * @param {string}   props.value               Currently selected color scheme ID.
 * @param {Function} props.onChange            Callback when selection changes.
 * @param {Function} props.onCustomColors      Callback when custom colors are generated.
 * @param {Object}   props.customColors        Previously saved custom colors (if any).
 * @param {string}   props.customPrimaryColor  Previously saved primary color (if any).
 * @param {Function} props.onPrimaryColorChange Callback when primary color changes.
 * @param {string}   props.themeName           Theme name (sydney, botiga, etc.) for generating CSS variables.
 * @return {JSX.Element} CustomColorsControl component.
 */

function CustomColorsControl({
  label,
  colorSchemes = [],
  value,
  onChange,
  onCustomColors,
  customColors = {},
  customPrimaryColor: savedPrimaryColor = '',
  onPrimaryColorChange,
  themeName = 'sydney'
}) {
  const [customPrimaryColor, setCustomPrimaryColor] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(savedPrimaryColor || '#cf2c2c');
  const [generatedColors, setGeneratedColors] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customColors);
  const [contrastWarnings, setContrastWarnings] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
  const [isPickerOpen, setIsPickerOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
  const colorSwatchRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);

  /**
   * Get the first 3 colors from a color scheme.
   *
   * @param {Object} scheme Color scheme object with colors property.
   * @return {Array} Array of color values.
   */
  const getFirstThreeColors = scheme => {
    if (!scheme?.colors) {
      return [];
    }
    const uniqueColors = [];
    Object.values(scheme.colors).forEach(color => {
      if (uniqueColors.includes(color)) {
        return;
      }
      uniqueColors.push(color);
    });
    return uniqueColors.slice(0, 3);
  };

  /**
   * Handle color scheme selection.
   *
   * @param {string} schemeId The ID of the selected color scheme.
   */
  const handleSelect = schemeId => {
    if (onChange) {
      onChange(schemeId);
    }
  };

  /**
   * Handle reset action.
   */
  const handleReset = () => {
    if (onChange) {
      onChange('');
    }
    // Reset custom colors state
    setCustomPrimaryColor('#cf2c2c');
    setGeneratedColors({});
    setContrastWarnings([]);
    if (onCustomColors) {
      onCustomColors({});
    }
    if (onPrimaryColorChange) {
      onPrimaryColorChange('');
    }
    // Reset colors in the preview iframe
    _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_5__["default"].resetColors();
  };

  /**
   * Handle custom primary color change.
   *
   * @param {string} color The new primary color.
   */
  const handlePrimaryColorChange = color => {
    setCustomPrimaryColor(color);

    // Generate the color scheme with the theme name for proper CSS variable format
    const scheme = (0,_utils_color_utils__WEBPACK_IMPORTED_MODULE_4__.generateColorScheme)(color, themeName);
    setGeneratedColors(scheme.colors);
    setContrastWarnings(scheme.warnings);

    // Notify parent component of generated colors and primary color
    if (onCustomColors) {
      onCustomColors(scheme.colors);
    }
    if (onPrimaryColorChange) {
      onPrimaryColorChange(color);
    }
  };

  /**
   * Sync state with props from parent when they change.
   * Only sync if we're not on custom mode, or if the colors are actually custom-generated.
   */
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    // Only sync customColors from props if we're not in custom mode
    // When in custom mode, we generate colors from primary color instead
    if (value !== 'custom' && customColors && Object.keys(customColors).length > 0) {
      setGeneratedColors(customColors);
    }
  }, [customColors, value]);
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (savedPrimaryColor) {
      setCustomPrimaryColor(savedPrimaryColor);
    }
  }, [savedPrimaryColor]);

  /**
   * Generate colors when custom is selected.
   * This runs when switching to custom mode, ensuring we always show generated colors.
   */
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (value === 'custom') {
      // Always regenerate colors when switching to custom mode
      // This ensures we show the palette based on the primary color, not the last scheme
      const scheme = (0,_utils_color_utils__WEBPACK_IMPORTED_MODULE_4__.generateColorScheme)(customPrimaryColor, themeName);
      setGeneratedColors(scheme.colors);
      setContrastWarnings(scheme.warnings);

      // Notify parent component of generated colors and primary color
      if (onCustomColors) {
        onCustomColors(scheme.colors);
      }
      if (onPrimaryColorChange) {
        onPrimaryColorChange(customPrimaryColor);
      }
    }
  }, [value, customPrimaryColor, themeName, onCustomColors, onPrimaryColorChange]);
  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", {
    className: "atss-control atss-custom-colors-control",
    children: [label && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", {
      className: "atss-control__label-wrapper flex items-center",
      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("label", {
        className: "atss-control__label text-sm font-medium",
        children: label
      }), value && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
        placement: "top",
        text: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Reset to default', 'athemes-starter-sites'),
        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button", {
          type: "button",
          className: "atss-control__reset-button",
          onClick: handleReset,
          "aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Reset selection', 'athemes-starter-sites'),
          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Icon, {
            icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_3__["default"]
          })
        })
      })]
    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", {
      className: "atss-colors-control__grid",
      children: [colorSchemes.map(scheme => {
        const colors = getFirstThreeColors(scheme);
        const isSelected = value === scheme.id;
        const botigaStyle = _utils_is_botiga__WEBPACK_IMPORTED_MODULE_6__["default"] ? {
          backgroundColor: scheme?.colors['--bt-color-bg']
        } : {};
        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button", {
          type: "button",
          className: `atss-colors-control__option ${isSelected ? 'atss-colors-control__option--selected' : ''}`,
          onClick: () => handleSelect(scheme.id),
          "aria-label": scheme.name,
          "aria-pressed": isSelected,
          style: botigaStyle,
          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("div", {
            className: "atss-colors-control__circles",
            children: colors.map((color, index) => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("span", {
              className: "atss-colors-control__circle",
              style: {
                backgroundColor: color
              }
            }, index))
          })
        }, scheme.id);
      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button", {
        type: "button",
        className: `atss-colors-control__option atss-colors-control__option--custom ${value === 'custom' ? 'atss-colors-control__option--selected' : ''}`,
        onClick: () => handleSelect('custom'),
        "aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Custom Colors', 'athemes-starter-sites'),
        "aria-pressed": value === 'custom',
        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", {
          className: "atss-colors-control__circles",
          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("span", {
            className: "atss-colors-control__circle atss-colors-control__circle--dashed"
          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("span", {
            className: "atss-colors-control__circle atss-colors-control__circle--dashed"
          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("span", {
            className: "atss-colors-control__circle atss-colors-control__circle--dashed"
          })]
        })
      })]
    }), value === 'custom' && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", {
      className: "atss-colors-control__custom-panel",
      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", {
        className: "atss-colors-control__picker-section",
        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("label", {
          className: "atss-colors-control__picker-label",
          children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Pick a Primary Color', 'athemes-starter-sites')
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("div", {
          className: "atss-colors-control__picker-row",
          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", {
            className: "atss-colors-control__picker-trigger",
            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button", {
              ref: colorSwatchRef,
              type: "button",
              className: "atss-colors-control__color-swatch",
              onClick: () => setIsPickerOpen(!isPickerOpen),
              "aria-expanded": isPickerOpen,
              "aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Select color', 'athemes-starter-sites'),
              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("span", {
                className: "atss-colors-control__color-preview",
                style: {
                  backgroundColor: customPrimaryColor
                }
              })
            }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("input", {
              type: "text",
              className: "atss-colors-control__color-input",
              value: customPrimaryColor,
              onChange: e => handlePrimaryColorChange(e.target.value),
              placeholder: "#cf2c2c"
            }), isPickerOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Popover, {
              anchor: colorSwatchRef.current,
              placement: "top-start",
              offset: 10,
              onClose: () => setIsPickerOpen(false),
              className: "atss-colors-control__picker-popover",
              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ColorPicker, {
                color: customPrimaryColor,
                onChange: handlePrimaryColorChange,
                enableAlpha: false,
                copyFormat: "hex"
              })
            })]
          })
        })]
      }), contrastWarnings.length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("div", {
        className: "atss-colors-control__warnings",
        children: contrastWarnings.map((warning, index) => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("p", {
          className: "atss-colors-control__warning",
          children: warning.message
        }, index))
      }), Object.keys(generatedColors).length > 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("div", {
        className: "atss-colors-control__swatches",
        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("div", {
          className: "atss-colors-control__swatches-grid",
          children: Object.entries(generatedColors).map(([key, color]) => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("div", {
            className: "atss-colors-control__swatch",
            style: {
              backgroundColor: color
            },
            title: color
          }, key))
        })
      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("p", {
        className: "atss-colors-control__helper-text",
        children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('You can adjust the color palette later from the Customizer.', 'athemes-starter-sites')
      })]
    })]
  });
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CustomColorsControl);

/***/ }),

/***/ "./v2/onboarding/src/components/Controls/CustomizeUpsell.js":
/*!******************************************************************!*\
  !*** ./v2/onboarding/src/components/Controls/CustomizeUpsell.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_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _assets_images_crown_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../assets/images/crown.svg */ "./v2/onboarding/src/assets/images/crown.svg");
/* harmony import */ var _utils_config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/config */ "./v2/onboarding/src/utils/config.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
/**
 * Customize Upsell component.
 *
 * @package Athemes Starter Sites
 */






/**
 * Customize Upsell component - displays pro template upgrade notice.
 *
 * @param {Object}  props           Component props.
 * @param {boolean} props.isVisible Whether to show the upsell.
 * @param {string}  props.upgradeUrl The upgrade URL with UTM parameters.
 * @return {JSX.Element|null} CustomizeUpsell component or null.
 */

function CustomizeUpsell({
  isVisible = false,
  upgradeUrl = _utils_config__WEBPACK_IMPORTED_MODULE_3__.DEFAULT_UPGRADE_URL
}) {
  if (!isVisible) {
    return null;
  }
  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
    className: "atss-customize-upsell",
    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
      className: "atss-customize-upsell__box",
      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
        className: "atss-customize-upsell__header flex items-center gap-xs",
        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("img", {
          src: _assets_images_crown_svg__WEBPACK_IMPORTED_MODULE_2__["default"],
          alt: "",
          className: "atss-customize-upsell__icon",
          "aria-hidden": "true",
          width: "16",
          height: "13"
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
          className: "atss-customize-upsell__title font-medium text-sm",
          children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Pro Template', 'athemes-starter-sites')
        })]
      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("p", {
        className: "atss-customize-upsell__description text-xs text-secondary",
        children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('You\'ve selected a Pro template! Unlock this design and many more by upgrading to Pro!', 'athemes-starter-sites')
      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
        variant: "primary",
        href: upgradeUrl,
        target: "_blank",
        rel: "noopener noreferrer",
        className: "atss-onboarding-wizard__btn w100 justify-center",
        children: [(0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Upgrade to Pro', 'athemes-starter-sites'), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
          className: "atss-onboarding-wizard__btn-arrow",
          children: "\u2192"
        })]
      })]
    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("p", {
      className: "atss-customize-upsell__note text-xs text-tertiary",
      children: [(0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('If you are an existing Pro user, please get the premium version of the plugin from your', 'athemes-starter-sites'), ' ', /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("a", {
        href: _utils_config__WEBPACK_IMPORTED_MODULE_3__.ACCOUNT_URL,
        target: "_blank",
        rel: "noopener noreferrer",
        className: "atss-customize-upsell__link",
        children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('account', 'athemes-starter-sites')
      })]
    })]
  });
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CustomizeUpsell);

/***/ }),

/***/ "./v2/onboarding/src/components/Controls/DevicePreviewControl.js":
/*!***********************************************************************!*\
  !*** ./v2/onboarding/src/components/Controls/DevicePreviewControl.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_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/desktop.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/mobile.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/tablet.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
/**
 * Device Preview Control component for switching between device preview modes.
 *
 * @package Athemes Starter Sites
 */




/**
 * Device Preview Control component.
 *
 * @param {Object}   props          Component props.
 * @param {string}   props.label    Label for the control.
 * @param {string}   props.value    Currently selected device ('desktop', 'tablet', or 'mobile').
 * @param {Function} props.onChange Callback when device selection changes.
 * @return {JSX.Element} Device Preview Control component.
 */

function DevicePreviewControl({
  label,
  value = 'desktop',
  onChange
}) {
  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
    className: "atss-device-preview-control atss-control atss-device-preview-control",
    children: [label && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("label", {
      className: "atss-control__label text-sm font-medium",
      children: label
    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_wordpress_components__WEBPACK_IMPORTED_MODULE_0__.__experimentalToggleGroupControl, {
      value: value,
      onChange: onChange,
      isBlock: true,
      __next40pxDefaultSize: true,
      __nextHasNoMarginBottom: true,
      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_0__.__experimentalToggleGroupControlOptionIcon, {
        value: "desktop",
        icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_1__["default"],
        label: "Desktop"
      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_0__.__experimentalToggleGroupControlOptionIcon, {
        value: "tablet",
        icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_3__["default"],
        label: "Tablet"
      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_0__.__experimentalToggleGroupControlOptionIcon, {
        value: "mobile",
        icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_2__["default"],
        label: "Mobile"
      })]
    })]
  });
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DevicePreviewControl);

/***/ }),

/***/ "./v2/onboarding/src/components/Controls/MediaUploadControl.js":
/*!*********************************************************************!*\
  !*** ./v2/onboarding/src/components/Controls/MediaUploadControl.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_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/trash.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
/**
 * Media Upload Control component.
 *
 * @package Athemes Starter Sites
 */






/**
 * MediaUploadControl component for uploading images via WordPress media library.
 *
 * @param {Object}   props             Component props.
 * @param {string}   props.label       Label for the control.
 * @param {string}   props.value       Current image URL.
 * @param {number}   props.id          Current image ID.
 * @param {Function} props.onChange    Callback when image is selected/changed.
 * @param {Function} props.onRemove    Callback when image is removed.
 * @param {string}   props.buttonText  Text for the upload button.
 * @param {string}   props.allowedTypes Allowed media types (default: 'image').
 * @return {JSX.Element} MediaUploadControl component.
 */

function MediaUploadControl({
  label = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Upload Image', 'athemes-starter-sites'),
  value = '',
  id = 0,
  onChange,
  onRemove,
  buttonText = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Select Image', 'athemes-starter-sites'),
  allowedTypes = 'image'
}) {
  /**
   * Open WordPress media library.
   */
  const openMediaLibrary = () => {
    // Check if wp.media is available
    if (!window.wp || !window.wp.media) {
      console.error('WordPress media library is not available');
      return;
    }

    // Create media frame
    const frame = window.wp.media({
      frame: 'select',
      title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Select or Upload Image', 'athemes-starter-sites'),
      button: {
        text: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Select', 'athemes-starter-sites')
      },
      multiple: false,
      library: {
        type: allowedTypes
      }
    });

    // When an image is selected, run callback
    frame.on('select', () => {
      const attachment = frame.state().get('selection').first().toJSON();
      if (onChange) {
        onChange({
          url: attachment.url,
          id: attachment.id,
          alt: attachment.alt || '',
          width: attachment.width || 0,
          height: attachment.height || 0
        });
      }
    });

    // Open the modal
    frame.open();
  };

  /**
   * Handle media removal.
   */
  const handleRemove = () => {
    if (onRemove) {
      onRemove();
    } else if (onChange) {
      onChange({
        url: '',
        id: 0,
        alt: '',
        width: 0,
        height: 0
      });
    }
  };
  const filename = value ? value.split('/').pop() : '';
  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
    className: "atss-control atss-media-upload-control",
    children: [label && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("label", {
      className: "atss-control__label text-sm font-medium",
      children: label
    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
      className: "atss-media-upload-control__content",
      children: !value ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
        className: "atss-media-upload-control__buttons flex gap-xs flex-col justify-center",
        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
          onClick: openMediaLibrary,
          variant: "secondary",
          className: "atss-media-upload-control__button w100 text-sm font-medium justify-center",
          children: buttonText
        })
      }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
        className: "atss-media-upload-control__selected",
        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
          className: "atss-media-upload-control__file-info",
          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
            className: "atss-media-upload-control__thumbnail",
            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("img", {
              src: value,
              alt: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Preview', 'athemes-starter-sites')
            })
          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
            className: "atss-media-upload-control__filename",
            children: filename
          })]
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
          className: "atss-media-upload-control__actions",
          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
            onClick: openMediaLibrary,
            variant: "link",
            className: "atss-media-upload-control__button atss-media-upload-control__button--change",
            children: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Change', 'athemes-starter-sites')
          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
            onClick: handleRemove,
            variant: "link",
            isDestructive: true,
            className: "atss-media-upload-control__button atss-media-upload-control__button--remove",
            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Icon, {
              icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_2__["default"],
              size: 12
            })
          })]
        })]
      })
    })]
  });
}
MediaUploadControl.propTypes = {
  label: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
  value: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
  id: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().number),
  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func).isRequired,
  onRemove: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().func),
  buttonText: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
  allowedTypes: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string)
};
MediaUploadControl.defaultProps = {
  label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Upload Image', 'athemes-starter-sites'),
  value: '',
  id: 0,
  buttonText: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Select Image', 'athemes-starter-sites'),
  allowedTypes: 'image'
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MediaUploadControl);

/***/ }),

/***/ "./v2/onboarding/src/components/Controls/TypographyControl.js":
/*!********************************************************************!*\
  !*** ./v2/onboarding/src/components/Controls/TypographyControl.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 _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/rotate-left.js");
/* harmony import */ var _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/preview-bridge */ "./v2/onboarding/src/utils/preview-bridge.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
/**
 * Typography Control component.
 *
 * @package Athemes Starter Sites
 */







/**
 * Returns the font names for a given typography pair.
 *
 * @param {Object} pair The typography pair object.
 * @return {string} The font names string.
 */

const getFontNames = pair => {
  if (!pair || pair.id === 'system') {
    return (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Default', 'athemes-starter-sites');
  }
  const heading = pair.headingFont?.family || '';
  const body = pair.bodyFont?.family || '';
  if (!heading && !body) {
    return (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Default', 'athemes-starter-sites');
  }
  if (heading && body && heading !== body) {
    return `${heading} & ${body}`;
  }
  return heading || body;
};

/**
 * Typography Control component.
 *
 * @param {Object}   props               Component props.
 * @param {string}   props.label         Label for the control.
 * @param {Array}    props.typographyPairs Array of typography pair objects.
 * @param {string}   props.value         Currently selected typography pair ID.
 * @param {Function} props.onChange      Callback when selection changes.
 * @return {JSX.Element} TypographyControl component.
 */
function TypographyControl({
  label,
  typographyPairs = [],
  value,
  onChange
}) {
  const linkRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
  const selectedPair = typographyPairs.find(pair => pair.id === value);
  const fontNames = selectedPair?.label || (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Default', 'athemes-starter-sites');

  /**
   * Load Google Fonts when component mounts.
   */
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    // Combine all Google Fonts URLs into a single request
    const fontFamilies = typographyPairs.filter(pair => pair.googleFontsUrl) // Skip pairs without Google Fonts URLs (e.g., system fonts)
    .map(pair => {
      // Extract font families and weights from the URL
      const url = new URL(pair.googleFontsUrl);
      return url.searchParams.get('family');
    }).filter(Boolean);

    // Only create link if there are Google Fonts to load
    if (fontFamilies.length > 0) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.id = 'atss-typography-control-fonts';

      // Create combined Google Fonts URL
      const combinedUrl = `https://fonts.googleapis.com/css2?${fontFamilies.map(f => `family=${f}`).join('&')}&display=swap`;
      link.href = combinedUrl;

      // Append to head
      document.head.appendChild(link);
      linkRef.current = link;
    }

    // Cleanup on unmount
    return () => {
      if (linkRef.current && linkRef.current.parentNode) {
        linkRef.current.parentNode.removeChild(linkRef.current);
      }
    };
  }, [typographyPairs]);

  /**
   * Handle typography pair selection.
   *
   * @param {string} pairId The ID of the selected typography pair.
   */
  const handleSelect = pairId => {
    if (onChange) {
      onChange(pairId);
    }
  };

  /**
   * Handle reset action.
   */
  const handleReset = () => {
    if (onChange) {
      onChange('');
    }
    // Reset typography in the preview iframe
    _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_4__["default"].resetTypography();
  };
  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
    className: "atss-control atss-typography-control",
    children: [label && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
      className: "atss-control__label-wrapper flex items-center",
      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("label", {
        className: "atss-control__label text-sm font-medium",
        children: [label, ": ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
          className: "atss-typography-control__font-names",
          children: fontNames
        })]
      }), value && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
        placement: "top",
        text: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Reset to default', 'athemes-starter-sites'),
        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
          type: "button",
          className: "atss-control__reset-button",
          onClick: handleReset,
          "aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Reset selection', 'athemes-starter-sites'),
          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Icon, {
            icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_3__["default"]
          })
        })
      })]
    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
      className: "atss-typography-control__grid",
      children: typographyPairs.map(pair => {
        const isSelected = value === pair.id;
        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
          placement: "top",
          text: getFontNames(pair),
          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
            type: "button",
            className: `atss-typography-control__option ${isSelected ? 'atss-typography-control__option--selected' : ''}`,
            onClick: () => handleSelect(pair.id),
            "aria-label": pair.label || pair.name,
            "aria-pressed": isSelected,
            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
              className: "atss-typography-control__preview",
              children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
                style: {
                  fontFamily: pair.headingFont.family,
                  fontWeight: 500,
                  fontSize: '22px'
                },
                children: "A"
              }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
                style: {
                  fontFamily: pair.bodyFont.family,
                  fontWeight: 400,
                  fontSize: '22px'
                },
                children: "g"
              })]
            })
          }, pair.id)
        });
      })
    })]
  });
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TypographyControl);

/***/ }),

/***/ "./v2/onboarding/src/components/Steps/Customize.js":
/*!*********************************************************!*\
  !*** ./v2/onboarding/src/components/Steps/Customize.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 _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _Layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Layout */ "./v2/onboarding/src/components/Layout/index.js");
/* harmony import */ var _context_WizardContext__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../context/WizardContext */ "./v2/onboarding/src/context/WizardContext.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 _Controls_MediaUploadControl__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Controls/MediaUploadControl */ "./v2/onboarding/src/components/Controls/MediaUploadControl.js");
/* harmony import */ var _Controls_CustomColorsControl__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Controls/CustomColorsControl */ "./v2/onboarding/src/components/Controls/CustomColorsControl.js");
/* harmony import */ var _Controls_TypographyControl__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Controls/TypographyControl */ "./v2/onboarding/src/components/Controls/TypographyControl.js");
/* harmony import */ var _Controls_DevicePreviewControl__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../Controls/DevicePreviewControl */ "./v2/onboarding/src/components/Controls/DevicePreviewControl.js");
/* harmony import */ var _Controls_CustomizeUpsell__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../Controls/CustomizeUpsell */ "./v2/onboarding/src/components/Controls/CustomizeUpsell.js");
/* harmony import */ var _utils_preload_helpers__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../utils/preload-helpers */ "./v2/onboarding/src/utils/preload-helpers.js");
/* harmony import */ var _utils_api__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../utils/api */ "./v2/onboarding/src/utils/api.js");
/* harmony import */ var _utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../utils/use-preview-sync */ "./v2/onboarding/src/utils/use-preview-sync.js");
/* harmony import */ var _utils_is_botiga__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../utils/is-botiga */ "./v2/onboarding/src/utils/is-botiga.js");
/* harmony import */ var _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../utils/preview-bridge */ "./v2/onboarding/src/utils/preview-bridge.js");
/* harmony import */ var _data_botiga_non_variable_color_rules__WEBPACK_IMPORTED_MODULE_18__ = __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_19__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__);
/**
 * Customize step component.
 *
 * @package Athemes Starter Sites
 */




















/**
 * Customize 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} Customize component.
 */

function Customize({
  onBack,
  onContinue,
  navigationLoading,
  navigationError
}) {
  const {
    wizardData,
    prefetchedPages,
    setPrefetchedPages,
    siteTitle,
    setSiteTitle,
    builder
  } = (0,_context_WizardContext__WEBPACK_IMPORTED_MODULE_4__.useWizard)();
  const iframeRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
  const [isIframeLoading, setIsIframeLoading] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(true);

  // Get existing data from context if available
  const customizeData = wizardData['customize'] || {};
  const designData = wizardData['design'] || {};
  const [siteLogo, setSiteLogo] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.siteLogo || {
    url: '',
    id: 0
  });
  const [logoHeight, setLogoHeight] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.logoHeight ?? 80);
  const [showSiteTitle, setShowSiteTitle] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.showSiteTitle ?? true);
  const [selectedColorScheme, setSelectedColorScheme] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.selectedColorScheme || '');
  const [customColors, setCustomColors] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.customColors || {});
  const [customPrimaryColor, setCustomPrimaryColor] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.customPrimaryColor || '');
  const [selectedTypographyPair, setSelectedTypographyPair] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.selectedTypographyPair || '');
  const [previewDevice, setPreviewDevice] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.previewDevice || 'desktop');
  const [cleanInstall, setCleanInstall] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(customizeData.cleanInstall || false);

  // Get the selected site ID from the Design step
  const selectedSiteId = designData.selectedSiteId;

  // Get theme name, selected site, 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);

  // Check if there's an existing starter site installed
  const hasExistingStarter = window.atssOnboarding?.currentStarter && window.atssOnboarding.currentStarter !== '';

  // Check if the selected site is a Pro template
  // The 'type' property is set to 'pro' or 'free' in the starter sites data
  const isProUser = window.atssOnboarding?.isProUser || false;
  const isProTemplate = selectedSite?.type === 'pro' && !isProUser;

  // Initialize preview bridge — use direct DOM mode for local site preview
  _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_17__["default"].setLocalPreview(!selectedSiteId);
  (0,_utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_15__.usePreviewBridgeInit)(iframeRef);

  // Sync data with preview
  (0,_utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_15__.useColorPreviewSync)({
    selectedColorScheme,
    colorSchemes,
    customColors
  });

  // When a predefined color scheme is selected, populate customColors with its colors
  // so they can be applied via apply_color_customizations in PHP
  // When switching to custom, clear customColors so they can be regenerated from primary color
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (selectedColorScheme === 'custom') {
      if (_utils_is_botiga__WEBPACK_IMPORTED_MODULE_16__["default"]) {
        return;
      }

      // Clear customColors when switching to custom mode
      // CustomColorsControl will regenerate them from the primary color
      setCustomColors({});
    } else if (selectedColorScheme && colorSchemes.length > 0) {
      const scheme = colorSchemes.find(s => s.id === selectedColorScheme);
      if (scheme && scheme.colors) {
        setCustomColors(scheme.colors);
      }
    }
  }, [selectedColorScheme, colorSchemes]);
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    if (!_utils_is_botiga__WEBPACK_IMPORTED_MODULE_16__["default"]) {
      return;
    }
    let colors = null;
    if (selectedColorScheme === 'custom') {
      colors = customColors;
    } else if (selectedColorScheme && colorSchemes.length > 0) {
      const scheme = colorSchemes.find(item => item.id === selectedColorScheme);
      if (scheme?.colors) {
        colors = scheme.colors;
      }
    }
    if (!colors || 0 === Object.keys(colors).length) {
      _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_17__["default"].resetCustomCss('atss-botiga-non-variable-colors');
      return;
    }
    const non_variable_css = (0,_data_botiga_non_variable_color_rules__WEBPACK_IMPORTED_MODULE_18__.buildBotigaNonVariableCss)(colors);
    const scoped_variable_css = (0,_data_botiga_non_variable_color_rules__WEBPACK_IMPORTED_MODULE_18__.buildBotigaScopedVariableOverrideCss)(colors);
    const css = [scoped_variable_css, non_variable_css].filter(Boolean).join('\n\n');
    if (!css) {
      _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_17__["default"].resetCustomCss('atss-botiga-non-variable-colors');
      return;
    }
    _utils_preview_bridge__WEBPACK_IMPORTED_MODULE_17__["default"].updateCustomCss(css, 'atss-botiga-non-variable-colors');
  }, [selectedColorScheme, colorSchemes, customColors]);
  (0,_utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_15__.useLogoPreviewSync)(siteLogo, logoHeight);
  (0,_utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_15__.useLogoHeightPreviewSync)(logoHeight);
  (0,_utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_15__.useSiteTitlePreviewSync)(siteTitle, showSiteTitle, siteLogo);
  (0,_utils_use_preview_sync__WEBPACK_IMPORTED_MODULE_15__.useTypographyPreviewSync)(selectedTypographyPair, typographyPairs);

  // Get the site data and preview URL
  const previewUrl = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
    if (selectedSiteId) {
      const site = (0,_data_starter_sites__WEBPACK_IMPORTED_MODULE_5__.getStarterSiteById)(selectedSiteId);
      if (site && site.preview) {
        let url = site.preview;

        // If builder is Gutenberg, append -gb to the URL slug
        if (builder === 'gutenberg') {
          // Clean up double dashes in URL
          if (selectedSiteId !== 'resume') {
            url = url.replace(/--/g, '-');
          }
          if (_utils_is_botiga__WEBPACK_IMPORTED_MODULE_16__["default"]) {
            // Leave early, if Botiga is in use.
            return url;
          }
          // Transform: https://demo.athemes.com/sydney-main/ → https://demo.athemes.com/sydney-main-gb/
          url = url.replace(/\/([^\/\?]+)(\/)?(\?.*)?$/, '/$1-gb$2$3');
          if (selectedSiteId === 'cafe') {
            // Special case for Cafe template
            url = 'https://demo.athemes.com/sp-cafe-gb/';
          }
          if (selectedSiteId === 'author') {
            // Special case for Author template
            url = 'https://demo.athemes.com/sp-author-gb/';
          }
        }
        return url;
      }
    }
    // No starter selected — show user's own site
    return window.atssOnboarding?.homeUrl || window.location.origin;
  }, [selectedSiteId, builder]);

  // Add preconnect hints for faster iframe loading
  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
    (0,_utils_preload_helpers__WEBPACK_IMPORTED_MODULE_13__.addPreconnectHints)(previewUrl);
  }, [previewUrl]);

  // Handle logo change
  const handleLogoChange = newLogo => {
    setSiteLogo(newLogo);

    // If a logo is set, deactivate site title by default (per requirements)
    if (newLogo.url) {
      setShowSiteTitle(false);
    } else {
      setShowSiteTitle(true);
    }
  };

  // Handle iframe load - also prefetch pages for the next step
  const handleIframeLoad = async () => {
    setIsIframeLoading(false);

    // Hide admin bar in local preview for a cleaner look
    if (!selectedSiteId) {
      try {
        const doc = iframeRef.current?.contentDocument;
        const adminBar = doc?.getElementById('wpadminbar');
        if (adminBar) {
          adminBar.remove();
        }
        if (doc?.documentElement) {
          doc.documentElement.style.setProperty('margin-top', '0', 'important');
        }
        if (doc?.body) {
          doc.body.classList.remove('admin-bar');
          doc.body.style.setProperty('margin-top', '0', 'important');
        }
      } catch (e) {
        // Cross-origin fallback — ignore
      }
    }

    // Prefetch pages for the Pages step if not already fetched for this site
    // Note: prefetchedPages are cleared when design changes (in Design.js)
    if (!prefetchedPages && selectedSiteId) {
      try {
        const pagesData = await (0,_utils_api__WEBPACK_IMPORTED_MODULE_14__.getDemoPages)(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);
        });

        // Store in context for Pages step
        setPrefetchedPages(filteredPages);

        // Add preconnect hints for faster iframe loading
        (0,_utils_preload_helpers__WEBPACK_IMPORTED_MODULE_13__.addPagePreconnectHints)(filteredPages);
      } catch (err) {
        // Silently fail - Pages step will fetch if needed
        // eslint-disable-next-line no-console
        console.log('Prefetch pages failed (will retry on Pages step):', err);
      }
    }
  };

  // Handle continue - save customize data to wizard context
  const handleContinue = () => {
    // Get the selected typography pair to extract font names
    const selectedPair = typographyPairs.find(pair => pair.id === selectedTypographyPair);
    onContinue({
      siteLogo,
      logoHeight,
      showSiteTitle,
      selectedColorScheme,
      customColors,
      customPrimaryColor,
      selectedTypographyPair,
      headingFont: selectedPair?.headingFont?.family || '',
      bodyFont: selectedPair?.bodyFont?.family || '',
      cleanInstall
    });
  };
  const themeText = {
    siteLogo: _utils_is_botiga__WEBPACK_IMPORTED_MODULE_16__["default"] ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Upload Site Logo', 'athemes-starter-sites') : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Upload Logo', 'athemes-starter-sites'),
    siteLogoSize: _utils_is_botiga__WEBPACK_IMPORTED_MODULE_16__["default"] ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Logo Width', 'athemes-starter-sites') : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Logo Height', 'athemes-starter-sites'),
    siteLogoSizeMin: _utils_is_botiga__WEBPACK_IMPORTED_MODULE_16__["default"] ? 0 : 30,
    siteLogoSizeMax: _utils_is_botiga__WEBPACK_IMPORTED_MODULE_16__["default"] ? 500 : 125
  };
  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsxs)("div", {
    className: "atss-onboarding-wizard__step-wrapper flex",
    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsxs)("div", {
      className: "atss-onboarding-wizard__step atss-onboarding-wizard__step--customize",
      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsxs)("main", {
        className: "atss-onboarding-wizard__step-body",
        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Controls_MediaUploadControl__WEBPACK_IMPORTED_MODULE_8__["default"], {
          label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Site Logo', 'athemes-starter-sites'),
          value: siteLogo.url,
          id: siteLogo.id,
          onChange: handleLogoChange,
          buttonText: themeText.siteLogo
        }), siteLogo.url && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.RangeControl, {
          label: themeText.siteLogoSize,
          value: logoHeight,
          onChange: setLogoHeight,
          min: themeText.siteLogoSizeMin,
          max: themeText.siteLogoSizeMax,
          className: "atss-control"
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.TextControl, {
          label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Site Title', 'athemes-starter-sites'),
          className: "atss-control atss-site-title-control",
          value: siteTitle,
          onChange: setSiteTitle,
          __next40pxDefaultSize: true,
          __nextHasNoMarginBottom: true
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ToggleControl, {
          label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Show site title', 'athemes-starter-sites'),
          className: "atss-control",
          checked: showSiteTitle,
          onChange: setShowSiteTitle,
          __nextHasNoMarginBottom: true
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Controls_CustomColorsControl__WEBPACK_IMPORTED_MODULE_9__["default"], {
          label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Color Scheme', 'athemes-starter-sites'),
          colorSchemes: colorSchemes,
          value: selectedColorScheme,
          onChange: setSelectedColorScheme,
          onCustomColors: setCustomColors,
          customColors: customColors,
          customPrimaryColor: customPrimaryColor,
          onPrimaryColorChange: setCustomPrimaryColor,
          themeName: themeName
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Controls_TypographyControl__WEBPACK_IMPORTED_MODULE_10__["default"], {
          label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Fonts', 'athemes-starter-sites'),
          typographyPairs: typographyPairs,
          value: selectedTypographyPair,
          onChange: setSelectedTypographyPair
        }), hasExistingStarter && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.ToggleControl, {
          label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Clean Install', 'athemes-starter-sites'),
          className: "atss-control",
          checked: cleanInstall,
          onChange: setCleanInstall,
          help: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('This option will remove the previous imported content and will perform a fresh and clean install.', 'athemes-starter-sites'),
          __nextHasNoMarginBottom: true
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Controls_DevicePreviewControl__WEBPACK_IMPORTED_MODULE_11__["default"], {
          label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Preview', 'athemes-starter-sites'),
          value: previewDevice,
          onChange: setPreviewDevice
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Controls_CustomizeUpsell__WEBPACK_IMPORTED_MODULE_12__["default"], {
          isVisible: isProTemplate,
          upgradeUrl: window.atssOnboarding?.upgradeUrl || undefined
        })]
      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Layout__WEBPACK_IMPORTED_MODULE_3__.Footer, {
        showBack: true,
        showSkip: false,
        continueText: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Continue', 'athemes-starter-sites'),
        onBack: onBack,
        onContinue: handleContinue,
        continueDisabled: isProTemplate,
        continueLoading: navigationLoading,
        continueError: navigationError
      })]
    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)("div", {
      className: "atss-onboarding-wizard__preview",
      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsxs)("div", {
        className: `atss-onboarding-wizard__preview-inner atss-onboarding-wizard__preview-iframe--${previewDevice}`,
        children: [isIframeLoading && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)("div", {
          className: "atss-onboarding-wizard__preview-loading",
          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Layout__WEBPACK_IMPORTED_MODULE_3__.Spinner, {})
        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)("iframe", {
          ref: iframeRef,
          id: "demo-preview",
          src: `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}atss_preview=1`,
          title: "Preview",
          onLoad: handleIframeLoad,
          style: {
            opacity: isIframeLoading ? 0 : 1
          },
          className: `atss-onboarding-wizard__preview-iframe`
        })]
      })
    })]
  });
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Customize);

/***/ }),

/***/ "./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/color-utils.js":
/*!************************************************!*\
  !*** ./v2/onboarding/src/utils/color-utils.js ***!
  \************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   calculateContrastRatio: () => (/* binding */ calculateContrastRatio),
/* harmony export */   darken: () => (/* binding */ darken),
/* harmony export */   generateColorScheme: () => (/* binding */ generateColorScheme),
/* harmony export */   hexToHSL: () => (/* binding */ hexToHSL),
/* harmony export */   hslToHex: () => (/* binding */ hslToHex),
/* harmony export */   lighten: () => (/* binding */ lighten)
/* harmony export */ });
/**
 * Color utility functions for generating color schemes.
 *
 * @package Athemes Starter Sites
 */

/**
 * Convert hex color to HSL.
 *
 * @param {string} hex Hex color string (e.g., '#333333').
 * @return {Object} HSL object with h, s, l properties.
 */
function hexToHSL(hex) {
  // Remove the hash if present
  hex = hex.replace(/^#/, '');

  // Parse hex to RGB
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s;
  const l = (max + min) / 2;
  if (max === min) {
    h = s = 0; // achromatic
  } else {
    const d = max - min;
    s = 0.5 < l ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    h /= 6;
  }
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

/**
 * Convert HSL to hex color.
 *
 * @param {number} h Hue (0-360).
 * @param {number} s Saturation (0-100).
 * @param {number} l Lightness (0-100).
 * @return {string} Hex color string.
 */
function hslToHex(h, s, l) {
  h = h / 360;
  s = s / 100;
  l = l / 100;
  let r, g, b;
  if (0 === s) {
    r = g = b = l; // achromatic
  } else {
    const hue2rgb = (p, q, t) => {
      if (0 > t) {
        t += 1;
      }
      if (1 < t) {
        t -= 1;
      }
      if (t < 1 / 6) {
        return p + (q - p) * 6 * t;
      }
      if (t < 1 / 2) {
        return q;
      }
      if (t < 2 / 3) {
        return p + (q - p) * (2 / 3 - t) * 6;
      }
      return p;
    };
    const q = 0.5 > l ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    r = hue2rgb(p, q, h + 1 / 3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1 / 3);
  }
  const toHex = x => {
    const hex = Math.round(x * 255).toString(16);
    return 1 === hex.length ? '0' + hex : hex;
  };
  return '#' + toHex(r) + toHex(g) + toHex(b);
}

/**
 * Lighten a color by increasing its lightness.
 *
 * @param {string} hex    Hex color string.
 * @param {number} amount Amount to lighten (0-100).
 * @return {string} Lightened hex color.
 */
function lighten(hex, amount) {
  const hsl = hexToHSL(hex);
  hsl.l = Math.min(100, hsl.l + amount);
  return hslToHex(hsl.h, hsl.s, hsl.l);
}

/**
 * Darken a color by decreasing its lightness.
 *
 * @param {string} hex    Hex color string.
 * @param {number} amount Amount to darken (0-100).
 * @return {string} Darkened hex color.
 */
function darken(hex, amount) {
  const hsl = hexToHSL(hex);
  hsl.l = Math.max(0, hsl.l - amount);
  return hslToHex(hsl.h, hsl.s, hsl.l);
}

/**
 * Calculate relative luminance for contrast ratio.
 *
 * @param {string} hex Hex color string.
 * @return {number} Relative luminance.
 */
function getRelativeLuminance(hex) {
  hex = hex.replace(/^#/, '');
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;
  const toLinear = c => {
    return 0.03928 >= c ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  };
  const rLinear = toLinear(r);
  const gLinear = toLinear(g);
  const bLinear = toLinear(b);
  return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
}

/**
 * Calculate contrast ratio between two colors.
 *
 * @param {string} color1 First hex color.
 * @param {string} color2 Second hex color.
 * @return {number} Contrast ratio.
 */
function calculateContrastRatio(color1, color2) {
  const lum1 = getRelativeLuminance(color1);
  const lum2 = getRelativeLuminance(color2);
  const lighter = Math.max(lum1, lum2);
  const darker = Math.min(lum1, lum2);
  return (lighter + 0.05) / (darker + 0.05);
}

/**
 * Generate a complete 9-color scheme from a primary color.
 *
 * @param {string} primaryColor Hex color for the primary color.
 * @param {string} themeName    Theme name (sydney, botiga, etc.) to generate proper CSS variable names.
 * @return {Object} Object containing colors array and contrast warnings.
 */
function generateColorScheme(primaryColor, themeName = 'sydney') {
  const hsl = hexToHSL(primaryColor);
  const primaryHue = hsl.h;
  const primaryLightness = hsl.l;

  // Generate the color values
  const colorValues = {
    1: primaryColor,
    // Primary Color - as-is
    2: 20 > primaryLightness ? lighten(primaryColor, 15) : darken(primaryColor, 10),
    // Hover Color
    3: hslToHex(primaryHue, 15, 20),
    // Body Text Color
    4: hslToHex(primaryHue, 20, 12),
    // General Headings Color
    5: hslToHex(primaryHue, 10, 55),
    // Smaller Text/Meta
    6: hslToHex(primaryHue, 20, 10),
    // Dark Backgrounds
    7: hslToHex(primaryHue, 20, 97),
    // Light Backgrounds
    8: hslToHex(primaryHue, 12, 87),
    // Border Color
    9: '#ffffff' // Site Background
  };

  // Generate the 9 colors with proper CSS variable names for the theme
  // Ensure theme name is lowercase for CSS variables
  const themeSlug = themeName.toLowerCase();
  let colors = {};
  if ('botiga' === themeSlug) {
    colors = {
      '--bt-color-button-bg': colorValues[1],
      '--bt-color-button-border': colorValues[1],
      '--bt-color-link-default': colorValues[1],
      '--bt-color-button-bg-hover': colorValues[2],
      '--bt-color-button-border-hover': colorValues[2],
      '--bt-color-link-hover': colorValues[2],
      '--bt-color-post-title': colorValues[4],
      '--bt-color-forms-text': colorValues[4],
      '--bt-color-loop-post-title': colorValues[4],
      '--bt-color-heading-1': colorValues[4],
      '--bt-color-heading-2': colorValues[4],
      '--bt-color-heading-3': colorValues[4],
      '--bt-color-heading-4': colorValues[4],
      '--bt-color-heading-5': colorValues[4],
      '--bt-color-heading-6': colorValues[4],
      '--bt-color-menu-text': colorValues[4],
      '--bt-color-body-text': colorValues[3],
      '--bt-color-forms-placeholder': colorValues[3],
      '--bt-color-post-meta': colorValues[5],
      '--bt-color-loop-post-meta': colorValues[5],
      '--bt-color-loop-post-text': colorValues[3],
      '--bt-color-forms-borders': colorValues[8],
      '--bt-color-content-cards-bg': colorValues[7],
      '--bt-color-bg': colorValues[9],
      '--bt-color-button': colorValues[9],
      '--bt-color-button-hover': colorValues[9],
      '--bt-color-forms-background': colorValues[9],
      '--bt-color-menu-bg': colorValues[9]
    };
  } else {
    for (let i = 1; 9 >= i; i++) {
      colors[`--${themeSlug}-global-color-${i}`] = colorValues[i];
    }
  }

  // Calculate contrast ratios and generate warnings
  const warnings = [];
  const backgroundColor = colorValues[9];

  // Check primary color contrast (color 1)
  const primaryContrast = calculateContrastRatio(colorValues[1], backgroundColor);
  if (4.5 > primaryContrast) {
    warnings.push({
      color: 'botiga' === themeSlug ? '--bt-color-button-bg' : `--${themeSlug}-global-color-1`,
      message: 'Primary color may not have sufficient contrast on light backgrounds. Consider choosing a darker color.',
      ratio: primaryContrast.toFixed(2)
    });
  }

  // Check body text contrast (color 3)
  const bodyTextContrast = calculateContrastRatio(colorValues[3], backgroundColor);
  if (4.5 > bodyTextContrast) {
    warnings.push({
      color: 'botiga' === themeSlug ? '--bt-color-body-text' : `--${themeSlug}-global-color-3`,
      message: 'Body text color may not have sufficient contrast on light backgrounds. Consider choosing a darker primary color.',
      ratio: bodyTextContrast.toFixed(2)
    });
  }

  // Check headings contrast (color 4)
  const headingsContrast = calculateContrastRatio(colorValues[4], backgroundColor);
  if (4.5 > headingsContrast) {
    warnings.push({
      color: 'botiga' === themeSlug ? '--bt-color-heading-1' : `--${themeSlug}-global-color-4`,
      message: 'Heading color may not have sufficient contrast on light backgrounds. Consider choosing a darker primary color.',
      ratio: headingsContrast.toFixed(2)
    });
  }
  return {
    colors,
    warnings
  };
}

/***/ }),

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

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   ACCOUNT_URL: () => (/* binding */ ACCOUNT_URL),
/* harmony export */   ATHEMES_BASE_URL: () => (/* binding */ ATHEMES_BASE_URL),
/* harmony export */   DEFAULT_UPGRADE_URL: () => (/* binding */ DEFAULT_UPGRADE_URL),
/* harmony export */   DOCUMENTATION_URL: () => (/* binding */ DOCUMENTATION_URL),
/* harmony export */   FACEBOOK_GROUP_URL: () => (/* binding */ FACEBOOK_GROUP_URL)
/* harmony export */ });
/**
 * Configuration constants for the onboarding wizard.
 *
 * @package Athemes Starter Sites
 */

/**
 * Base URL for Athemes website.
 *
 * @type {string}
 */
const ATHEMES_BASE_URL = 'https://athemes.com';

/**
 * Account dashboard URL.
 * This is the same for all products.
 *
 * @type {string}
 */
const ACCOUNT_URL = `${ATHEMES_BASE_URL}/account/`;

/**
 * Default upgrade URL.
 *
 * @type {string}
 */
const DEFAULT_UPGRADE_URL = `${ATHEMES_BASE_URL}/`;

/**
 * Documentation URL.
 * The theme name is passed as a parameter to the documentation URL.
 *
 * @type {string}
 */
const DOCUMENTATION_URL = `https://docs.athemes.com/documentation/${window.atssOnboarding?.themeName}`;

/**
 * Facebook Group URL.
 *
 * @type {string}
 */
const FACEBOOK_GROUP_URL = 'https://www.facebook.com/groups/athemes/';

/***/ }),

/***/ "./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_Customize_js.js.map?ver=49a9209fa466da7ae47c