@bigbinary/neeto-molecules 3.3.11 → 3.3.13

package/dist/ProductEmbed.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { useState, useEffect } from 'react';
+import { useState, useEffect, createElement } from 'react';
 import classnames from 'classnames';
 import { noop } from '@bigbinary/neeto-cist';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
@@ -9,6 +9,7 @@ import Typography from '@bigbinary/neetoui/Typography';
 import { mergeDeepLeft, toPairs, isEmpty, mergeLeft } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import Codeblock from './Codeblock.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { t } from 'i18next';
 import Code$1 from '@bigbinary/neeto-icons/Code';
 import Eye from '@bigbinary/neeto-icons/Eye';
@@ -25,7 +26,6 @@ import Tab from '@bigbinary/neetoui/Tab';
 import Radio from '@bigbinary/neetoui/Radio';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { n } from './inject-css-c86de496.js';
-import '@babel/runtime/helpers/extends';
 import 'react-syntax-highlighter';
 import 'react-syntax-highlighter/dist/esm/styles/prism';
 import './CopyToClipboardButton.js';
@@ -36,13 +36,14 @@ import '@bigbinary/neeto-icons/Check';
 
 var Code = function Code(_ref) {
   var code = _ref.code;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "relative w-full overflow-y-auto",
     "data-cy": "embed-code-block",
-    "data-testid": "embed-code-block"
-  }, /*#__PURE__*/React__default.createElement(Codeblock, {
-    code: code
-  }));
+    "data-testid": "embed-code-block",
+    children: /*#__PURE__*/jsx(Codeblock, {
+      code: code
+    })
+  });
 };
 
 var TAB_KEYS = {
@@ -226,48 +227,51 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
       queryParams: buildQueryParamsFromInputFields(queryParams)
     });
   }, [queryParams]);
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Label, {
-    className: "mb-2",
-    "data-cy": "dynamic-query-params-label"
-  }, t("neetoMolecules.productEmbed.customization.queryParam.label")), queryParams.map(function (param, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "mb-1 flex gap-1",
-      key: index
-    }, /*#__PURE__*/React__default.createElement(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"),
-      onChange: function onChange(e) {
-        return handleInputChange(index, "name", e.target.value);
-      }
-    }), /*#__PURE__*/React__default.createElement(Input, {
-      "data-cy": "dynamic-query-key-value-input",
-      "data-testid": "dynamic-query-key-value-input",
-      name: "queryParams.".concat(index, ".value"),
-      value: param.value,
-      placeholder: t("neetoMolecules.productEmbed.customization.queryParam.keyValuePlaceholder"),
-      onChange: function onChange(e) {
-        return handleInputChange(index, "value", e.target.value);
-      }
-    }), /*#__PURE__*/React__default.createElement(Button, {
-      "data-cy": "dynamic-query-delete-button",
-      icon: Delete,
-      style: "text",
-      onClick: function onClick() {
-        return handleRemoveQueryParam(index);
-      }
-    }));
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    className: "my-2",
-    "data-cy": "dynamic-query-add-new-button",
-    icon: Plus,
-    iconPosition: "left",
-    style: "link",
-    label: t("neetoMolecules.productEmbed.customization.queryParam.addQueryParam"),
-    onClick: handleAddQueryParam
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsx(Label, {
+      className: "mb-2",
+      "data-cy": "dynamic-query-params-label",
+      children: t("neetoMolecules.productEmbed.customization.queryParam.label")
+    }), queryParams.map(function (param, index) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "mb-1 flex gap-1",
+        children: [/*#__PURE__*/jsx(Input, {
+          "data-cy": "dynamic-query-key-name-input",
+          "data-testid": "dynamic-query-key-name-input",
+          name: "queryParams.".concat(index, ".name"),
+          value: param.name,
+          placeholder: t("neetoMolecules.productEmbed.customization.queryParam.keyNamePlaceholder"),
+          onChange: function onChange(e) {
+            return handleInputChange(index, "name", e.target.value);
+          }
+        }), /*#__PURE__*/jsx(Input, {
+          "data-cy": "dynamic-query-key-value-input",
+          "data-testid": "dynamic-query-key-value-input",
+          name: "queryParams.".concat(index, ".value"),
+          value: param.value,
+          placeholder: t("neetoMolecules.productEmbed.customization.queryParam.keyValuePlaceholder"),
+          onChange: function onChange(e) {
+            return handleInputChange(index, "value", e.target.value);
+          }
+        }), /*#__PURE__*/jsx(Button, {
+          "data-cy": "dynamic-query-delete-button",
+          icon: Delete,
+          style: "text",
+          onClick: function onClick() {
+            return handleRemoveQueryParam(index);
+          }
+        })]
+      }, index);
+    }), /*#__PURE__*/jsx(Button, {
+      className: "my-2",
+      "data-cy": "dynamic-query-add-new-button",
+      icon: Plus,
+      iconPosition: "left",
+      style: "link",
+      label: t("neetoMolecules.productEmbed.customization.queryParam.addQueryParam"),
+      onClick: handleAddQueryParam
+    })]
+  });
 };
 
 var ElementPopup$1 = function ElementPopup(_ref) {
@@ -284,28 +288,31 @@ var ElementPopup$1 = function ElementPopup(_ref) {
       queryParams: undefined
     });
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-6"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "element-popup-header",
-    style: "h4"
-  }, t("neetoMolecules.productEmbed.customization.elementPopup.title")), /*#__PURE__*/React__default.createElement(Callout, {
-    "data-cy": "element-popup-description"
-  }, 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",
-    value: elementSelector,
-    error: !elementSelector && t("neetoMolecules.productEmbed.customization.elementPopup.warning"),
-    label: t("neetoMolecules.productEmbed.customization.elementPopup.elementId"),
-    onChange: function onChange(e) {
-      return updateCustomization({
-        elementSelector: e.target.value
-      });
-    }
-  }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/React__default.createElement(DynamicQueryParams, {
-    updateCustomization: updateCustomization
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-6",
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "element-popup-header",
+      style: "h4",
+      children: t("neetoMolecules.productEmbed.customization.elementPopup.title")
+    }), /*#__PURE__*/jsx(Callout, {
+      "data-cy": "element-popup-description",
+      children: t("neetoMolecules.productEmbed.customization.elementPopup.description")
+    }), /*#__PURE__*/jsx(Input, {
+      className: "w-full",
+      "data-cy": "element-id-input-field",
+      "data-testid": "element-id-input-field",
+      value: elementSelector,
+      error: !elementSelector && t("neetoMolecules.productEmbed.customization.elementPopup.warning"),
+      label: t("neetoMolecules.productEmbed.customization.elementPopup.elementId"),
+      onChange: function onChange(e) {
+        return updateCustomization({
+          elementSelector: e.target.value
+        });
+      }
+    }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
+      updateCustomization: updateCustomization
+    })]
+  });
 };
 
 var FloatingPopup$1 = function FloatingPopup(_ref) {
@@ -327,72 +334,82 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
       queryParams: undefined
     });
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-6"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "popup-customization-header",
-    style: "h4"
-  }, t("neetoMolecules.productEmbed.customization.floatingPopup.title")), icon && /*#__PURE__*/React__default.createElement(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__*/React__default.createElement("div", {
-    className: "space-y-2"
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    "data-cy": "button-text-input-field",
-    "data-testid": "button-text-input-field",
-    value: btnText,
-    label: t("neetoMolecules.productEmbed.customization.floatingPopup.button.text"),
-    onChange: function onChange(e) {
-      return updateCustomization({
-        btnText: e.target.value
-      });
-    }
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-2"
-  }, /*#__PURE__*/React__default.createElement(Select, {
-    "data-cy": "button-position-select-field",
-    "data-testid": "button-position-select-field",
-    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
-      });
-    }
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between gap-x-2",
-    "data-cy": "button-color-label"
-  }, /*#__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__default.createElement("div", {
-    className: "flex items-center justify-between gap-x-2",
-    "data-cy": "button-text-color-label"
-  }, /*#__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({
-        btnTextColor: e.hex
-      });
-    }
-  })), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/React__default.createElement(DynamicQueryParams, {
-    updateCustomization: updateCustomization
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-6",
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "popup-customization-header",
+      style: "h4",
+      children: t("neetoMolecules.productEmbed.customization.floatingPopup.title")
+    }), icon && /*#__PURE__*/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__*/jsx("div", {
+      className: "space-y-2",
+      children: /*#__PURE__*/jsx(Input, {
+        "data-cy": "button-text-input-field",
+        "data-testid": "button-text-input-field",
+        value: btnText,
+        label: t("neetoMolecules.productEmbed.customization.floatingPopup.button.text"),
+        onChange: function onChange(e) {
+          return updateCustomization({
+            btnText: e.target.value
+          });
+        }
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "space-y-2",
+      children: /*#__PURE__*/jsx(Select, {
+        "data-cy": "button-position-select-field",
+        "data-testid": "button-position-select-field",
+        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
+          });
+        }
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between gap-x-2",
+      "data-cy": "button-color-label",
+      children: [/*#__PURE__*/jsx(Label, {
+        children: t("neetoMolecules.productEmbed.customization.floatingPopup.button.color")
+      }), /*#__PURE__*/jsx(ColorPicker, {
+        color: btnColor,
+        onChange: function onChange(e) {
+          return updateCustomization({
+            btnColor: e.hex
+          });
+        }
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between gap-x-2",
+      "data-cy": "button-text-color-label",
+      children: [/*#__PURE__*/jsx(Label, {
+        children: t("neetoMolecules.productEmbed.customization.floatingPopup.button.textColor")
+      }), /*#__PURE__*/jsx(ColorPicker, {
+        color: btnTextColor,
+        onChange: function onChange(e) {
+          return updateCustomization({
+            btnTextColor: e.hex
+          });
+        }
+      })]
+    }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
+      updateCustomization: updateCustomization
+    })]
+  });
 };
 
 var Inline$1 = function Inline(_ref) {
@@ -415,57 +432,64 @@ var Inline$1 = function Inline(_ref) {
       queryParams: undefined
     });
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-y-6"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "customization-text",
-    style: "h4"
-  }, t("neetoMolecules.productEmbed.customization.inline.title")), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /*#__PURE__*/React__default.createElement(Label, {
-    "data-cy": "window-size-text"
-  }, t("neetoMolecules.productEmbed.customization.inline.sizeOfEmbedWindow")), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex justify-between gap-x-2"
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    className: "neeto-molecules-product-embed-size-input",
-    "data-cy": "inline-width-input-field",
-    "data-testid": "inline-width-input-field",
-    max: 100,
-    min: 0,
-    prefix: "W",
-    suffix: "%",
-    type: "number",
-    value: width,
-    onChange: function onChange(e) {
-      return handleInputChange(e, "width");
-    }
-  }), /*#__PURE__*/React__default.createElement(Input, {
-    className: "neeto-molecules-product-embed-size-input",
-    "data-cy": "inline-height-input-field",
-    "data-testid": "inline-height-input-field",
-    max: 100,
-    min: 0,
-    prefix: "H",
-    suffix: "%",
-    type: "number",
-    value: height,
-    onChange: function onChange(e) {
-      return handleInputChange(e, "height");
-    }
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /*#__PURE__*/React__default.createElement(Label, {
-    "data-cy": "inline-element-id-input-label"
-  }, 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,
-    onChange: function onChange(e) {
-      return handleInputChange(e, "elementSelector");
-    }
-  })), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/React__default.createElement(DynamicQueryParams, {
-    updateCustomization: updateCustomization
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col gap-y-6",
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "customization-text",
+      style: "h4",
+      children: t("neetoMolecules.productEmbed.customization.inline.title")
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/jsx(Label, {
+        "data-cy": "window-size-text",
+        children: t("neetoMolecules.productEmbed.customization.inline.sizeOfEmbedWindow")
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex justify-between gap-x-2",
+        children: [/*#__PURE__*/jsx(Input, {
+          className: "neeto-molecules-product-embed-size-input",
+          "data-cy": "inline-width-input-field",
+          "data-testid": "inline-width-input-field",
+          max: 100,
+          min: 0,
+          prefix: "W",
+          suffix: "%",
+          type: "number",
+          value: width,
+          onChange: function onChange(e) {
+            return handleInputChange(e, "width");
+          }
+        }), /*#__PURE__*/jsx(Input, {
+          className: "neeto-molecules-product-embed-size-input",
+          "data-cy": "inline-height-input-field",
+          "data-testid": "inline-height-input-field",
+          max: 100,
+          min: 0,
+          prefix: "H",
+          suffix: "%",
+          type: "number",
+          value: height,
+          onChange: function onChange(e) {
+            return handleInputChange(e, "height");
+          }
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/jsx(Label, {
+        "data-cy": "inline-element-id-input-label",
+        children: t("neetoMolecules.productEmbed.customization.inline.elementId")
+      }), /*#__PURE__*/jsx(Input, {
+        "data-cy": "inline-element-id-input-field",
+        "data-testid": "inline-element-id-input-field",
+        value: elementSelector,
+        onChange: function onChange(e) {
+          return handleInputChange(e, "elementSelector");
+        }
+      })]
+    }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
+      updateCustomization: updateCustomization
+    })]
+  });
 };
 
 var Customization = function Customization(_ref) {
@@ -476,7 +500,7 @@ var Customization = function Customization(_ref) {
     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__*/React__default.createElement(Component, {
+  return /*#__PURE__*/jsx(Component, {
     customization: customization,
     isQueryParamsEnabled: isQueryParamsEnabled,
     otherCustomizations: otherCustomizations,
@@ -487,90 +511,96 @@ var Customization = function Customization(_ref) {
 var Header = function Header(_ref) {
   var tab = _ref.tab,
     setTab = _ref.setTab;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-full pt-2"
-  }, /*#__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__default.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);
-  })));
+  return /*#__PURE__*/jsx("div", {
+    className: "flex w-full pt-2",
+    children: /*#__PURE__*/jsx(Tab, {
+      noUnderline: true,
+      className: "neeto-molecules-product-embed-tab",
+      children: TABS.map(function (_ref2) {
+        var key = _ref2.key,
+          label = _ref2.label,
+          icon = _ref2.icon;
+        return /*#__PURE__*/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 Options = function Options(_ref) {
   var options = _ref.options,
     selectedOption = _ref.selectedOption,
     setSelectedOption = _ref.setSelectedOption;
-  return /*#__PURE__*/React__default.createElement(Radio, {
+  return /*#__PURE__*/jsx(Radio, {
     stacked: true,
     containerClassName: "w-full flex flex-col gap-y-6",
-    name: "options"
-  }, 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__*/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__default.createElement("div", {
-      className: "flex items-center"
-    }, /*#__PURE__*/React__default.createElement(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__*/React__default.createElement(Typography, {
-      className: "w-full pl-6 pt-1",
-      "data-cy": "".concat(key, "-embed-option-description"),
-      style: "body2"
-    }, description));
-  }));
+    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__*/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__*/jsx("div", {
+          className: "flex items-center",
+          children: /*#__PURE__*/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__*/jsx(Typography, {
+          className: "w-full pl-6 pt-1",
+          "data-cy": "".concat(key, "-embed-option-description"),
+          style: "body2",
+          children: description
+        })]
+      }, key);
+    })
+  });
 };
 
 var BrowserIcon = function BrowserIcon() {
-  return /*#__PURE__*/React__default.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     fill: "none",
     height: "12",
     viewBox: "0 0 52 12",
     width: "52",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__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__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__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"
-  }));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M11.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
+      fill: "#FF5F57",
+      stroke: "#E14640"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M31.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
+      fill: "#FFBD2E",
+      stroke: "#DFA123"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M51.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
+      fill: "#28CA42",
+      stroke: "#1DAD2C"
+    })]
+  });
 };
 
 var ElementPopup = function ElementPopup(_ref) {
@@ -584,14 +614,15 @@ 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__default.createElement("div", {
-    className: "relative flex h-full w-full items-center justify-center p-6"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "preview-element-popup-button",
-    "data-testid": "preview-element-popup-button",
-    id: elementSelector,
-    label: t("neetoMolecules.productEmbed.customization.elementPopup.label")
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: "relative flex h-full w-full items-center justify-center p-6",
+    children: /*#__PURE__*/jsx(Button, {
+      "data-cy": "preview-element-popup-button",
+      "data-testid": "preview-element-popup-button",
+      id: elementSelector,
+      label: t("neetoMolecules.productEmbed.customization.elementPopup.label")
+    })
+  });
 };
 
 var FloatingPopup = function FloatingPopup(_ref) {
@@ -613,19 +644,20 @@ var FloatingPopup = function FloatingPopup(_ref) {
     btn.style.backgroundColor = btnColor;
     btn.style.color = btnTextColor;
   }, [btnColor, btnTextColor]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "relative h-full w-full"
-  }, /*#__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-4", {
-      "left-0": btnPosition === "bottomLeft",
-      "right-0": btnPosition === "bottomRight"
+  return /*#__PURE__*/jsx("div", {
+    className: "relative h-full w-full",
+    children: /*#__PURE__*/jsx(Button, {
+      "data-cy": "popup-preview-button",
+      icon: icon && showIcon ? icon : null,
+      iconPosition: "left",
+      id: "embedBtn",
+      label: btnText,
+      className: classnames("absolute bottom-0 m-4", {
+        "left-0": btnPosition === "bottomLeft",
+        "right-0": btnPosition === "bottomRight"
+      })
     })
-  }));
+  });
 };
 
 var Inline = function Inline(_ref) {
@@ -633,7 +665,7 @@ var Inline = function Inline(_ref) {
     customization = _ref.customization;
   var height = customization.height,
     width = customization.width;
-  return /*#__PURE__*/React__default.createElement("iframe", {
+  return /*#__PURE__*/jsx("iframe", {
     className: "m-auto",
     height: "".concat(height, "%"),
     src: iframeURL,
@@ -652,20 +684,24 @@ var Preview = function Preview(_ref) {
   var iframeURL = customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id);
   var Component = preview[selectedOption];
   if (isScriptLoading) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex min-h-0 flex-grow items-center justify-center overflow-y-auto"
-    }, /*#__PURE__*/React__default.createElement(Spinner, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex min-h-0 flex-grow items-center justify-center overflow-y-auto",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
   }
-  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__default.createElement("div", {
-    className: "neeto-ui-border-gray-300 flex-shrink-0 border-b p-3"
-  }, /*#__PURE__*/React__default.createElement(BrowserIcon, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex min-h-0 flex-grow overflow-y-auto"
-  }, /*#__PURE__*/React__default.createElement(Component, {
-    customization: customization,
-    iframeURL: iframeURL
-  })));
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-rounded-lg neeto-ui-border-gray-300 neeto-ui-bg-white relative flex w-full flex-col overflow-hidden border",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-ui-border-gray-300 flex-shrink-0 border-b p-3",
+      children: /*#__PURE__*/jsx(BrowserIcon, {})
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex min-h-0 flex-grow overflow-y-auto",
+      children: /*#__PURE__*/jsx(Component, {
+        customization: customization,
+        iframeURL: iframeURL
+      })
+    })]
+  });
 };
 
 var css = ".neeto-molecules-product-embed-size-input.neeto-ui-input__wrapper .neeto-ui-input__prefix{align-self:stretch;background-color:rgb(var(--neeto-ui-gray-200));margin-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%}";
