@bigbinary/neeto-molecules 3.16.8 → 3.16.9

package/dist/cjs/ProductEmbed.js

@@ -1,19 +1,21 @@
 'use strict';
 
+var neetoCist = require('@bigbinary/neeto-cist');
+var reactRouterDom = require('react-router-dom');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var classnames = require('classnames');
-var neetoCist = require('@bigbinary/neeto-cist');
 var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
 var Button = require('@bigbinary/neetoui/Button');
 var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
+var Container = require('./Container.js');
+var Header = require('./Header.js');
+var Select = require('@bigbinary/neetoui/Select');
 var Codeblock = require('./Codeblock.js');
-var jsxRuntime = require('react/jsx-runtime');
 var i18next = require('i18next');
-var Code$1 = require('@bigbinary/neeto-icons/Code');
 var Input = require('@bigbinary/neetoui/Input');
 var Callout = require('@bigbinary/neetoui/Callout');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -21,73 +23,43 @@ var Delete = require('@bigbinary/neeto-icons/Delete');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var Label = require('@bigbinary/neetoui/Label');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var jsxRuntime = require('react/jsx-runtime');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
-var Select = require('@bigbinary/neetoui/Select');
 var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
-var Tab = require('@bigbinary/neetoui/Tab');
-var Radio = require('@bigbinary/neetoui/Radio');
+var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var BrowserPreview = require('./BrowserPreview.js');
 var injectCss = require('./inject-css-vQvjPR2x.js');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+require('./index-JY2zVpnv.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+require('./Breadcrumbs.js');
+require('@bigbinary/neeto-commons-frontend/utils/general');
+require('./HelpPopover.js');
+require('@bigbinary/neeto-icons/Help');
+require('@bigbinary/neetoui/Popover');
+require('./MoreDropdown.js');
+require('@bigbinary/neeto-icons/MenuHorizontal');
+require('@bigbinary/neeto-icons/MenuVertical');
+require('@bigbinary/neetoui/Dropdown');
+require('@bigbinary/neetoui/Tooltip');
+require('./Search.js');
+require('@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce');
+require('@bigbinary/neeto-commons-frontend/react-utils/useQueryParams');
+require('@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect');
+require('@bigbinary/neeto-icons/Search');
+require('@bigbinary/neeto-commons-frontend/utils');
 require('react-syntax-highlighter/dist/esm/prism-light.js');
 require('react-syntax-highlighter/dist/esm/styles/prism');
 require('./CopyToClipboardButton.js');
-require('@bigbinary/neeto-commons-frontend/utils/general');
 require('@bigbinary/neeto-icons/Copy');
 require('@bigbinary/neeto-icons/Check');
 
-var Code = function Code(_ref) {
-  var code = _ref.code,
-    tab = _ref.tab;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "neeto-molecules-embed__code-block relative w-full overflow-y-auto",
-    "data-cy": "embed-code-block",
-    "data-testid": "".concat(tab, "-code-block"),
-    children: /*#__PURE__*/jsxRuntime.jsx(Codeblock, {
-      code: code
-    })
-  });
-};
-
-var TAB_KEYS = {
-  HTML: "html",
-  REACT: "react"
-};
-var TABS = [{
-  key: TAB_KEYS.HTML,
-  label: i18next.t("neetoMolecules.productEmbed.tab.html"),
-  icon: Code$1
-}, {
-  key: TAB_KEYS.REACT,
-  label: i18next.t("neetoMolecules.productEmbed.tab.react"),
-  icon: Code$1
-}];
-var EMBED_OPTIONS = {
-  INLINE: "inline",
-  FLOATING_POPUP: "floatingPopup",
-  ELEMENT_POPUP: "elementPopup"
-};
-var DEFAULT_CUSTOMIZATION = _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"
-});
-var SCRIPT_ID = "embed-script";
-var TAB_STRING = "    ";
-
 var FLOATING_BUTTON_POSITIONS = [{
-  label: i18next.t("neetoMolecules.productEmbed.customization.position.bottomLeft"),
+  label: i18next.t("neetoMolecules.productEmbed.floatingPopup.position.bottomLeft"),
   value: "bottomLeft"
 }, {
-  label: i18next.t("neetoMolecules.productEmbed.customization.position.bottomRight"),
+  label: i18next.t("neetoMolecules.productEmbed.floatingPopup.position.bottomRight"),
   value: "bottomRight"
 }];
 var INITIAL_QUERY_PARAM = {
@@ -231,13 +203,13 @@ var reactCodeGenerators = {
   elementPopup: elementPopupEmbedCode
 };
 
-var _excluded = ["tab", "type"];
+var _excluded = ["selectedLanguage", "type"];
 var generateCode = function generateCode(options) {
   var _reactCodeGenerators$, _htmlCodeGenerators$t;
-  var tab = options.tab,
+  var selectedLanguage = options.selectedLanguage,
     type = options.type,
     embeddedCodeOptions = _objectWithoutProperties(options, _excluded);
-  return tab === "react" ? (_reactCodeGenerators$ = reactCodeGenerators[type]) === null || _reactCodeGenerators$ === void 0 ? void 0 : _reactCodeGenerators$.call(reactCodeGenerators, embeddedCodeOptions) : (_htmlCodeGenerators$t = htmlCodeGenerators[type]) === null || _htmlCodeGenerators$t === void 0 ? void 0 : _htmlCodeGenerators$t.call(htmlCodeGenerators, embeddedCodeOptions);
+  return selectedLanguage === "react" ? (_reactCodeGenerators$ = reactCodeGenerators[type]) === null || _reactCodeGenerators$ === void 0 ? void 0 : _reactCodeGenerators$.call(reactCodeGenerators, embeddedCodeOptions) : (_htmlCodeGenerators$t = htmlCodeGenerators[type]) === null || _htmlCodeGenerators$t === void 0 ? void 0 : _htmlCodeGenerators$t.call(htmlCodeGenerators, embeddedCodeOptions);
 };
 var buildDefaultCustomization = function buildDefaultCustomization(defaultCustomizations) {
   return ramda.mergeDeepLeft(defaultCustomizations, DEFAULT_CUSTOMIZATION);
@@ -258,9 +230,14 @@ var buildQueryParamsFromInputFields = function buildQueryParamsFromInputFields(i
   var queryParamJsonString = JSON.stringify(queryParams, null, 2);
   return queryParamJsonString.replace(/\n/g, " ").replace(/\s\s+/g, " ");
 };
+var toCamelCasedString = function toCamelCasedString(string) {
+  return string === null || string === void 0 ? void 0 : string.replace(/[_-]+(\w)/g, function (_, nextChar) {
+    return nextChar.toUpperCase();
+  });
+};
 
-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), !0).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; }
+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), !0).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 DynamicQueryParams = function DynamicQueryParams(_ref) {
   var updateCustomization = _ref.updateCustomization;
   var _useTranslation = reactI18next.useTranslation(),
@@ -280,7 +257,7 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
   };
   var handleInputChange = function handleInputChange(index, field, value) {
     var newQueryParams = queryParams.map(function (param, i) {
-      return i === index ? _objectSpread$1(_objectSpread$1({}, param), {}, _defineProperty({}, field, value)) : param;
+      return i === index ? _objectSpread$3(_objectSpread$3({}, param), {}, _defineProperty({}, field, value)) : param;
     });
     setQueryParams(newQueryParams);
   };
