import { shallow } from 'zustand/shallow';
import { useEffect, useState, useMemo, useRef } from 'react';
import { isPresent, filterBy, hyphenate, noop } from '@bigbinary/neeto-cist';
import { useLocation, useHistory } from 'react-router-dom';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import classnames from 'classnames';
import useStateWithDependency from '@bigbinary/neeto-commons-frontend/react-utils/useStateWithDependency';
import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
import Button from '@bigbinary/neetoui/Button';
import Typography from '@bigbinary/neetoui/Typography';
import { toPairs, mergeDeepLeft, isEmpty, mergeLeft } from 'ramda';
import { useTranslation } from 'react-i18next';
import Container from './Container.js';
import Header from './Header.js';
import Select from '@bigbinary/neetoui/Select';
import Codeblock from './Codeblock.js';
import { t } from 'i18next';
import Input from '@bigbinary/neetoui/Input';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import Delete from '@bigbinary/neeto-icons/Delete';
import Plus from '@bigbinary/neeto-icons/Plus';
import Label from '@bigbinary/neetoui/Label';
import HelpPopover from './HelpPopover.js';
import { withImmutableActions, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
import { create } from 'zustand';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import Checkbox from '@bigbinary/neetoui/Checkbox';
import ColorPicker from '@bigbinary/neetoui/ColorPicker';
import Switch from '@bigbinary/neetoui/Switch';
import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
import Spinner from '@bigbinary/neetoui/Spinner';
import BrowserPreview from './BrowserPreview.js';
import { n } from './inject-css-C2dztUxs.js';
import './index-DAYCJu79.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './Breadcrumbs.js';
import '@bigbinary/neeto-commons-frontend/utils/general';
import './MoreDropdown.js';
import '@bigbinary/neeto-icons/MenuHorizontal';
import '@bigbinary/neeto-icons/MenuVertical';
import '@bigbinary/neetoui/Dropdown';
import '@bigbinary/neetoui/Tooltip';
import './Search.js';
import '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
import '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
import '@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect';
import '@bigbinary/neeto-icons/Search';
import '@bigbinary/neeto-commons-frontend/utils';
import '@bigbinary/neeto-icons/Help';
import '@bigbinary/neetoui/Popover';
import 'react-syntax-highlighter/dist/esm/prism-light.js';
import 'react-syntax-highlighter/dist/esm/styles/prism';
import './CopyToClipboardButton.js';
import '@bigbinary/neeto-icons/Copy';
import '@bigbinary/neeto-icons/Check';

var FLOATING_BUTTON_POSITIONS = [{
  label: t("neetoMolecules.productEmbed.floatingPopup.position.bottomLeft"),
  value: "bottomLeft"
}, {
  label: t("neetoMolecules.productEmbed.floatingPopup.position.bottomRight"),
  value: "bottomRight"
}];
var INITIAL_QUERY_PARAM = {
  name: "",
  value: ""
};

/** @type {import("neetocommons/react-utils").ZustandStoreHook} */
var useProductEmbedStore = create(withImmutableActions(function (set) {
  return {
    isQueryParamsEnabled: false,
    queryParams: [INITIAL_QUERY_PARAM],
    queryParamsProps: {
      helpPopoverProps: {},
      label: "",
      keyPlaceholder: "",
      valuePlaceholder: "",
      addButtonLabel: ""
    },
    setProductEmbedState: set,
    setQueryParams: function setQueryParams(queryParams) {
      return set({
        queryParams: queryParams
      });
    }
  };
}));

var camelCasedAppName$1 = globalProps.appName.replace(/^neeto/i, "neeto");
var embedBaseScript = function embedBaseScript(embedScriptLink) {
  return "<script>window.".concat(camelCasedAppName$1, " = window.").concat(camelCasedAppName$1, " || { embed: function(){(").concat(camelCasedAppName$1, ".q=").concat(camelCasedAppName$1, ".q||[]).push(arguments)} };</script>\n  <script async\n    src=\"").concat(embedScriptLink, "\">\n  </script>");
};
var embedEnv$1 = function embedEnv() {
  return globalProps.railsEnv !== "production" ? "\n".concat(TAB_STRING, "  env: \"").concat(globalProps.railsEnv, "\",") : "";
};
var embedQueryParam$1 = function embedQueryParam(queryParams) {
  return queryParams ? "\n".concat(TAB_STRING, "  queryParams: ").concat(queryParams, ",") : "";
};
var parseExtraArgs$1 = function parseExtraArgs(extraArgs) {
  return toPairs(extraArgs).map(function (_ref) {
    var _ref2 = _slicedToArray(_ref, 2),
      key = _ref2[0],
      value = _ref2[1];
    return "\n".concat(TAB_STRING, "  ").concat(key, ": \"").concat(value, "\"");
  });
};
var inlineEmbedCode$1 = function inlineEmbedCode(_ref3) {
  var customization = _ref3.customization,
    id = _ref3.id,
    embedScriptLink = _ref3.embedScriptLink,
    extraArgs = _ref3.extraArgs,
    inlineWrapperStyle = _ref3.inlineWrapperStyle,
    iframeStyle = _ref3.iframeStyle,
    queryParams = _ref3.queryParams;
  var elementSelector = customization.elementSelector,
    dynamicHeight = customization.dynamicHeight;
  var processedInlineWrapperStyle = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? removeHeightFromStyle(inlineWrapperStyle) : inlineWrapperStyle;
  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"").concat(processedInlineWrapperStyle, "\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: \"").concat(iframeStyle, "\", ").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
};
var floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref4) {
  var customization = _ref4.customization,
    id = _ref4.id,
    embedScriptLink = _ref4.embedScriptLink,
    extraArgs = _ref4.extraArgs,
    queryParams = _ref4.queryParams;
  var btnTextColor = customization.btnTextColor,
    showIcon = customization.showIcon,
    btnText = customization.btnText,
    btnPosition = customization.btnPosition,
    btnColor = customization.btnColor,
    icon = customization.icon;
  return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"floatingPopup\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      styles: {\n        btnTextColor: \"").concat(btnTextColor, "\",\n        btnPosition: \"").concat(btnPosition, "\",\n        btnColor: \"").concat(btnColor, "\",\n        btnText: \"").concat(btnText, "\", ").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n      },").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
};
var elementPopupEmbedCode$1 = function elementPopupEmbedCode(_ref5) {
  var customization = _ref5.customization,
    id = _ref5.id,
    embedScriptLink = _ref5.embedScriptLink,
    extraArgs = _ref5.extraArgs,
    queryParams = _ref5.queryParams;
  var elementSelector = customization.elementSelector;
  return "\n  <!-- This is a demo button, you can use any element on your website instead. -->\n  <!-- <button id=\"".concat(elementSelector, "\">Click to open popup</button> -->\n\n  <!-- ").concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"elementClick\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
};
var iframeEmbedCode$1 = function iframeEmbedCode(_ref6) {
  var id = _ref6.id,
    customization = _ref6.customization,
    queryParams = _ref6.queryParams,
    embedScriptLink = _ref6.embedScriptLink;
  var height = customization.height,
    width = customization.width,
    iframeTitle = customization.iframeTitle,
    iframeUrl = customization.iframeUrl,
    dynamicHeight = customization.dynamicHeight;
  var iframeSrc = buildIframeURL$1({
    id: id,
    iframeUrl: iframeUrl,
    queryParams: queryParams
  });
  var heightAttribute = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? "" : "\n".concat(TAB_STRING, "height=\"").concat(height, "\"");
  return "\n  <!-- ".concat(globalProps.appName, " iframe embed code begins -->\n  ").concat(dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value && embedScriptLink ? embedBaseScript(embedScriptLink) : "", "\n  <iframe\n    allowfullscreen").concat(heightAttribute, "\n    width=\"").concat(width, "\"\n    frameborder=\"0\"\n    title=\"").concat(iframeTitle, "\"\n    src=\"").concat(iframeSrc, "\"\n  ></iframe>\n  <!-- ").concat(globalProps.appName, " iframe embed code ends -->");
};
var htmlCodeGenerators = {
  inline: inlineEmbedCode$1,
  floatingPopup: floatingPopupEmbedCode$1,
  elementPopup: elementPopupEmbedCode$1,
  iframe: iframeEmbedCode$1
};

