@bigbinary/neeto-templates-frontend 2.0.0 → 2.0.1

package/app/javascript/src/translations/en.json

@@ -14,6 +14,8 @@
         "description": "A blank slate"
       },
       "editTemplate": "Use this template",
+      "backToTemplates": "Back to templates",
+      "back": "Back",
       "preview": "Preview",
       "quiz": "Quiz",
       "marketing": "Marketing",

package/dist/index.cjs.js

@@ -16,11 +16,9 @@ var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var ramda = require('ramda');
 var axios = require('axios');
 var jsxRuntime = require('react/jsx-runtime');
-var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
-var i18next = require('i18next');
 var classnames = require('classnames');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var ResponsiveDevicePicker = require('@bigbinary/neeto-molecules/ResponsiveDevicePicker');
 var Button = require('@bigbinary/neetoui/Button');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var Form = require('@bigbinary/neetoui/formik/Form');
@@ -30,6 +28,7 @@ var formik = require('formik');
 var Header = require('@bigbinary/neeto-molecules/Header');
 var Scrollable = require('@bigbinary/neeto-molecules/Scrollable');
 var Label = require('@bigbinary/neetoui/Label');
+var i18next = require('i18next');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -58,9 +57,8 @@ var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var LeftArrow__default = /*#__PURE__*/_interopDefaultLegacy(LeftArrow);
+var ResponsiveDevicePicker__default = /*#__PURE__*/_interopDefaultLegacy(ResponsiveDevicePicker);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
@@ -132,9 +130,10 @@ var DEFAULT_CATEGORY = {
   name: "All"
 };
 var INFINITE_SCROLL_DELAY = 500;
-var MENU_ITEMS = {
-  CREATE: "create",
-  PREVIEW: "preview"
+var RESPONSIVE_DEVICES = {
+  DESKTOP: "desktop",
+  TABLET: "tablet",
+  MOBILE: "mobile"
 };
 
 function _typeof(o) {
@@ -417,7 +416,7 @@ const SvgCustom = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   height: 40,
   x: 3,
   y: 2,
-  fill: "#4558F9",
+  fill: "#008068",
   rx: 2
 })), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "#fff",
@@ -574,101 +573,30 @@ var BlankCard = function BlankCard(_ref) {
   });
 };
 
-var ButtonLoader = function ButtonLoader() {
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    role: "status",
-    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
-      "aria-hidden": "true",
-      className: "neeto-ui-text-gray-400 inline h-4 w-4 animate-spin",
-      fill: "none",
-      viewBox: "0 0 100 101",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M100 50.59c0 27.615-22.386 50.001-50 50.001s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zm-90.919 0c0 22.6 18.32 40.92 40.919 40.92 22.599 0 40.919-18.32 40.919-40.92 0-22.598-18.32-40.918-40.919-40.918-22.599 0-40.919 18.32-40.919 40.919z",
-        fill: "currentColor"
-      }), /*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M93.968 39.04c2.425-.636 3.894-3.128 3.04-5.486A50 50 0 0041.735 1.279c-2.474.414-3.922 2.919-3.285 5.344.637 2.426 3.12 3.849 5.6 3.484a40.916 40.916 0 0144.131 25.769c.902 2.34 3.361 3.802 5.787 3.165z",
-        fill: "#3642df"
-      })]
-    })
-  });
-};
-
-var getMenuItems = function getMenuItems(_ref) {
-  var handleCreateTemplate = _ref.handleCreateTemplate,
-    isCreating = _ref.isCreating,
-    template = _ref.template;
-  return [{
-    key: MENU_ITEMS.CREATE,
-    "data-cy": "use-this-template-button",
-    isDisabled: isCreating,
-    label: i18next.t("neetoTemplate.templates.editTemplate"),
-    suffix: isCreating && /*#__PURE__*/jsxRuntime.jsx(ButtonLoader, {}),
-    onClick: function onClick(event) {
-      return handleCreateTemplate(event, template.id);
-    }
-  }, {
-    key: MENU_ITEMS.PREVIEW,
-    "data-cy": "template-preview-button",
-    label: i18next.t("neetoTemplate.templates.preview")
-  }];
-};
-
 var Card = function Card(_ref) {
   var template = _ref.template,
-    onClick = _ref.onClick,
-    afterCreate = _ref.afterCreate,
-    refetchResource = _ref.refetchResource;
-  var _useCreateTemplate = useCreateTemplate(),
-    createTemplate = _useCreateTemplate.mutate,
-    isCreating = _useCreateTemplate.isPending;
-  var handleCreateTemplate = function handleCreateTemplate(e, templateId) {
-    e.stopPropagation();
-    createTemplate({
-      id: templateId
-    }, {
-      onSuccess: function onSuccess(response) {
-        afterCreate(response);
-        refetchResource();
-      }
-    });
-  };
+    onClick = _ref.onClick;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     onClick: onClick,
-    className: "neeto-template neeto-ui-bg-white neeto-ui-shadow-sm hover:neeto-ui-border-gray-400 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col overflow-hidden border outline-none transition-colors duration-300 ease-in-out",
+    className: "neeto-template neeto-template-thumbnail neeto-ui-bg-white neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col overflow-hidden border outline-none transition-colors duration-300 ease-in-out",
     "data-cy": "template-card",
     tabIndex: 0,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "neeto-template__header",
+      className: "neeto-template__header relative overflow-hidden",
       children: /*#__PURE__*/jsxRuntime.jsx("img", {
         className: "neeto-template__image",
         "data-cy": "template-thumbnail-image",
         src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg p-2 py-1.5",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-        className: "neeto-ui-text-gray-800 line-clamp-2",
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-3 py-1.5",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-template-thumbnail__title line-clamp-2",
         "data-cy": "template-card-title",
         lineHeight: "normal",
-        style: "body2",
+        style: "h5",
         children: template.title
-      }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
-        dropdownButtonProps: {
-          className: "flex-shrink-0",
-          size: "small"
-        },
-        dropdownProps: {
-          onClick: function onClick(event) {
-            return event.stopPropagation();
-          }
-        },
-        menuItems: getMenuItems({
-          handleCreateTemplate: handleCreateTemplate,
-          isCreating: isCreating,
-          template: template
-        })
-      })]
+      })
     })]
   });
 };
