@bigbinary/neeto-molecules 5.2.1 → 5.2.3

package/dist/cjs/v2/ProductEmbed.js

@@ -506,6 +506,9 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
       className: "flex flex-col gap-y-2",
       children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Select, {
         dataTestId: "button-position-select-field",
+        dropdownProps: {
+          className: "min-w-max"
+        },
         label: t("neetoMolecules.productEmbed.floatingPopup.button.pos"),
         options: FLOATING_BUTTON_POSITIONS,
         value: btnPosition,
@@ -583,6 +586,7 @@ var SwitchOptions = function SwitchOptions(_ref) {
         rest = _objectWithoutProperties(_ref3$, _excluded);
       return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Switch, {
         checked: value,
+        size: "lg",
         label: /*#__PURE__*/jsxRuntime.jsxs("span", {
           className: "flex items-center gap-1",
           children: [label || SWITCH_OPTIONS[option].label, helpIconProps && /*#__PURE__*/jsxRuntime.jsx(v2_HelpPopover, _objectSpread$6({}, helpIconProps.popoverProps))]
@@ -680,19 +684,19 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
       clipPath: "url(#clip0_8605_6776)",
       children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         height: "163",
         rx: "6",
         width: "278"
       }), /*#__PURE__*/jsxRuntime.jsx("mask", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         id: "path-3-inside-1_8605_6776",
         children: /*#__PURE__*/jsxRuntime.jsx("path", {
           d: "M0 0h305v20H0z"
         })
       }), /*#__PURE__*/jsxRuntime.jsx("path", {
         d: "M0 0h305v20H0z",
-        fill: "rgb(var(--neeto-ui-white))"
+        fill: "var(--background)"
       }), /*#__PURE__*/jsxRuntime.jsx("path", {
         d: "M305 19H0v2h305z",
         fill: "currentColor",
@@ -718,7 +722,7 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx("rect", {
         height: "103.55",
         rx: "5.217",
-        stroke: "rgb(var(--neeto-ui-gray-300))",
+        stroke: "var(--border)",
         strokeWidth: "0.45",
         width: "205.55",
         x: "36.225",
@@ -900,7 +904,7 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       height: "162",
       rx: "5.5",
-      stroke: "rgb(var(--neeto-ui-gray-300))",
+      stroke: "var(--border)",
       width: "277",
       x: "0.5",
       y: "0.5"
@@ -908,7 +912,7 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
         id: "clip0_8605_6776",
         children: /*#__PURE__*/jsxRuntime.jsx("rect", {
-          fill: "rgb(var(--neeto-ui-white))",
+          fill: "var(--background)",
           height: "163",
           rx: "6",
           width: "278"
@@ -929,19 +933,19 @@ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
       clipPath: "url(#clip0_9047_10870)",
       children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         height: "163",
         rx: "6",
         width: "278"
       }), /*#__PURE__*/jsxRuntime.jsx("mask", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         id: "path-3-inside-1_9047_10870",
         children: /*#__PURE__*/jsxRuntime.jsx("path", {
           d: "M0 0H305V20H0V0Z"
         })
       }), /*#__PURE__*/jsxRuntime.jsx("path", {
         d: "M0 0H305V20H0V0Z",
-        fill: "rgb(var(--neeto-ui-white))"
+        fill: "var(--background)"
       }), /*#__PURE__*/jsxRuntime.jsx("path", {
         d: "M305 19H0V21H305V19Z",
         fill: "currentColor",
@@ -1037,7 +1041,7 @@ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
     }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       height: "162",
       rx: "5.5",
-      stroke: "rgb(var(--neeto-ui-gray-300))",
+      stroke: "var(--border)",
       width: "277",
       x: "0.5",
       y: "0.5"
@@ -1052,7 +1056,7 @@ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
       children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
         id: "clip0_9047_10870",
         children: /*#__PURE__*/jsxRuntime.jsx("rect", {
-          fill: "rgb(var(--neeto-ui-white))",
+          fill: "var(--background)",
           height: "163",
           rx: "6",
           width: "278"
@@ -1073,19 +1077,19 @@ var ElementPopupIcon = function ElementPopupIcon(_ref3) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
       clipPath: "url(#clip0_9047_10869)",
       children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         height: "163",
         rx: "6",
         width: "278"
       }), /*#__PURE__*/jsxRuntime.jsx("mask", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         id: "path-3-inside-1_9047_10869",
         children: /*#__PURE__*/jsxRuntime.jsx("path", {
           d: "M0 0h305v20H0z"
         })
       }), /*#__PURE__*/jsxRuntime.jsx("path", {
         d: "M0 0h305v20H0z",
-        fill: "rgb(var(--neeto-ui-white))"
+        fill: "var(--background)"
       }), /*#__PURE__*/jsxRuntime.jsx("path", {
         d: "M305 19H0v2h305z",
         fill: "currentColor",
@@ -1109,7 +1113,7 @@ var ElementPopupIcon = function ElementPopupIcon(_ref3) {
     }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       height: "162",
       rx: "5.5",
-      stroke: "rgb(var(--neeto-ui-gray-300))",
+      stroke: "var(--border)",
       width: "277",
       x: "0.5",
       y: "0.5"
@@ -1167,7 +1171,7 @@ var ElementPopupIcon = function ElementPopupIcon(_ref3) {
       children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
         id: "clip0_9047_10869",
         children: /*#__PURE__*/jsxRuntime.jsx("rect", {
-          fill: "rgb(var(--neeto-ui-white))",
+          fill: "var(--background)",
           height: "163",
           rx: "6",
           width: "278"
@@ -1262,10 +1266,13 @@ var Code = function Code(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center justify-between",
       children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-        variant: "h4",
+        variant: "h6",
         children: t("neetoMolecules.productEmbed.embedCode")
       }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Select, {
         className: "w-28 flex-grow-0",
+        dropdownProps: {
+          className: "min-w-max"
+        },
         options: supportedLanguagesOptions,
         size: "small",
         value: selectedLanguage,
@@ -1654,11 +1661,11 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs(v2_Container, {
     "data-testid": "embed-product",
-    className: classnames("neeto-molecules-embed flex w-full flex-grow flex-col p-0 md:flex-row", className),
+    className: classnames("neeto-molecules-embed flex w-full flex-grow flex-col !px-0 md:flex-row", className),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "md:border-border flex w-full shrink-0 flex-col items-start overflow-y-auto px-5 py-8 md:h-full md:max-w-[25rem] md:overflow-y-auto md:border-e md:px-10 lg:max-w-[30.3125rem]",
       children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-        className: "mb-4",
+        className: "mb-4 rtl:[&_svg]:scale-x-[-1]",
         "data-testid": "back-to-embed-selection-button",
         icon: arrowLeft.ArrowLeft,
         iconPosition: "left",
@@ -1672,6 +1679,7 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
         title: EMBED_TITLES[selectedEmbed]
       }), description && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
         className: "mt-2",
+        color: "muted",
         "data-testid": "".concat(neetoCist.hyphenate(selectedEmbed), "-description"),
         variant: "body2",
         children: description
@@ -1715,15 +1723,17 @@ var EmbedSelector = function EmbedSelector(_ref) {
     goBackLink = _ref.goBackLink,
     title = _ref.title,
     titleHelpPopoverProps = _ref.titleHelpPopoverProps,
-    subTitleHelpPopoverProps = _ref.subTitleHelpPopoverProps;
+    subTitleHelpPopoverProps = _ref.subTitleHelpPopoverProps,
+    _ref$showBrowserSuppo = _ref.showBrowserSupportNote,
+    showBrowserSupportNote = _ref$showBrowserSuppo === void 0 ? false : _ref$showBrowserSuppo;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var history = reactRouterDom.useHistory();
   var location = reactRouterDom.useLocation();
   return /*#__PURE__*/jsxRuntime.jsxs(v2_Container, {
-    className: "neeto-molecules-embed-landing-page py-8",
+    className: "neeto-molecules-embed-landing-page py-8 pb-10",
     children: [goBackLink && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-      className: "mb-4",
+      className: "mb-4 rtl:[&_svg]:scale-x-[-1]",
       "data-testid": "back-button",
       icon: arrowLeft.ArrowLeft,
       iconPosition: "left",
@@ -1740,16 +1750,28 @@ var EmbedSelector = function EmbedSelector(_ref) {
       className: "mx-auto w-full max-w-5xl py-6 md:py-10",
       children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
         className: "mb-2",
-        variant: "h2",
+        variant: "h4",
         children: [title || t("neetoMolecules.productEmbed.embedSelectionTitle", {
           productName: initializers.globalProps.appName
         }), neetoCist.isPresent(subTitleHelpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(v2_HelpPopover, _objectSpread(_objectSpread({}, subTitleHelpPopoverProps), {}, {
-          className: classnames("ml-2 align-middle", subTitleHelpPopoverProps === null || subTitleHelpPopoverProps === void 0 ? void 0 : subTitleHelpPopoverProps.className)
+          className: classnames("ms-2 align-middle", subTitleHelpPopoverProps === null || subTitleHelpPopoverProps === void 0 ? void 0 : subTitleHelpPopoverProps.className)
         }))]
       }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-        className: "mb-8",
+        color: "muted",
         variant: "body1",
+        className: classnames({
+          "mb-6": showBrowserSupportNote,
+          "mb-8": !showBrowserSupportNote
+        }),
         children: t("neetoMolecules.productEmbed.embedSelectionDescription")
+      }), showBrowserSupportNote && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Callout, {
+        className: "mb-8",
+        icon: function icon() {
+          return null;
+        },
+        title: t("neetoMolecules.productEmbed.browserSupport.title"),
+        variant: "warning",
+        children: t("neetoMolecules.productEmbed.browserSupport.description")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "grid w-full grid-cols-1 flex-wrap gap-6 md:grid-cols-3",
         children: Object.entries(options).map(function (_ref2) {
@@ -1761,7 +1783,7 @@ var EmbedSelector = function EmbedSelector(_ref) {
             embedIcon = _ref3$.embedIcon;
           var EmbedIcon = embedIcon || EMBED_ICONS[key];
           return /*#__PURE__*/jsxRuntime.jsxs("button", {
-            className: "border-border bg-background outline-background hover:border-primary hover:outline-primary flex w-full flex-col rounded-xl border p-6 text-start outline outline-1 transition-all motion-reduce:transition-none",
+            className: "border-border bg-background outline-background hover:border-primary hover:outline-primary flex w-full cursor-pointer flex-col rounded-xl border p-6 text-start outline outline-1 transition-all motion-reduce:transition-none",
             "data-testid": "embed-selector-card-".concat(neetoCist.hyphenate(key)),
             onClick: reactUtils.handleMetaClick(history, "".concat(location.pathname, "?type=").concat(neetoCist.hyphenate(key))),
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -1771,9 +1793,10 @@ var EmbedSelector = function EmbedSelector(_ref) {
               })
             }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
               className: "mb-2",
-              variant: "h4",
+              variant: "h6",
               children: label
             }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+              color: "muted",
               variant: "body2",
               children: description
             })]
@@ -1814,7 +1837,9 @@ var ProductEmbed = function ProductEmbed(_ref) {
     _ref$iframeStyle = _ref.iframeStyle,
     iframeStyle = _ref$iframeStyle === void 0 ? "height: 100%; width: 100%;" : _ref$iframeStyle,
     _ref$supportedLanguag = _ref.supportedLanguages,
-    supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag;
+    supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag,
+    _ref$showBrowserSuppo = _ref.showBrowserSupportNote,
+    showBrowserSupportNote = _ref$showBrowserSuppo === void 0 ? false : _ref$showBrowserSuppo;
   var _useLocation = reactRouterDom.useLocation(),
     search = _useLocation.search;
   var queryParams = new URLSearchParams(search);
@@ -1847,6 +1872,7 @@ var ProductEmbed = function ProductEmbed(_ref) {
   }) : /*#__PURE__*/jsxRuntime.jsx(EmbedSelector, {
     goBackLink: goBackLink,
     options: options,
+    showBrowserSupportNote: showBrowserSupportNote,
     subTitleHelpPopoverProps: subTitleHelpPopoverProps,
     title: title,
     titleHelpPopoverProps: titleHelpPopoverProps