var camelCasedAppName = globalProps.appName.replace(/^neeto/i, "neeto");
var embedFunctionName = "embed".concat(globalProps.appName);
var embedScript = function embedScript(scriptLink) {
  return "const embedScript = document.createElement(\"script\");\n      embedScript.type = \"module\";\n      embedScript.src = \"".concat(scriptLink, "\";\n      embedScript.async = true;\n");
};
var cleanupFunction = "\n      return () => {\n        embedScript.onload = null;\n        if(window.".concat(camelCasedAppName, ") window.").concat(camelCasedAppName, ".destroy();\n        document.body.removeChild(embedScript);\n      };");
var embedEnv = function embedEnv() {
  return globalProps.railsEnv !== "production" ? "\n".concat(TAB_STRING).concat(TAB_STRING, "  env: \"").concat(globalProps.railsEnv, "\",") : "";
};
var embedQueryParam = function embedQueryParam(queryParams) {
  return queryParams ? "\n".concat(TAB_STRING).concat(TAB_STRING, "  queryParams: ").concat(queryParams, ",") : "";
};
var parseExtraArgs = function parseExtraArgs(extraArgs) {
  return toPairs(extraArgs).map(function (_ref) {
    var _ref2 = _slicedToArray(_ref, 2),
      key = _ref2[0],
      value = _ref2[1];
    return "\n".concat(TAB_STRING).concat(TAB_STRING).concat(key, ": \"").concat(value, "\"");
  });
};
var parseInlineStyle = function parseInlineStyle(styleString) {
  return styleString.split(";").map(function (rule) {
    var _rule$split$map = rule.split(":").map(function (s) {
        return s.trim();
      }),
      _rule$split$map2 = _slicedToArray(_rule$split$map, 2),
      key = _rule$split$map2[0],
      value = _rule$split$map2[1];
    return key && value ? "".concat(key, ": \"").concat(value, "\"") : null;
  }).filter(Boolean).join(", ");
};
var inlineEmbedCode = function inlineEmbedCode(_ref3) {
  var customization = _ref3.customization,
    id = _ref3.id,
    embedScriptLink = _ref3.embedScriptLink,
    extraArgs = _ref3.extraArgs,
    inlineWrapperStyle = _ref3.inlineWrapperStyle,
    iframeStyle = _ref3.iframeStyle,
    queryParams = _ref3.queryParams;
  var elementSelector = customization.elementSelector,
    dynamicHeight = customization.dynamicHeight;
  var processedInlineWrapperStyle = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? removeHeightFromStyle(inlineWrapperStyle) : inlineWrapperStyle;
  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"inline\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",\n          styles: \"").concat(iframeStyle, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return (\n      <div\n        id=\"inline-embed-container\"\n        style={{ ").concat(parseInlineStyle(processedInlineWrapperStyle), " }}\n      />\n    );\n  };");
};
var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
  var customization = _ref4.customization,
    id = _ref4.id,
    embedScriptLink = _ref4.embedScriptLink,
    extraArgs = _ref4.extraArgs,
    queryParams = _ref4.queryParams;
  var btnTextColor = customization.btnTextColor,
    showIcon = customization.showIcon,
    btnText = customization.btnText,
    btnPosition = customization.btnPosition,
    btnColor = customization.btnColor,
    icon = customization.icon;
  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"floatingPopup\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          styles: {\n            btnTextColor: \"").concat(btnTextColor, "\",\n            btnPosition: \"").concat(btnPosition, "\",\n            btnColor: \"").concat(btnColor, "\",\n            btnText: \"").concat(btnText, "\",").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n          },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <div />;\n  };");
};
var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
  var customization = _ref5.customization,
    id = _ref5.id,
    embedScriptLink = _ref5.embedScriptLink,
    extraArgs = _ref5.extraArgs,
    queryParams = _ref5.queryParams;
  var elementSelector = customization.elementSelector;
  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"elementClick\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <button id=\"").concat(elementSelector, "\">Click to open popup</button>;\n  };");
};
var iframeEmbedCode = function iframeEmbedCode(_ref6) {
  var customization = _ref6.customization,
    id = _ref6.id,
    queryParams = _ref6.queryParams;
  var height = customization.height,
    width = customization.width,
    iframeTitle = customization.iframeTitle,
    iframeUrl = customization.iframeUrl,
    dynamicHeight = customization.dynamicHeight;
  var iframeSrc = buildIframeURL$1({
    id: id,
    iframeUrl: iframeUrl,
    queryParams: queryParams
  });
  var heightAttribute = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? "" : "\n".concat(TAB_STRING).concat(TAB_STRING, "  height=\"").concat(height, "\"");
  return "\n  const App = () => {\n    return (\n      <>\n        {/* ".concat(globalProps.appName, " iframe embed code begins */}\n        <iframe\n          allowFullScreen").concat(heightAttribute, "\n          width=\"").concat(width, "\"\n          frameBorder=\"0\"\n          title=\"").concat(iframeTitle, "\"\n          src=\"").concat(iframeSrc, "\"\n        ></iframe>\n        {/* ").concat(globalProps.appName, " iframe embed code ends */}\n      </>\n    );\n  };\n");
};
var reactCodeGenerators = {
  inline: inlineEmbedCode,
  floatingPopup: floatingPopupEmbedCode,
  elementPopup: elementPopupEmbedCode,
  iframe: iframeEmbedCode
};

var _excluded$1 = ["selectedLanguage", "type"];
function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var buildQueryParams$1 = function buildQueryParams() {
  var customization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var existingQueryParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var activeOptions = Object.keys(SWITCH_OPTIONS).reduce(function (acc, key) {
    var _customization$key;
    var value = (_customization$key = customization[key]) === null || _customization$key === void 0 ? void 0 : _customization$key.value;
    if (value) acc[key] = value;
    return acc;
  }, {});
  var mergedQueryParams = _objectSpread$6(_objectSpread$6({}, existingQueryParams), activeOptions);
  if (isEmpty(mergedQueryParams)) return "";
  return JSON.stringify(mergedQueryParams, null, 2).replace(/\n/g, " ").replace(/\s\s+/g, " ");
};
var generateCode = function generateCode(options) {
  var _embeddedCodeOptions$, _reactCodeGenerators$, _htmlCodeGenerators$t;
  var selectedLanguage = options.selectedLanguage,
    type = options.type,
    embeddedCodeOptions = _objectWithoutProperties(options, _excluded$1);
  var queryParams = ((_embeddedCodeOptions$ = embeddedCodeOptions.customization) === null || _embeddedCodeOptions$ === void 0 ? void 0 : _embeddedCodeOptions$.queryParams) || {};
  var customization = embeddedCodeOptions.customization || {};
  var codeOptions = _objectSpread$6(_objectSpread$6({}, embeddedCodeOptions), {}, {
    queryParams: buildQueryParams$1(customization, queryParams)
  });
  return selectedLanguage === "react" ? (_reactCodeGenerators$ = reactCodeGenerators[type]) === null || _reactCodeGenerators$ === void 0 ? void 0 : _reactCodeGenerators$.call(reactCodeGenerators, codeOptions) : (_htmlCodeGenerators$t = htmlCodeGenerators[type]) === null || _htmlCodeGenerators$t === void 0 ? void 0 : _htmlCodeGenerators$t.call(htmlCodeGenerators, codeOptions);
};
var buildDefaultCustomization = function buildDefaultCustomization(defaultCustomizations) {
  return mergeDeepLeft(defaultCustomizations, DEFAULT_CUSTOMIZATION);
};
var buildQueryParamsFromInputFields = function buildQueryParamsFromInputFields(inputFields) {
  var filteredInputFields = inputFields.filter(function (_ref) {
    var name = _ref.name,
      value = _ref.value;
    return name && value;
  });
  return filteredInputFields.reduce(function (queryParams, _ref2) {
    var name = _ref2.name,
      value = _ref2.value;
    queryParams[name] = value;
    return queryParams;
  }, {});
};
var toCamelCasedString = function toCamelCasedString(string) {
  return string === null || string === void 0 ? void 0 : string.replace(/[_-]+(\w)/g, function (_, nextChar) {
    return nextChar.toUpperCase();
  });
};
var buildIframeURL$1 = function buildIframeURL(_ref3) {
  var id = _ref3.id,
    iframeUrl = _ref3.iframeUrl,
    queryParams = _ref3.queryParams;
  var url = new URL(iframeUrl || "".concat(location.origin, "/embed/").concat(id));
  if (!queryParams) return url.toString();
  var parsedQueryParams = JSON.parse(queryParams);
  Object.entries(parsedQueryParams).forEach(function (_ref4) {
    var _ref5 = _slicedToArray(_ref4, 2),
      key = _ref5[0],
      value = _ref5[1];
    url.searchParams.append(key, value);
  });
  return url.toString();
};
var removeHeightFromStyle = function removeHeightFromStyle(style) {
  return style.replace(/height\s*:\s*[^;]+;?\s*/g, "").trim();
};

