@bigbinary/neeto-molecules 5.1.19 → 5.1.21

package/dist/v2/ProductEmbed.js

@@ -0,0 +1,1868 @@
+import { useShallow } 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 { Label, Input, Button, Select, ColorPicker, Checkbox, Switch, Typography, Spinner } from '@bigbinary/neeto-atoms';
+import classnames from 'classnames';
+import useStateWithDependency from '@bigbinary/neeto-commons-frontend/v2/react-utils/useStateWithDependency';
+import { toPairs, mergeDeepLeft, isEmpty, mergeLeft } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { t } from 'i18next';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import HelpPopover from './HelpPopover.js';
+import { withImmutableActions, handleMetaClick } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import { create } from 'zustand';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { T as Trash2 } from '../trash-2-N0F6K63L.js';
+import { P as Plus } from '../plus-clM1IC_E.js';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import Codeblock from './Codeblock.js';
+import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/v2/initializers';
+import BrowserPreview from './BrowserPreview.js';
+import Container from './Container.js';
+import Header from './Header.js';
+import { c as createLucideIcon } from '../createLucideIcon-mNMhCCpf.js';
+import '../circle-question-mark-Dib48f5Z.js';
+import '@bigbinary/neeto-commons-frontend/v2/react-utils/useBreakpoints';
+import 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+import 'react-syntax-highlighter/dist/esm/prism-light.js';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
+import './CopyToClipboardButton.js';
+import '@bigbinary/neeto-commons-frontend/v2/utils/general';
+import '../check-DvxzqR83.js';
+import '../copy-DhbOoOav.js';
+import '../index-DAYCJu79.js';
+import '../_commonjsHelpers-BFTU3MAI.js';
+import './Breadcrumbs.js';
+import '@bigbinary/neeto-atoms/primitives';
+import './MoreDropdown.js';
+import '../ellipsis-DpI9xqUK.js';
+import './Search.js';
+import '@bigbinary/neeto-commons-frontend/v2/react-utils/useFuncDebounce';
+import '@bigbinary/neeto-commons-frontend/v2/react-utils/useQueryParams';
+import '@bigbinary/neeto-commons-frontend/v2/react-utils/useUpdateEffect';
+import '@bigbinary/neeto-commons-frontend/v2/utils';
+import '../search-DCgpNjip.js';
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
+  ["path", { d: "M19 12H5", key: "x3x0zl" }]
+];
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode);
+
+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 formatIframeAttributes$1 = function formatIframeAttributes(attributes) {
+  return toPairs(attributes).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    return "\n".concat(TAB_STRING).concat(key, "=\"").concat(value, "\"");
+  }).join("");
+};
+var inlineEmbedCode$1 = function inlineEmbedCode(_ref5) {
+  var customization = _ref5.customization,
+    id = _ref5.id,
+    embedScriptLink = _ref5.embedScriptLink,
+    extraArgs = _ref5.extraArgs,
+    inlineWrapperStyle = _ref5.inlineWrapperStyle,
+    iframeStyle = _ref5.iframeStyle,
+    queryParams = _ref5.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(_ref6) {
+  var customization = _ref6.customization,
+    id = _ref6.id,
+    embedScriptLink = _ref6.embedScriptLink,
+    extraArgs = _ref6.extraArgs,
+    queryParams = _ref6.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(_ref7) {
+  var customization = _ref7.customization,
+    id = _ref7.id,
+    embedScriptLink = _ref7.embedScriptLink,
+    extraArgs = _ref7.extraArgs,
+    queryParams = _ref7.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(_ref8) {
+  var id = _ref8.id,
+    customization = _ref8.customization,
+    queryParams = _ref8.queryParams,
+    embedScriptLink = _ref8.embedScriptLink;
+  var height = customization.height,
+    width = customization.width,
+    iframeTitle = customization.iframeTitle,
+    iframeUrl = customization.iframeUrl,
+    dynamicHeight = customization.dynamicHeight,
+    iframeAttributes = customization.iframeAttributes;
+  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, "\"").concat(formatIframeAttributes$1(iframeAttributes), "\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 formatIframeAttributes = function formatIframeAttributes(attributes) {
+  return toPairs(attributes).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      value = _ref4[1];
+    return "\n".concat(TAB_STRING).concat(TAB_STRING, "  ").concat(key, "=\"").concat(value, "\"");
+  }).join("");
+};
+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(_ref5) {
+  var customization = _ref5.customization,
+    id = _ref5.id,
+    embedScriptLink = _ref5.embedScriptLink,
+    extraArgs = _ref5.extraArgs,
+    inlineWrapperStyle = _ref5.inlineWrapperStyle,
+    iframeStyle = _ref5.iframeStyle,
+    queryParams = _ref5.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(_ref6) {
+  var customization = _ref6.customization,
+    id = _ref6.id,
+    embedScriptLink = _ref6.embedScriptLink,
+    extraArgs = _ref6.extraArgs,
+    queryParams = _ref6.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(_ref7) {
+  var customization = _ref7.customization,
+    id = _ref7.id,
+    embedScriptLink = _ref7.embedScriptLink,
+    extraArgs = _ref7.extraArgs,
+    queryParams = _ref7.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(_ref8) {
+  var customization = _ref8.customization,
+    id = _ref8.id,
+    queryParams = _ref8.queryParams;
+  var height = customization.height,
+    width = customization.width,
+    iframeTitle = customization.iframeTitle,
+    iframeUrl = customization.iframeUrl,
+    dynamicHeight = customization.dynamicHeight,
+    iframeAttributes = customization.iframeAttributes;
+  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, "\"").concat(formatIframeAttributes(iframeAttributes), "\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$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(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$8(_objectSpread$8({}, 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$8(_objectSpread$8({}, 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$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(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(useShallow(function (store) {
+      return {
+        queryParamsProps: store["queryParamsProps"],
+        queryParams: store["queryParams"],
+        setQueryParams: store["setQueryParams"]
+      };
+    })),
+    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$7(_objectSpread$7({}, 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-testid": "dynamic-query-params-label-container",
+      children: [/*#__PURE__*/jsx(Label, {
+        "data-testid": "dynamic-query-params-label",
+        children: queryParamsProps.label || t("neetoMolecules.productEmbed.queryParam.label")
+      }), isPresent(queryParamsProps.helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$7({
+        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-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-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-testid": "dynamic-query-delete-button",
+          icon: Trash2,
+          variant: "ghost",
+          onClick: function onClick() {
+            return handleRemoveQueryParam(index);
+          }
+        })]
+      }, index);
+    }), /*#__PURE__*/jsx(Button, {
+      className: "my-2",
+      "data-testid": "dynamic-query-add-new-button",
+      icon: Plus,
+      iconPosition: "left",
+      variant: "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(useShallow(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    })),
+    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
+  useEffect(function () {
+    if (isQueryParamsEnabled) return;
+    updateCustomization({
+      queryParams: undefined
+    });
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Input, {
+      className: "w-full",
+      "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(useShallow(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    })),
+    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-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, {
+        dataTestId: "button-position-select-field",
+        label: t("neetoMolecules.productEmbed.floatingPopup.button.pos"),
+        options: FLOATING_BUTTON_POSITIONS,
+        value: btnPosition,
+        onChange: function onChange(value) {
+          return updateCustomization({
+            btnPosition: value
+          });
+        }
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between gap-2",
+      "data-testid": "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-testid": "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-testid": "show-icon-checkbox",
+      label: t("neetoMolecules.productEmbed.floatingPopup.showCalIcon"),
+      onCheckedChange: function onCheckedChange(checked) {
+        return updateCustomization({
+          showIcon: checked
+        });
+      }
+    }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
+      updateCustomization: updateCustomization
+    })]
+  });
+};
+
+var _excluded = ["value", "label", "helpIconProps"];
+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 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: /*#__PURE__*/jsxs("span", {
+          className: "flex items-center gap-1",
+          children: [label || SWITCH_OPTIONS[option].label, helpIconProps && /*#__PURE__*/jsx(HelpPopover, _objectSpread$6({}, helpIconProps.popoverProps))]
+        }),
+        onCheckedChange: function onCheckedChange(checked) {
+          return updateCustomization(_defineProperty({}, option, _objectSpread$6(_objectSpread$6({}, rest), {}, {
+            label: label,
+            helpIconProps: helpIconProps,
+            value: checked
+          })));
+        }
+      }, option);
+    })
+  });
+};
+
+var Iframe$1 = function Iframe(_ref) {
+  var updateCustomization = _ref.updateCustomization,
+    otherCustomizations = _ref.otherCustomizations,
+    customization = _ref.customization;
+  var _useProductEmbedStore = useProductEmbedStore(useShallow(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    })),
+    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(useShallow(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    })),
+    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__*/jsx(Input, {
+      "data-testid": "inline-element-id-input-field",
+      label: t("neetoMolecules.productEmbed.inline.elementId"),
+      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$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 InlineEmbedIcon = function InlineEmbedIcon(_ref) {
+  var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsxs("svg", _objectSpread$5(_objectSpread$5({
+    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$5(_objectSpread$5({
+    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$5(_objectSpread$5({
+    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].value),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedLanguage = _useState2[0],
+    setSelectedLanguage = _useState2[1];
+  var code = generateCode({
+    id: id,
+    selectedLanguage: selectedLanguage,
+    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, {
+        variant: "h4",
+        children: t("neetoMolecules.productEmbed.embedCode")
+      }), /*#__PURE__*/jsx(Select, {
+        className: "w-28 flex-grow-0",
+        options: supportedLanguagesOptions,
+        size: "small",
+        value: selectedLanguage,
+        onChange: setSelectedLanguage
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "relative w-full overflow-y-auto [&_.neeto-molecules-code-block]:!mt-0 [&_.neeto-molecules-code-block]:h-[13.4375rem] [&_.neeto-molecules-code-block]:text-sm",
+      "data-testid": "embed-code-block",
+      children: /*#__PURE__*/jsx(Codeblock, {
+        code: code,
+        codeblockProps: {
+          "data-testid": "".concat(selectedLanguage, "-code-block")
+        },
+        copyButtonProps: {
+          variant: "default",
+          label: t("neetoMolecules.productEmbed.copyCode")
+        }
+      })
+    })]
+  });
+};
+
+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 FloatingPopupPlaceholderImage = function FloatingPopupPlaceholderImage(_ref) {
+  var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsxs("svg", _objectSpread$4(_objectSpread$4({
+    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$4(_objectSpread$4({
+    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 _window$appName;
+    var element = document.getElementById(elementSelectorId);
+    if (!element) return;
+    var appName = globalProps$1.appName.replace(/^neeto/i, "neeto");
+    (_window$appName = window[appName]) === null || _window$appName === void 0 || _window$appName.embed(element, iframeURL);
+  }, [iframeURL]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "relative h-full w-full overflow-hidden",
+    children: [/*#__PURE__*/jsx(ElementPopupPlaceholderImage, {
+      className: "text-muted-foreground/20 absolute inset-0 h-auto w-full p-10"
+    }), /*#__PURE__*/jsx(Button, {
+      className: "absolute start-[48.5294117647%] top-[39.0804597701%]",
+      "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 _window$appName;
+    var element = document.getElementById(elementSelectorId);
+    if (!element) return;
+    var appName = globalProps$1.appName.replace(/^neeto/i, "neeto");
+    (_window$appName = window[appName]) === null || _window$appName === void 0 || _window$appName.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: "text-muted-foreground/20 h-auto w-full p-10"
+    }), /*#__PURE__*/jsx(Button, {
+      "data-testid": "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]);
+}
+
+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 Iframe = function Iframe(_ref) {
+  var iframeURL = _ref.iframeURL,
+    customization = _ref.customization;
+  var height = customization.height,
+    width = customization.width,
+    iframeTitle = customization.iframeTitle,
+    dynamicHeight = customization.dynamicHeight,
+    iframeAttributes = customization.iframeAttributes;
+  var iframeRef = useRef(null);
+  useIframeHeightReset(iframeRef, dynamicHeight);
+  return /*#__PURE__*/jsx("iframe", _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, iframeAttributes), {}, {
+    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$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 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$2(_objectSpread$2({}, existingQueryParams), activeOptions);
+};
+var buildIframeURL = function buildIframeURL(_ref) {
+  var previewURL = _ref.previewURL,
+    selectedEmbed = _ref.selectedEmbed,
+    queryParams = _ref.queryParams,
+    customization = _ref.customization;
+  var url = new URL(previewURL);
+  var params = buildQueryParams(customization, queryParams);
+  Object.entries(params).forEach(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      name = _ref3[0],
+      value = _ref3[1];
+    url.searchParams.append(name, value);
+  });
+  if (selectedEmbed === EMBED_OPTIONS.FLOATING_POPUP || selectedEmbed === EMBED_OPTIONS.ELEMENT_POPUP) {
+    url.searchParams.set("dynamicHeight", "true");
+  }
+  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(useShallow(function (store) {
+      return {
+        queryParams: store["queryParams"]
+      };
+    })),
+    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: previewURL,
+    selectedEmbed: selectedEmbed,
+    queryParams: queryParams,
+    customization: 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: "relative h-full [&>iframe]:absolute [&>iframe]:inset-0 [&>iframe]:h-full [&>iframe]:w-full",
+    wrapperClassName: "pointer-events-auto h-full min-h-[18.75rem]",
+    children: /*#__PURE__*/jsx(Component, {
+      customization: customization,
+      iframeURL: 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 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$1(_objectSpread$1({}, 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: "md:border-border flex w-full shrink-0 flex-col items-start overflow-y-auto px-5 py-8 md:h-full md:max-w-[25rem] md:overflow-y-auto md:border-e md:px-10 lg:max-w-[30.3125rem]",
+      children: [/*#__PURE__*/jsx(Button, {
+        className: "mb-4",
+        "data-testid": "back-to-embed-selection-button",
+        icon: ArrowLeft,
+        iconPosition: "left",
+        label: t("neetoMolecules.productEmbed.backToEmbedSelection"),
+        size: "sm",
+        to: location.pathname,
+        variant: "link"
+      }), /*#__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-testid": "".concat(hyphenate(selectedEmbed), "-description"),
+        variant: "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: "bg-muted/40 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
+      })
+    })]
+  });
+};
+
+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 EmbedSelector = function EmbedSelector(_ref) {
+  var options = _ref.options,
+    goBackLink = _ref.goBackLink,
+    title = _ref.title,
+    titleHelpPopoverProps = _ref.titleHelpPopoverProps,
+    subTitleHelpPopoverProps = _ref.subTitleHelpPopoverProps;
+  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-testid": "back-button",
+      icon: ArrowLeft,
+      iconPosition: "left",
+      label: t("neetoMolecules.productEmbed.backToShare"),
+      size: "sm",
+      to: goBackLink,
+      variant: "link"
+    }), /*#__PURE__*/jsx(Header, {
+      titleHelpPopoverProps: titleHelpPopoverProps,
+      className: "py-0",
+      "data-testid": "embed-selector-header",
+      title: t("neetoMolecules.productEmbed.title")
+    }), /*#__PURE__*/jsxs("div", {
+      className: "mx-auto w-full max-w-5xl py-6 md:py-10",
+      children: [/*#__PURE__*/jsxs(Typography, {
+        className: "mb-2",
+        variant: "h2",
+        children: [title || t("neetoMolecules.productEmbed.embedSelectionTitle", {
+          productName: globalProps$1.appName
+        }), isPresent(subTitleHelpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread(_objectSpread({}, subTitleHelpPopoverProps), {}, {
+          className: classnames("ml-2 align-middle", subTitleHelpPopoverProps === null || subTitleHelpPopoverProps === void 0 ? void 0 : subTitleHelpPopoverProps.className)
+        }))]
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "mb-8",
+        variant: "body1",
+        children: t("neetoMolecules.productEmbed.embedSelectionDescription")
+      }), /*#__PURE__*/jsx("div", {
+        className: "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: "border-border bg-background outline-background hover:border-primary hover:outline-primary flex w-full flex-col rounded-xl border p-6 text-start outline outline-1 transition-all motion-reduce:transition-none",
+            "data-testid": "embed-selector-card-".concat(hyphenate(key)),
+            onClick: handleMetaClick(history, "".concat(location.pathname, "?type=").concat(hyphenate(key))),
+            children: [/*#__PURE__*/jsx("span", {
+              className: "mb-6 block",
+              children: /*#__PURE__*/jsx(EmbedIcon, {
+                className: "text-muted-foreground/30 h-auto w-full max-w-72"
+              })
+            }), /*#__PURE__*/jsx(Typography, {
+              className: "mb-2",
+              variant: "h4",
+              children: label
+            }), /*#__PURE__*/jsx(Typography, {
+              variant: "body2",
+              children: description
+            })]
+          }, key);
+        })
+      })]
+    })]
+  });
+};
+
+var ProductEmbed = function ProductEmbed(_ref) {
+  var title = _ref.title,
+    _ref$titleHelpPopover = _ref.titleHelpPopoverProps,
+    titleHelpPopoverProps = _ref$titleHelpPopover === void 0 ? {} : _ref$titleHelpPopover,
+    _ref$subTitleHelpPopo = _ref.subTitleHelpPopoverProps,
+    subTitleHelpPopoverProps = _ref$subTitleHelpPopo === void 0 ? {} : _ref$subTitleHelpPopo,
+    _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(useShallow(function (store) {
+      return {
+        setProductEmbedState: store["setProductEmbedState"]
+      };
+    })),
+    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,
+    subTitleHelpPopoverProps: subTitleHelpPopoverProps,
+    title: title,
+    titleHelpPopoverProps: titleHelpPopoverProps
+  });
+};
+
+export { ProductEmbed as default };
+//# sourceMappingURL=ProductEmbed.js.map