@@ -293,16 +270,16 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
       className: "mb-2",
       "data-cy": "dynamic-query-params-label",
-      children: t("neetoMolecules.productEmbed.customization.queryParam.label")
+      children: t("neetoMolecules.productEmbed.queryParam.label")
     }), queryParams.map(function (param, index) {
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "mb-1 flex gap-1",
+        className: "mb-2 flex gap-1",
         children: [/*#__PURE__*/jsxRuntime.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: t("neetoMolecules.productEmbed.customization.queryParam.keyNamePlaceholder"),
+          placeholder: t("neetoMolecules.productEmbed.queryParam.keyNamePlaceholder"),
           onChange: function onChange(e) {
             return handleInputChange(index, "name", e.target.value);
           }
@@ -311,7 +288,7 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
           "data-testid": "dynamic-query-key-value-input",
           name: "queryParams.".concat(index, ".value"),
           value: param.value,
-          placeholder: t("neetoMolecules.productEmbed.customization.queryParam.keyValuePlaceholder"),
+          placeholder: t("neetoMolecules.productEmbed.queryParam.keyValuePlaceholder"),
           onChange: function onChange(e) {
             return handleInputChange(index, "value", e.target.value);
           }
@@ -329,8 +306,8 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
       "data-cy": "dynamic-query-add-new-button",
       icon: Plus,
       iconPosition: "left",
+      label: t("neetoMolecules.productEmbed.queryParam.addQueryParam"),
       style: "link",
-      label: t("neetoMolecules.productEmbed.customization.queryParam.addQueryParam"),
       onClick: handleAddQueryParam
     })]
   });