function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DynamicQueryParams = function DynamicQueryParams(_ref) {
  var updateCustomization = _ref.updateCustomization;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useProductEmbedStore = useProductEmbedStore(function (store) {
      return {
        queryParamsProps: store["queryParamsProps"],
        queryParams: store["queryParams"],
        setQueryParams: store["setQueryParams"]
      };
    }, shallow),
    queryParamsProps = _useProductEmbedStore.queryParamsProps,
    queryParams = _useProductEmbedStore.queryParams,
    setQueryParams = _useProductEmbedStore.setQueryParams;
  var handleAddQueryParam = function handleAddQueryParam() {
    setQueryParams([].concat(_toConsumableArray(queryParams), [INITIAL_QUERY_PARAM]));
  };
  var handleRemoveQueryParam = function handleRemoveQueryParam(index) {
    var newQueryParams = queryParams.filter(function (_, i) {
      return i !== index;
    });
    setQueryParams(newQueryParams);
  };
  var handleInputChange = function handleInputChange(index, field, value) {
    var newQueryParams = queryParams.map(function (param, i) {
      return i === index ? _objectSpread$5(_objectSpread$5({}, param), {}, _defineProperty({}, field, value)) : param;
    });
    setQueryParams(newQueryParams);
  };
  useEffect(function () {
    updateCustomization({
      queryParams: buildQueryParamsFromInputFields(queryParams)
    });
  }, [queryParams]);
  return /*#__PURE__*/jsxs("div", {
    children: [/*#__PURE__*/jsxs("div", {
      className: "mb-2 flex",
      "data-cy": "dynamic-query-params-label-container",
      children: [/*#__PURE__*/jsx(Label, {
        "data-cy": "dynamic-query-params-label",
        "data-testid": "dynamic-query-params-label",
        children: queryParamsProps.label || t("neetoMolecules.productEmbed.queryParam.label")
      }), isPresent(queryParamsProps.helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$5({
        className: "ms-1"
      }, queryParamsProps.helpPopoverProps))]
    }), queryParams.map(function (param, index) {
      return /*#__PURE__*/jsxs("div", {
        className: "mb-2 flex gap-1",
        children: [/*#__PURE__*/jsx(Input, {
          "data-cy": "dynamic-query-key-name-input",
          "data-testid": "dynamic-query-key-name-input",
          name: "queryParams.".concat(index, ".name"),
          value: param.name,
          placeholder: queryParamsProps.keyPlaceholder || t("neetoMolecules.productEmbed.queryParam.keyNamePlaceholder"),
          onChange: function onChange(e) {
            return handleInputChange(index, "name", e.target.value);
          }
        }), /*#__PURE__*/jsx(Input, {
          "data-cy": "dynamic-query-key-value-input",
          "data-testid": "dynamic-query-key-value-input",
          name: "queryParams.".concat(index, ".value"),
          value: param.value,
          placeholder: queryParamsProps.valuePlaceholder || t("neetoMolecules.productEmbed.queryParam.keyValuePlaceholder"),
          onChange: function onChange(e) {
            return handleInputChange(index, "value", e.target.value);
          }
        }), /*#__PURE__*/jsx(Button, {
          "data-cy": "dynamic-query-delete-button",
          icon: Delete,
          style: "text",
          onClick: function onClick() {
            return handleRemoveQueryParam(index);
          }
        })]
      }, index);
    }), /*#__PURE__*/jsx(Button, {
      className: "my-2",
      "data-cy": "dynamic-query-add-new-button",
      "data-testid": "dynamic-query-add-new-button",
      icon: Plus,
      iconPosition: "left",
      style: "link",
      label: queryParamsProps.addButtonLabel || t("neetoMolecules.productEmbed.queryParam.addQueryParam"),
      onClick: handleAddQueryParam
    })]
  });
};

var ElementPopup$1 = function ElementPopup(_ref) {
  var customization = _ref.customization,
    updateCustomization = _ref.updateCustomization,
    otherCustomizations = _ref.otherCustomizations;
  var elementSelector = customization.elementSelector;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useProductEmbedStore = useProductEmbedStore(function (store) {
      return {
        isQueryParamsEnabled: store["isQueryParamsEnabled"]
      };
    }, shallow),
    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
  useEffect(function () {
    if (isQueryParamsEnabled) return;
    updateCustomization({
      queryParams: undefined
    });
  }, []);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(Input, {
      className: "w-full",
      "data-cy": "element-id-input-field",
      "data-testid": "element-id-input-field",
      helpText: t("neetoMolecules.productEmbed.elementPopup.callout"),
      label: t("neetoMolecules.productEmbed.elementPopup.elementId"),
      value: elementSelector,
      error: !elementSelector && t("neetoMolecules.productEmbed.elementPopup.elementIdError"),
      onChange: function onChange(e) {
        return updateCustomization({
          elementSelector: e.target.value
        });
      }
    }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
      updateCustomization: updateCustomization
    })]
  });
};

var FloatingPopup$1 = function FloatingPopup(_ref) {
  var customization = _ref.customization,
    updateCustomization = _ref.updateCustomization,
    otherCustomizations = _ref.otherCustomizations;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useProductEmbedStore = useProductEmbedStore(function (store) {
      return {
        isQueryParamsEnabled: store["isQueryParamsEnabled"]
      };
    }, shallow),
    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
  var btnTextColor = customization.btnTextColor,
    showIcon = customization.showIcon,
    btnText = customization.btnText,
    btnPosition = customization.btnPosition,
    btnColor = customization.btnColor,
    icon = customization.icon;
  useEffect(function () {
    if (isQueryParamsEnabled) return;
    updateCustomization({
      queryParams: undefined
    });
  }, []);
  return /*#__PURE__*/jsxs("div", {
    className: "flex w-full flex-col gap-y-4",
    children: [/*#__PURE__*/jsx("div", {
      className: "flex flex-col gap-y-2",
      children: /*#__PURE__*/jsx(Input, {
        "data-cy": "button-text-input-field",
        "data-testid": "button-text-input-field",
        label: t("neetoMolecules.productEmbed.floatingPopup.button.text"),
        value: btnText,
        error: !btnText && t("neetoMolecules.productEmbed.floatingPopup.button.textError"),
        onChange: function onChange(e) {
          return updateCustomization({
            btnText: e.target.value
          });
        }
      })
    }), /*#__PURE__*/jsx("div", {
      className: "flex flex-col gap-y-2",
      children: /*#__PURE__*/jsx(Select, {
        "data-cy": "button-position-select-field",
        "data-testid": "button-position-select-field",
        label: t("neetoMolecules.productEmbed.floatingPopup.button.pos"),
        options: FLOATING_BUTTON_POSITIONS,
        value: btnPosition,
        getOptionValue: function getOptionValue(option) {
          return typeof option === "string" ? option : option.value;
        },
        onChange: function onChange(e) {
          return updateCustomization({
            btnPosition: e.value
          });
        }
      })
    }), /*#__PURE__*/jsxs("div", {
      className: "flex items-center justify-between gap-2",
      "data-cy": "button-color-label",
      children: [/*#__PURE__*/jsx(Label, {
        children: t("neetoMolecules.productEmbed.floatingPopup.button.color")
      }), /*#__PURE__*/jsx(ColorPicker, {
        color: btnColor,
        size: "medium",
        onChange: function onChange(e) {
          return updateCustomization({
            btnColor: e.hex
          });
        }
      })]
    }), /*#__PURE__*/jsxs("div", {
      className: "flex items-center justify-between gap-2",
      "data-cy": "button-text-color-label",
      children: [/*#__PURE__*/jsx(Label, {
        children: t("neetoMolecules.productEmbed.floatingPopup.button.textColor")
      }), /*#__PURE__*/jsx(ColorPicker, {
        color: btnTextColor,
        size: "medium",
        onChange: function onChange(e) {
          return updateCustomization({
            btnTextColor: e.hex
          });
        }
      })]
    }), icon && /*#__PURE__*/jsx(Checkbox, {
      checked: showIcon,
      "data-cy": "show-icon-checkbox",
      "data-testid": "show-icon-checkbox",
      label: t("neetoMolecules.productEmbed.floatingPopup.showCalIcon"),
      onChange: function onChange(e) {
        return updateCustomization({
          showIcon: e.target.checked
        });
      }
    }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
      updateCustomization: updateCustomization
    })]
  });
};