@@ -845,9 +773,15 @@ var Preview$1 = function Preview(_ref) {
     refetchResource = _ref.refetchResource;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useBreakpoints = reactUtils.useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
   var _useCreateTemplate = useCreateTemplate(),
     createTemplate = _useCreateTemplate.mutate,
     isCreating = _useCreateTemplate.isPending;
+  var _useState = React.useState(RESPONSIVE_DEVICES.DESKTOP),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedDevice = _useState2[0],
+    setSelectedDevice = _useState2[1];
   var handleCreateTemplate = function handleCreateTemplate() {
     createTemplate({
       id: selectedTemplate.id
@@ -861,40 +795,62 @@ var Preview$1 = function Preview(_ref) {
   var title = selectedTemplate.title,
     previewUrl = selectedTemplate.previewUrl;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "m-auto flex h-full w-full max-w-6xl flex-col space-y-6 py-6",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex min-w-0 flex-grow items-center gap-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-          className: "flex-shrink-0",
-          "data-cy": "preview-template-back-button",
-          icon: LeftArrow__default["default"],
-          style: "text",
-          onClick: function onClick() {
-            return setCurrentScreen(TEMPLATE_SCREENS.LIST);
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-          className: "leading-none",
-          "data-cy": "preview-template-title",
-          style: "h2",
-          weight: "semibold",
-          children: title
+    className: "neeto-templates-full-page-preview flex h-full w-full flex-col",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-templates-full-page-preview__header neeto-ui-border-gray-200 border-b px-4",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mx-auto flex w-full max-w-6xl items-center justify-between py-[9px]",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-1/3",
+          children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            className: "truncate leading-tight",
+            "data-cy": "preview-template-title",
+            style: "h3",
+            weight: "semibold",
+            children: title
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "hidden flex-shrink-0 lg:flex",
+          children: /*#__PURE__*/jsxRuntime.jsx(ResponsiveDevicePicker__default["default"], {
+            selectedDevice: selectedDevice,
+            onDeviceChange: setSelectedDevice
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex w-1/3 items-center justify-end gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            className: "flex-shrink-0",
+            "data-cy": "preview-template-back-button",
+            style: "secondary",
+            label: isSize("mobile") ? t("neetoTemplate.templates.back") : t("neetoTemplate.templates.backToTemplates"),
+            onClick: function onClick() {
+              return setCurrentScreen(TEMPLATE_SCREENS.LIST);
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            className: "flex-shrink-0",
+            "data-cy": "preview-use-template-button",
+            disabled: isCreating,
+            label: t("neetoTemplate.templates.editTemplate"),
+            loading: isCreating,
+            onClick: handleCreateTemplate
+          })]
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-        className: "flex-shrink-0",
-        "data-cy": "preview-use-template-button",
-        disabled: isCreating,
-        label: t("neetoTemplate.templates.editTemplate"),
-        loading: isCreating,
-        onClick: handleCreateTemplate
-      })]
+      })
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10",
-      children: /*#__PURE__*/jsxRuntime.jsx("iframe", {
-        className: "w-full flex-1 shadow-inner",
-        "data-cy": "iframe-id",
-        src: previewUrl
+      className: "neeto-ui-bg-gray-200 neeto-templates-full-page-preview__holder-wrapper min-h-0 flex-grow",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]("neeto-templates-full-page-preview__holder m-auto", {
+          "neeto-templates-full-page-preview__holder--desktop": selectedDevice === RESPONSIVE_DEVICES.DESKTOP,
+          "neeto-templates-full-page-preview__holder--tablet": selectedDevice === RESPONSIVE_DEVICES.TABLET,
+          "neeto-templates-full-page-preview__holder--mobile": selectedDevice === RESPONSIVE_DEVICES.MOBILE
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-templates-full-page-preview__device-border h-full w-full",
+          children: /*#__PURE__*/jsxRuntime.jsx("iframe", {
+            className: "neeto-templates-full-page-preview__iframe h-full w-full border-none",
+            "data-cy": "iframe-id",
+            src: previewUrl
+          })
+        })
       })
     })]
   });