@@ -350,22 +327,17 @@ var ElementPopup$1 = function ElementPopup(_ref) {
       queryParams: undefined
     });
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "space-y-6",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "element-popup-header",
-      style: "h4",
-      children: t("neetoMolecules.productEmbed.customization.elementPopup.title")
-    }), /*#__PURE__*/jsxRuntime.jsx(Callout, {
-      "data-cy": "element-popup-description",
-      children: t("neetoMolecules.productEmbed.customization.elementPopup.description")
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Callout, {
+      "data-cy": "element-popup-callout",
+      children: t("neetoMolecules.productEmbed.elementPopup.callout")
     }), /*#__PURE__*/jsxRuntime.jsx(Input, {
       className: "w-full",
       "data-cy": "element-id-input-field",
       "data-testid": "element-id-input-field",
+      label: t("neetoMolecules.productEmbed.elementPopup.elementId"),
       value: elementSelector,
-      error: !elementSelector && t("neetoMolecules.productEmbed.customization.elementPopup.warning"),
-      label: t("neetoMolecules.productEmbed.customization.elementPopup.elementId"),
+      error: !elementSelector && t("neetoMolecules.productEmbed.elementPopup.warning"),
       onChange: function onChange(e) {
         return updateCustomization({
           elementSelector: e.target.value
@@ -397,28 +369,14 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "space-y-6",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "popup-customization-header",
-      style: "h4",
-      children: t("neetoMolecules.productEmbed.customization.floatingPopup.title")
-    }), icon && /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
-      checked: showIcon,
-      "data-cy": "show-icon-checkbox",
-      "data-testid": "show-icon-checkbox",
-      label: t("neetoMolecules.productEmbed.customization.floatingPopup.showCalIcon"),
-      onChange: function onChange(e) {
-        return updateCustomization({
-          showIcon: e.target.checked
-        });
-      }
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex w-full flex-col gap-y-4",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "space-y-2",
       children: /*#__PURE__*/jsxRuntime.jsx(Input, {
         "data-cy": "button-text-input-field",
         "data-testid": "button-text-input-field",
+        label: t("neetoMolecules.productEmbed.floatingPopup.button.text"),
         value: btnText,
-        label: t("neetoMolecules.productEmbed.customization.floatingPopup.button.text"),
         onChange: function onChange(e) {
           return updateCustomization({
             btnText: e.target.value
@@ -430,12 +388,12 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
       children: /*#__PURE__*/jsxRuntime.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;
         },
-        label: t("neetoMolecules.productEmbed.customization.floatingPopup.button.pos"),
         onChange: function onChange(e) {
           return updateCustomization({
             btnPosition: e.value
@@ -443,12 +401,13 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
         }
       })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex items-center justify-between gap-x-2",
+      className: "flex items-center justify-between gap-2",
       "data-cy": "button-color-label",
       children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: t("neetoMolecules.productEmbed.customization.floatingPopup.button.color")
+        children: t("neetoMolecules.productEmbed.floatingPopup.button.color")
       }), /*#__PURE__*/jsxRuntime.jsx(ColorPicker, {
         color: btnColor,
+        size: "medium",
         onChange: function onChange(e) {
           return updateCustomization({
             btnColor: e.hex
@@ -456,18 +415,29 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
         }
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex items-center justify-between gap-x-2",
+      className: "flex items-center justify-between gap-2",
       "data-cy": "button-text-color-label",
       children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: t("neetoMolecules.productEmbed.customization.floatingPopup.button.textColor")
+        children: t("neetoMolecules.productEmbed.floatingPopup.button.textColor")
       }), /*#__PURE__*/jsxRuntime.jsx(ColorPicker, {
         color: btnTextColor,
+        size: "medium",
         onChange: function onChange(e) {
           return updateCustomization({
             btnTextColor: e.hex
           });
         }
       })]
+    }), icon && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(DynamicQueryParams, {
       updateCustomization: updateCustomization
     })]
@@ -494,17 +464,12 @@ var Inline$1 = function Inline(_ref) {
       queryParams: undefined
     });
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-y-6",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "customization-text",
-      style: "h4",
-      children: t("neetoMolecules.productEmbed.customization.inline.title")
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
         "data-cy": "window-size-text",
-        children: t("neetoMolecules.productEmbed.customization.inline.sizeOfEmbedWindow")
+        children: t("neetoMolecules.productEmbed.inline.sizeOfEmbedWindow")
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex justify-between gap-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
@@ -539,7 +504,7 @@ var Inline$1 = function Inline(_ref) {
       className: "flex flex-col gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
         "data-cy": "inline-element-id-input-label",
-        children: t("neetoMolecules.productEmbed.customization.inline.elementId")
+        children: t("neetoMolecules.productEmbed.inline.elementId")
       }), /*#__PURE__*/jsxRuntime.jsx(Input, {
         "data-cy": "inline-element-id-input-field",
         "data-testid": "inline-element-id-input-field",
@@ -554,93 +519,725 @@ var Inline$1 = function Inline(_ref) {
   });
 };
 
-var Customization = function Customization(_ref) {
-  var option = _ref.option,
-    customization = _ref.customization,
-    updateCustomization = _ref.updateCustomization,
-    isQueryParamsEnabled = _ref.isQueryParamsEnabled,
-    otherCustomizations = _ref.otherCustomizations;
-  var type = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline$1), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup$1), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup$1);
-  var Component = type[option];
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    customization: customization,
-    isQueryParamsEnabled: isQueryParamsEnabled,
-    otherCustomizations: otherCustomizations,
-    updateCustomization: updateCustomization
-  });
+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), !0).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 InlineEmbedIcon = function InlineEmbedIcon(_ref) {
+  var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$2(_objectSpread$2({
+    fill: "none",
+    height: "163",
+    viewBox: "0 0 278 163",
+    width: "278",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
+      clipPath: "url(#clip0_8605_6776)",
+      children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "rgb(var(--neeto-ui-white))",
+        height: "163",
+        rx: "6",
+        width: "278"
+      }), /*#__PURE__*/jsxRuntime.jsx("mask", {
+        fill: "rgb(var(--neeto-ui-white))",
+        id: "path-3-inside-1_8605_6776",
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M0 0h305v20H0z"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M0 0h305v20H0z",
+        fill: "rgb(var(--neeto-ui-white))"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M305 19H0v2h305z",
+        fill: "currentColor",
+        mask: "url(#path-3-inside-1_8605_6776)"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "10.596",
+        cy: "10.432",
+        fill: "#FD5350",
+        r: "2.307"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "18.143",
+        cy: "10.432",
+        fill: "#FEB33A",
+        r: "2.307"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "25.69",
+        cy: "10.432",
+        fill: "#2CC146",
+        r: "2.307"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M36 20h206v10H36zM36 150h206v12H36z",
+        fill: "currentColor"
+      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "2.311",
+        rx: "1.156",
+        width: "36.079",
+        x: "45.32",
+        y: "81.914"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "2.311",
+        rx: "1.156",
+        width: "20.949",
+        x: "45.32",
+        y: "87.688"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "#008068",
+        height: "7.988",
+        rx: "1",
+        width: "23.183",
+        x: "203.539",
+        y: "61.109"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "7.728",
+        rx: "1",
+        width: "23.183",
+        x: "203.539",
+        y: "73.57"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "8.134",
+        rx: "1",
+        width: "23.183",
+        x: "203.539",
+        y: "85.773"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "8.134",
+        rx: "1",
+        width: "23.183",
+        x: "203.539",
+        y: "98.383"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "8.134",
+        rx: "1",
+        width: "23.183",
+        x: "203.539",
+        y: "110.992"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "52.077",
+        cy: "67.819",
+        fill: "currentColor",
+        r: "6.733"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "120.314",
+        cy: "74.322",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "120.322",
+        cy: "84.876",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "120.322",
+        cy: "95.439",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "130.954",
+        cy: "63.767",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "130.954",
+        cy: "74.322",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "130.954",
+        cy: "84.876",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "130.954",
+        cy: "95.439",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "141.572",
+        cy: "63.767",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "141.572",
+        cy: "74.322",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "141.572",
+        cy: "84.876",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "141.572",
+        cy: "95.439",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "152.181",
+        cy: "63.767",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "152.181",
+        cy: "74.322",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "152.181",
+        cy: "84.876",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "162.806",
+        cy: "63.767",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "162.806",
+        cy: "74.322",
+        fill: "#008068",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "162.806",
+        cy: "84.876",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "173.439",
+        cy: "63.767",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "173.439",
+        cy: "74.322",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "173.439",
+        cy: "84.876",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "184.064",
+        cy: "63.767",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "184.064",
+        cy: "74.322",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "184.075",
+        cy: "84.876",
+        fill: "currentColor",
+        r: "2.65"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M93.023 38v104",
+        stroke: "#E7E7E7",
+        strokeWidth: "0.454"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      height: "162",
+      rx: "5.5",
+      stroke: "rgb(var(--neeto-ui-gray-300))",
+      width: "277",
+      x: "0.5",
+      y: "0.5"
+    }), /*#__PURE__*/jsxRuntime.jsx("defs", {
+      children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
+        id: "clip0_8605_6776",
+        children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("svg", _objectSpread$2(_objectSpread$2({
+    fill: "none",
+    height: "163",
+    viewBox: "0 0 278 163",
+    width: "278",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
+      clipPath: "url(#clip0_9047_10870)",
+      children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "rgb(var(--neeto-ui-white))",
+        height: "163",
+        rx: "6",
+        width: "278"
+      }), /*#__PURE__*/jsxRuntime.jsx("mask", {
+        fill: "rgb(var(--neeto-ui-white))",
+        id: "path-3-inside-1_9047_10870",
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M0 0H305V20H0V0Z"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M0 0H305V20H0V0Z",
+        fill: "rgb(var(--neeto-ui-white))"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M305 19H0V21H305V19Z",
+        fill: "currentColor",
+        mask: "url(#path-3-inside-1_9047_10870)"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "10.5963",
+        cy: "10.4322",
+        fill: "#FD5350",
+        r: "2.30723"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "18.1432",
+        cy: "10.4322",
+        fill: "#FEB33A",
+        r: "2.30723"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "25.69",
+        cy: "10.4322",
+        fill: "#2CC146",
+        r: "2.30723"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "3",
+        opacity: "0.78",
+        rx: "1.5",
+        width: "84.6936",
+        x: "145",
+        y: "63"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "3",
+        opacity: "0.78",
+        rx: "1.5",
+        width: "89",
+        x: "145",
+        y: "70"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "3",
+        opacity: "0.78",
+        rx: "1.5",
+        width: "49",
+        x: "145",
+        y: "77"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "3",
+        opacity: "0.78",
+        rx: "1.5",
+        width: "84.6936",
+        x: "36",
+        y: "111"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "3",
+        opacity: "0.78",
+        rx: "1.5",
+        width: "89",
+        x: "36",
+        y: "118"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "3",
+        opacity: "0.78",
+        rx: "1.5",
+        width: "25.8387",
+        x: "36",
+        y: "125"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "35",
+        width: "96",
+        x: "36",
+        y: "57"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "35",
+        width: "95",
+        x: "145",
+        y: "102"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "26",
+        width: "204",
+        x: "36",
+        y: "20"
+      }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "currentColor",
+        height: "14",
+        width: "204",
+        x: "36",
+        y: "148"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      height: "162",
+      rx: "5.5",
+      stroke: "rgb(var(--neeto-ui-gray-300))",
+      width: "277",
+      x: "0.5",
+      y: "0.5"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "#008068",
+      height: "18",
+      rx: "9",
+      width: "69",
+      x: "194",
+      y: "134"
+    }), /*#__PURE__*/jsxRuntime.jsx("defs", {
+      children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
+        id: "clip0_9047_10870",
+        children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("svg", _objectSpread$2(_objectSpread$2({
+    fill: "none",
+    height: "163",
+    viewBox: "0 0 278 163",
+    width: "278",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
+      clipPath: "url(#clip0_9047_10869)",
+      children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+        fill: "rgb(var(--neeto-ui-white))",
+        height: "163",
+        rx: "6",
+        width: "278"
+      }), /*#__PURE__*/jsxRuntime.jsx("mask", {
+        fill: "rgb(var(--neeto-ui-white))",
+        id: "path-3-inside-1_9047_10869",
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M0 0h305v20H0z"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M0 0h305v20H0z",
+        fill: "rgb(var(--neeto-ui-white))"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M305 19H0v2h305z",
+        fill: "currentColor",
+        mask: "url(#path-3-inside-1_9047_10869)"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "10.596",
+        cy: "10.432",
+        fill: "#FD5350",
+        r: "2.307"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "18.143",
+        cy: "10.432",
+        fill: "#FEB33A",
+        r: "2.307"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "25.69",
+        cy: "10.432",
+        fill: "#2CC146",
+        r: "2.307"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      height: "162",
+      rx: "5.5",
+      stroke: "rgb(var(--neeto-ui-gray-300))",
+      width: "277",
+      x: "0.5",
+      y: "0.5"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "3.944",
+      opacity: "0.78",
+      rx: "1.972",
+      width: "85",
+      x: "135",
+      y: "58.461"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "3.944",
+      opacity: "0.78",
+      rx: "1.972",
+      width: "89",
+      x: "135",
+      y: "66.352"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "#008068",
+      height: "7",
+      rx: "3.5",
+      width: "38",
+      x: "135",
+      y: "74"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "3.944",
+      opacity: "0.78",
+      rx: "1.972",
+      width: "85",
+      x: "135",
+      y: "100.859"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "3.944",
+      opacity: "0.78",
+      rx: "1.972",
+      width: "89",
+      x: "135",
+      y: "108.75"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "3.944",
+      opacity: "0.78",
+      rx: "1.972",
+      width: "26",
+      x: "135",
+      y: "116.641"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M36 52h88v34H36zM36 20h204v28H36zM240 162H36v-28h204zM36 90h88v41H36z",
+      fill: "currentColor"
+    }), /*#__PURE__*/jsxRuntime.jsx("defs", {
+      children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
+        id: "clip0_9047_10869",
+        children: /*#__PURE__*/jsxRuntime.jsx("rect", {
+          fill: "rgb(var(--neeto-ui-white))",
+          height: "163",
+          rx: "6",
+          width: "278"
+        })
+      })
+    })]
+  }));
 };
 
-var Header = function Header(_ref) {
-  var supportedLanguagesTabs = _ref.supportedLanguagesTabs,
-    setTab = _ref.setTab,
-    tab = _ref.tab;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex w-full",
-    children: /*#__PURE__*/jsxRuntime.jsx(Tab, {
-      noUnderline: true,
-      className: "neeto-molecules-product-embed-tab",
-      children: supportedLanguagesTabs.map(function (_ref2) {
-        var key = _ref2.key,
-          label = _ref2.label,
-          icon = _ref2.icon;
-        return /*#__PURE__*/React.createElement(Tab.Item, {
-          icon: icon,
-          active: tab === key,
-          "data-cy": "".concat(key, "-tab"),
-          "data-testid": "".concat(key, "-tab"),
-          key: key,
-          onClick: function onClick() {
-            return setTab(key);
-          }
-        }, label);
+var EMBED_OPTIONS = {
+  INLINE: "inline",
+  FLOATING_POPUP: "floatingPopup",
+  ELEMENT_POPUP: "elementPopup"
+};
+var EMBED_ICONS = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, InlineEmbedIcon), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopupIcon), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopupIcon);
+var DEFAULT_CUSTOMIZATION = _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"
+});
+var EMBED_CUSTOMIZATION_COMPONENTS = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline$1), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup$1), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup$1);
+var EMBED_TITLES = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, i18next.t("neetoMolecules.productEmbed.inline.title")), EMBED_OPTIONS.FLOATING_POPUP, i18next.t("neetoMolecules.productEmbed.floatingPopup.title")), EMBED_OPTIONS.ELEMENT_POPUP, i18next.t("neetoMolecules.productEmbed.elementPopup.title"));
+var SUPPORTED_LANGUAGES = [{
+  value: "html",
+  label: i18next.t("neetoMolecules.productEmbed.language.html")
+}, {
+  value: "react",
+  label: i18next.t("neetoMolecules.productEmbed.language.react")
+}];
+var SCRIPT_ID = "embed-script";
+var TAB_STRING = "    ";
+
+var Code = function Code(_ref) {
+  var id = _ref.id,
+    selectedEmbed = _ref.selectedEmbed,
+    embedScriptLink = _ref.embedScriptLink,
+    extraArgs = _ref.extraArgs,
+    inlineWrapperStyle = _ref.inlineWrapperStyle,
+    supportedLanguages = _ref.supportedLanguages,
+    customization = _ref.customization;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var supportedLanguagesOptions = neetoCist.filterBy({
+    value: function value(_value) {
+      return supportedLanguages === null || supportedLanguages === void 0 ? void 0 : supportedLanguages.includes(_value);
+    }
+  }, SUPPORTED_LANGUAGES);
+  var _useState = React.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
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-3",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "h4",
+        children: t("neetoMolecules.productEmbed.embedCode")
+      }), /*#__PURE__*/jsxRuntime.jsx(Select, {
+        className: "w-28 flex-grow-0",
+        options: supportedLanguagesOptions,
+        size: "small",
+        strategy: "fixed",
+        value: selectedLanguage,
+        onChange: setSelectedLanguage
+      })]
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Codeblock, {
+        code: code,
+        codeblockProps: {
+          "data-testid": "".concat(selectedLanguage.value, "-code-block")
+        },
+        copyButtonProps: {
+          style: "primary",
+          label: t("neetoMolecules.productEmbed.copyCode")
+        }
       })