var _excluded = ["value", "label", "helpIconProps"];
function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SwitchOptions = function SwitchOptions(_ref) {
  var _ref$customization = _ref.customization,
    customization = _ref$customization === void 0 ? {} : _ref$customization,
    updateCustomization = _ref.updateCustomization;
  var visibleOptions = Object.keys(SWITCH_OPTIONS).filter(function (key) {
    return key in customization;
  }).map(function (key) {
    return [key, customization[key]];
  });
  if (isEmpty(visibleOptions)) return null;
  return /*#__PURE__*/jsx("div", {
    className: "flex flex-col gap-4",
    children: visibleOptions.map(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
        option = _ref3[0],
        _ref3$ = _ref3[1],
        value = _ref3$.value,
        label = _ref3$.label,
        helpIconProps = _ref3$.helpIconProps,
        rest = _objectWithoutProperties(_ref3$, _excluded);
      return /*#__PURE__*/jsx(Switch, {
        checked: value,
        label: label || SWITCH_OPTIONS[option].label,
        labelProps: helpIconProps && {
          helpIconProps: _objectSpread$4({
            "data-testid": "help-icon-button"
          }, helpIconProps)
        },
        onChange: function onChange(e) {
          return updateCustomization(_defineProperty({}, option, _objectSpread$4(_objectSpread$4({}, rest), {}, {
            label: label,
            helpIconProps: helpIconProps,
            value: e.target.checked
          })));
        }
      }, option);
    })
  });
};

var Iframe$1 = function Iframe(_ref) {
  var updateCustomization = _ref.updateCustomization,
    otherCustomizations = _ref.otherCustomizations,
    customization = _ref.customization;
  var _useProductEmbedStore = useProductEmbedStore(function (store) {
      return {
        isQueryParamsEnabled: store["isQueryParamsEnabled"]
      };
    }, shallow),
    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
  useEffect(function () {
    if (isQueryParamsEnabled) return;
    updateCustomization({
      queryParams: undefined
    });
  }, []);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [otherCustomizations(), /*#__PURE__*/jsx(SwitchOptions, {
      customization: customization,
      updateCustomization: updateCustomization
    }), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
      updateCustomization: updateCustomization
    })]
  });
};

var Inline$1 = function Inline(_ref) {
  var customization = _ref.customization,
    updateCustomization = _ref.updateCustomization,
    otherCustomizations = _ref.otherCustomizations;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useProductEmbedStore = useProductEmbedStore(function (store) {
      return {
        isQueryParamsEnabled: store["isQueryParamsEnabled"]
      };
    }, shallow),
    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
  var elementSelector = customization.elementSelector;
  var handleInputChange = function handleInputChange(_ref2, attribute) {
    var value = _ref2.target.value;
    return updateCustomization(_defineProperty({}, attribute, value));
  };
  useEffect(function () {
    if (isQueryParamsEnabled) return;
    updateCustomization({
      queryParams: undefined
    });
  }, []);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsxs("div", {
      className: "flex flex-col gap-2",
      children: [/*#__PURE__*/jsx(Label, {
        "data-cy": "inline-element-id-input-label",
        children: t("neetoMolecules.productEmbed.inline.elementId")
      }), /*#__PURE__*/jsx(Input, {
        "data-cy": "inline-element-id-input-field",
        "data-testid": "inline-element-id-input-field",
        value: elementSelector,
        error: !elementSelector && t("neetoMolecules.productEmbed.inline.elementIdError"),
        onChange: function onChange(e) {
          return handleInputChange(e, "elementSelector");
        }
      })]
    }), /*#__PURE__*/jsx(SwitchOptions, {
      customization: customization,
      updateCustomization: updateCustomization
    }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
      updateCustomization: updateCustomization
    })]
  });
};