@@ -925,22 +881,23 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
   };
 
   return /*#__PURE__*/jsxRuntime.jsx(Modal__default["default"], {
-    className: "neeto-template-list h-screen w-screen overflow-y-auto",
     isOpen: isOpen,
+    className: "neeto-template-list h-screen w-screen overflow-y-auto",
+    closeButton: currentScreen === TEMPLATE_SCREENS.LIST,
     size: "fullScreen",
     onClose: onModalClose,
     children: currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/jsxRuntime.jsx(List, {
-      setCurrentScreen: setCurrentScreen,
-      setSelectedTemplate: setSelectedTemplate,
-      isCreating: isCreating,
       afterCreate: afterCreate,
+      isCreating: isCreating,
       onCreate: onCreate,
-      refetchResource: refetchResource
-    }) : /*#__PURE__*/jsxRuntime.jsx(Preview$1, {
-      selectedTemplate: selectedTemplate,
+      refetchResource: refetchResource,
       setCurrentScreen: setCurrentScreen,
+      setSelectedTemplate: setSelectedTemplate
+    }) : /*#__PURE__*/jsxRuntime.jsx(Preview$1, {
       afterCreate: afterCreate,
-      refetchResource: refetchResource
+      refetchResource: refetchResource,
+      selectedTemplate: selectedTemplate,
+      setCurrentScreen: setCurrentScreen
     })
   });
 };
