@bigbinary/neeto-molecules 1.11.3 → 1.11.5

package/dist/ProductEmbed.js

@@ -1,115 +1,28 @@
-import React, { useEffect, useState } from 'react';
-import classNames from 'classnames';
+import { _ as _defineProperty } from './defineProperty-549061a7.js';
+import { _ as _slicedToArray } from './slicedToArray-b4278ecd.js';
+import React__default, { useEffect, useState } from 'react';
+import classnames from 'classnames';
 import { Code as Code$1, Eye, LeftArrow } from '@bigbinary/neeto-icons';
 import { Typography, Callout, Input, Checkbox, Select, Label, ColorPicker, Tab, Radio, Button, Spinner } from '@bigbinary/neetoui';
 import { mergeDeepLeft, toPairs, mergeLeft } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import Codeblock from '@bigbinary/neeto-molecules/Codeblock';
-import { t as t$1 } from 'i18next';
-
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
+import Codeblock from './Codeblock.js';
+import { t } from 'i18next';
+import { n } from './inject-css-c86de496.js';
+import './extends-093996c9.js';
+import 'react-syntax-highlighter';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
+import './CopyToClipboardButton.js';
+import './objectWithoutProperties-a0edb288.js';
+import '@bigbinary/neeto-commons-frontend/utils/general';
 
 var Code = function Code(_ref) {
   var code = _ref.code;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "relative w-full overflow-y-auto",
     "data-cy": "embed-code-block",
     "data-testid": "embed-code-block"
-  }, /*#__PURE__*/React.createElement(Codeblock, {
+  }, /*#__PURE__*/React__default.createElement(Codeblock, {
     code: code
   }));
 };
@@ -120,11 +33,11 @@ var TAB_KEYS = {
 };
 var TABS = [{
   key: TAB_KEYS.HTML,
-  label: t$1("neetoMolecules.productEmbed.tab.html"),
+  label: t("neetoMolecules.productEmbed.tab.html"),
   icon: Code$1
 }, {
   key: TAB_KEYS.PREVIEW,
-  label: t$1("neetoMolecules.productEmbed.tab.preview"),
+  label: t("neetoMolecules.productEmbed.tab.preview"),
   icon: Eye
 }];
 var EMBED_OPTIONS = {
@@ -153,14 +66,14 @@ var ElementPopup$1 = function ElementPopup(_ref) {
   var elementSelector = customization.elementSelector;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-6"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "element-popup-header",
     style: "h4"
-  }, t("neetoMolecules.productEmbed.customization.elementPopup.title")), /*#__PURE__*/React.createElement(Callout, {
+  }, t("neetoMolecules.productEmbed.customization.elementPopup.title")), /*#__PURE__*/React__default.createElement(Callout, {
     "data-cy": "element-popup-description"
-  }, t("neetoMolecules.productEmbed.customization.elementPopup.description")), /*#__PURE__*/React.createElement(Input, {
+  }, t("neetoMolecules.productEmbed.customization.elementPopup.description")), /*#__PURE__*/React__default.createElement(Input, {
     className: "w-full",
     "data-cy": "element-id-input-field",
     "data-testid": "element-id-input-field",
@@ -176,10 +89,10 @@ var ElementPopup$1 = function ElementPopup(_ref) {
 };
 
 var FLOATING_BUTTON_POSITIONS = [{
-  label: t$1("neetoMolecules.productEmbed.customization.position.bottomLeft"),
+  label: t("neetoMolecules.productEmbed.customization.position.bottomLeft"),
   value: "bottomLeft"
 }, {
-  label: t$1("neetoMolecules.productEmbed.customization.position.bottomRight"),
+  label: t("neetoMolecules.productEmbed.customization.position.bottomRight"),
   value: "bottomRight"
 }];
 
@@ -194,12 +107,12 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
     btnPosition = customization.btnPosition,
     btnColor = customization.btnColor,
     icon = customization.icon;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-6"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "popup-customization-header",
     style: "h4"
-  }, t("neetoMolecules.productEmbed.customization.floatingPopup.title")), icon && /*#__PURE__*/React.createElement(Checkbox, {
+  }, t("neetoMolecules.productEmbed.customization.floatingPopup.title")), icon && /*#__PURE__*/React__default.createElement(Checkbox, {
     checked: showIcon,
     "data-cy": "show-icon-checkbox",
     "data-testid": "show-icon-checkbox",
@@ -209,9 +122,9 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
         showIcon: e.target.checked
       });
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React__default.createElement(Input, {
     "data-cy": "button-text-input-field",
     "data-testid": "button-text-input-field",
     value: btnText,
@@ -221,9 +134,9 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
         btnText: e.target.value
       });
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React__default.createElement(Select, {
     "data-cy": "button-position-select-field",
     "data-testid": "button-position-select-field",
     options: FLOATING_BUTTON_POSITIONS,
@@ -237,20 +150,20 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
         btnPosition: e.value
       });
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-between gap-x-2",
     "data-cy": "button-color-label"