function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
  var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
  return /*#__PURE__*/jsxs("svg", _objectSpread$3(_objectSpread$3({
    fill: "none",
    height: "163",
    viewBox: "0 0 278 163",
    width: "278",
    xmlns: "http://www.w3.org/2000/svg"
  }, other), {}, {
    children: [/*#__PURE__*/jsxs("g", {
      clipPath: "url(#clip0_8605_6776)",
      children: [/*#__PURE__*/jsx("rect", {
        fill: "rgb(var(--neeto-ui-white))",
        height: "163",
        rx: "6",
        width: "278"
      }), /*#__PURE__*/jsx("mask", {
        fill: "rgb(var(--neeto-ui-white))",
        id: "path-3-inside-1_8605_6776",
        children: /*#__PURE__*/jsx("path", {
          d: "M0 0h305v20H0z"
        })
      }), /*#__PURE__*/jsx("path", {
        d: "M0 0h305v20H0z",
        fill: "rgb(var(--neeto-ui-white))"
      }), /*#__PURE__*/jsx("path", {
        d: "M305 19H0v2h305z",
        fill: "currentColor",
        mask: "url(#path-3-inside-1_8605_6776)"
      }), /*#__PURE__*/jsx("circle", {
        cx: "10.596",
        cy: "10.432",
        fill: "#FD5350",
        r: "2.307"
      }), /*#__PURE__*/jsx("circle", {
        cx: "18.143",
        cy: "10.432",
        fill: "#FEB33A",
        r: "2.307"
      }), /*#__PURE__*/jsx("circle", {
        cx: "25.69",
        cy: "10.432",
        fill: "#2CC146",
        r: "2.307"
      }), /*#__PURE__*/jsx("path", {
        d: "M36 20h206v10H36zM36 150h206v12H36z",
        fill: "currentColor"
      }), /*#__PURE__*/jsx("rect", {
        height: "103.55",
        rx: "5.217",
        stroke: "rgb(var(--neeto-ui-gray-300))",
        strokeWidth: "0.45",
        width: "205.55",
        x: "36.225",
        y: "38.225"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "2.311",
        rx: "1.156",
        width: "36.079",
        x: "45.32",
        y: "81.914"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "2.311",
        rx: "1.156",
        width: "20.949",
        x: "45.32",
        y: "87.688"
      }), /*#__PURE__*/jsx("rect", {
        fill: "#008068",
        height: "7.988",
        rx: "1",
        width: "23.183",
        x: "203.539",
        y: "61.109"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "7.728",
        rx: "1",
        width: "23.183",
        x: "203.539",
        y: "73.57"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "8.134",
        rx: "1",
        width: "23.183",
        x: "203.539",
        y: "85.773"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "8.134",
        rx: "1",
        width: "23.183",
        x: "203.539",
        y: "98.383"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "8.134",
        rx: "1",
        width: "23.183",
        x: "203.539",
        y: "110.992"
      }), /*#__PURE__*/jsx("circle", {
        cx: "52.077",
        cy: "67.819",
        fill: "currentColor",
        r: "6.733"
      }), /*#__PURE__*/jsx("circle", {
        cx: "120.314",
        cy: "74.322",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "120.322",
        cy: "84.876",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "120.322",
        cy: "95.439",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "130.954",
        cy: "63.767",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "130.954",
        cy: "74.322",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "130.954",
        cy: "84.876",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "130.954",
        cy: "95.439",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "141.572",
        cy: "63.767",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "141.572",
        cy: "74.322",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "141.572",
        cy: "84.876",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "141.572",
        cy: "95.439",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "152.181",
        cy: "63.767",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "152.181",
        cy: "74.322",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "152.181",
        cy: "84.876",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "162.806",
        cy: "63.767",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "162.806",
        cy: "74.322",
        fill: "#008068",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "162.806",
        cy: "84.876",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "173.439",
        cy: "63.767",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "173.439",
        cy: "74.322",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "173.439",
        cy: "84.876",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "184.064",
        cy: "63.767",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "184.064",
        cy: "74.322",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("circle", {
        cx: "184.075",
        cy: "84.876",
        fill: "currentColor",
        r: "2.65"
      }), /*#__PURE__*/jsx("path", {
        d: "M93.023 38v104",
        stroke: "#E7E7E7",
        strokeWidth: "0.454"
      })]
    }), /*#__PURE__*/jsx("rect", {
      height: "162",
      rx: "5.5",
      stroke: "rgb(var(--neeto-ui-gray-300))",
      width: "277",
      x: "0.5",
      y: "0.5"
    }), /*#__PURE__*/jsx("defs", {
      children: /*#__PURE__*/jsx("clipPath", {
        id: "clip0_8605_6776",
        children: /*#__PURE__*/jsx("rect", {
          fill: "rgb(var(--neeto-ui-white))",
          height: "163",
          rx: "6",
          width: "278"
        })
      })
    })]
  }));
};
var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
  var other = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
  return /*#__PURE__*/jsxs("svg", _objectSpread$3(_objectSpread$3({
    fill: "none",
    height: "163",
    viewBox: "0 0 278 163",
    width: "278",
    xmlns: "http://www.w3.org/2000/svg"
  }, other), {}, {
    children: [/*#__PURE__*/jsxs("g", {
      clipPath: "url(#clip0_9047_10870)",
      children: [/*#__PURE__*/jsx("rect", {
        fill: "rgb(var(--neeto-ui-white))",
        height: "163",
        rx: "6",
        width: "278"
      }), /*#__PURE__*/jsx("mask", {
        fill: "rgb(var(--neeto-ui-white))",
        id: "path-3-inside-1_9047_10870",
        children: /*#__PURE__*/jsx("path", {
          d: "M0 0H305V20H0V0Z"
        })
      }), /*#__PURE__*/jsx("path", {
        d: "M0 0H305V20H0V0Z",
        fill: "rgb(var(--neeto-ui-white))"
      }), /*#__PURE__*/jsx("path", {
        d: "M305 19H0V21H305V19Z",
        fill: "currentColor",
        mask: "url(#path-3-inside-1_9047_10870)"
      }), /*#__PURE__*/jsx("circle", {
        cx: "10.5963",
        cy: "10.4322",
        fill: "#FD5350",
        r: "2.30723"
      }), /*#__PURE__*/jsx("circle", {
        cx: "18.1432",
        cy: "10.4322",
        fill: "#FEB33A",
        r: "2.30723"
      }), /*#__PURE__*/jsx("circle", {
        cx: "25.69",
        cy: "10.4322",
        fill: "#2CC146",
        r: "2.30723"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "3",
        opacity: "0.78",
        rx: "1.5",
        width: "84.6936",
        x: "145",
        y: "63"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "3",
        opacity: "0.78",
        rx: "1.5",
        width: "89",
        x: "145",
        y: "70"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "3",
        opacity: "0.78",
        rx: "1.5",
        width: "49",
        x: "145",
        y: "77"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "3",
        opacity: "0.78",
        rx: "1.5",
        width: "84.6936",
        x: "36",
        y: "111"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "3",
        opacity: "0.78",
        rx: "1.5",
        width: "89",
        x: "36",
        y: "118"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "3",
        opacity: "0.78",
        rx: "1.5",
        width: "25.8387",
        x: "36",
        y: "125"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "35",
        width: "96",
        x: "36",
        y: "57"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "35",
        width: "95",
        x: "145",
        y: "102"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "26",
        width: "204",
        x: "36",
        y: "20"
      }), /*#__PURE__*/jsx("rect", {
        fill: "currentColor",
        height: "14",
        width: "204",
        x: "36",
        y: "148"
      })]
    }), /*#__PURE__*/jsx("rect", {
      height: "162",
      rx: "5.5",
      stroke: "rgb(var(--neeto-ui-gray-300))",
      width: "277",
      x: "0.5",
      y: "0.5"
    }), /*#__PURE__*/jsx("rect", {
      fill: "#008068",
      height: "18",
      rx: "9",
      width: "69",
      x: "194",
      y: "134"
    }), /*#__PURE__*/jsx("defs", {
      children: /*#__PURE__*/jsx("clipPath", {
        id: "clip0_9047_10870",
        children: /*#__PURE__*/jsx("rect", {
          fill: "rgb(var(--neeto-ui-white))",
          height: "163",
          rx: "6",
          width: "278"
        })
      })
    })]
  }));
};
var ElementPopupIcon = function ElementPopupIcon(_ref3) {
  var other = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
  return /*#__PURE__*/jsxs("svg", _objectSpread$3(_objectSpread$3({
    fill: "none",
    height: "163",
    viewBox: "0 0 278 163",
    width: "278",
    xmlns: "http://www.w3.org/2000/svg"
  }, other), {}, {
    children: [/*#__PURE__*/jsxs("g", {
      clipPath: "url(#clip0_9047_10869)",
      children: [/*#__PURE__*/jsx("rect", {
        fill: "rgb(var(--neeto-ui-white))",
        height: "163",
        rx: "6",
        width: "278"
      }), /*#__PURE__*/jsx("mask", {
        fill: "rgb(var(--neeto-ui-white))",
        id: "path-3-inside-1_9047_10869",
        children: /*#__PURE__*/jsx("path", {
          d: "M0 0h305v20H0z"
        })
      }), /*#__PURE__*/jsx("path", {
        d: "M0 0h305v20H0z",
        fill: "rgb(var(--neeto-ui-white))"
      }), /*#__PURE__*/jsx("path", {
        d: "M305 19H0v2h305z",
        fill: "currentColor",
        mask: "url(#path-3-inside-1_9047_10869)"
      }), /*#__PURE__*/jsx("circle", {
        cx: "10.596",
        cy: "10.432",
        fill: "#FD5350",
        r: "2.307"
      }), /*#__PURE__*/jsx("circle", {
        cx: "18.143",
        cy: "10.432",
        fill: "#FEB33A",
        r: "2.307"
      }), /*#__PURE__*/jsx("circle", {
        cx: "25.69",
        cy: "10.432",
        fill: "#2CC146",
        r: "2.307"
      })]
    }), /*#__PURE__*/jsx("rect", {
      height: "162",
      rx: "5.5",
      stroke: "rgb(var(--neeto-ui-gray-300))",
      width: "277",
      x: "0.5",
      y: "0.5"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "3.944",
      opacity: "0.78",
      rx: "1.972",
      width: "85",
      x: "135",
      y: "58.461"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "3.944",
      opacity: "0.78",
      rx: "1.972",
      width: "89",
      x: "135",
      y: "66.352"
    }), /*#__PURE__*/jsx("rect", {
      fill: "#008068",
      height: "7",
      rx: "3.5",
      width: "38",
      x: "135",
      y: "74"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "3.944",
      opacity: "0.78",
      rx: "1.972",
      width: "85",
      x: "135",
      y: "100.859"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "3.944",
      opacity: "0.78",
      rx: "1.972",
      width: "89",
      x: "135",
      y: "108.75"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "3.944",
      opacity: "0.78",
      rx: "1.972",
      width: "26",
      x: "135",
      y: "116.641"
    }), /*#__PURE__*/jsx("path", {
      d: "M36 52h88v34H36zM36 20h204v28H36zM240 162H36v-28h204zM36 90h88v41H36z",
      fill: "currentColor"
    }), /*#__PURE__*/jsx("defs", {
      children: /*#__PURE__*/jsx("clipPath", {
        id: "clip0_9047_10869",
        children: /*#__PURE__*/jsx("rect", {
          fill: "rgb(var(--neeto-ui-white))",
          height: "163",
          rx: "6",
          width: "278"
        })
      })
    })]
  }));
};

var EMBED_OPTIONS = {
  INLINE: "inline",
  FLOATING_POPUP: "floatingPopup",
  ELEMENT_POPUP: "elementPopup",
  IFRAME: "iframe"
};
var EMBED_ICONS = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, InlineEmbedIcon), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopupIcon), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopupIcon), EMBED_OPTIONS.IFRAME, InlineEmbedIcon);
var DEFAULT_CUSTOMIZATION = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, {
  width: 100,
  height: 100,
  elementSelector: "inline-embed-container"
}), EMBED_OPTIONS.FLOATING_POPUP, {
  showIcon: false,
  btnText: "Open",
  btnColor: "#008068",
  btnTextColor: "#fff",
  btnPosition: "bottomRight"
}), EMBED_OPTIONS.ELEMENT_POPUP, {
  elementSelector: "open-popup-button"
}), EMBED_OPTIONS.IFRAME, {
  height: 100,
  width: 100,
  iframeTitle: "Iframe embed"
});
var EMBED_CUSTOMIZATION_COMPONENTS = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline$1), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup$1), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup$1), EMBED_OPTIONS.IFRAME, Iframe$1);
var EMBED_TITLES = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, t("neetoMolecules.productEmbed.inline.title")), EMBED_OPTIONS.FLOATING_POPUP, t("neetoMolecules.productEmbed.floatingPopup.title")), EMBED_OPTIONS.ELEMENT_POPUP, t("neetoMolecules.productEmbed.elementPopup.title")), EMBED_OPTIONS.IFRAME, t("neetoMolecules.productEmbed.iframe.title"));
var SUPPORTED_LANGUAGES = [{
  value: "html",
  label: t("neetoMolecules.productEmbed.language.html")
}, {
  value: "react",
  label: t("neetoMolecules.productEmbed.language.react")
}];
var SCRIPT_ID = "embed-script";
var TAB_STRING = "    ";
var SWITCH_OPTIONS = {
  dynamicHeight: {
    label: t("neetoMolecules.productEmbed.dynamicHeight")
  },
  hideTitle: {
    label: t("neetoMolecules.productEmbed.hideTitle")
  },
  alignContentLeft: {
    label: t("neetoMolecules.productEmbed.alignContentLeft")
  },
  transparentBackground: {
    label: t("neetoMolecules.productEmbed.transparentBackground")
  }
};