@@ -1375,7 +1332,7 @@ var TemplateTags = function TemplateTags(_ref) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-template-list .neeto-ui-modal__close{z-index:1}.neeto-template__header{flex-grow:1;min-height:120px}.neeto-template__image{aspect-ratio:16/9;max-height:100%;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}.neeto-template__description{min-height:54px}.neeto-templates-share-preview{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-gray-300));box-shadow:var(--neeto-ui-shadow-m);display:flex;flex-direction:column;height:calc(100vh - 104px);width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL3RlbXBsYXRlcy9fdGVtcGxhdGUtbGlzdC5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL3RlbXBsYXRlcy9fc2hhcmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSw0Q0FDRSxTQ0FKLENES0Usd0JBRUUsV0FBQSxDQURBLGdCQ0RKLENES0UsdUJBRUUsaUJBQUEsQ0FHQSxlQUFBLENBREEsY0FBQSxDQURBLG1CQUFBLENBQUEsZ0JBQUEsQ0FGQSxVQ0NKLENES0UsNkJBQ0UsZUNISixDQ2pCQSwrQkFPRSwyQ0FBQSxDQUpBLCtDQUFBLENBQ0EsbUNBQUEsQ0FDQSxZQUFBLENBQ0EscUJBQUEsQ0FKQSwwQkFBQSxDQURBLFVEMEJGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXRlbXBsYXRlLWxpc3Qge1xuICAubmVldG8tdWktbW9kYWxfX2Nsb3NlIHtcbiAgICB6LWluZGV4OiAxO1xuICB9XG59XG5cbi5uZWV0by10ZW1wbGF0ZSB7XG4gICZfX2hlYWRlciB7XG4gICAgbWluLWhlaWdodDogJG5lZXRvLXRlbXBsYXRlLWhlYWRlci1taW4taGVpZ2h0O1xuICAgIGZsZXgtZ3JvdzogMTtcbiAgfVxuXG4gICZfX2ltYWdlIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBhc3BlY3QtcmF0aW86IDE2IC8gOTtcbiAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgbWF4LWhlaWdodDogMTAwJTtcbiAgfVxuICAmX19kZXNjcmlwdGlvbiB7XG4gICAgbWluLWhlaWdodDogJG5lZXRvLXRlbXBsYXRlLWRlc2NyaXB0aW9uLW1pbi1oZWlnaHQ7XG4gIH1cbn1cbiIsIi5uZWV0by10ZW1wbGF0ZS1saXN0IC5uZWV0by11aS1tb2RhbF9fY2xvc2Uge1xuICB6LWluZGV4OiAxO1xufVxuXG4ubmVldG8tdGVtcGxhdGVfX2hlYWRlciB7XG4gIG1pbi1oZWlnaHQ6IDEyMHB4O1xuICBmbGV4LWdyb3c6IDE7XG59XG4ubmVldG8tdGVtcGxhdGVfX2ltYWdlIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGFzcGVjdC1yYXRpbzogMTYvOTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgbWF4LWhlaWdodDogMTAwJTtcbn1cbi5uZWV0by10ZW1wbGF0ZV9fZGVzY3JpcHRpb24ge1xuICBtaW4taGVpZ2h0OiA1NHB4O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLXNoYXJlLXByZXZpZXcge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTA0cHgpO1xuICBib3JkZXI6IHRoaW4gc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMzAwKSk7XG4gIGJveC1zaGFkb3c6IHZhcigtLW5lZXRvLXVpLXNoYWRvdy1tKTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG59IiwiLm5lZXRvLXRlbXBsYXRlcy1zaGFyZS1wcmV2aWV3IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEwNHB4KTtcbiAgYm9yZGVyOiB0aGluIHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTMwMCkpO1xuICBib3gtc2hhZG93OiB2YXIoLS1uZWV0by11aS1zaGFkb3ctbSk7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xufVxuIl19 */";
+var css = ".neeto-template-list .neeto-ui-modal__close{z-index:1}.neeto-template__header{flex-grow:1;min-height:120px}.neeto-template__image{aspect-ratio:16/9;max-height:100%;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}.neeto-template__description{min-height:54px}.neeto-template-thumbnail .neeto-template__image{transition:transform .5s ease}.neeto-template-thumbnail .neeto-template-thumbnail__title{transition:color .5s ease}.neeto-template-thumbnail:hover .neeto-template__image{transform:scale(1.08)}.neeto-template-thumbnail:hover .neeto-template-thumbnail__title{color:rgb(var(--neeto-ui-black))!important}.neeto-templates-full-page-preview__holder{transition:all .2s ease-in-out}.neeto-templates-full-page-preview__holder--desktop{height:100%;max-width:100%;width:100%}.neeto-templates-full-page-preview__holder--tablet{height:1024px;margin-top:16px!important;max-height:calc(100% - 32px);max-width:768px}.neeto-templates-full-page-preview__holder--tablet .neeto-templates-full-page-preview__iframe{border:1px solid rgb(var(--neeto-ui-gray-300))!important}.neeto-templates-full-page-preview__holder--mobile{height:896px;margin-top:16px!important;max-height:calc(100% - 32px);max-width:384px}.neeto-templates-full-page-preview__holder--mobile .neeto-templates-full-page-preview__iframe{border:1px solid rgb(var(--neeto-ui-gray-300))!important}.neeto-templates-share-preview{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-gray-300));box-shadow:var(--neeto-ui-shadow-m);display:flex;flex-direction:column;height:calc(100vh - 104px);width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL3RlbXBsYXRlcy9fdGVtcGxhdGUtbGlzdC5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL3RlbXBsYXRlcy9fc2hhcmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSw0Q0FDRSxTQ0FKLENES0Usd0JBRUUsV0FBQSxDQURBLGdCQ0RKLENES0UsdUJBRUUsaUJBQUEsQ0FHQSxlQUFBLENBREEsY0FBQSxDQURBLG1CQUFBLENBQUEsZ0JBQUEsQ0FGQSxVQ0NKLENES0UsNkJBQ0UsZUNISixDRFFFLGlEQUNFLDZCQ0xKLENET0UsMkRBQ0UseUJDTEosQ0RRSSx1REFDRSxxQkNOTixDRFFJLGlFQUNFLDBDQ05OLENEV0EsMkNBQ0UsOEJDUkYsQ0RXQSxvREFFRSxXQUFBLENBQ0EsY0FBQSxDQUZBLFVDTkYsQ0RXQSxtREFFRSxhQUFBLENBRUEseUJBQUEsQ0FEQSw0QkFBQSxDQUZBLGVDTEYsQ0RVRSw4RkFDRSx3RENSSixDRFlBLG1EQUVFLFlBQUEsQ0FFQSx5QkFBQSxDQURBLDRCQUFBLENBRkEsZUNORixDRFdFLDhGQUNFLHdEQ1RKLENDNURBLCtCQU9FLDJDQUFBLENBSkEsK0NBQUEsQ0FDQSxtQ0FBQSxDQUNBLFlBQUEsQ0FDQSxxQkFBQSxDQUpBLDBCQUFBLENBREEsVURxRUYiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tdGVtcGxhdGUtbGlzdCB7XG4gIC5uZWV0by11aS1tb2RhbF9fY2xvc2Uge1xuICAgIHotaW5kZXg6IDE7XG4gIH1cbn1cblxuLm5lZXRvLXRlbXBsYXRlIHtcbiAgJl9faGVhZGVyIHtcbiAgICBtaW4taGVpZ2h0OiAkbmVldG8tdGVtcGxhdGUtaGVhZGVyLW1pbi1oZWlnaHQ7XG4gICAgZmxleC1ncm93OiAxO1xuICB9XG5cbiAgJl9faW1hZ2Uge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGFzcGVjdC1yYXRpbzogMTYgLyA5O1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgICBtYXgtaGVpZ2h0OiAxMDAlO1xuICB9XG4gICZfX2Rlc2NyaXB0aW9uIHtcbiAgICBtaW4taGVpZ2h0OiAkbmVldG8tdGVtcGxhdGUtZGVzY3JpcHRpb24tbWluLWhlaWdodDtcbiAgfVxufVxuXG4ubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsIHtcbiAgLm5lZXRvLXRlbXBsYXRlX19pbWFnZSB7XG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuNXMgZWFzZTtcbiAgfVxuICAubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsX190aXRsZSB7XG4gICAgdHJhbnNpdGlvbjogY29sb3IgMC41cyBlYXNlO1xuICB9XG4gICY6aG92ZXIge1xuICAgIC5uZWV0by10ZW1wbGF0ZV9faW1hZ2Uge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjA4KTtcbiAgICB9XG4gICAgLm5lZXRvLXRlbXBsYXRlLXRodW1ibmFpbF9fdGl0bGUge1xuICAgICAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ibGFjaykpICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlciB7XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2UtaW4tb3V0O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLWRlc2t0b3Age1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlci0tdGFibGV0IHtcbiAgbWF4LXdpZHRoOiA3NjhweDtcbiAgaGVpZ2h0OiAxMDI0cHg7XG4gIG1heC1oZWlnaHQ6IGNhbGMoMTAwJSAtIDMycHgpO1xuICBtYXJnaW4tdG9wOiAxNnB4ICFpbXBvcnRhbnQ7XG5cbiAgLm5lZXRvLXRlbXBsYXRlcy1mdWxsLXBhZ2UtcHJldmlld19faWZyYW1lIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKSAhaW1wb3J0YW50O1xuICB9XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlci0tbW9iaWxlIHtcbiAgbWF4LXdpZHRoOiAzODRweDtcbiAgaGVpZ2h0OiA4OTZweDtcbiAgbWF4LWhlaWdodDogY2FsYygxMDAlIC0gMzJweCk7XG4gIG1hcmdpbi10b3A6IDE2cHggIWltcG9ydGFudDtcblxuICAubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19pZnJhbWUge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTMwMCkpICFpbXBvcnRhbnQ7XG4gIH1cbn1cbiIsIi5uZWV0by10ZW1wbGF0ZS1saXN0IC5uZWV0by11aS1tb2RhbF9fY2xvc2Uge1xuICB6LWluZGV4OiAxO1xufVxuXG4ubmVldG8tdGVtcGxhdGVfX2hlYWRlciB7XG4gIG1pbi1oZWlnaHQ6IDEyMHB4O1xuICBmbGV4LWdyb3c6IDE7XG59XG4ubmVldG8tdGVtcGxhdGVfX2ltYWdlIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGFzcGVjdC1yYXRpbzogMTYvOTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgbWF4LWhlaWdodDogMTAwJTtcbn1cbi5uZWV0by10ZW1wbGF0ZV9fZGVzY3JpcHRpb24ge1xuICBtaW4taGVpZ2h0OiA1NHB4O1xufVxuXG4ubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsIC5uZWV0by10ZW1wbGF0ZV9faW1hZ2Uge1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC41cyBlYXNlO1xufVxuLm5lZXRvLXRlbXBsYXRlLXRodW1ibmFpbCAubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsX190aXRsZSB7XG4gIHRyYW5zaXRpb246IGNvbG9yIDAuNXMgZWFzZTtcbn1cbi5uZWV0by10ZW1wbGF0ZS10aHVtYm5haWw6aG92ZXIgLm5lZXRvLXRlbXBsYXRlX19pbWFnZSB7XG4gIHRyYW5zZm9ybTogc2NhbGUoMS4wOCk7XG59XG4ubmVldG8tdGVtcGxhdGUtdGh1bWJuYWlsOmhvdmVyIC5uZWV0by10ZW1wbGF0ZS10aHVtYm5haWxfX3RpdGxlIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ibGFjaykpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlciB7XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2UtaW4tb3V0O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLWRlc2t0b3Age1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG5cbi5uZWV0by10ZW1wbGF0ZXMtZnVsbC1wYWdlLXByZXZpZXdfX2hvbGRlci0tdGFibGV0IHtcbiAgbWF4LXdpZHRoOiA3NjhweDtcbiAgaGVpZ2h0OiAxMDI0cHg7XG4gIG1heC1oZWlnaHQ6IGNhbGMoMTAwJSAtIDMycHgpO1xuICBtYXJnaW4tdG9wOiAxNnB4ICFpbXBvcnRhbnQ7XG59XG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLXRhYmxldCAubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19pZnJhbWUge1xuICBib3JkZXI6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLW1vYmlsZSB7XG4gIG1heC13aWR0aDogMzg0cHg7XG4gIGhlaWdodDogODk2cHg7XG4gIG1heC1oZWlnaHQ6IGNhbGMoMTAwJSAtIDMycHgpO1xuICBtYXJnaW4tdG9wOiAxNnB4ICFpbXBvcnRhbnQ7XG59XG4ubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19ob2xkZXItLW1vYmlsZSAubmVldG8tdGVtcGxhdGVzLWZ1bGwtcGFnZS1wcmV2aWV3X19pZnJhbWUge1xuICBib3JkZXI6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGVtcGxhdGVzLXNoYXJlLXByZXZpZXcge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTA0cHgpO1xuICBib3JkZXI6IHRoaW4gc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMzAwKSk7XG4gIGJveC1zaGFkb3c6IHZhcigtLW5lZXRvLXVpLXNoYWRvdy1tKTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG59IiwiLm5lZXRvLXRlbXBsYXRlcy1zaGFyZS1wcmV2aWV3IHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogY2FsYygxMDB2aCAtIDEwNHB4KTtcbiAgYm9yZGVyOiB0aGluIHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTMwMCkpO1xuICBib3gtc2hhZG93OiB2YXIoLS1uZWV0by11aS1zaGFkb3ctbSk7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS13aGl0ZSkpO1xufVxuIl19 */";
 n(css,{});
 
 exports.CreateTemplateModal = CreateTemplateModal;