-  }, /*#__PURE__*/React.createElement(Label, null, t("neetoMolecules.productEmbed.customization.floatingPopup.button.color")), /*#__PURE__*/React.createElement(ColorPicker, {
+  }, /*#__PURE__*/React__default.createElement(Label, null, t("neetoMolecules.productEmbed.customization.floatingPopup.button.color")), /*#__PURE__*/React__default.createElement(ColorPicker, {
     color: btnColor,
     onChange: function onChange(e) {
       return updateCustomization({
         btnColor: e.hex
       });
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-between gap-x-2",
     "data-cy": "button-text-color-label"
-  }, /*#__PURE__*/React.createElement(Label, null, t("neetoMolecules.productEmbed.customization.floatingPopup.button.textColor")), /*#__PURE__*/React.createElement(ColorPicker, {
+  }, /*#__PURE__*/React__default.createElement(Label, null, t("neetoMolecules.productEmbed.customization.floatingPopup.button.textColor")), /*#__PURE__*/React__default.createElement(ColorPicker, {
     color: btnTextColor,
     onChange: function onChange(e) {
       return updateCustomization({
@@ -272,18 +185,18 @@ var Inline$1 = function Inline(_ref) {
     var value = _ref2.target.value;
     return updateCustomization(_defineProperty({}, attribute, value));
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-y-6"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "customization-text",
     style: "h4"
-  }, t("neetoMolecules.productEmbed.customization.inline.title")), /*#__PURE__*/React.createElement("div", {
+  }, t("neetoMolecules.productEmbed.customization.inline.title")), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-2"
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React__default.createElement(Label, {
     "data-cy": "window-size-text"
-  }, t("neetoMolecules.productEmbed.customization.inline.sizeOfEmbedWindow")), /*#__PURE__*/React.createElement("div", {
+  }, t("neetoMolecules.productEmbed.customization.inline.sizeOfEmbedWindow")), /*#__PURE__*/React__default.createElement("div", {
     className: "flex justify-between gap-x-2"
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React__default.createElement(Input, {
     className: "neeto-molecules-product-embed-size-input",
     "data-cy": "inline-width-input-field",
     "data-testid": "inline-width-input-field",
@@ -296,7 +209,7 @@ var Inline$1 = function Inline(_ref) {
     onChange: function onChange(e) {
       return handleInputChange(e, "width");
     }
-  }), /*#__PURE__*/React.createElement(Input, {
+  }), /*#__PURE__*/React__default.createElement(Input, {
     className: "neeto-molecules-product-embed-size-input",
     "data-cy": "inline-height-input-field",
     "data-testid": "inline-height-input-field",
@@ -309,11 +222,11 @@ var Inline$1 = function Inline(_ref) {
     onChange: function onChange(e) {
       return handleInputChange(e, "height");
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-2"
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React__default.createElement(Label, {
     "data-cy": "inline-element-id-input-label"
-  }, t("neetoMolecules.productEmbed.customization.inline.elementId")), /*#__PURE__*/React.createElement(Input, {
+  }, t("neetoMolecules.productEmbed.customization.inline.elementId")), /*#__PURE__*/React__default.createElement(Input, {
     "data-cy": "inline-element-id-input-field",
     "data-testid": "inline-element-id-input-field",
     value: elementSelector,
@@ -329,7 +242,7 @@ var Customization = function Customization(_ref) {
     updateCustomization = _ref.updateCustomization;
   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__*/React.createElement(Component, {
+  return /*#__PURE__*/React__default.createElement(Component, {
     customization: customization,
     updateCustomization: updateCustomization
   });
@@ -338,16 +251,16 @@ var Customization = function Customization(_ref) {
 var Header = function Header(_ref) {
   var tab = _ref.tab,
     setTab = _ref.setTab;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-full pt-2"
-  }, /*#__PURE__*/React.createElement(Tab, {
+  }, /*#__PURE__*/React__default.createElement(Tab, {
     noUnderline: true,
     className: "neeto-molecules-product-embed-tab"
   }, TABS.map(function (_ref2) {
     var key = _ref2.key,
       label = _ref2.label,
       icon = _ref2.icon;
-    return /*#__PURE__*/React.createElement(Tab.Item, {
+    return /*#__PURE__*/React__default.createElement(Tab.Item, {
       icon: icon,
       active: tab === key,
       "data-cy": "".concat(key, "-tab"),
@@ -364,7 +277,7 @@ var Options = function Options(_ref) {
   var options = _ref.options,
     selectedOption = _ref.selectedOption,
     setSelectedOption = _ref.setSelectedOption;
-  return /*#__PURE__*/React.createElement(Radio, {
+  return /*#__PURE__*/React__default.createElement(Radio, {
     stacked: true,
     containerClassName: "w-full flex flex-col gap-y-6",
     name: "options"
@@ -374,15 +287,15 @@ var Options = function Options(_ref) {
       _ref3$ = _ref3[1],
       label = _ref3$.label,
       description = _ref3$.description;
-    return /*#__PURE__*/React.createElement("label", {
+    return /*#__PURE__*/React__default.createElement("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,
       key: key
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center"
-    }, /*#__PURE__*/React.createElement(Radio.Item, {
+    }, /*#__PURE__*/React__default.createElement(Radio.Item, {
       label: label,
       checked: key === selectedOption,
       className: "mb-0",
@@ -394,7 +307,7 @@ var Options = function Options(_ref) {
       onChange: function onChange(event) {
         return setSelectedOption(event.target.value);
       }
-    })), /*#__PURE__*/React.createElement(Typography, {
+    })), /*#__PURE__*/React__default.createElement(Typography, {
       className: "w-full pl-6 pt-1",
       "data-cy": "".concat(key, "-embed-option-description"),
       style: "body2"
@@ -403,21 +316,21 @@ var Options = function Options(_ref) {
 };
 
 var BrowserIcon = function BrowserIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React__default.createElement("svg", {
     fill: "none",
     height: "12",
     viewBox: "0 0 52 12",
     width: "52",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__default.createElement("path", {
     d: "M11.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
     fill: "#FF5F57",
     stroke: "#E14640"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__default.createElement("path", {
     d: "M31.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
     fill: "#FFBD2E",
     stroke: "#DFA123"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__default.createElement("path", {
     d: "M51.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
     fill: "#28CA42",
     stroke: "#1DAD2C"
@@ -435,9 +348,9 @@ var ElementPopup = function ElementPopup(_ref) {
     var element = document.getElementById(elementSelector);
     if (element) (_window$globalProps$a = window[globalProps.appName]) === null || _window$globalProps$a === void 0 ? void 0 : _window$globalProps$a.embed(element, iframeURL);
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "relative flex h-full w-full items-center justify-center p-6"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "preview-element-popup-button",
     "data-testid": "preview-element-popup-button",
     id: elementSelector,
@@ -465,15 +378,15 @@ var FloatingPopup = function FloatingPopup(_ref) {
     btn.style.backgroundColor = btnColor;
     btn.style.color = btnTextColor;
   }, [btnColor, btnTextColor]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "relative h-full w-full"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "popup-preview-button",
     icon: icon && showIcon ? icon : null,
     iconPosition: "left",
     id: "embedBtn",
     label: btnText,
-    className: classNames("absolute bottom-0 m-16", {
+    className: classnames("absolute bottom-0 m-16", {
       "left-0": btnPosition === "bottomLeft",
       "right-0": btnPosition === "bottomRight"
     })
@@ -485,7 +398,7 @@ var Inline = function Inline(_ref) {
     customization = _ref.customization;
   var height = customization.height,
     width = customization.width;
-  return /*#__PURE__*/React.createElement("iframe", {
+  return /*#__PURE__*/React__default.createElement("iframe", {
     className: "m-auto",
     height: "".concat(height, "%"),
     src: iframeURL,
@@ -504,24 +417,22 @@ var Preview = function Preview(_ref) {
   var iframeURL = customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id);
   var Component = preview[selectedOption];
   if (isScriptLoading) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: "flex min-h-0 flex-grow items-center justify-center overflow-y-auto"
-    }, /*#__PURE__*/React.createElement(Spinner, null));
+    }, /*#__PURE__*/React__default.createElement(Spinner, null));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-rounded-lg neeto-ui-border-gray-300 neeto-ui-bg-white relative flex w-full flex-col overflow-hidden border"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-border-gray-300 flex-shrink-0 border-b p-3"
-  }, /*#__PURE__*/React.createElement(BrowserIcon, null)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(BrowserIcon, null)), /*#__PURE__*/React__default.createElement("div", {
     className: "flex min-h-0 flex-grow overflow-y-auto"
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React__default.createElement(Component, {
     customization: customization,
     iframeURL: iframeURL
   })));
 };
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
 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:12px;padding-right:12px}.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;max-width:28rem;overflow-y:auto;padding:1.5rem;width:100%}";
 n(css,{});
 
@@ -669,12 +580,12 @@ var ProductEmbed = function ProductEmbed(_ref) {
     var isScriptLoaded = document.getElementById(SCRIPT_ID);
     if (isScriptLoaded) setIsScriptLoading(false);else loadScript();
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("flex w-full flex-grow", className),
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames("flex w-full flex-grow", className),
     "data-testid": "embed-product"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-embed-left-sidebar border-r"
-  }, goBackLink && /*#__PURE__*/React.createElement(Button, {
+  }, goBackLink && /*#__PURE__*/React__default.createElement(Button, {
     className: "mb-4 px-0",
     "data-cy": "back-button",
     "data-testid": "back-button",
@@ -684,37 +595,37 @@ var ProductEmbed = function ProductEmbed(_ref) {
     size: "small",
     style: "icon",
     to: goBackLink
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "embed-options-header-title",
     style: "h3"
-  }, t("neetoMolecules.productEmbed.embedOptions.title")), /*#__PURE__*/React.createElement(Typography, {
+  }, t("neetoMolecules.productEmbed.embedOptions.title")), /*#__PURE__*/React__default.createElement(Typography, {
     className: "mt-1",
     "data-cy": "embed-options-header-description",
     style: "body3"
-  }, t("neetoMolecules.productEmbed.embedOptions.description")), /*#__PURE__*/React.createElement("div", {
+  }, t("neetoMolecules.productEmbed.embedOptions.description")), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-6 flex w-full flex-col gap-y-6 pb-10"
-  }, /*#__PURE__*/React.createElement(Options, {
+  }, /*#__PURE__*/React__default.createElement(Options, {
     options: options,
     selectedOption: selectedOption,
     setSelectedOption: setSelectedOption
-  }), /*#__PURE__*/React.createElement(Customization, {
+  }), /*#__PURE__*/React__default.createElement(Customization, {
     updateCustomization: updateCustomization,
     customization: customizations[selectedOption],
     option: selectedOption
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-bg-white flex w-full min-w-0 flex-grow flex-col gap-4 p-6"
-  }, /*#__PURE__*/React.createElement(Header, {
+  }, /*#__PURE__*/React__default.createElement(Header, {
     setTab: setTab,
     tab: tab
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-grow overflow-y-auto"
-  }, tab === TAB_KEYS.PREVIEW ? /*#__PURE__*/React.createElement(Preview, {
+  }, tab === TAB_KEYS.PREVIEW ? /*#__PURE__*/React__default.createElement(Preview, {
     customPreviewIframeUrl: customPreviewIframeUrl,
     id: id,
     isScriptLoading: isScriptLoading,
     selectedOption: selectedOption,
     customization: customizations[selectedOption]
-  }) : /*#__PURE__*/React.createElement(Code, {
+  }) : /*#__PURE__*/React__default.createElement(Code, {
     code: code
   }))));
 };