var Code = function Code(_ref) {
  var id = _ref.id,
    selectedEmbed = _ref.selectedEmbed,
    embedScriptLink = _ref.embedScriptLink,
    extraArgs = _ref.extraArgs,
    inlineWrapperStyle = _ref.inlineWrapperStyle,
    iframeStyle = _ref.iframeStyle,
    supportedLanguages = _ref.supportedLanguages,
    customization = _ref.customization;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var supportedLanguagesOptions = filterBy({
    value: function value(_value) {
      return supportedLanguages === null || supportedLanguages === void 0 ? void 0 : supportedLanguages.includes(_value);
    }
  }, SUPPORTED_LANGUAGES);
  var _useState = useState(supportedLanguagesOptions[0]),
    _useState2 = _slicedToArray(_useState, 2),
    selectedLanguage = _useState2[0],
    setSelectedLanguage = _useState2[1];
  var code = generateCode({
    id: id,
    selectedLanguage: selectedLanguage.value,
    type: selectedEmbed,
    customization: customization,
    embedScriptLink: embedScriptLink,
    extraArgs: extraArgs,
    inlineWrapperStyle: inlineWrapperStyle,
    iframeStyle: iframeStyle
  });
  return /*#__PURE__*/jsxs("div", {
    className: "flex flex-col gap-3",
    children: [/*#__PURE__*/jsxs("div", {
      className: "flex items-center justify-between",
      children: [/*#__PURE__*/jsx(Typography, {
        style: "h4",
        children: t("neetoMolecules.productEmbed.embedCode")
      }), /*#__PURE__*/jsx(Select, {
        className: "w-28 flex-grow-0",
        options: supportedLanguagesOptions,
        size: "small",
        strategy: "fixed",
        value: selectedLanguage,
        onChange: setSelectedLanguage
      })]
    }), /*#__PURE__*/jsx("div", {
      className: "neeto-molecules-embed__code-block relative w-full overflow-y-auto",
      "data-cy": "embed-code-block",
      "data-testid": "embed-code-block",
      children: /*#__PURE__*/jsx(Codeblock, {
        code: code,
        codeblockProps: {
          "data-testid": "".concat(selectedLanguage.value, "-code-block")
        },
        copyButtonProps: {
          style: "primary",
          label: t("neetoMolecules.productEmbed.copyCode")
        }
      })
    })]
  });
};

function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var FloatingPopupPlaceholderImage = function FloatingPopupPlaceholderImage(_ref) {
  var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
  return /*#__PURE__*/jsxs("svg", _objectSpread$2(_objectSpread$2({
    fill: "none",
    height: "518",
    viewBox: "0 0 796 518",
    width: "796",
    xmlns: "http://www.w3.org/2000/svg"
  }, other), {}, {
    children: [/*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "12.706",
      opacity: "0.78",
      rx: "6.353",
      width: "358.702",
      x: "406.645",
      y: "152.109"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "12.706",
      opacity: "0.78",
      rx: "6.353",
      width: "376.941",
      x: "406.645",
      y: "181.758"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "12.706",
      opacity: "0.78",
      rx: "6.353",
      width: "207.529",
      x: "406.645",
      y: "211.406"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "12.706",
      opacity: "0.78",
      rx: "6.353",
      width: "358.702",
      y: "333.414"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "12.706",
      opacity: "0.78",
      rx: "6.353",
      width: "376.941",
      y: "363.062"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "12.706",
      opacity: "0.78",
      rx: "6.353",
      width: "109.435",
      y: "392.711"
    }), /*#__PURE__*/jsx("path", {
      d: "M0 127.203h374v148H0zM407 295h389v149H407zM0 .203h796v110H0zM0 460.203h796v59H0z",
      fill: "currentColor"
    })]
  }));
};
var ElementPopupPlaceholderImage = function ElementPopupPlaceholderImage(_ref2) {
  var other = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
  return /*#__PURE__*/jsxs("svg", _objectSpread$2(_objectSpread$2({
    fill: "none",
    height: "518",
    viewBox: "0 0 748 518",
    width: "748",
    xmlns: "http://www.w3.org/2000/svg"
  }, other), {}, {
    children: [/*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "14.463",
      opacity: "0.78",
      rx: "7.231",
      width: "311.667",
      x: "363",
      y: "142.688"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "14.463",
      opacity: "0.78",
      rx: "7.231",
      width: "326.333",
      x: "363",
      y: "171.617"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "14.463",
      opacity: "0.78",
      rx: "7.231",
      width: "311.667",
      x: "363",
      y: "298.141"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "14.463",
      opacity: "0.78",
      rx: "7.231",
      width: "326.333",
      x: "363",
      y: "327.07"
    }), /*#__PURE__*/jsx("rect", {
      fill: "currentColor",
      height: "14.463",
      opacity: "0.78",
      rx: "7.231",
      width: "95.333",
      x: "363",
      y: "356"
    }), /*#__PURE__*/jsx("path", {
      d: "M0 119h322.667v124.667H0zM0 0h748v104H0zM748 522.336H0V419.669h748zM0 258.328h322.667v150.333H0z",
      fill: "currentColor"
    })]
  }));
};

var ElementPopup = function ElementPopup(_ref) {
  var iframeURL = _ref.iframeURL;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;

  /**
   * Currently embed() function doesn't have an unembed handler.
   * When iframe link changes, we don't have an option to reinitiate it.
   * So we forcefully recreate the element with `key` and call embed() again
   */
  var elementSelectorId = useMemo(function () {
    return "popup-button-".concat(Math.random().toString().substring(2, 10));
  }, [iframeURL]);
  useEffect(function () {
    var element = document.getElementById(elementSelectorId);
    if (element) {
      var _window$globalProps$a;
      (_window$globalProps$a = window[globalProps.appName.replace(/^neeto/i, "neeto")]) === null || _window$globalProps$a === void 0 || _window$globalProps$a.embed(element, iframeURL);
    }
  }, [iframeURL]);
  return /*#__PURE__*/jsxs("div", {
    className: "relative h-full w-full overflow-hidden",
    children: [/*#__PURE__*/jsx(ElementPopupPlaceholderImage, {
      className: "neeto-ui-text-gray-100 absolute inset-0 h-auto w-full p-10"
    }), /*#__PURE__*/jsx(Button, {
      className: "absolute start-[48.5294117647%] top-[39.0804597701%]",
      "data-cy": "preview-element-popup-button",
      "data-testid": "preview-element-popup-button",
      id: elementSelectorId,
      label: t("neetoMolecules.productEmbed.elementPopup.label")
    }, elementSelectorId)]
  });
};

var FloatingPopup = function FloatingPopup(_ref) {
  var iframeURL = _ref.iframeURL,
    customization = _ref.customization;
  var btnTextColor = customization.btnTextColor,
    showIcon = customization.showIcon,
    btnText = customization.btnText,
    btnPosition = customization.btnPosition,
    btnColor = customization.btnColor,
    icon = customization.icon;

  /**
   * Currently embed() function doesn't have an unembed handler.
   * When iframe link changes, we don't have an option to reinitiate it.
   * So we forcefully recreate the element with `key` and call embed() again
   */
  var elementSelectorId = useMemo(function () {
    return "popup-button-".concat(Math.random().toString().substring(2, 10));
  }, [iframeURL]);
  useEffect(function () {
    var element = document.getElementById(elementSelectorId);
    if (element) {
      var _window$globalProps$a;
      (_window$globalProps$a = window[globalProps.appName.replace(/^neeto/i, "neeto")]) === null || _window$globalProps$a === void 0 || _window$globalProps$a.embed(element, iframeURL);
    }
  }, [iframeURL]);
  useEffect(function () {
    var btn = document.getElementById(elementSelectorId);
    btn.style.backgroundColor = btnColor;
    btn.style.color = btnTextColor;
  }, [btnColor, btnTextColor]);
  return /*#__PURE__*/jsxs("div", {
    className: "relative h-full w-full overflow-hidden",
    children: [/*#__PURE__*/jsx(FloatingPopupPlaceholderImage, {
      className: "neeto-ui-text-gray-100 h-auto w-full p-10"
    }), /*#__PURE__*/jsx(Button, {
      "data-cy": "popup-preview-button",
      icon: icon && showIcon ? icon : null,
      iconPosition: "left",
      id: elementSelectorId,
      label: btnText,
      className: classnames("absolute bottom-0 m-4", {
        "start-0": btnPosition === "bottomLeft",
        "end-0": btnPosition === "bottomRight"
      })
    }, elementSelectorId)]
  });
};