@@ -735,56 +771,63 @@ var ProductEmbed = function ProductEmbed(_ref) {
     var isScriptLoaded = document.getElementById(SCRIPT_ID);
     if (isScriptLoaded) setIsScriptLoading(false);else loadScript();
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classnames("flex w-full flex-grow", className),
-    "data-testid": "embed-product"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-embed-left-sidebar border-r"
-  }, goBackLink && /*#__PURE__*/React__default.createElement(Button, {
-    className: "mb-4 px-0",
-    "data-cy": "back-button",
-    "data-testid": "back-button",
-    icon: LeftArrow,
-    iconPosition: "left",
-    label: t("neetoMolecules.productEmbed.backToShare"),
-    size: "small",
-    style: "icon",
-    to: goBackLink
-  }), /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "embed-options-header-title",
-    style: "h3"
-  }, 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__default.createElement("div", {
-    className: "mt-6 flex w-full flex-col gap-y-6 pb-10"
-  }, /*#__PURE__*/React__default.createElement(Options, {
-    options: options,
-    selectedOption: selectedOption,
-    setSelectedOption: setSelectedOption
-  }), /*#__PURE__*/React__default.createElement(Customization, {
-    isQueryParamsEnabled: isQueryParamsEnabled,
-    otherCustomizations: otherCustomizations,
-    updateCustomization: updateCustomization,
-    customization: customizations[selectedOption],
-    option: selectedOption
-  }))), /*#__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__default.createElement(Header, {
-    setTab: setTab,
-    tab: tab
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-grow overflow-y-auto"
-  }, tab === TAB_KEYS.PREVIEW ? /*#__PURE__*/React__default.createElement(Preview, {
-    customPreviewIframeUrl: customPreviewIframeUrl,
-    id: id,
-    isScriptLoading: isScriptLoading,
-    selectedOption: selectedOption,
-    customization: customizations[selectedOption]
-  }) : /*#__PURE__*/React__default.createElement(Code, {
-    code: code
-  }))));
+    "data-testid": "embed-product",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-molecules-embed-left-sidebar border-r",
+      children: [goBackLink && /*#__PURE__*/jsx(Button, {
+        className: "mb-4 px-0",
+        "data-cy": "back-button",
+        "data-testid": "back-button",
+        icon: LeftArrow,
+        iconPosition: "left",
+        label: t("neetoMolecules.productEmbed.backToShare"),
+        size: "small",
+        style: "icon",
+        to: goBackLink
+      }), /*#__PURE__*/jsx(Typography, {
+        "data-cy": "embed-options-header-title",
+        style: "h3",
+        children: t("neetoMolecules.productEmbed.embedOptions.title")
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "mt-1",
+        "data-cy": "embed-options-header-description",
+        style: "body3",
+        children: t("neetoMolecules.productEmbed.embedOptions.description")
+      }), /*#__PURE__*/jsxs("div", {
+        className: "mt-6 flex w-full flex-col gap-y-6 pb-10",
+        children: [/*#__PURE__*/jsx(Options, {
+          options: options,
+          selectedOption: selectedOption,
+          setSelectedOption: setSelectedOption
+        }), /*#__PURE__*/jsx(Customization, {
+          isQueryParamsEnabled: isQueryParamsEnabled,
+          otherCustomizations: otherCustomizations,
+          updateCustomization: updateCustomization,
+          customization: customizations[selectedOption],
+          option: selectedOption
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-bg-white flex w-full min-w-0 flex-grow flex-col gap-4 p-6",
+      children: [/*#__PURE__*/jsx(Header, {
+        setTab: setTab,
+        tab: tab
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex flex-grow overflow-y-auto",
+        children: tab === TAB_KEYS.PREVIEW ? /*#__PURE__*/jsx(Preview, {
+          customPreviewIframeUrl: customPreviewIframeUrl,
+          id: id,
+          isScriptLoading: isScriptLoading,
+          selectedOption: selectedOption,
+          customization: customizations[selectedOption]
+        }) : /*#__PURE__*/jsx(Code, {
+          code: code
+        })
+      })]
+    })]
+  });
 };
 
 export { ProductEmbed as default };