-    })
+    })]
   });
 };
 
-var Options = function Options(_ref) {
-  var options = _ref.options,
-    selectedOption = _ref.selectedOption,
-    setSelectedOption = _ref.setSelectedOption;
-  return /*#__PURE__*/jsxRuntime.jsx(Radio, {
-    stacked: true,
-    containerClassName: "w-full flex flex-col gap-y-4",
-    name: "options",
-    children: Object.entries(options).map(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        _ref3$ = _ref3[1],
-        label = _ref3$.label,
-        description = _ref3$.description;
-      return /*#__PURE__*/jsxRuntime.jsxs("label", {
-        className: "neeto-ui-border-gray-300 neeto-ui-bg-white neeto-ui-rounded-lg w-full cursor-pointer border p-4",
-        "data-cy": "".concat(key, "-embed-option-label"),
-        "data-testid": "".concat(key, "-embed-option-label"),
-        htmlFor: key,
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex items-center",
-          children: /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
-            label: label,
-            checked: key === selectedOption,
-            className: "mb-0",
-            "data-cy": "".concat(key, "-embed-radio-button"),
-            "data-testid": "".concat(key, "-embed-radio-button"),
-            id: key,
-            name: "options",
-            value: key,
-            onChange: function onChange(event) {
-              return setSelectedOption(event.target.value);
-            }
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "w-full pl-6 pt-1",
-          "data-cy": "".concat(key, "-embed-option-description"),
-          style: "body2",
-          children: description
-        })]
-      }, key);
-    })
-  });
+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), !0).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 FloatingPopupPlaceholderImage = function FloatingPopupPlaceholderImage(_ref) {
+  var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$1(_objectSpread$1({
+    fill: "none",
+    height: "518",
+    viewBox: "0 0 796 518",
+    width: "796",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "12.706",
+      opacity: "0.78",
+      rx: "6.353",
+      width: "358.702",
+      x: "406.645",
+      y: "152.109"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "12.706",
+      opacity: "0.78",
+      rx: "6.353",
+      width: "376.941",
+      x: "406.645",
+      y: "181.758"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "12.706",
+      opacity: "0.78",
+      rx: "6.353",
+      width: "207.529",
+      x: "406.645",
+      y: "211.406"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "12.706",
+      opacity: "0.78",
+      rx: "6.353",
+      width: "358.702",
+      y: "333.414"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "12.706",
+      opacity: "0.78",
+      rx: "6.353",
+      width: "376.941",
+      y: "363.062"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "12.706",
+      opacity: "0.78",
+      rx: "6.353",
+      width: "109.435",
+      y: "392.711"
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("svg", _objectSpread$1(_objectSpread$1({
+    fill: "none",
+    height: "518",
+    viewBox: "0 0 748 518",
+    width: "748",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "14.463",
+      opacity: "0.78",
+      rx: "7.231",
+      width: "311.667",
+      x: "363",
+      y: "142.688"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "14.463",
+      opacity: "0.78",
+      rx: "7.231",
+      width: "326.333",
+      x: "363",
+      y: "171.617"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "14.463",
+      opacity: "0.78",
+      rx: "7.231",
+      width: "311.667",
+      x: "363",
+      y: "298.141"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "14.463",
+      opacity: "0.78",
+      rx: "7.231",
+      width: "326.333",
+      x: "363",
+      y: "327.07"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      fill: "currentColor",
+      height: "14.463",
+      opacity: "0.78",
+      rx: "7.231",
+      width: "95.333",
+      x: "363",
+      y: "356"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M0 119h322.667v124.667H0zM0 0h748v104H0zM748 522.336H0V419.669h748zM0 258.328h322.667v150.333H0z",
+      fill: "currentColor"
+    })]
+  }));
 };
 
 var ElementPopup = function ElementPopup(_ref) {
@@ -656,14 +1253,17 @@ var ElementPopup = function ElementPopup(_ref) {
       (_window$globalProps$a = window[globalProps.appName.replace(/^neeto/i, "neeto")]) === null || _window$globalProps$a === void 0 || _window$globalProps$a.embed(element, iframeURL);
     }
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "relative flex h-full w-full items-center justify-center p-6",
-    children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "relative h-full w-full overflow-hidden",
+    children: [/*#__PURE__*/jsxRuntime.jsx(ElementPopupPlaceholderImage, {
+      className: "neeto-ui-text-gray-100 absolute inset-0 h-auto w-full p-10"
+    }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+      className: "absolute left-[48.5294117647%] top-[39.0804597701%]",
       "data-cy": "preview-element-popup-button",
       "data-testid": "preview-element-popup-button",
       id: elementSelector,
-      label: t("neetoMolecules.productEmbed.customization.elementPopup.label")
-    })
+      label: t("neetoMolecules.productEmbed.elementPopup.label")
+    })]
   });
 };
 
