@bigbinary/neeto-molecules 3.15.1 → 3.15.2

package/dist/BrowserPreview.js

@@ -29,10 +29,11 @@ var BrowserIcon = function BrowserIcon() {
 };
 
 var BrowserPreview = function BrowserPreview(_ref) {
-  var className = _ref.className,
+  var wrapperClassName = _ref.wrapperClassName,
+    className = _ref.className,
     children = _ref.children;
   return /*#__PURE__*/jsxs("div", {
-    className: "neeto-molecules-browser-preview",
+    className: classnames("neeto-molecules-browser-preview", wrapperClassName),
     "data-testid": "browser-preview",
     children: [/*#__PURE__*/jsx("div", {
       className: "neeto-molecules-browser-preview__header",

package/dist/BrowserPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserPreview.js","sources":["../src/components/BrowserPreview/BrowserIcon.jsx","../src/components/BrowserPreview/index.jsx"],"sourcesContent":["const BrowserIcon = () => (\n  <svg\n    fill=\"none\"\n    height=\"12\"\n    viewBox=\"0 0 52 12\"\n    width=\"52\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M11.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z\"\n      fill=\"#FF5F57\"\n      stroke=\"#E14640\"\n    />\n    <path\n      d=\"M31.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z\"\n      fill=\"#FFBD2E\"\n      stroke=\"#DFA123\"\n    />\n    <path\n      d=\"M51.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z\"\n      fill=\"#28CA42\"\n      stroke=\"#1DAD2C\"\n    />\n  </svg>\n);\n\nexport default BrowserIcon;\n","import classNames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nimport \"./browser-preview.scss\";\nimport BrowserIcon from \"./BrowserIcon.jsx\";\n\nconst BrowserPreview = ({ className, children }) => (\n  <div\n    className=\"neeto-molecules-browser-preview\"\n    data-testid=\"browser-preview\"\n  >\n    <div className=\"neeto-molecules-browser-preview__header\">\n      <BrowserIcon />\n    </div>\n    <div\n      className={classNames(\"neeto-molecules-browser-preview__body\", className)}\n      data-testid=\"browser-preview-body\"\n    >\n      {children}\n    </div>\n  </div>\n);\n\nBrowserPreview.propTypes = {\n  /**\n   * The content to be rendered inside the browser preview body.\n   */\n  children: PropTypes.node,\n  /*\n   * To provide additional classes to the browser preview body.\n   */\n  className: PropTypes.string,\n};\n\nexport default BrowserPreview;\n"],"names":["BrowserIcon","_jsxs","fill","height","viewBox","width","xmlns","children","_jsx","d","stroke","BrowserPreview","_ref","className","classNames"],"mappings":";;;;;;;AAAA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,GAAA;AAAA,EAAA,oBACfC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,MAAM,EAAC,IAAI;AACXC,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,KAAK,EAAC,IAAI;AACVC,IAAAA,KAAK,EAAC,4BAA4B;AAAAC,IAAAA,QAAA,gBAElCC,GAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,CAAC,EAAC,6CAA6C;AAC/CP,MAAAA,IAAI,EAAC,SAAS;AACdQ,MAAAA,MAAM,EAAC,SAAA;KACR,CAAC,eACFF,GAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,CAAC,EAAC,6CAA6C;AAC/CP,MAAAA,IAAI,EAAC,SAAS;AACdQ,MAAAA,MAAM,EAAC,SAAA;KACR,CAAC,eACFF,GAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,CAAC,EAAC,6CAA6C;AAC/CP,MAAAA,IAAI,EAAC,SAAS;AACdQ,MAAAA,MAAM,EAAC,SAAA;AAAS,KACjB,CAAC,CAAA;AAAA,GACC,CAAC,CAAA;AAAA,CACP;;AClBD,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEN,QAAQ,GAAAK,IAAA,CAARL,QAAQ,CAAA;AAAA,EAAA,oBAC3CN,IAAA,CAAA,KAAA,EAAA;AACEY,IAAAA,SAAS,EAAC,iCAAiC;AAC3C,IAAA,aAAA,EAAY,iBAAiB;AAAAN,IAAAA,QAAA,gBAE7BC,GAAA,CAAA,KAAA,EAAA;AAAKK,MAAAA,SAAS,EAAC,yCAAyC;AAAAN,MAAAA,QAAA,eACtDC,GAAA,CAACR,WAAW,EAAE,EAAA,CAAA;KACX,CAAC,eACNQ,GAAA,CAAA,KAAA,EAAA;AACEK,MAAAA,SAAS,EAAEC,UAAU,CAAC,uCAAuC,EAAED,SAAS,CAAE;AAC1E,MAAA,aAAA,EAAY,sBAAsB;AAAAN,MAAAA,QAAA,EAEjCA,QAAAA;AAAQ,KACN,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"BrowserPreview.js","sources":["../src/components/BrowserPreview/BrowserIcon.jsx","../src/components/BrowserPreview/index.jsx"],"sourcesContent":["const BrowserIcon = () => (\n  <svg\n    fill=\"none\"\n    height=\"12\"\n    viewBox=\"0 0 52 12\"\n    width=\"52\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M11.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z\"\n      fill=\"#FF5F57\"\n      stroke=\"#E14640\"\n    />\n    <path\n      d=\"M31.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z\"\n      fill=\"#FFBD2E\"\n      stroke=\"#DFA123\"\n    />\n    <path\n      d=\"M51.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z\"\n      fill=\"#28CA42\"\n      stroke=\"#1DAD2C\"\n    />\n  </svg>\n);\n\nexport default BrowserIcon;\n","import classNames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nimport \"./browser-preview.scss\";\nimport BrowserIcon from \"./BrowserIcon.jsx\";\n\nconst BrowserPreview = ({ wrapperClassName, className, children }) => (\n  <div\n    className={classNames(\"neeto-molecules-browser-preview\", wrapperClassName)}\n    data-testid=\"browser-preview\"\n  >\n    <div className=\"neeto-molecules-browser-preview__header\">\n      <BrowserIcon />\n    </div>\n    <div\n      className={classNames(\"neeto-molecules-browser-preview__body\", className)}\n      data-testid=\"browser-preview-body\"\n    >\n      {children}\n    </div>\n  </div>\n);\n\nBrowserPreview.propTypes = {\n  /**\n   * The content to be rendered inside the browser preview body.\n   */\n  children: PropTypes.node,\n  /*\n   * To provide additional classes to the browser preview container.\n   */\n  wrapperClassName: PropTypes.string,\n  /*\n   * To provide additional classes to the browser preview body.\n   */\n  className: PropTypes.string,\n};\n\nexport default BrowserPreview;\n"],"names":["BrowserIcon","_jsxs","fill","height","viewBox","width","xmlns","children","_jsx","d","stroke","BrowserPreview","_ref","wrapperClassName","className","classNames"],"mappings":";;;;;;;AAAA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,GAAA;AAAA,EAAA,oBACfC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,MAAM,EAAC,IAAI;AACXC,IAAAA,OAAO,EAAC,WAAW;AACnBC,IAAAA,KAAK,EAAC,IAAI;AACVC,IAAAA,KAAK,EAAC,4BAA4B;AAAAC,IAAAA,QAAA,gBAElCC,GAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,CAAC,EAAC,6CAA6C;AAC/CP,MAAAA,IAAI,EAAC,SAAS;AACdQ,MAAAA,MAAM,EAAC,SAAA;KACR,CAAC,eACFF,GAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,CAAC,EAAC,6CAA6C;AAC/CP,MAAAA,IAAI,EAAC,SAAS;AACdQ,MAAAA,MAAM,EAAC,SAAA;KACR,CAAC,eACFF,GAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,CAAC,EAAC,6CAA6C;AAC/CP,MAAAA,IAAI,EAAC,SAAS;AACdQ,MAAAA,MAAM,EAAC,SAAA;AAAS,KACjB,CAAC,CAAA;AAAA,GACC,CAAC,CAAA;AAAA,CACP;;AClBD,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,gBAAgB,GAAAD,IAAA,CAAhBC,gBAAgB;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEP,QAAQ,GAAAK,IAAA,CAARL,QAAQ,CAAA;AAAA,EAAA,oBAC7DN,IAAA,CAAA,KAAA,EAAA;AACEa,IAAAA,SAAS,EAAEC,UAAU,CAAC,iCAAiC,EAAEF,gBAAgB,CAAE;AAC3E,IAAA,aAAA,EAAY,iBAAiB;AAAAN,IAAAA,QAAA,gBAE7BC,GAAA,CAAA,KAAA,EAAA;AAAKM,MAAAA,SAAS,EAAC,yCAAyC;AAAAP,MAAAA,QAAA,eACtDC,GAAA,CAACR,WAAW,EAAE,EAAA,CAAA;KACX,CAAC,eACNQ,GAAA,CAAA,KAAA,EAAA;AACEM,MAAAA,SAAS,EAAEC,UAAU,CAAC,uCAAuC,EAAED,SAAS,CAAE;AAC1E,MAAA,aAAA,EAAY,sBAAsB;AAAAP,MAAAA,QAAA,EAEjCA,QAAAA;AAAQ,KACN,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAAA;;;;"}

package/dist/Codeblock.js

@@ -31,7 +31,7 @@ var Codeblock = function Codeblock(_ref) {
     className: "relative",
     children: [/*#__PURE__*/jsx(PrismLight, _objectSpread(_objectSpread({
       wrapLines: true,
-      className: "p-4 pr-12 md:pr-4",
+      className: "neeto-molecules-code-block p-4 pr-12 md:pr-4",
       codeTagProps: {
         "data-cy": "code-block-content"
       },

package/dist/Codeblock.js.map

@@ -1 +1 @@
-{"version":3,"file":"Codeblock.js","sources":["../src/components/Codeblock.jsx"],"sourcesContent":["import PropTypes from \"prop-types\";\nimport { PrismLight as CodeBlock } from \"react-syntax-highlighter\";\nimport { dracula } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n\nimport CopyCode from \"components/CopyToClipboardButton\";\n\nconst Codeblock = ({\n  code,\n  showCopyButton = true,\n  codeblockProps,\n  copyButtonProps = { label: \"Copy\" },\n}) => {\n  const isLargerScreen = window.innerWidth > 768;\n\n  return (\n    <div className=\"relative\">\n      <CodeBlock\n        wrapLines\n        className=\"p-4 pr-12 md:pr-4\"\n        codeTagProps={{ \"data-cy\": \"code-block-content\" }}\n        data-cy=\"code-block\"\n        data-testid=\"codeblock-react-highlighter\"\n        language=\"javascript\"\n        style={dracula}\n        {...codeblockProps}\n      >\n        {code}\n      </CodeBlock>\n      {showCopyButton && (\n        <CopyCode\n          className=\"absolute right-2 top-2\"\n          data-cy=\"copy-button\"\n          data-testid=\"codeblock-copy-button\"\n          size=\"small\"\n          style=\"secondary\"\n          value={code}\n          {...copyButtonProps}\n          label={isLargerScreen ? copyButtonProps.label : \"\"}\n        />\n      )}\n    </div>\n  );\n};\n\nCodeblock.propTypes = {\n  /**\n   * The code to be displayed.\n   */\n  code: PropTypes.string,\n  /**\n   * Flag to determine whether the 'Copy' button is displayed.\n   */\n  showCopyButton: PropTypes.bool,\n  /**\n   * Additional props that can be passed on to the 'PrismLight' component from 'react-syntax-highlighter'.\n   */\n  codeblockProps: PropTypes.object,\n  /**\n   * Additional props that can be passed on to the 'CopyToClipboardButton' component from 'neeto-molecules'.\n   */\n  copyButtonProps: PropTypes.object,\n};\n\nexport default Codeblock;\n"],"names":["Codeblock","_ref","code","_ref$showCopyButton","showCopyButton","codeblockProps","_ref$copyButtonProps","copyButtonProps","label","isLargerScreen","window","innerWidth","_jsxs","className","children","_jsx","CodeBlock","_objectSpread","wrapLines","codeTagProps","language","style","dracula","CopyCode","size","value"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,IAAMA,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAKT;AAAA,EAAA,IAJJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAAC,mBAAA,GAAAF,IAAA,CACJG,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA;IACrBE,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IAAAC,oBAAA,GAAAL,IAAA,CACdM,eAAe;IAAfA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA;AAAEE,MAAAA,KAAK,EAAE,MAAA;AAAO,KAAC,GAAAF,oBAAA,CAAA;AAEnC,EAAA,IAAMG,cAAc,GAAGC,MAAM,CAACC,UAAU,GAAG,GAAG,CAAA;AAE9C,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,UAAU;AAAAC,IAAAA,QAAA,gBACvBC,GAAA,CAACC,UAAS,EAAAC,aAAA,CAAAA,aAAA,CAAA;MACRC,SAAS,EAAA,IAAA;AACTL,MAAAA,SAAS,EAAC,mBAAmB;AAC7BM,MAAAA,YAAY,EAAE;AAAE,QAAA,SAAS,EAAE,oBAAA;OAAuB;AAClD,MAAA,SAAA,EAAQ,YAAY;AACpB,MAAA,aAAA,EAAY,6BAA6B;AACzCC,MAAAA,QAAQ,EAAC,YAAY;AACrBC,MAAAA,KAAK,EAAEC,OAAAA;AAAQ,KAAA,EACXjB,cAAc,CAAA,EAAA,EAAA,EAAA;AAAAS,MAAAA,QAAA,EAEjBZ,IAAAA;KACQ,CAAA,CAAC,EACXE,cAAc,iBACbW,GAAA,CAACQ,qBAAQ,EAAAN,aAAA,CAAAA,aAAA,CAAA;AACPJ,MAAAA,SAAS,EAAC,wBAAwB;AAClC,MAAA,SAAA,EAAQ,aAAa;AACrB,MAAA,aAAA,EAAY,uBAAuB;AACnCW,MAAAA,IAAI,EAAC,OAAO;AACZH,MAAAA,KAAK,EAAC,WAAW;AACjBI,MAAAA,KAAK,EAAEvB,IAAAA;AAAK,KAAA,EACRK,eAAe,CAAA,EAAA,EAAA,EAAA;AACnBC,MAAAA,KAAK,EAAEC,cAAc,GAAGF,eAAe,CAACC,KAAK,GAAG,EAAA;AAAG,KAAA,CACpD,CACF,CAAA;AAAA,GACE,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Codeblock.js","sources":["../src/components/Codeblock.jsx"],"sourcesContent":["import PropTypes from \"prop-types\";\nimport { PrismLight as CodeBlock } from \"react-syntax-highlighter\";\nimport { dracula } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n\nimport CopyCode from \"components/CopyToClipboardButton\";\n\nconst Codeblock = ({\n  code,\n  showCopyButton = true,\n  codeblockProps,\n  copyButtonProps = { label: \"Copy\" },\n}) => {\n  const isLargerScreen = window.innerWidth > 768;\n\n  return (\n    <div className=\"relative\">\n      <CodeBlock\n        wrapLines\n        className=\"neeto-molecules-code-block p-4 pr-12 md:pr-4\"\n        codeTagProps={{ \"data-cy\": \"code-block-content\" }}\n        data-cy=\"code-block\"\n        data-testid=\"codeblock-react-highlighter\"\n        language=\"javascript\"\n        style={dracula}\n        {...codeblockProps}\n      >\n        {code}\n      </CodeBlock>\n      {showCopyButton && (\n        <CopyCode\n          className=\"absolute right-2 top-2\"\n          data-cy=\"copy-button\"\n          data-testid=\"codeblock-copy-button\"\n          size=\"small\"\n          style=\"secondary\"\n          value={code}\n          {...copyButtonProps}\n          label={isLargerScreen ? copyButtonProps.label : \"\"}\n        />\n      )}\n    </div>\n  );\n};\n\nCodeblock.propTypes = {\n  /**\n   * The code to be displayed.\n   */\n  code: PropTypes.string,\n  /**\n   * Flag to determine whether the 'Copy' button is displayed.\n   */\n  showCopyButton: PropTypes.bool,\n  /**\n   * Additional props that can be passed on to the 'PrismLight' component from 'react-syntax-highlighter'.\n   */\n  codeblockProps: PropTypes.object,\n  /**\n   * Additional props that can be passed on to the 'CopyToClipboardButton' component from 'neeto-molecules'.\n   */\n  copyButtonProps: PropTypes.object,\n};\n\nexport default Codeblock;\n"],"names":["Codeblock","_ref","code","_ref$showCopyButton","showCopyButton","codeblockProps","_ref$copyButtonProps","copyButtonProps","label","isLargerScreen","window","innerWidth","_jsxs","className","children","_jsx","CodeBlock","_objectSpread","wrapLines","codeTagProps","language","style","dracula","CopyCode","size","value"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,IAAMA,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAKT;AAAA,EAAA,IAJJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAAC,mBAAA,GAAAF,IAAA,CACJG,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA;IACrBE,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IAAAC,oBAAA,GAAAL,IAAA,CACdM,eAAe;IAAfA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA;AAAEE,MAAAA,KAAK,EAAE,MAAA;AAAO,KAAC,GAAAF,oBAAA,CAAA;AAEnC,EAAA,IAAMG,cAAc,GAAGC,MAAM,CAACC,UAAU,GAAG,GAAG,CAAA;AAE9C,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,UAAU;AAAAC,IAAAA,QAAA,gBACvBC,GAAA,CAACC,UAAS,EAAAC,aAAA,CAAAA,aAAA,CAAA;MACRC,SAAS,EAAA,IAAA;AACTL,MAAAA,SAAS,EAAC,8CAA8C;AACxDM,MAAAA,YAAY,EAAE;AAAE,QAAA,SAAS,EAAE,oBAAA;OAAuB;AAClD,MAAA,SAAA,EAAQ,YAAY;AACpB,MAAA,aAAA,EAAY,6BAA6B;AACzCC,MAAAA,QAAQ,EAAC,YAAY;AACrBC,MAAAA,KAAK,EAAEC,OAAAA;AAAQ,KAAA,EACXjB,cAAc,CAAA,EAAA,EAAA,EAAA;AAAAS,MAAAA,QAAA,EAEjBZ,IAAAA;KACQ,CAAA,CAAC,EACXE,cAAc,iBACbW,GAAA,CAACQ,qBAAQ,EAAAN,aAAA,CAAAA,aAAA,CAAA;AACPJ,MAAAA,SAAS,EAAC,wBAAwB;AAClC,MAAA,SAAA,EAAQ,aAAa;AACrB,MAAA,aAAA,EAAY,uBAAuB;AACnCW,MAAAA,IAAI,EAAC,OAAO;AACZH,MAAAA,KAAK,EAAC,WAAW;AACjBI,MAAAA,KAAK,EAAEvB,IAAAA;AAAK,KAAA,EACRK,eAAe,CAAA,EAAA,EAAA,EAAA;AACnBC,MAAAA,KAAK,EAAEC,cAAc,GAAGF,eAAe,CAACC,KAAK,GAAG,EAAA;AAAG,KAAA,CACpD,CACF,CAAA;AAAA,GACE,CAAC,CAAA;AAEV;;;;"}

package/dist/ProductEmbed.js

@@ -2,23 +2,23 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect, createElement } from 'react';
 import classnames from 'classnames';
-import { noop } from '@bigbinary/neeto-cist';
+import { filterBy, noop } from '@bigbinary/neeto-cist';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
-import { mergeDeepLeft, toPairs, isEmpty, mergeLeft } from 'ramda';
+import { toPairs, mergeDeepLeft, 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';
 import Input from '@bigbinary/neetoui/Input';
 import Callout from '@bigbinary/neetoui/Callout';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Label from '@bigbinary/neetoui/Label';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import Select from '@bigbinary/neetoui/Select';
 import ColorPicker from '@bigbinary/neetoui/ColorPicker';
@@ -30,17 +30,17 @@ import { n } from './inject-css-DmrvuTKK.js';
 import 'react-syntax-highlighter';
 import 'react-syntax-highlighter/dist/esm/styles/prism';
 import './CopyToClipboardButton.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@bigbinary/neeto-commons-frontend/utils/general';
 import '@bigbinary/neeto-icons/Copy';
 import '@bigbinary/neeto-icons/Check';
 
 var Code = function Code(_ref) {
-  var code = _ref.code;
+  var code = _ref.code,
+    tab = _ref.tab;
   return /*#__PURE__*/jsx("div", {
-    className: "relative w-full overflow-y-auto",
+    className: "neeto-molecules-embed__code-block relative w-full overflow-y-auto",
     "data-cy": "embed-code-block",
-    "data-testid": "embed-code-block",
+    "data-testid": "".concat(tab, "-code-block"),
     children: /*#__PURE__*/jsx(Codeblock, {
       code: code
     })
@@ -49,16 +49,16 @@ var Code = function Code(_ref) {
 
 var TAB_KEYS = {
   HTML: "html",
-  PREVIEW: "preview"
+  REACT: "react"
 };
 var TABS = [{
   key: TAB_KEYS.HTML,
   label: t("neetoMolecules.productEmbed.tab.html"),
   icon: Code$1
 }, {
-  key: TAB_KEYS.PREVIEW,
-  label: t("neetoMolecules.productEmbed.tab.preview"),
-  icon: Eye
+  key: TAB_KEYS.REACT,
+  label: t("neetoMolecules.productEmbed.tab.react"),
+  icon: Code$1
 }];
 var EMBED_OPTIONS = {
   INLINE: "inline",
@@ -93,17 +93,17 @@ var INITIAL_QUERY_PARAM = {
   value: ""
 };
 
-var camelCasedAppName = globalProps.appName.replace(/^neeto/i, "neeto");
+var camelCasedAppName$1 = globalProps.appName.replace(/^neeto/i, "neeto");
 var embedBaseScript = function embedBaseScript(embedScriptLink) {
-  return "<script>window.".concat(camelCasedAppName, " = window.").concat(camelCasedAppName, " || { embed: function(){(").concat(camelCasedAppName, ".q=").concat(camelCasedAppName, ".q||[]).push(arguments)} };</script>\n  <script async\n    src=\"").concat(embedScriptLink, "\">\n  </script>");
+  return "<script>window.".concat(camelCasedAppName$1, " = window.").concat(camelCasedAppName$1, " || { embed: function(){(").concat(camelCasedAppName$1, ".q=").concat(camelCasedAppName$1, ".q||[]).push(arguments)} };</script>\n  <script async\n    src=\"").concat(embedScriptLink, "\">\n  </script>");
 };
-var embedEnv = function embedEnv() {
+var embedEnv$1 = function embedEnv() {
   return globalProps.railsEnv !== "production" ? "\n".concat(TAB_STRING, "  env: \"").concat(globalProps.railsEnv, "\",") : "";
 };
-var embedQueryParam = function embedQueryParam(queryParams) {
+var embedQueryParam$1 = function embedQueryParam(queryParams) {
   return queryParams ? "\n".concat(TAB_STRING, "  queryParams: ").concat(queryParams, ",") : "";
 };
-var parseExtraArgs = function parseExtraArgs(extraArgs) {
+var parseExtraArgs$1 = function parseExtraArgs(extraArgs) {
   return toPairs(extraArgs).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
@@ -111,6 +111,81 @@ var parseExtraArgs = function parseExtraArgs(extraArgs) {
     return "\n".concat(TAB_STRING, "  ").concat(key, ": \"").concat(value, "\"");
   });
 };
+var inlineEmbedCode$1 = function inlineEmbedCode(_ref3) {
+  var customization = _ref3.customization,
+    id = _ref3.id,
+    embedScriptLink = _ref3.embedScriptLink,
+    extraArgs = _ref3.extraArgs,
+    inlineWrapperStyle = _ref3.inlineWrapperStyle;
+  var elementSelector = customization.elementSelector,
+    _customization$width = customization.width,
+    width = _customization$width === void 0 ? 100 : _customization$width,
+    _customization$height = customization.height,
+    height = _customization$height === void 0 ? 100 : _customization$height,
+    queryParams = customization.queryParams;
+  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"").concat(inlineWrapperStyle || "height: 90vh; width: 100%;", "\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\"},").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
+};
+var floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref4) {
+  var customization = _ref4.customization,
+    id = _ref4.id,
+    embedScriptLink = _ref4.embedScriptLink,
+    extraArgs = _ref4.extraArgs;
+  var btnTextColor = customization.btnTextColor,
+    showIcon = customization.showIcon,
+    btnText = customization.btnText,
+    btnPosition = customization.btnPosition,
+    btnColor = customization.btnColor,
+    icon = customization.icon,
+    queryParams = customization.queryParams;
+  return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"floatingPopup\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      styles: {\n        btnTextColor: \"").concat(btnTextColor, "\",\n        btnPosition: \"").concat(btnPosition, "\",\n        btnColor: \"").concat(btnColor, "\",\n        btnText: \"").concat(btnText, "\", ").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n      },").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
+};
+var elementPopupEmbedCode$1 = function elementPopupEmbedCode(_ref5) {
+  var customization = _ref5.customization,
+    id = _ref5.id,
+    embedScriptLink = _ref5.embedScriptLink,
+    extraArgs = _ref5.extraArgs;
+  var elementSelector = customization.elementSelector,
+    queryParams = customization.queryParams;
+  return "\n  <!-- This is a demo button, you can use any element on your website instead. -->\n  <button id=\"".concat(elementSelector, "\">Click to open popup</button>\n\n  <!-- ").concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"elementClick\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
+};
+var htmlCodeGenerators = {
+  inline: inlineEmbedCode$1,
+  floatingPopup: floatingPopupEmbedCode$1,
+  elementPopup: elementPopupEmbedCode$1
+};
+
+var camelCasedAppName = globalProps.appName.replace(/^neeto/i, "neeto");
+var embedFunctionName = "".concat(camelCasedAppName, "Embed");
+var baseScript = "const baseScript = document.createElement(\"script\");\n      baseScript.innerHTML = `window.".concat(camelCasedAppName, " = window.").concat(camelCasedAppName, " || { embed: function(){(").concat(camelCasedAppName, ".q=").concat(camelCasedAppName, ".q||[]).push(arguments)} };`\n      document.body.appendChild(baseScript);\n");
+var embedScript = function embedScript(scriptLink) {
+  return "const embedScript = document.createElement(\"script\");\n      embedScript.src = \"".concat(scriptLink, "\";\n      embedScript.async = true;\n      document.body.appendChild(embedScript);\n");
+};
+var cleanupFunction = "// Cleanup function\n      return () => {\n        document.body.removeChild(baseScript);\n        document.body.removeChild(embedScript);\n      };";
+var embedEnv = function embedEnv() {
+  return globalProps.railsEnv !== "production" ? "\n".concat(TAB_STRING).concat(TAB_STRING, "env: \"").concat(globalProps.railsEnv, "\",") : "";
+};
+var embedQueryParam = function embedQueryParam(queryParams) {
+  return queryParams ? "\n".concat(TAB_STRING).concat(TAB_STRING, "queryParams: ").concat(queryParams, ",") : "";
+};
+var parseExtraArgs = function parseExtraArgs(extraArgs) {
+  return toPairs(extraArgs).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return "\n".concat(TAB_STRING).concat(TAB_STRING).concat(key, ": \"").concat(value, "\"");
+  });
+};
+var parseInlineStyle = function parseInlineStyle(styleString) {
+  return styleString ? styleString.split(";").map(function (rule) {
+    var _rule$split$map = rule.split(":").map(function (s) {
+        return s.trim();
+      }),
+      _rule$split$map2 = _slicedToArray(_rule$split$map, 2),
+      key = _rule$split$map2[0],
+      value = _rule$split$map2[1];
+    return key && value ? "".concat(key, ": \"").concat(value, "\"") : null;
+  }).filter(Boolean).join(", ") : 'height: "90vh", width: "100%"';
+};
 var inlineEmbedCode = function inlineEmbedCode(_ref3) {
   var customization = _ref3.customization,
     id = _ref3.id,
@@ -123,7 +198,7 @@ var inlineEmbedCode = function inlineEmbedCode(_ref3) {
     _customization$height = customization.height,
     height = _customization$height === void 0 ? 100 : _customization$height,
     queryParams = customization.queryParams;
-  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"").concat(inlineWrapperStyle || "height: 90vh; width: 100%;", "\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\"},").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
+  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(baseScript, "\n      ").concat(embedScript(embedScriptLink), "\n      ").concat(camelCasedAppName, ".embed({\n        type: \"inline\",\n        id: \"").concat(id, "\",\n        organization: \"").concat(globalProps.organization.subdomain, "\",\n        elementSelector: \"#").concat(elementSelector, "\",\n        styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\" },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n      });\n\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return (\n      <div\n        id=\"inline-embed-container\"\n        style={{ ").concat(parseInlineStyle(inlineWrapperStyle), " }}\n      />\n    );\n  };");
 };
 var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
@@ -137,7 +212,7 @@ var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
     btnColor = customization.btnColor,
     icon = customization.icon,
     queryParams = customization.queryParams;
-  return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName, ".embed({\n      type: \"floatingPopup\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      styles: {\n        btnTextColor: \"").concat(btnTextColor, "\",\n        btnPosition: \"").concat(btnPosition, "\",\n        btnColor: \"").concat(btnColor, "\",\n        btnText: \"").concat(btnText, "\", ").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n      },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
+  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(baseScript, "\n      ").concat(embedScript(embedScriptLink), "\n      ").concat(camelCasedAppName, ".embed({\n        type: \"floatingPopup\",\n        id: \"").concat(id, "\",\n        organization: \"").concat(globalProps.organization.subdomain, "\",\n        styles: {\n          btnTextColor: \"").concat(btnTextColor, "\",\n          btnPosition: \"").concat(btnPosition, "\",\n          btnColor: \"").concat(btnColor, "\",\n          btnText: \"").concat(btnText, "\",").concat(icon ? "\n".concat(TAB_STRING).concat(TAB_STRING, "  showIcon: ").concat(showIcon, ",") : "", "\n        },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n      });\n\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <div />;\n  };");
 };
 var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
   var customization = _ref5.customization,
@@ -146,55 +221,34 @@ var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
     extraArgs = _ref5.extraArgs;
   var elementSelector = customization.elementSelector,
     queryParams = customization.queryParams;
-  return "\n  <!-- This is a demo button, you can use any element on your website instead. -->\n  <button id=\"".concat(elementSelector, "\">Click to open popup</button>\n\n  <!-- ").concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName, ".embed({\n      type: \"elementClick\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
-};
-var embedCode = function embedCode(_ref6) {
-  var type = _ref6.type,
-    customization = _ref6.customization,
-    id = _ref6.id,
-    embedScriptLink = _ref6.embedScriptLink,
-    _ref6$extraArgs = _ref6.extraArgs,
-    extraArgs = _ref6$extraArgs === void 0 ? {} : _ref6$extraArgs,
-    inlineWrapperStyle = _ref6.inlineWrapperStyle;
-  switch (type) {
-    case "inline":
-      return inlineEmbedCode({
-        customization: customization,
-        id: id,
-        embedScriptLink: embedScriptLink,
-        extraArgs: extraArgs,
-        inlineWrapperStyle: inlineWrapperStyle
-      });
-    case "floatingPopup":
-      return floatingPopupEmbedCode({
-        customization: customization,
-        id: id,
-        embedScriptLink: embedScriptLink,
-        extraArgs: extraArgs
-      });
-    case "elementPopup":
-      return elementPopupEmbedCode({
-        customization: customization,
-        id: id,
-        embedScriptLink: embedScriptLink,
-        extraArgs: extraArgs
-      });
-    default:
-      return "";
-  }
+  return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(baseScript, "\n      ").concat(embedScript(embedScriptLink), "\n      ").concat(camelCasedAppName, ".embed({\n        type: \"elementClick\",\n        id: \"").concat(id, "\",\n        organization: \"").concat(globalProps.organization.subdomain, "\",\n        elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n      });\n\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <div />;\n  };");
+};
+var reactCodeGenerators = {
+  inline: inlineEmbedCode,
+  floatingPopup: floatingPopupEmbedCode,
+  elementPopup: elementPopupEmbedCode
+};
+
+var _excluded = ["tab", "type"];
+var generateCode = function generateCode(options) {
+  var _reactCodeGenerators$, _htmlCodeGenerators$t;
+  var tab = options.tab,
+    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);
 };
 var buildDefaultCustomization = function buildDefaultCustomization(defaultCustomizations) {
   return mergeDeepLeft(defaultCustomizations, DEFAULT_CUSTOMIZATION);
 };
 var buildQueryParamsFromInputFields = function buildQueryParamsFromInputFields(inputFields) {
-  var filteredInputFields = inputFields.filter(function (_ref7) {
-    var name = _ref7.name,
-      value = _ref7.value;
+  var filteredInputFields = inputFields.filter(function (_ref) {
+    var name = _ref.name,
+      value = _ref.value;
     return name && value;
   });
-  var queryParams = filteredInputFields.reduce(function (queryParams, _ref8) {
-    var name = _ref8.name,
-      value = _ref8.value;
+  var queryParams = filteredInputFields.reduce(function (queryParams, _ref2) {
+    var name = _ref2.name,
+      value = _ref2.value;
     queryParams[name] = value;
     return queryParams;
   }, {});
@@ -515,14 +569,15 @@ var Customization = function Customization(_ref) {
 };
 
 var Header = function Header(_ref) {
-  var tab = _ref.tab,
-    setTab = _ref.setTab;
+  var supportedLanguagesTabs = _ref.supportedLanguagesTabs,
+    setTab = _ref.setTab,
+    tab = _ref.tab;
   return /*#__PURE__*/jsx("div", {
-    className: "flex w-full pt-2",
+    className: "flex w-full",
     children: /*#__PURE__*/jsx(Tab, {
       noUnderline: true,
       className: "neeto-molecules-product-embed-tab",
-      children: TABS.map(function (_ref2) {
+      children: supportedLanguagesTabs.map(function (_ref2) {
         var key = _ref2.key,
           label = _ref2.label,
           icon = _ref2.icon;
@@ -675,6 +730,8 @@ var Preview = function Preview(_ref) {
     });
   }
   return /*#__PURE__*/jsx(BrowserPreview, {
+    className: "h-full",
+    wrapperClassName: "neeto-molecules-embed__browser-preview pointer-events-auto",
     children: /*#__PURE__*/jsx(Component, {
       customization: customization,
       iframeURL: iframeURL
@@ -682,7 +739,7 @@ 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}}";
+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%}";
 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; }
@@ -706,12 +763,19 @@ var ProductEmbed = function ProductEmbed(_ref) {
     _ref$otherCustomizati = _ref.otherCustomizations,
     otherCustomizations = _ref$otherCustomizati === void 0 ? noop : _ref$otherCustomizati,
     _ref$inlineWrapperSty = _ref.inlineWrapperStyle,
-    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "" : _ref$inlineWrapperSty;
+    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "" : _ref$inlineWrapperSty,
+    _ref$supportedLanguag = _ref.supportedLanguages,
+    supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag;
+  var supportedLanguagesTabs = filterBy({
+    key: function key(_key) {
+      return supportedLanguages === null || supportedLanguages === void 0 ? void 0 : supportedLanguages.includes(_key);
+    }
+  }, TABS);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isScriptLoading = _useState2[0],
     setIsScriptLoading = _useState2[1];
-  var _useState3 = useState(TAB_KEYS.HTML),
+  var _useState3 = useState(supportedLanguagesTabs[0].key),
     _useState4 = _slicedToArray(_useState3, 2),
     tab = _useState4[0],
     setTab = _useState4[1];
@@ -728,8 +792,9 @@ var ProductEmbed = function ProductEmbed(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var embedScriptLink = customEmbedScriptPath || "".concat(window.location.protocol, "//").concat(window.location.host, "/javascript/embed.js");
-  var code = embedCode({
+  var code = generateCode({
     id: id,
+    tab: tab,
     type: selectedOption,
     customization: customizations[selectedOption],
     embedScriptLink: embedScriptLink,
@@ -786,21 +851,30 @@ var ProductEmbed = function ProductEmbed(_ref) {
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: "neeto-molecules-embed__preview neeto-ui-bg-white flex min-h-screen w-full min-w-0 flex-col gap-4 p-6 md:min-h-0 md:flex-grow",
+      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__*/jsx(Header, {
         setTab: setTab,
+        supportedLanguagesTabs: supportedLanguagesTabs,
         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
-        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex min-h-0 flex-grow flex-col gap-3",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "flex-shrink-0",
+          "data-testid": "embed-code-block",
+          children: /*#__PURE__*/jsx(Code, {
+            code: code,
+            tab: tab
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex-grow",
+          children: /*#__PURE__*/jsx(Preview, {
+            customPreviewIframeUrl: customPreviewIframeUrl,
+            id: id,
+            isScriptLoading: isScriptLoading,
+            selectedOption: selectedOption,
+            customization: customizations[selectedOption]
+          })
+        })]
       })]
     })]
   });