function useIframeHeightReset(iframeRef, dynamicHeight) {
  useEffect(function () {
    if (!(dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value) && iframeRef !== null && iframeRef !== void 0 && iframeRef.current) {
      iframeRef.current.style.height = "";
    }
  }, [dynamicHeight === null || dynamicHeight === void 0 ? void 0 : dynamicHeight.value, iframeRef]);
}

var Iframe = function Iframe(_ref) {
  var iframeURL = _ref.iframeURL,
    customization = _ref.customization;
  var height = customization.height,
    width = customization.width,
    iframeTitle = customization.iframeTitle,
    dynamicHeight = customization.dynamicHeight;
  var iframeRef = useRef(null);
  useIframeHeightReset(iframeRef, dynamicHeight);
  return /*#__PURE__*/jsx("iframe", {
    height: height,
    width: width,
    allowFullScreen: true,
    className: "m-auto border-0",
    ref: iframeRef,
    src: iframeURL,
    title: iframeTitle
  });
};

var Inline = function Inline(_ref) {
  var iframeURL = _ref.iframeURL,
    customization = _ref.customization;
  var dynamicHeight = customization.dynamicHeight;
  var iframeRef = useRef(null);
  useIframeHeightReset(iframeRef, dynamicHeight);
  return /*#__PURE__*/jsx("iframe", {
    className: "m-auto border-0",
    ref: iframeRef,
    src: iframeURL
  });
};

function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var buildQueryParams = function buildQueryParams() {
  var customization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var existingQueryParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var activeOptions = Object.keys(SWITCH_OPTIONS).reduce(function (acc, key) {
    var _customization$key;
    var value = (_customization$key = customization[key]) === null || _customization$key === void 0 ? void 0 : _customization$key.value;
    if (value) acc[key] = value;
    return acc;
  }, {});
  return _objectSpread$1(_objectSpread$1({}, existingQueryParams), activeOptions);
};
var buildIframeURL = function buildIframeURL(iframeURL, queryParams, customization) {
  var url = new URL(iframeURL);
  var params = buildQueryParams(customization, queryParams);
  Object.entries(params).forEach(function (_ref) {
    var _ref2 = _slicedToArray(_ref, 2),
      name = _ref2[0],
      value = _ref2[1];
    url.searchParams.append(name, value);
  });
  return url.toString();
};

var Preview = function Preview(_ref) {
  var isScriptLoading = _ref.isScriptLoading,
    selectedEmbed = _ref.selectedEmbed,
    id = _ref.id,
    customization = _ref.customization,
    _ref$customPreviewIfr = _ref.customPreviewIframeUrl,
    customPreviewIframeUrl = _ref$customPreviewIfr === void 0 ? "" : _ref$customPreviewIfr;
  var _useProductEmbedStore = useProductEmbedStore(function (store) {
      return {
        queryParams: store["queryParams"]
      };
    }, shallow),
    queryParams = _useProductEmbedStore.queryParams;
  var preview = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup), EMBED_OPTIONS.IFRAME, Iframe);
  var previewURL = customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id);
  var iframeURL = buildIframeURL(previewURL, queryParams, customization);
  var Component = preview[selectedEmbed];
  if (isScriptLoading) {
    return /*#__PURE__*/jsx("div", {
      className: "flex min-h-0 flex-grow items-center justify-center overflow-y-auto",
      children: /*#__PURE__*/jsx(Spinner, {})
    });
  }
  return /*#__PURE__*/jsx(BrowserPreview, {
    className: "h-full",
    wrapperClassName: "neeto-molecules-embed__browser-preview pointer-events-auto",
    children: /*#__PURE__*/jsx(Component, {
      customization: customization,
      iframeURL: iframeURL
    })
  });
};

var css = ".neeto-molecules-product-embed-size-input.neeto-ui-input__wrapper .neeto-ui-input__prefix{align-self:stretch;background-color:rgb(var(--neeto-ui-gray-200));margin-inline-start:0!important;padding-inline-end:.75rem;padding-inline-start:.75rem}.neeto-molecules-product-embed-tab{gap:.5rem}.neeto-molecules-product-embed-tab .neeto-ui-tab{border-radius:var(--neeto-ui-btn-border-radius);color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-product-embed-tab .neeto-ui-tab:not(.active):hover{background-color:rgb(var(--neeto-ui-gray-100))}.neeto-molecules-product-embed-tab .neeto-ui-tab.active{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-embed__left-sidebar{align-items:flex-start;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;width:100%}@media (min-width:768px){.neeto-molecules-embed__left-sidebar{border-inline-end:1px solid rgb(var(--neeto-ui-gray-200));max-width:25rem}}@media (min-width:1024px){.neeto-molecules-embed__left-sidebar{max-width:30.3125rem}}.neeto-molecules-embed__code-block .neeto-molecules-code-block{font-size:.875rem;height:13.4375rem;margin-block-start:0!important}.neeto-molecules-embed__browser-preview{height:100%;min-height:18.75rem}.neeto-molecules-embed__browser-preview .neeto-molecules-browser-preview__body{position:relative}.neeto-molecules-embed__browser-preview .neeto-molecules-browser-preview__body iframe{height:100%;inset-inline-start:0;position:absolute;top:0;width:100%}.neeto-molecules-embed-landing-page__card{background-color:rgb(var(--neeto-ui-white))!important;border:1px solid rgb(var(--neeto-ui-gray-300))!important;border-radius:.75rem!important;outline:1px solid rgb(var(--neeto-ui-white))!important;padding:1.5rem!important;text-align:start!important;transition:all .3s!important}.neeto-molecules-embed-landing-page__card:hover{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:1px solid rgb(var(--neeto-ui-primary-500))!important}";
n(css,{});

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var EmbedRenderer = function EmbedRenderer(_ref) {
  var _options$iframe;
  var className = _ref.className,
    customEmbedScriptPath = _ref.customEmbedScriptPath,
    customPreviewIframeUrl = _ref.customPreviewIframeUrl,
    id = _ref.id,
    options = _ref.options,
    extraArgs = _ref.extraArgs,
    otherCustomizations = _ref.otherCustomizations,
    inlineWrapperStyle = _ref.inlineWrapperStyle,
    iframeStyle = _ref.iframeStyle,
    supportedLanguages = _ref.supportedLanguages,
    selectedEmbed = _ref.selectedEmbed;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var location = useLocation();
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    isScriptLoading = _useState2[0],
    setIsScriptLoading = _useState2[1];
  var _useStateWithDependen = useStateWithDependency(function () {
      return buildDefaultCustomization(options);
    }, [options === null || options === void 0 || (_options$iframe = options.iframe) === null || _options$iframe === void 0 ? void 0 : _options$iframe.iframeUrl]),
    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
    customizations = _useStateWithDependen2[0],
    setCustomizations = _useStateWithDependen2[1];
  var description = customizations[selectedEmbed].description;
  var customization = customizations[selectedEmbed];
  var CustomizationComponent = EMBED_CUSTOMIZATION_COMPONENTS[selectedEmbed];
  var embedScriptLink = customEmbedScriptPath || "".concat(window.location.protocol, "//").concat(window.location.host, "/javascript/embed.js");
  var loadScript = function loadScript() {
    var script = document.createElement("script");
    script.id = SCRIPT_ID;
    script.src = embedScriptLink;
    script.onload = function () {
      return setIsScriptLoading(false);
    };
    document.head.appendChild(script);
  };
  var updateCustomization = function updateCustomization(props) {
    return setCustomizations(function (prevState) {
      return _objectSpread(_objectSpread({}, prevState), {}, _defineProperty({}, selectedEmbed, mergeLeft(props, prevState[selectedEmbed])));
    });
  };
  useEffect(function () {
    var isScriptLoaded = document.getElementById(SCRIPT_ID);
    if (isScriptLoaded) setIsScriptLoading(false);else loadScript();
  }, []);
  return /*#__PURE__*/jsxs(Container, {
    "data-testid": "embed-product",
    className: classnames("neeto-molecules-embed flex w-full flex-grow flex-col p-0 md:flex-row", className),
    children: [/*#__PURE__*/jsxs("div", {
      className: "neeto-molecules-embed__left-sidebar px-5 py-8 md:h-full md:overflow-y-auto md:px-10",
      children: [/*#__PURE__*/jsx(Button, {
        className: "mb-4",
        "data-cy": "back-to-embed-selection-button",
        "data-testid": "back-to-embed-selection-button",
        icon: LeftArrow,
        iconPosition: "left",
        label: t("neetoMolecules.productEmbed.backToEmbedSelection"),
        size: "small",
        style: "link",
        to: location.pathname
      }), /*#__PURE__*/jsx(Header, {
        className: "py-0",
        "data-testid": "".concat(hyphenate(selectedEmbed), "-embed-title"),
        title: EMBED_TITLES[selectedEmbed]
      }), description && /*#__PURE__*/jsx(Typography, {
        className: "mt-2",
        "data-cy": "".concat(hyphenate(selectedEmbed), "-description"),
        style: "body2",
        children: description
      }), /*#__PURE__*/jsx("div", {
        className: "mt-4 flex w-full flex-col gap-y-6",
        children: /*#__PURE__*/jsxs("div", {
          className: "flex flex-col gap-y-6",
          children: [/*#__PURE__*/jsx(Code, {
            customization: customization,
            embedScriptLink: embedScriptLink,
            extraArgs: extraArgs,
            id: id,
            iframeStyle: iframeStyle,
            inlineWrapperStyle: inlineWrapperStyle,
            selectedEmbed: selectedEmbed,
            supportedLanguages: supportedLanguages
          }), /*#__PURE__*/jsx(CustomizationComponent, {
            customization: customization,
            otherCustomizations: otherCustomizations,
            updateCustomization: updateCustomization
          })]
        })
      })]
    }), /*#__PURE__*/jsx("div", {
      className: "neeto-molecules-embed__preview neeto-ui-bg-gray-50 flex min-h-dvh w-full min-w-0 flex-col gap-3 overflow-y-auto p-6 md:h-full md:min-h-0 md:flex-grow",
      children: /*#__PURE__*/jsx(Preview, {
        customPreviewIframeUrl: customPreviewIframeUrl,
        customization: customization,
        id: id,
        isScriptLoading: isScriptLoading,
        selectedEmbed: selectedEmbed
      })
    })]
  });
};