@@ -686,9 +1286,11 @@ var FloatingPopup = function FloatingPopup(_ref) {
     btn.style.backgroundColor = btnColor;
     btn.style.color = btnTextColor;
   }, [btnColor, btnTextColor]);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "relative h-full w-full",
-    children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "relative h-full w-full overflow-hidden",
+    children: [/*#__PURE__*/jsxRuntime.jsx(FloatingPopupPlaceholderImage, {
+      className: "neeto-ui-text-gray-100 h-auto w-full p-10"
+    }), /*#__PURE__*/jsxRuntime.jsx(Button, {
       "data-cy": "popup-preview-button",
       icon: icon && showIcon ? icon : null,
       iconPosition: "left",
@@ -698,7 +1300,7 @@ var FloatingPopup = function FloatingPopup(_ref) {
         "left-0": btnPosition === "bottomLeft",
         "right-0": btnPosition === "bottomRight"
       })
-    })
+    })]
   });
 };
 
@@ -717,14 +1319,14 @@ var Inline = function Inline(_ref) {
 
 var Preview = function Preview(_ref) {
   var isScriptLoading = _ref.isScriptLoading,
-    selectedOption = _ref.selectedOption,
+    selectedEmbed = _ref.selectedEmbed,
     id = _ref.id,
     customization = _ref.customization,
     _ref$customPreviewIfr = _ref.customPreviewIframeUrl,
     customPreviewIframeUrl = _ref$customPreviewIfr === void 0 ? "" : _ref$customPreviewIfr;
   var preview = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup);
   var iframeURL = customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id);
