@bigbinary/neeto-molecules 5.2.0 → 5.2.2

package/dist/v2/ProductEmbed.js

@@ -4,7 +4,7 @@ import { isPresent, filterBy, hyphenate, noop } from '@bigbinary/neeto-cist';
 import { useLocation, useHistory } from 'react-router-dom';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Label, Input, Button, Select, ColorPicker, Checkbox, Switch, Typography, Spinner } from '@bigbinary/neeto-atoms';
+import { Label, Input, Button, Select, ColorPicker, Checkbox, Switch, Typography, Spinner, Callout } from '@bigbinary/neeto-atoms';
 import classnames from 'classnames';
 import useStateWithDependency from '@bigbinary/neeto-commons-frontend/v2/react-utils/useStateWithDependency';
 import { toPairs, mergeDeepLeft, isEmpty, mergeLeft } from 'ramda';
@@ -504,6 +504,9 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
       className: "flex flex-col gap-y-2",
       children: /*#__PURE__*/jsx(Select, {
         dataTestId: "button-position-select-field",
+        dropdownProps: {
+          className: "min-w-max"
+        },
         label: t("neetoMolecules.productEmbed.floatingPopup.button.pos"),
         options: FLOATING_BUTTON_POSITIONS,
         value: btnPosition,
@@ -581,6 +584,7 @@ var SwitchOptions = function SwitchOptions(_ref) {
         rest = _objectWithoutProperties(_ref3$, _excluded);
       return /*#__PURE__*/jsx(Switch, {
         checked: value,
+        size: "lg",
         label: /*#__PURE__*/jsxs("span", {
           className: "flex items-center gap-1",
           children: [label || SWITCH_OPTIONS[option].label, helpIconProps && /*#__PURE__*/jsx(HelpPopover, _objectSpread$6({}, helpIconProps.popoverProps))]
@@ -678,19 +682,19 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
     children: [/*#__PURE__*/jsxs("g", {
       clipPath: "url(#clip0_8605_6776)",
       children: [/*#__PURE__*/jsx("rect", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         height: "163",
         rx: "6",
         width: "278"
       }), /*#__PURE__*/jsx("mask", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         id: "path-3-inside-1_8605_6776",
         children: /*#__PURE__*/jsx("path", {
           d: "M0 0h305v20H0z"
         })
       }), /*#__PURE__*/jsx("path", {
         d: "M0 0h305v20H0z",
-        fill: "rgb(var(--neeto-ui-white))"
+        fill: "var(--background)"
       }), /*#__PURE__*/jsx("path", {
         d: "M305 19H0v2h305z",
         fill: "currentColor",
@@ -716,7 +720,7 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
       }), /*#__PURE__*/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",
@@ -898,7 +902,7 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
     }), /*#__PURE__*/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"
@@ -906,7 +910,7 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
       children: /*#__PURE__*/jsx("clipPath", {
         id: "clip0_8605_6776",
         children: /*#__PURE__*/jsx("rect", {
-          fill: "rgb(var(--neeto-ui-white))",
+          fill: "var(--background)",
           height: "163",
           rx: "6",
           width: "278"
@@ -927,19 +931,19 @@ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
     children: [/*#__PURE__*/jsxs("g", {
       clipPath: "url(#clip0_9047_10870)",
       children: [/*#__PURE__*/jsx("rect", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         height: "163",
         rx: "6",
         width: "278"
       }), /*#__PURE__*/jsx("mask", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         id: "path-3-inside-1_9047_10870",
         children: /*#__PURE__*/jsx("path", {
           d: "M0 0H305V20H0V0Z"
         })
       }), /*#__PURE__*/jsx("path", {
         d: "M0 0H305V20H0V0Z",
-        fill: "rgb(var(--neeto-ui-white))"
+        fill: "var(--background)"
       }), /*#__PURE__*/jsx("path", {
         d: "M305 19H0V21H305V19Z",
         fill: "currentColor",
@@ -1035,7 +1039,7 @@ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
     }), /*#__PURE__*/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"
@@ -1050,7 +1054,7 @@ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
       children: /*#__PURE__*/jsx("clipPath", {
         id: "clip0_9047_10870",
         children: /*#__PURE__*/jsx("rect", {
-          fill: "rgb(var(--neeto-ui-white))",
+          fill: "var(--background)",
           height: "163",
           rx: "6",
           width: "278"
@@ -1071,19 +1075,19 @@ var ElementPopupIcon = function ElementPopupIcon(_ref3) {
     children: [/*#__PURE__*/jsxs("g", {
       clipPath: "url(#clip0_9047_10869)",
       children: [/*#__PURE__*/jsx("rect", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         height: "163",
         rx: "6",
         width: "278"
       }), /*#__PURE__*/jsx("mask", {
-        fill: "rgb(var(--neeto-ui-white))",
+        fill: "var(--background)",
         id: "path-3-inside-1_9047_10869",
         children: /*#__PURE__*/jsx("path", {
           d: "M0 0h305v20H0z"
         })
       }), /*#__PURE__*/jsx("path", {
         d: "M0 0h305v20H0z",
-        fill: "rgb(var(--neeto-ui-white))"
+        fill: "var(--background)"
       }), /*#__PURE__*/jsx("path", {
         d: "M305 19H0v2h305z",
         fill: "currentColor",
@@ -1107,7 +1111,7 @@ var ElementPopupIcon = function ElementPopupIcon(_ref3) {
     }), /*#__PURE__*/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"
@@ -1165,7 +1169,7 @@ var ElementPopupIcon = function ElementPopupIcon(_ref3) {
       children: /*#__PURE__*/jsx("clipPath", {
         id: "clip0_9047_10869",
         children: /*#__PURE__*/jsx("rect", {
-          fill: "rgb(var(--neeto-ui-white))",
+          fill: "var(--background)",
           height: "163",
           rx: "6",
           width: "278"
@@ -1260,10 +1264,13 @@ var Code = function Code(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex items-center justify-between",
       children: [/*#__PURE__*/jsx(Typography, {
-        variant: "h4",
+        variant: "h6",
         children: t("neetoMolecules.productEmbed.embedCode")
       }), /*#__PURE__*/jsx(Select, {
         className: "w-28 flex-grow-0",
+        dropdownProps: {
+          className: "min-w-max"
+        },
         options: supportedLanguagesOptions,
         size: "small",
         value: selectedLanguage,
@@ -1652,11 +1659,11 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
   }, []);
   return /*#__PURE__*/jsxs(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__*/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__*/jsx(Button, {
-        className: "mb-4",
+        className: "mb-4 rtl:[&_svg]:scale-x-[-1]",
         "data-testid": "back-to-embed-selection-button",
         icon: ArrowLeft,
         iconPosition: "left",
@@ -1670,6 +1677,7 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
         title: EMBED_TITLES[selectedEmbed]
       }), description && /*#__PURE__*/jsx(Typography, {
         className: "mt-2",
+        color: "muted",
         "data-testid": "".concat(hyphenate(selectedEmbed), "-description"),
         variant: "body2",
         children: description
@@ -1713,15 +1721,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 = useTranslation(),
     t = _useTranslation.t;
   var history = useHistory();
   var location = useLocation();
   return /*#__PURE__*/jsxs(Container, {
-    className: "neeto-molecules-embed-landing-page py-8",
+    className: "neeto-molecules-embed-landing-page py-8 pb-10",
     children: [goBackLink && /*#__PURE__*/jsx(Button, {
-      className: "mb-4",
+      className: "mb-4 rtl:[&_svg]:scale-x-[-1]",
       "data-testid": "back-button",
       icon: ArrowLeft,
       iconPosition: "left",
@@ -1738,16 +1748,28 @@ var EmbedSelector = function EmbedSelector(_ref) {
       className: "mx-auto w-full max-w-5xl py-6 md:py-10",
       children: [/*#__PURE__*/jsxs(Typography, {
         className: "mb-2",
-        variant: "h2",
+        variant: "h4",
         children: [title || t("neetoMolecules.productEmbed.embedSelectionTitle", {
           productName: globalProps$1.appName
         }), isPresent(subTitleHelpPopoverProps) && /*#__PURE__*/jsx(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__*/jsx(Typography, {
-        className: "mb-8",
+        color: "muted",
         variant: "body1",
+        className: classnames({
+          "mb-6": showBrowserSupportNote,
+          "mb-8": !showBrowserSupportNote
+        }),
         children: t("neetoMolecules.productEmbed.embedSelectionDescription")
+      }), showBrowserSupportNote && /*#__PURE__*/jsx(Callout, {
+        className: "mb-8",
+        icon: function icon() {
+          return null;
+        },
+        title: t("neetoMolecules.productEmbed.browserSupport.title"),
+        variant: "warning",
+        children: t("neetoMolecules.productEmbed.browserSupport.description")
       }), /*#__PURE__*/jsx("div", {
         className: "grid w-full grid-cols-1 flex-wrap gap-6 md:grid-cols-3",
         children: Object.entries(options).map(function (_ref2) {
@@ -1759,7 +1781,7 @@ var EmbedSelector = function EmbedSelector(_ref) {
             embedIcon = _ref3$.embedIcon;
           var EmbedIcon = embedIcon || EMBED_ICONS[key];
           return /*#__PURE__*/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(hyphenate(key)),
             onClick: handleMetaClick(history, "".concat(location.pathname, "?type=").concat(hyphenate(key))),
             children: [/*#__PURE__*/jsx("span", {
@@ -1769,9 +1791,10 @@ var EmbedSelector = function EmbedSelector(_ref) {
               })
             }), /*#__PURE__*/jsx(Typography, {
               className: "mb-2",
-              variant: "h4",
+              variant: "h6",
               children: label
             }), /*#__PURE__*/jsx(Typography, {
+              color: "muted",
               variant: "body2",
               children: description
             })]
@@ -1812,7 +1835,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 = useLocation(),
     search = _useLocation.search;
   var queryParams = new URLSearchParams(search);
@@ -1845,6 +1870,7 @@ var ProductEmbed = function ProductEmbed(_ref) {
   }) : /*#__PURE__*/jsx(EmbedSelector, {
     goBackLink: goBackLink,
     options: options,
+    showBrowserSupportNote: showBrowserSupportNote,
     subTitleHelpPopoverProps: subTitleHelpPopoverProps,
     title: title,
     titleHelpPopoverProps: titleHelpPopoverProps