var EmbedSelector = function EmbedSelector(_ref) {
  var options = _ref.options,
    goBackLink = _ref.goBackLink,
    title = _ref.title;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var history = useHistory();
  var location = useLocation();
  return /*#__PURE__*/jsxs(Container, {
    className: "neeto-molecules-embed-landing-page py-8",
    children: [goBackLink && /*#__PURE__*/jsx(Button, {
      className: "mb-4",
      "data-cy": "back-button",
      "data-testid": "back-button",
      icon: LeftArrow,
      iconPosition: "left",
      label: t("neetoMolecules.productEmbed.backToShare"),
      size: "small",
      style: "link",
      to: goBackLink
    }), /*#__PURE__*/jsx(Header, {
      className: "py-0",
      "data-testid": "embed-selector-header",
      title: t("neetoMolecules.productEmbed.title")
    }), /*#__PURE__*/jsxs("div", {
      className: "neeto-molecules-embed-landing-page__container mx-auto w-full max-w-5xl py-6 md:py-10",
      children: [/*#__PURE__*/jsx(Typography, {
        className: "mb-2",
        style: "h2",
        children: title || t("neetoMolecules.productEmbed.embedSelectionTitle", {
          productName: globalProps.appName
        })
      }), /*#__PURE__*/jsx(Typography, {
        className: "mb-8",
        style: "body1",
        children: t("neetoMolecules.productEmbed.embedSelectionDescription")
      }), /*#__PURE__*/jsx("div", {
        className: "neeto-molecules-embed-landing-page__cards-wrapper grid w-full grid-cols-1 flex-wrap gap-6 md:grid-cols-3",
        children: Object.entries(options).map(function (_ref2) {
          var _ref3 = _slicedToArray(_ref2, 2),
            key = _ref3[0],
            _ref3$ = _ref3[1],
            label = _ref3$.label,
            description = _ref3$.description,
            embedIcon = _ref3$.embedIcon;
          var EmbedIcon = embedIcon || EMBED_ICONS[key];
          return /*#__PURE__*/jsxs("button", {
            className: "neeto-molecules-embed-landing-page__card flex w-full flex-col",
            "data-testid": "embed-selector-card-".concat(hyphenate(key)),
            onClick: handleMetaClick(history, "".concat(location.pathname, "?type=").concat(hyphenate(key))),
            children: [/*#__PURE__*/jsx("span", {
              className: "neeto-molecules-embed-landing-page__card-icon mb-6 block",
              children: /*#__PURE__*/jsx(EmbedIcon, {
                className: "neeto-ui-text-gray-200 h-auto w-full max-w-72"
              })
            }), /*#__PURE__*/jsx(Typography, {
              className: "mb-2",
              style: "h4",
              children: label
            }), /*#__PURE__*/jsx(Typography, {
              style: "body2",
              children: description
            })]
          }, key);
        })
      })]
    })]
  });
};

var ProductEmbed = function ProductEmbed(_ref) {
  var title = _ref.title,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$customEmbedScrip = _ref.customEmbedScriptPath,
    customEmbedScriptPath = _ref$customEmbedScrip === void 0 ? "" : _ref$customEmbedScrip,
    _ref$customPreviewIfr = _ref.customPreviewIframeUrl,
    customPreviewIframeUrl = _ref$customPreviewIfr === void 0 ? "" : _ref$customPreviewIfr,
    _ref$goBackLink = _ref.goBackLink,
    goBackLink = _ref$goBackLink === void 0 ? "" : _ref$goBackLink,
    id = _ref.id,
    _ref$isQueryParamsEna = _ref.isQueryParamsEnabled,
    isQueryParamsEnabled = _ref$isQueryParamsEna === void 0 ? false : _ref$isQueryParamsEna,
    _ref$queryParamsProps = _ref.queryParamsProps,
    queryParamsProps = _ref$queryParamsProps === void 0 ? {} : _ref$queryParamsProps,
    _ref$options = _ref.options,
    options = _ref$options === void 0 ? {} : _ref$options,
    _ref$extraArgs = _ref.extraArgs,
    extraArgs = _ref$extraArgs === void 0 ? {} : _ref$extraArgs,
    _ref$otherCustomizati = _ref.otherCustomizations,
    otherCustomizations = _ref$otherCustomizati === void 0 ? noop : _ref$otherCustomizati,
    _ref$inlineWrapperSty = _ref.inlineWrapperStyle,
    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "height: 90vh; width: 100%;" : _ref$inlineWrapperSty,
    _ref$iframeStyle = _ref.iframeStyle,
    iframeStyle = _ref$iframeStyle === void 0 ? "height: 100%; width: 100%;" : _ref$iframeStyle,
    _ref$supportedLanguag = _ref.supportedLanguages,
    supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag;
  var _useLocation = useLocation(),
    search = _useLocation.search;
  var queryParams = new URLSearchParams(search);
  var selectedEmbed = toCamelCasedString(queryParams.get("type"));
  var _useProductEmbedStore = useProductEmbedStore(function (store) {
      return {
        setProductEmbedState: store["setProductEmbedState"]
      };
    }, shallow),
    setProductEmbedState = _useProductEmbedStore.setProductEmbedState;
  useEffect(function () {
    setProductEmbedState({
      isQueryParamsEnabled: isQueryParamsEnabled,
      queryParamsProps: queryParamsProps
    });
  }, []);
  return selectedEmbed ? /*#__PURE__*/jsx(EmbedRenderer, {
    className: className,
    customEmbedScriptPath: customEmbedScriptPath,
    customPreviewIframeUrl: customPreviewIframeUrl,
    extraArgs: extraArgs,
    id: id,
    iframeStyle: iframeStyle,
    inlineWrapperStyle: inlineWrapperStyle,
    options: options,
    otherCustomizations: otherCustomizations,
    queryParamsProps: queryParamsProps,
    selectedEmbed: selectedEmbed,
    supportedLanguages: supportedLanguages
  }) : /*#__PURE__*/jsx(EmbedSelector, {
    goBackLink: goBackLink,
    options: options,
    title: title
  });
};

export { ProductEmbed as default };
//# sourceMappingURL=ProductEmbed.js.map