-  var Component = preview[selectedOption];
+  var Component = preview[selectedEmbed];
   if (isScriptLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex min-h-0 flex-grow items-center justify-center overflow-y-auto",
@@ -741,68 +1343,40 @@ var Preview = function Preview(_ref) {
   });
 };
 
-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-left:0!important;padding-left:.75rem;padding-right:.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;padding:1.5rem;width:100%}@media (min-width:768px){.neeto-molecules-embed__left-sidebar{border-right:1px solid rgb(var(--neeto-ui-gray-200));max-width:25rem}}@media (min-width:1024px){.neeto-molecules-embed__left-sidebar{max-width:27.5rem}}.neeto-molecules-embed__code-block .neeto-molecules-code-block{font-size:.875rem;height:15.625rem;margin-top: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%;left:0;position:absolute;top:0;width:100%}";
+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-left:0!important;padding-left:.75rem;padding-right:.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-right: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-top: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%;left: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:left!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}";
 injectCss.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), !0).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 ProductEmbed = function ProductEmbed(_ref) {
-  var _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,
+var EmbedRenderer = function EmbedRenderer(_ref) {
+  var className = _ref.className,
+    customEmbedScriptPath = _ref.customEmbedScriptPath,
+    customPreviewIframeUrl = _ref.customPreviewIframeUrl,
     id = _ref.id,
-    _ref$isQueryParamsEna = _ref.isQueryParamsEnabled,
-    isQueryParamsEnabled = _ref$isQueryParamsEna === void 0 ? false : _ref$isQueryParamsEna,
-    _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 ? neetoCist.noop : _ref$otherCustomizati,
-    _ref$inlineWrapperSty = _ref.inlineWrapperStyle,
-    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "" : _ref$inlineWrapperSty,
-    _ref$supportedLanguag = _ref.supportedLanguages,
-    supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag;
-  var supportedLanguagesTabs = neetoCist.filterBy({
-    key: function key(_key) {
-      return supportedLanguages === null || supportedLanguages === void 0 ? void 0 : supportedLanguages.includes(_key);
-    }
-  }, TABS);
+    isQueryParamsEnabled = _ref.isQueryParamsEnabled,
+    options = _ref.options,
+    extraArgs = _ref.extraArgs,
+    otherCustomizations = _ref.otherCustomizations,
+    inlineWrapperStyle = _ref.inlineWrapperStyle,
+    supportedLanguages = _ref.supportedLanguages,
+    selectedEmbed = _ref.selectedEmbed;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var location = reactRouterDom.useLocation();
   var _useState = React.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isScriptLoading = _useState2[0],
     setIsScriptLoading = _useState2[1];
-  var _useState3 = React.useState(supportedLanguagesTabs[0].key),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tab = _useState4[0],
-    setTab = _useState4[1];
-  var _useState5 = React.useState(EMBED_OPTIONS.INLINE),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedOption = _useState6[0],
-    setSelectedOption = _useState6[1];
-  var _useState7 = React.useState(function () {
+  var _useState3 = React.useState(function () {
       return buildDefaultCustomization(options);
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    customizations = _useState8[0],
-    setCustomizations = _useState8[1];
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
+    _useState4 = _slicedToArray(_useState3, 2),
+    customizations = _useState4[0],
+    setCustomizations = _useState4[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 code = generateCode({
-    id: id,
-    tab: tab,
-    type: selectedOption,
-    customization: customizations[selectedOption],
-    embedScriptLink: embedScriptLink,
-    extraArgs: extraArgs,
-    inlineWrapperStyle: inlineWrapperStyle
-  });
   var loadScript = function loadScript() {
     var script = document.createElement("script");
     script.id = SCRIPT_ID;
@@ -812,75 +1386,184 @@ var ProductEmbed = function ProductEmbed(_ref) {
   };
   var updateCustomization = function updateCustomization(props) {
     return setCustomizations(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, _defineProperty({}, selectedOption, ramda.mergeLeft(props, prevState[selectedOption])));
+      return _objectSpread(_objectSpread({}, prevState), {}, _defineProperty({}, selectedEmbed, ramda.mergeLeft(props, prevState[selectedEmbed])));
     });
   };
   React.useEffect(function () {
     var isScriptLoaded = document.getElementById(SCRIPT_ID);
     if (isScriptLoaded) setIsScriptLoading(false);else loadScript();
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
     "data-testid": "embed-product",
-    className: classnames("neeto-molecules-embed flex w-full flex-grow flex-col md:flex-row", className),
+    className: classnames("neeto-molecules-embed flex w-full flex-grow flex-col p-0 md:flex-row", className),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "neeto-molecules-embed__left-sidebar",
-      children: [goBackLink && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      className: "neeto-molecules-embed__left-sidebar px-5 py-8 md:h-full md:overflow-y-auto md:px-10",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
         className: "mb-4",
-        "data-cy": "back-button",
-        "data-testid": "back-button",
+        "data-cy": "back-to-embed-selection-button",
+        "data-testid": "back-to-embed-selection-button",
         icon: LeftArrow,
         iconPosition: "left",
-        label: t("neetoMolecules.productEmbed.backToShare"),
+        label: t("neetoMolecules.productEmbed.backToEmbedSelection"),
         size: "small",
         style: "link",
-        to: goBackLink
-      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        "data-cy": "embed-options-header-title",
-        style: "h3",
-        children: t("neetoMolecules.productEmbed.embedOptions.title")
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "mt-6 flex w-full flex-col gap-y-6 md:pb-20",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Options, {
-          options: options,
-          selectedOption: selectedOption,
-          setSelectedOption: setSelectedOption
-        }), /*#__PURE__*/jsxRuntime.jsx(Customization, {
-          isQueryParamsEnabled: isQueryParamsEnabled,
-          otherCustomizations: otherCustomizations,
-          updateCustomization: updateCustomization,
-          customization: customizations[selectedOption],
-          option: selectedOption
-        })]
+        to: location.pathname
+      }), /*#__PURE__*/jsxRuntime.jsx(Header, {
+        className: "py-0",
+        "data-testid": "".concat(neetoCist.hyphenate(selectedEmbed), "-embed-title"),
+        title: EMBED_TITLES[selectedEmbed]
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "mt-2",
+        "data-cy": "".concat(neetoCist.hyphenate(selectedEmbed), "-description"),
+        style: "body2",
+        children: description
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "mt-4 flex w-full flex-col gap-y-6",
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-6",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Code, {
+            customization: customization,
+            embedScriptLink: embedScriptLink,
+            extraArgs: extraArgs,
+            id: id,
+            inlineWrapperStyle: inlineWrapperStyle,
+            selectedEmbed: selectedEmbed,
+            supportedLanguages: supportedLanguages
+          }), /*#__PURE__*/jsxRuntime.jsx(CustomizationComponent, {
+            customization: customization,
+            isQueryParamsEnabled: isQueryParamsEnabled,
+            otherCustomizations: otherCustomizations,
+            updateCustomization: updateCustomization
+          })]
+        })
       })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-molecules-embed__preview neeto-ui-bg-gray-50 flex min-h-screen 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__*/jsxRuntime.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
+  var location = reactRouterDom.useLocation();
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    className: "neeto-molecules-embed-landing-page py-8",
+    children: [goBackLink && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Header, {
+      className: "py-0",
+      "data-testid": "embed-selector-header",
+      title: t("neetoMolecules.productEmbed.title")
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "neeto-molecules-embed__preview neeto-ui-bg-white flex min-h-screen w-full min-w-0 flex-col gap-3 overflow-y-auto p-6 md:min-h-0 md:flex-grow",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
-        setTab: setTab,
-        supportedLanguagesTabs: supportedLanguagesTabs,
-        tab: tab
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex min-h-0 flex-grow flex-col gap-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex-shrink-0",
-          "data-testid": "embed-code-block",
-          children: /*#__PURE__*/jsxRuntime.jsx(Code, {
-            code: code,
-            tab: tab
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex-grow",
-          children: /*#__PURE__*/jsxRuntime.jsx(Preview, {
-            customPreviewIframeUrl: customPreviewIframeUrl,
-            id: id,
-            isScriptLoading: isScriptLoading,
-            selectedOption: selectedOption,
-            customization: customizations[selectedOption]
-          })
-        })]
+      className: "neeto-molecules-embed-landing-page__container mx-auto w-full max-w-5xl py-6 md:py-10",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "mb-2",
+        style: "h2",
+        children: title || t("neetoMolecules.productEmbed.embedSelectionTitle", {
+          productName: globalProps.appName
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "mb-8",
+        style: "body1",
+        children: t("neetoMolecules.productEmbed.embedSelectionDescription")
+      }), /*#__PURE__*/jsxRuntime.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;
+          var EmbedIcon = EMBED_ICONS[key];
+          return /*#__PURE__*/jsxRuntime.jsxs("button", {
+            className: "neeto-molecules-embed-landing-page__card w-full",
+            "data-testid": "embed-selector-card-".concat(neetoCist.hyphenate(key)),
+            onClick: reactUtils.handleMetaClick(history, "".concat(location.pathname, "?type=").concat(neetoCist.hyphenate(key))),
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "neeto-molecules-embed-landing-page__card-icon mb-6 block",
+              children: /*#__PURE__*/jsxRuntime.jsx(EmbedIcon, {
+                className: "neeto-ui-text-gray-200 h-auto w-full max-w-72"
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+              className: "mb-2",
+              style: "h4",
+              children: label
+            }), /*#__PURE__*/jsxRuntime.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$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 ? neetoCist.noop : _ref$otherCustomizati,
+    _ref$inlineWrapperSty = _ref.inlineWrapperStyle,
+    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "" : _ref$inlineWrapperSty,
+    _ref$supportedLanguag = _ref.supportedLanguages,
+    supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag;
+  var _useLocation = reactRouterDom.useLocation(),
+    search = _useLocation.search;
+  var queryParams = new URLSearchParams(search);
+  var selectedEmbed = toCamelCasedString(queryParams.get("type"));
+  return selectedEmbed ? /*#__PURE__*/jsxRuntime.jsx(EmbedRenderer, {
+    className: className,
+    customEmbedScriptPath: customEmbedScriptPath,
+    customPreviewIframeUrl: customPreviewIframeUrl,
+    extraArgs: extraArgs,
+    id: id,
+    inlineWrapperStyle: inlineWrapperStyle,
+    isQueryParamsEnabled: isQueryParamsEnabled,
+    options: options,
+    otherCustomizations: otherCustomizations,
+    selectedEmbed: selectedEmbed,
+    supportedLanguages: supportedLanguages
+  }) : /*#__PURE__*/jsxRuntime.jsx(EmbedSelector, {
+    goBackLink: goBackLink,
+    options: options,
+    title: title
+  });
+};
+
 module.exports = ProductEmbed;
 //# sourceMappingURL=ProductEmbed.js.map