@bigbinary/neeto-molecules 1.19.9 → 1.19.10-beta

package/dist/ThemeSidebar.js

@@ -1,1410 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { useState, useEffect, useRef } from 'react';
-import { Typography, Toastr, Button, Select, ColorPicker, Tag, Input as Input$1, Spinner } from '@bigbinary/neetoui';
-import { useTranslation, Trans } from 'react-i18next';
-import * as yup from 'yup';
-import { Switch, Input, Form } from '@bigbinary/neetoui/formik';
-import { isNotEmpty, findBy, noop, isPresent, capitalize } from '@bigbinary/neeto-cist';
-import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
-import { isEmpty, mergeLeft, path } from 'ramda';
-import _extends from '@babel/runtime/helpers/extends';
-import classnames from 'classnames';
-import { ImageUpload, LeftAlign, CenterAlign, Search, LeftArrow, Plus } from '@bigbinary/neeto-icons';
-import { motion } from 'framer-motion';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { DirectUpload } from '@rails/activestorage';
-import { useDropzone } from 'react-dropzone';
-import { Field } from 'formik';
-import { Slider } from 'antd';
-import { n } from './inject-css-c86de496.js';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import MoreDropdown from './MoreDropdown.js';
-
-var DIRECT_UPLOAD_URL = "/api/direct_uploads";
-var DESIGN_SCREENS = {
-  THEMES: "Themes",
-  CUSTOMIZE: "Customize",
-  LOADING: "Loading"
-};
-var INITIAL_STATE = {
-  name: "",
-  backgroundColor: "#ffffff",
-  backgroundOverlayColor: "#000000",
-  backgroundOverlayOpacity: 0,
-  isDominantBackgroundColorEnabled: false,
-  questionColor: "#000000",
-  buttonBackgroundColor: "#2D36D4",
-  buttonTextColor: "#ffffff",
-  answerColor: "#2D36D4",
-  answerTextColor: "#ffffff",
-  logo: {},
-  buttonBorderRadius: 10,
-  isContentBackgroundEnabled: false,
-  welcomeTextAlignment: "left",
-  thankYouTextAlignment: "center",
-  questionsTextAlignment: "left",
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
-};
-var THEME_VALIDATION_SCHEMA = yup.object().shape({
-  name: yup.string().required("Name is required")
-});
-var FIVE_MEGABYTES = 5242880;
-var POSITION_OPTIONS = [{
-  label: "Left",
-  value: "left"
-}, {
-  label: "Right",
-  value: "right"
-}];
-var BACKGROUND_POSITION_OPTIONS = [{
-  label: "Center",
-  value: "center"
-}, {
-  label: "Top left",
-  value: "top left"
-}, {
-  label: "Top center",
-  value: "top center"
-}, {
-  label: "Top right",
-  value: "top right"
-}, {
-  label: "Center left",
-  value: "center left"
-}, {
-  label: "Center right",
-  value: "center right"
-}, {
-  label: "Bottom left",
-  value: "bottom left"
-}, {
-  label: "Bottom right",
-  value: "bottom right"
-}, {
-  label: "Bottom center",
-  value: "bottom center"
-}];
-var FONT_OPTIONS = [{
-  label: "System UI",
-  value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
-}, {
-  label: "Cedarville Cursive",
-  value: "'Cedarville Cursive', cursive"
-}, {
-  label: "Poppins",
-  value: "Poppins, sans-serif"
-}, {
-  label: "Roboto",
-  value: "Roboto, sans-serif"
-}, {
-  label: "Open Sans",
-  value: "Open Sans, sans-serif"
-}, {
-  label: "Montserrat",
-  value: "Montserrat, sans-serif"
-}, {
-  label: "Raleway",
-  value: "Raleway, sans-serif"
-}, {
-  label: "Quicksand",
-  value: "Quicksand, sans-serif"
-}, {
-  label: "Inter",
-  value: "Inter, sans-serif"
-}, {
-  label: "Satoshi",
-  value: "Satoshi, sans-serif"
-}, {
-  label: "Chillax",
-  value: "Chillax, sans-serif"
-}, {
-  label: "Clash Display",
-  value: "Clash Display, sans-serif"
-}, {
-  label: "General Sans",
-  value: "General Sans, sans-serif"
-}, {
-  label: "Cabinet Grotesk",
-  value: "Cabinet Grotesk, sans-serif"
-}, {
-  label: "Lora",
-  value: "Lora, serif"
-}, {
-  label: "Merriweather",
-  value: "Merriweather, serif"
-}, {
-  label: "Boska",
-  value: "Boska, serif"
-}, {
-  label: "Playfair Display",
-  value: "Playfair Display, serif"
-}, {
-  label: "Roboto Slab",
-  value: "Roboto Slab, serif"
-}, {
-  label: "Dancing Script",
-  value: "Dancing Script, cursive"
-}];
-
-var Card = function Card(_ref) {
-  var title = _ref.title,
-    children = _ref.children;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white space-y-3 border p-4"
-  }, title && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "edit-theme-properties",
-    lineHeight: "normal",
-    style: "h4",
-    weight: "semibold"
-  }, title)), children && /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
-  }, children));
-};
-
-var ProgressBar = function ProgressBar(_ref) {
-  var progressPercentage = _ref.progressPercentage,
-    progressValue = _ref.progressValue;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden"
-  }, /*#__PURE__*/React__default.createElement(motion.div, {
-    animate: {
-      width: "".concat(progressPercentage, "%")
-    },
-    className: "neeto-ui-bg-primary-600 neeto-ui-text-primary-100 text-2xs neeto-ui-rounded-full flex h-3 animate-pulse items-center justify-center font-medium leading-none",
-    initial: {
-      width: 0
-    },
-    transition: {
-      duration: 0.5,
-      ease: "easeInOut"
-    }
-  }, progressValue));
-};
-
-function ownKeys$2(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; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var readFile = function readFile(file) {
-  return new Promise(function (resolve) {
-    var reader = new FileReader();
-    reader.onload = function () {
-      resolve(reader.result);
-    };
-    reader.readAsDataURL(file);
-  });
-};
-var getImage = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
-    var image;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          image = new Image();
-          _context.next = 3;
-          return readFile(file);
-        case 3:
-          image.src = _context.sent;
-          return _context.abrupt("return", new Promise(function (resolve) {
-            image.onload = function () {
-              resolve(image);
-            };
-          }));
-        case 5:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return function getImage(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-var transformTheme = function transformTheme(values) {
-  return {
-    name: values.name,
-    colorScheme: {
-      backgroundColor: values.backgroundColor,
-      questionColor: values.questionColor,
-      buttonBackgroundColor: values.buttonBackgroundColor,
-      buttonTextColor: values.buttonTextColor,
-      answerColor: values.answerColor,
-      answerTextColor: values.answerTextColor
-    },
-    backgroundImage: _objectSpread$2(_objectSpread$2({}, values.backgroundImage), {}, {
-      backgroundColor: values.backgroundColor,
-      backgroundOverlayOpacity: values.backgroundOverlayOpacity,
-      isDominantBackgroundColorEnabled: values.isDominantBackgroundColorEnabled,
-      backgroundPosition: values.backgroundImage.backgroundPosition
-    }),
-    fontOptions: {
-      fontFamily: values.fontFamily
-    },
-    buttonOptions: {
-      buttonBorderRadius: values.buttonBorderRadius
-    },
-    layout: {
-      isContentBackgroundEnabled: values.isContentBackgroundEnabled,
-      contentBackgroundColor: values.contentBackgroundColor,
-      welcomeTextAlignment: values.welcomeTextAlignment,
-      thankYouTextAlignment: values.thankYouTextAlignment,
-      questionsTextAlignment: values.questionsTextAlignment,
-      logo: values.logo
-    }
-  };
-};
-var parseTheme = function parseTheme(theme) {
-  var _theme$layout$logo;
-  return {
-    name: theme.name,
-    backgroundColor: theme.colorScheme.backgroundColor,
-    questionColor: theme.colorScheme.questionColor,
-    buttonBackgroundColor: theme.colorScheme.buttonBackgroundColor,
-    buttonTextColor: theme.colorScheme.buttonTextColor,
-    answerColor: theme.colorScheme.answerColor,
-    answerTextColor: theme.colorScheme.answerTextColor,
-    backgroundImage: theme.backgroundImage,
-    backgroundOverlayOpacity: theme.backgroundImage.backgroundOverlayOpacity,
-    fontFamily: theme.fontOptions.fontFamily,
-    buttonBorderRadius: theme.buttonOptions.buttonBorderRadius,
-    isDominantBackgroundColorEnabled: theme.backgroundImage.isDominantBackgroundColorEnabled,
-    isContentBackgroundEnabled: theme.layout.isContentBackgroundEnabled,
-    contentBackgroundColor: theme.layout.contentBackgroundColor,
-    welcomeTextAlignment: theme.layout.welcomeTextAlignment,
-    thankYouTextAlignment: theme.layout.thankYouTextAlignment,
-    questionsTextAlignment: theme.layout.questionsTextAlignment,
-    logo: (_theme$layout$logo = theme.layout.logo) !== null && _theme$layout$logo !== void 0 ? _theme$layout$logo : {}
-  };
-};
-var getContrast = function getContrast(hexcolor) {
-  // If a leading # is provided, remove it
-  if (hexcolor.slice(0, 1) === "#") {
-    hexcolor = hexcolor.slice(1);
-  }
-
-  // If a three-character hexcode, make six-character
-  if (hexcolor.length === 3) {
-    hexcolor = hexcolor.split("").map(function (hex) {
-      return hex + hex;
-    }).join("");
-  }
-
-  // Convert to RGB value
-  var r = parseInt(hexcolor.substr(0, 2), 16);
-  var g = parseInt(hexcolor.substr(2, 2), 16);
-  var b = parseInt(hexcolor.substr(4, 2), 16);
-
-  // Get YIQ ratio
-  var yiq = (r * 299 + g * 587 + b * 114) / 1000;
-
-  // Check contrast
-  return yiq >= 128 ? "#000000" : "#ffffff";
-};
-var hexToRgb = function hexToRgb(hex) {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.padEnd(7, "0"));
-  return result ? "".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16)) : null;
-};
-var getDominantColor = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(file) {
-    var image, context, c, hex;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _context2.next = 2;
-          return getImage(file);
-        case 2:
-          image = _context2.sent;
-          context = document.createElement("canvas").getContext("2d");
-          context === null || context === void 0 ? void 0 : context.drawImage(image, 0, 0, 1, 1);
-          c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
-          if (!c) {
-            _context2.next = 9;
-            break;
-          }
-          hex = "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1));
-          return _context2.abrupt("return", hex);
-        case 9:
-          return _context2.abrupt("return", null);
-        case 10:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  }));
-  return function getDominantColor(_x2) {
-    return _ref2.apply(this, arguments);
-  };
-}();
-var bytesToSize = function bytesToSize(bytes) {
-  var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-  if (bytes === 0) return "n/a";
-  var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
-  if (i === 0) return "".concat(bytes, " ").concat(sizes[i], ")");
-  return "".concat((bytes / Math.pow(1024, i)).toFixed(1), " ").concat(sizes[i]);
-};
-var scrollElementIntoView = function scrollElementIntoView(elementId) {
-  var _elementToScroll$scro;
-  var elementToScroll = document.getElementById(elementId);
-  elementToScroll === null || elementToScroll === void 0 ? void 0 : (_elementToScroll$scro = elementToScroll.scrollIntoView) === null || _elementToScroll$scro === void 0 ? void 0 : _elementToScroll$scro.call(elementToScroll, {
-    behavior: "smooth"
-  });
-};
-
-var useDropzoneWithValidation = function useDropzoneWithValidation(_ref) {
-  var maxSize = _ref.maxSize,
-    acceptedTypes = _ref.acceptedTypes,
-    handleAcceptedFile = _ref.handleAcceptedFile,
-    _ref$isDominantColorE = _ref.isDominantColorEnabled,
-    isDominantColorEnabled = _ref$isDominantColorE === void 0 ? false : _ref$isDominantColorE;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    files = _useState2[0],
-    setFiles = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    error = _useState4[0],
-    setError = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    uploadProgress = _useState6[0],
-    setUploadProgress = _useState6[1];
-  var maxSizeInReadableUnits = bytesToSize(maxSize);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var fileErrors = {
-    "file-invalid-type": t("neetoMolecules.themeSidebar.error.fileTypeError", {
-      acceptedTypes: acceptedTypes
-    }),
-    "file-too-large": t("neetoMolecules.themeSidebar.error.fileSizeLimitExceeded", {
-      maxSizeInReadableUnits: maxSizeInReadableUnits
-    })
-  };
-  var _useDropzone = useDropzone({
-      accept: acceptedTypes,
-      onDrop: function () {
-        var _onDrop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(acceptedFiles) {
-          var newFiles;
-          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return new Promise(function (resolve) {
-                  var files = [];
-                  acceptedFiles.forEach(function (file) {
-                    var upload = new DirectUpload(file, DIRECT_UPLOAD_URL, {
-                      directUploadWillStoreFileWithXHR: function directUploadWillStoreFileWithXHR(xhr) {
-                        xhr.upload.addEventListener("progress", function (event) {
-                          var percentComplete = Math.round(event.loaded / event.total * 100);
-                          setUploadProgress(percentComplete);
-                        });
-                      }
-                    });
-                    upload.create( /*#__PURE__*/function () {
-                      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(error, blob) {
-                        var resolvedFile, dominantColor;
-                        return _regeneratorRuntime.wrap(function _callee$(_context) {
-                          while (1) switch (_context.prev = _context.next) {
-                            case 0:
-                              if (!error) {
-                                _context.next = 2;
-                                break;
-                              }
-                              return _context.abrupt("return", Toastr.error(error));
-                            case 2:
-                              resolvedFile = {
-                                url: blob.blob_url,
-                                name: blob.filename,
-                                signed_id: blob.signed_id,
-                                type: blob.content_type,
-                                size: blob.byte_size
-                              };
-                              if (!isDominantColorEnabled) {
-                                _context.next = 8;
-                                break;
-                              }
-                              _context.next = 6;
-                              return getDominantColor(file);
-                            case 6:
-                              dominantColor = _context.sent;
-                              resolvedFile.dominantColor = dominantColor;
-                            case 8:
-                              files.push(resolvedFile);
-                              return _context.abrupt("return", resolve(files));
-                            case 10:
-                            case "end":
-                              return _context.stop();
-                          }
-                        }, _callee);
-                      }));
-                      return function (_x2, _x3) {
-                        return _ref2.apply(this, arguments);
-                      };
-                    }());
-                  });
-                  return files;
-                });
-              case 2:
-                newFiles = _context2.sent;
-                setFiles(newFiles.map(function (file) {
-                  return handleAcceptedFile(file);
-                }));
-              case 4:
-              case "end":
-                return _context2.stop();
-            }
-          }, _callee2);
-        }));
-        function onDrop(_x) {
-          return _onDrop.apply(this, arguments);
-        }
-        return onDrop;
-      }(),
-      maxSize: maxSize,
-      onDropRejected: function onDropRejected(fileRejections) {
-        fileRejections.map(function (_ref3) {
-          var errors = _ref3.errors;
-          return errors.map(function (_ref4) {
-            var code = _ref4.code;
-            return Toastr.error(fileErrors[code] || t("neetoMolecules.common.somethingWentWrong"));
-          });
-        });
-      }
-    }),
-    getRootProps = _useDropzone.getRootProps,
-    getInputProps = _useDropzone.getInputProps,
-    isDragActive = _useDropzone.isDragActive,
-    fileRejections = _useDropzone.fileRejections;
-  useEffect(function () {
-    setError(isNotEmpty(fileRejections));
-  }, [fileRejections]);
-  return {
-    files: files,
-    getRootProps: getRootProps,
-    getInputProps: getInputProps,
-    isDragActive: isDragActive,
-    fileRejections: fileRejections,
-    error: error,
-    uploadProgress: uploadProgress
-  };
-};
-
-var ImageUploader = function ImageUploader(_ref) {
-  var onChange = _ref.onChange,
-    name = _ref.name,
-    _ref$isDominantColorE = _ref.isDominantColorEnabled,
-    isDominantColorEnabled = _ref$isDominantColorE === void 0 ? false : _ref$isDominantColorE;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useDropzoneWithValid = useDropzoneWithValidation({
-      maxSize: FIVE_MEGABYTES,
-      acceptedTypes: "image/*",
-      handleAcceptedFile: onChange,
-      isDominantColorEnabled: isDominantColorEnabled
-    }),
-    getInputProps = _useDropzoneWithValid.getInputProps,
-    getRootProps = _useDropzoneWithValid.getRootProps,
-    isDragActive = _useDropzoneWithValid.isDragActive,
-    uploadProgress = _useDropzoneWithValid.uploadProgress;
-  var shouldShowProgress = !!(uploadProgress && uploadProgress !== 1);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-2"
-  }, /*#__PURE__*/React__default.createElement("div", _extends({}, getRootProps(), {
-    "data-cy": "image-browse-button",
-    className: classnames("neeto-ui-border-primary-600 hover:neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex cursor-pointer flex-col items-center justify-center gap-3 border border-dashed p-5 px-4 transition-all duration-300 ease-in-out", {
-      "neeto-ui-border-gray-300": !isDragActive,
-      "neeto-ui-border-gray-700": isDragActive
-    })
-  }), shouldShowProgress ? /*#__PURE__*/React__default.createElement("div", {
-    className: "flex h-24 w-full items-center"
-  }, /*#__PURE__*/React__default.createElement(ProgressBar, {
-    progressPercentage: uploadProgress * 100,
-    progressValue: "".concat(uploadProgress, "%")
-  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ImageUpload, {
-    className: "neeto-ui-text-primary-500",
-    size: 24
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col space-y-1"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 text-center leading-4",
-    style: "body2"
-  }, /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.themeSidebar.editTheme.imageUpload",
-    components: {
-      span: /*#__PURE__*/React__default.createElement("span", {
-        className: "neeto-ui-text-primary-500"
-      })
-    }
-  })), /*#__PURE__*/React__default.createElement("input", _extends({}, getInputProps(), {
-    name: name
-  })), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-700 text-center",
-    "data-cy": "supported-files-text",
-    lineHeight: "snug",
-    style: "nano"
-  }, t("neetoMolecules.themeSidebar.fileRequirements", {
-    maxSize: FIVE_MEGABYTES
-  }))))));
-};
-
-var ImageBlock = function ImageBlock(_ref) {
-  var label = _ref.label,
-    name = _ref.name,
-    _ref$imageData = _ref.imageData,
-    imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
-    _onChange = _ref.onChange;
-  var url = imageData.url,
-    size = imageData.size;
-  var fileName = imageData.name;
-  if (url && !fileName) {
-    var urlParts = url.split("/");
-    fileName = urlParts[urlParts.length - 1];
-  }
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-3 py-3 first:pt-0 last:pb-0"
-  }, label && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "style-fields-labels",
-    style: "body2"
-  }, label)), url ? /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex min-w-0 flex-grow items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    className: "h-10 w-10 object-cover",
-    src: url
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex min-w-0 flex-grow flex-col gap-1"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-700 break-words",
-    style: "nano"
-  }, fileName), size ? /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    style: "nano"
-  }, size / 1000, "KB") : null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center gap-1"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    label: "Remove",
-    size: "small",
-    style: "danger-text",
-    onClick: function onClick() {
-      return _onChange(name, {}, "");
-    }
-  }))) : /*#__PURE__*/React__default.createElement(ImageUploader, {
-    isDominantColorEnabled: true,
-    onChange: function onChange(value) {
-      return _onChange(name, value, "url(".concat(value.url, ")"));
-    }
-  }));
-};
-
-var SelectBlock = function SelectBlock(_ref) {
-  var label = _ref.label,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
-    value = _ref.value,
-    options = _ref.options,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "logo-field-labels",
-    style: "body2"
-  }, label), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-40"
-  }, /*#__PURE__*/React__default.createElement(Select, {
-    options: options,
-    placeholder: placeholder,
-    value: value,
-    onChange: onChange
-  })));
-};
-
-var Logo = withT(function (_ref) {
-  var t = _ref.t,
-    logo = _ref.logo,
-    _onChange = _ref.onChange;
-  return /*#__PURE__*/React__default.createElement(Card, {
-    title: t("neetoMolecules.themeSidebar.logo")
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "divide-y divide-gray-200"
-  }, /*#__PURE__*/React__default.createElement(ImageBlock, {
-    imageData: logo,
-    name: "logo",
-    onChange: function onChange(name, value) {
-      return _onChange(name, isEmpty(value) ? {
-        position: logo.position
-      } : mergeLeft(value, logo));
-    }
-  }), logo.url && /*#__PURE__*/React__default.createElement(SelectBlock, {
-    label: t("neetoMolecules.themeSidebar.logoPosition"),
-    options: POSITION_OPTIONS,
-    placeholder: t("neetoMolecules.themeSidebar.left"),
-    value: findBy({
-      value: logo.position || "left"
-    }, POSITION_OPTIONS),
-    onChange: function onChange(_ref2) {
-      var value = _ref2.value;
-      return _onChange("logo.position", value);
-    }
-  })));
-});
-var Logo$1 = /*#__PURE__*/React__default.memo(Logo);
-
-var AlignmentBlock = function AlignmentBlock(_ref) {
-  var label = _ref.label,
-    name = _ref.name;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "style-fields-labels",
-    style: "body2"
-  }, label), /*#__PURE__*/React__default.createElement(Field, {
-    name: name
-  }, function (_ref2) {
-    var value = _ref2.field.value,
-      setFieldValue = _ref2.form.setFieldValue;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex items-center gap-3"
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      "data-cy": "alignment-left",
-      icon: LeftAlign,
-      size: "large",
-      style: value === "left" ? "primary" : "text",
-      tooltipProps: {
-        content: t("neetoMolecules.themeSidebar.alignmentOptions.left"),
-        position: "bottom"
-      },
-      onClick: function onClick() {
-        return setFieldValue(name, "left");
-      }
-    }), /*#__PURE__*/React__default.createElement(Button, {
-      "data-cy": "alignment-center",
-      icon: CenterAlign,
-      size: "large",
-      style: value === "center" ? "primary" : "text",
-      tooltipProps: {
-        content: t("neetoMolecules.themeSidebar.alignmentOptions.center"),
-        position: "bottom"
-      },
-      onClick: function onClick() {
-        return setFieldValue(name, "center");
-      }
-    }));
-  }));
-};
-
-var ColorBlock = function ColorBlock(_ref) {
-  var label = _ref.label,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "#FFFFFF" : _ref$color,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "style-fields-labels",
-    style: "body2"
-  }, label), /*#__PURE__*/React__default.createElement(ColorPicker, {
-    showEyeDropper: true,
-    color: color,
-    onChange: onChange
-  }));
-};
-
-function ownKeys$1(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; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FontPickerBlock = function FontPickerBlock(_ref) {
-  var label = _ref.label,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
-    value = _ref.value,
-    options = _ref.options,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "style-fields-labels",
-    style: "body2"
-  }, label), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-40"
-  }, /*#__PURE__*/React__default.createElement(Select, {
-    options: options,
-    placeholder: placeholder,
-    value: value,
-    styles: {
-      option: function option(styles, _ref2) {
-        var data = _ref2.data;
-        return _objectSpread$1(_objectSpread$1({}, styles), {}, {
-          fontFamily: data.value
-        });
-      }
-    },
-    onChange: onChange
-  })));
-};
-
-var css$1 = ".ant-slider{font-feature-settings:\"tnum\";box-sizing:border-box;color:rgba(0,0,0,.85);cursor:pointer;font-size:14px;font-variant:tabular-nums;height:12px;line-height:1.5715;list-style:none;margin:10px 6px;padding:4px 0;position:relative;touch-action:none}.ant-slider-vertical{height:100%;margin:6px 10px;padding:0 4px;width:12px}.ant-slider-vertical .ant-slider-rail{height:100%;width:4px}.ant-slider-vertical .ant-slider-track{width:4px}.ant-slider-vertical .ant-slider-handle{margin-left:-5px;margin-top:-6px}.ant-slider-vertical .ant-slider-mark{height:100%;left:12px;top:0;width:18px}.ant-slider-vertical .ant-slider-mark-text{left:4px;white-space:nowrap}.ant-slider-vertical .ant-slider-step{height:100%;width:4px}.ant-slider-vertical .ant-slider-dot{margin-left:-2px;top:auto}.ant-slider-tooltip .ant-tooltip-inner{min-width:0;min-width:auto}.ant-slider-rtl.ant-slider-vertical .ant-slider-handle{margin-left:0;margin-right:-5px}.ant-slider-rtl.ant-slider-vertical .ant-slider-mark{left:auto;right:12px}.ant-slider-rtl.ant-slider-vertical .ant-slider-mark-text{left:auto;right:4px}.ant-slider-rtl.ant-slider-vertical .ant-slider-dot{left:auto;right:2px}.ant-slider-with-marks{margin-bottom:28px}.ant-slider-rail{background-color:#f5f5f5;width:100%}.ant-slider-rail,.ant-slider-track{border-radius:2px;height:4px;position:absolute;transition:background-color .3s}.ant-slider-track{background-color:#91d5ff}.ant-slider-handle{background-color:#fff;border:2px solid #91d5ff;border-radius:50%;box-shadow:0;cursor:pointer;height:14px;margin-top:-5px;position:absolute;transition:border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18,.89,.32,1.28);width:14px}.ant-slider-handle-dragging{z-index:1}.ant-slider-handle:focus{border-color:#46a6ff;box-shadow:0 0 0 5px rgba(24,144,255,.12);outline:none}.ant-slider-handle.ant-tooltip-open{border-color:#1890ff}.ant-slider-handle:after{bottom:-6px;content:\"\";left:-6px;position:absolute;right:-6px;top:-6px}.ant-slider:hover .ant-slider-rail{background-color:#e1e1e1}.ant-slider:hover .ant-slider-track{background-color:#69c0ff}.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open){border-color:#69c0ff}.ant-slider-mark{font-size:14px;left:0;position:absolute;top:14px;width:100%}.ant-slider-mark-text{color:rgba(0,0,0,.45);cursor:pointer;display:inline-block;position:absolute;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;word-break:keep-all}.ant-slider-mark-text-active{color:rgba(0,0,0,.85)}.ant-slider-step{background:transparent;height:4px;pointer-events:none;position:absolute;width:100%}.ant-slider-dot{background-color:#fff;border:2px solid #f0f0f0;border-radius:50%;cursor:pointer;height:8px;position:absolute;top:-2px;width:8px}.ant-slider-dot-active{border-color:#8cc8ff}.ant-slider-disabled{cursor:not-allowed}.ant-slider-disabled .ant-slider-rail{background-color:#f5f5f5!important}.ant-slider-disabled .ant-slider-track{background-color:rgba(0,0,0,.25)!important}.ant-slider-disabled .ant-slider-dot,.ant-slider-disabled .ant-slider-handle{background-color:#fff;border-color:rgba(0,0,0,.25)!important;box-shadow:none;cursor:not-allowed}.ant-slider-disabled .ant-slider-dot,.ant-slider-disabled .ant-slider-mark-text{cursor:not-allowed!important}.ant-slider-rtl{direction:rtl}.ant-slider-rtl .ant-slider-mark{left:auto;right:0}";
-n(css$1,{});
-
-var SliderBlock = function SliderBlock(_ref) {
-  var label = _ref.label,
-    onChange = _ref.onChange,
-    defaultValue = _ref.defaultValue,
-    min = _ref.min,
-    max = _ref.max,
-    marks = _ref.marks;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "style-fields-labels",
-    style: "body2"
-  }, label), /*#__PURE__*/React__default.createElement(Slider, {
-    className: "my-2 w-20",
-    defaultValue: defaultValue,
-    marks: marks,
-    max: max,
-    min: min,
-    onChange: onChange,
-    tooltip: {
-      formatter: noop
-    }
-  }));
-};
-
-var SwitchBlock = function SwitchBlock(_ref) {
-  var label = _ref.label,
-    name = _ref.name;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "style-fields-labels",
-    style: "body2"
-  }, label), /*#__PURE__*/React__default.createElement(Switch, {
-    "data-cy": "enable-background-color-toggle",
-    name: name
-  }));
-};
-
-var Properties = function Properties(_ref) {
-  var handleChange = _ref.handleChange,
-    values = _ref.values;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var backgroundColor = values.backgroundColor,
-    questionColor = values.questionColor,
-    buttonBackgroundColor = values.buttonBackgroundColor,
-    buttonTextColor = values.buttonTextColor,
-    answerColor = values.answerColor,
-    backgroundImage = values.backgroundImage,
-    isContentBackgroundEnabled = values.isContentBackgroundEnabled,
-    contentBackgroundColor = values.contentBackgroundColor,
-    isDominantBackgroundColorEnabled = values.isDominantBackgroundColorEnabled,
-    backgroundOverlayOpacity = values.backgroundOverlayOpacity,
-    buttonBorderRadius = values.buttonBorderRadius;
-  var handleOverlayChange = function handleOverlayChange(value) {
-    handleChange("backgroundOverlayOpacity", value, Math.abs(value / 100));
-    if (value < 0) {
-      handleChange("backgroundOverlayColor", "#000000");
-    } else if (value > 0) {
-      handleChange("backgroundOverlayColor", "#ffffff");
-    }
-  };
-  useEffect(function () {
-    if (isContentBackgroundEnabled) {
-      var color = contentBackgroundColor || backgroundColor;
-      handleChange("contentBackgroundColor", color);
-    } else {
-      handleChange("contentBackgroundColor", contentBackgroundColor);
-    }
-  }, [isContentBackgroundEnabled]);
-  useEffect(function () {
-    if (isDominantBackgroundColorEnabled && backgroundImage !== null && backgroundImage !== void 0 && backgroundImage.dominantColor) {
-      handleChange("backgroundColor", backgroundImage.dominantColor, backgroundImage.dominantColor ? hexToRgb(backgroundImage.dominantColor) : "initial");
-    }
-  }, [isDominantBackgroundColorEnabled, backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.dominantColor]);
-  var handleColorChange = function handleColorChange(name) {
-    return function (_ref2) {
-      var hex = _ref2.hex,
-        rgb = _ref2.rgb;
-      handleChange(name, hex, "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b));
-    };
-  };
-  var handleAnswerColorChange = function handleAnswerColorChange(_ref3) {
-    var hex = _ref3.hex,
-      rgb = _ref3.rgb;
-    handleColorChange("answerColor")({
-      hex: hex,
-      rgb: rgb
-    });
-    var contrastColor = getContrast(hex);
-    handleColorChange("answerTextColor")({
-      hex: contrastColor,
-      rgb: hexToRgb(contrastColor)
-    });
-  };
-  return /*#__PURE__*/React__default.createElement(Card, {
-    title: t("neetoMolecules.themeSidebar.style")
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "divide-y divide-gray-200"
-  }, /*#__PURE__*/React__default.createElement(FontPickerBlock, {
-    label: t("neetoMolecules.themeSidebar.font"),
-    options: FONT_OPTIONS,
-    value: findBy({
-      value: values.fontFamily
-    }, FONT_OPTIONS) || null,
-    onChange: function onChange(_ref4) {
-      var value = _ref4.value;
-      return handleChange("fontFamily", value);
-    }
-  }), /*#__PURE__*/React__default.createElement(ColorBlock, {
-    color: questionColor,
-    label: t("neetoMolecules.themeSidebar.questions"),
-    onChange: handleColorChange("questionColor")
-  }), /*#__PURE__*/React__default.createElement(ColorBlock, {
-    color: answerColor,
-    label: t("neetoMolecules.themeSidebar.answerColor"),
-    onChange: handleAnswerColorChange
-  }), /*#__PURE__*/React__default.createElement(ColorBlock, {
-    color: buttonBackgroundColor,
-    label: t("neetoMolecules.themeSidebar.buttons"),
-    onChange: handleColorChange("buttonBackgroundColor")
-  }), /*#__PURE__*/React__default.createElement(ColorBlock, {
-    color: buttonTextColor,
-    label: t("neetoMolecules.themeSidebar.buttonText"),
-    onChange: handleColorChange("buttonTextColor")
-  }), /*#__PURE__*/React__default.createElement(SliderBlock, {
-    defaultValue: buttonBorderRadius,
-    label: t("neetoMolecules.themeSidebar.buttonBorderRadius"),
-    max: 50,
-    min: 0,
-    onChange: function onChange(borderRadius) {
-      return handleChange("buttonBorderRadius", borderRadius, "".concat(borderRadius, "px"));
-    }
-  }), /*#__PURE__*/React__default.createElement(ColorBlock, {
-    color: backgroundColor,
-    label: t("neetoMolecules.themeSidebar.backgroundColor"),
-    onChange: function onChange(_ref5) {
-      var hex = _ref5.hex,
-        rgb = _ref5.rgb;
-      handleColorChange("backgroundColor")({
-        hex: hex,
-        rgb: rgb
-      });
-      handleChange("isDominantBackgroundColorEnabled", false);
-    }
-  }), /*#__PURE__*/React__default.createElement(SwitchBlock, {
-    label: t("neetoMolecules.themeSidebar.enableContentBackground"),
-    name: "isContentBackgroundEnabled"
-  }), isContentBackgroundEnabled && /*#__PURE__*/React__default.createElement(ColorBlock, {
-    color: contentBackgroundColor,
-    label: t("neetoMolecules.themeSidebar.formBackgroundColor"),
-    onChange: handleColorChange("contentBackgroundColor")
-  }), /*#__PURE__*/React__default.createElement(ImageBlock, {
-    imageData: backgroundImage,
-    label: t("neetoMolecules.themeSidebar.backgroundImage"),
-    name: "backgroundImage",
-    onChange: function onChange(name, value, variableValue) {
-      handleChange(name, value, variableValue);
-      handleChange("backgroundOverlayOpacity", 0);
-    }
-  }), (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SliderBlock, {
-    defaultValue: backgroundOverlayOpacity,
-    label: t("neetoMolecules.themeSidebar.backgroundOverlay"),
-    marks: {
-      0: " "
-    },
-    max: 100,
-    min: -100,
-    onChange: handleOverlayChange
-  }), /*#__PURE__*/React__default.createElement(SwitchBlock, {
-    name: "isDominantBackgroundColorEnabled",
-    label: t("neetoMolecules.themeSidebar.enableDominantBackgroundColor")
-  }), /*#__PURE__*/React__default.createElement(SelectBlock, {
-    label: t("neetoMolecules.themeSidebar.backgroundPosition"),
-    options: BACKGROUND_POSITION_OPTIONS,
-    placeholder: t("neetoMolecules.themeSidebar.left"),
-    value: findBy({
-      value: backgroundImage.backgroundPosition || "center"
-    }, BACKGROUND_POSITION_OPTIONS),
-    onChange: function onChange(_ref6) {
-      var value = _ref6.value;
-      return handleChange("backgroundImage.backgroundPosition", value);
-    }
-  })), /*#__PURE__*/React__default.createElement(AlignmentBlock, {
-    label: t("neetoMolecules.themeSidebar.thankYouTextAlignment"),
-    name: "thankYouTextAlignment"
-  }), /*#__PURE__*/React__default.createElement(AlignmentBlock, {
-    label: t("neetoMolecules.themeSidebar.welcomeTextAlignment"),
-    name: "welcomeTextAlignment"
-  }), /*#__PURE__*/React__default.createElement(AlignmentBlock, {
-    label: t("neetoMolecules.themeSidebar.questionsTextAlignment"),
-    name: "questionsTextAlignment"
-  })));
-};
-
-var TextBlock = function TextBlock(_ref) {
-  var name = _ref.name,
-    _ref$autoFocus = _ref.autoFocus,
-    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
-  return /*#__PURE__*/React__default.createElement(Input, {
-    autoFocus: autoFocus,
-    "data-cy": "text-block-input",
-    name: name
-  });
-};
-
-var Customize = function Customize(_ref) {
-  var theme = _ref.theme,
-    handleFormSubmit = _ref.handleFormSubmit;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var getInitialValues = function getInitialValues() {
-    return theme ? parseTheme(theme) : INITIAL_STATE;
-  };
-  return /*#__PURE__*/React__default.createElement(Form, {
-    formikProps: {
-      enableReinitialize: true,
-      initialValues: getInitialValues(),
-      onSubmit: handleFormSubmit,
-      validationSchema: THEME_VALIDATION_SCHEMA,
-      validateOnBlur: true,
-      validateOnChange: true
-    }
-  }, function (_ref2) {
-    var values = _ref2.values,
-      dirty = _ref2.dirty,
-      isSubmitting = _ref2.isSubmitting,
-      setFieldValue = _ref2.setFieldValue;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-molecules-theme-design-sidebar__scroll"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col gap-6 p-4"
-    }, /*#__PURE__*/React__default.createElement(Card, {
-      title: t("neetoMolecules.themeSidebar.name")
-    }, /*#__PURE__*/React__default.createElement(TextBlock, {
-      autoFocus: true,
-      name: "name"
-    })), /*#__PURE__*/React__default.createElement(Properties, {
-      handleChange: setFieldValue,
-      values: values
-    }), /*#__PURE__*/React__default.createElement(Logo$1, {
-      logo: values.logo,
-      onChange: setFieldValue
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 left-0 right-0 py-6 px-4"
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      "data-cy": "save-changes-button",
-      disabled: !dirty && theme.id,
-      label: t("neetoMolecules.common.actions.save"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React__default.createElement(Button, {
-      className: "ml-2",
-      "data-cy": "reset-button",
-      disabled: !dirty,
-      label: t("neetoMolecules.common.actions.reset"),
-      style: "text",
-      type: "reset"
-    })));
-  });
-};
-
-var _excluded = ["name"];
-var ThemeCard = function ThemeCard(_ref) {
-  var _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active,
-    isPreviewing = _ref.isPreviewing,
-    onSetPreviewTheme = _ref.onSetPreviewTheme,
-    onDeleteTheme = _ref.onDeleteTheme,
-    onEditTheme = _ref.onEditTheme,
-    onApplyTheme = _ref.onApplyTheme,
-    onCloneTheme = _ref.onCloneTheme,
-    theme = _ref.theme,
-    isHighLightedTheme = _ref.isHighLightedTheme,
-    isApplyingTheme = _ref.isApplyingTheme;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var name = theme.name,
-    styles = _objectWithoutProperties(theme, _excluded);
-  var handleApplyTheme = function handleApplyTheme() {
-    if (isApplyingTheme) return;
-    onApplyTheme(theme);
-  };
-  var moreMenuItems = [{
-    "data-cy": "theme-edit-button",
-    key: "theme-edit-button",
-    onClick: function onClick() {
-      return onEditTheme(theme);
-    },
-    label: t("neetoMolecules.common.actions.edit"),
-    isVisible: isPresent(onEditTheme)
-  }, {
-    isVisible: isPresent(onCloneTheme),
-    "data-cy": "theme-clone-button",
-    key: "theme-clone-button",
-    onClick: function onClick() {
-      return onCloneTheme(theme);
-    },
-    label: t("neetoMolecules.themeSidebar.themeOptions.clone")
-  }, {
-    isVisible: isPresent(onDeleteTheme),
-    type: "divider",
-    key: "divider"
-  }, {
-    isVisible: isPresent(onDeleteTheme),
-    "data-cy": "theme-delete-button",
-    key: "theme-delete-button",
-    onClick: function onClick() {
-      return onDeleteTheme(theme);
-    },
-    label: t("neetoMolecules.themeSidebar.themeOptions.delete")
-  }];
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "group space-y-2",
-    "data-cy": active ? "active-theme-card" : "theme-card",
-    id: theme.id
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("neeto-molecules-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
-      "neeto-ui-border-gray-400": !active,
-      "neeto-ui-border-gray-800 neeto-molecules-theme-thumbnail--active": active,
-      "neeto-molecules-theme-thumbnail--preview-active": isPreviewing,
-      "neeto-molecules-theme-thumbnail--highlight-active": isHighLightedTheme
-    }),
-    style: {
-      backgroundColor: path(["colorScheme", "backgroundColor"], styles),
-      backgroundImage: path(["backgroundImage", "url"], styles) ? "url(".concat(path(["backgroundImage", "url"], styles), ")") : "initial",
-      backgroundSize: "cover"
-    },
-    onClick: function onClick() {
-      return onSetPreviewTheme(theme);
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "group-hover:opacity-85 neeto-ui-rounded-lg cursor-pointer p-6 transition-all duration-300 ease-in-out"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-3"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    style: "h3",
-    weight: "semibold"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    style: {
-      color: path(["colorScheme", "questionColor"], styles)
-    }
-  }, t("neetoMolecules.themeSidebar.themeCard.question"))), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-600",
-    style: "body2"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    style: {
-      color: path(["colorScheme", "answerColor"], styles)
-    }
-  }, t("neetoMolecules.themeSidebar.themeCard.answer")))), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-rounded-lg h-5 w-12",
-    style: {
-      backgroundColor: path(["colorScheme", "buttonBackgroundColor"], styles)
-    }
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-start justify-between gap-1"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "min-w-0 flex-grow break-words pt-1 line-clamp-2",
-    "data-cy": "theme-name",
-    lineHeight: "snug",
-    style: "body2"
-  }, name), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center gap-2"
-  }, active ? /*#__PURE__*/React__default.createElement(Tag, {
-    className: "flex-shrink-0",
-    "data-cy": "active-theme-label",
-    label: t("neetoMolecules.themeSidebar.active"),
-    style: "success"
-  }) : /*#__PURE__*/React__default.createElement(Button, {
-    className: "flex-shrink-0",
-    "data-cy": "apply-theme-button",
-    disabled: isApplyingTheme,
-    label: t("neetoMolecules.common.actions.apply"),
-    loading: isApplyingTheme,
-    size: "small",
-    style: "link",
-    onClick: handleApplyTheme
-  }), /*#__PURE__*/React__default.createElement(MoreDropdown, {
-    buttonProps: {
-      buttonSize: "small"
-    },
-    menuItems: moreMenuItems,
-    dropdownButtonProps: {
-      "data-cy": "theme-card-options",
-      strategy: "fixed"
-    }
-  }))));
-};
-
-var Themes = function Themes(_ref) {
-  var currentTheme = _ref.currentTheme,
-    onCloneTheme = _ref.onCloneTheme,
-    _ref$customThemes = _ref.customThemes,
-    customThemes = _ref$customThemes === void 0 ? [] : _ref$customThemes,
-    _ref$defaultThemes = _ref.defaultThemes,
-    defaultThemes = _ref$defaultThemes === void 0 ? [] : _ref$defaultThemes,
-    onDeleteTheme = _ref.onDeleteTheme,
-    onEditTheme = _ref.onEditTheme,
-    onApplyTheme = _ref.onApplyTheme,
-    previewingTheme = _ref.previewingTheme,
-    setPreviewingTheme = _ref.setPreviewingTheme,
-    themeToHighlight = _ref.themeToHighlight,
-    didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
-    applyingThemeId = _ref.applyingThemeId;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchQuery = _useState2[0],
-    setSearchQuery = _useState2[1];
-  var filteredDefaultThemes = defaultThemes.filter(function (theme) {
-    return theme.name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
-  var filteredThemes = customThemes.filter(function (theme) {
-    return theme.name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
-  var isSearchFieldVisible = (customThemes === null || customThemes === void 0 ? void 0 : customThemes.length) + (defaultThemes === null || defaultThemes === void 0 ? void 0 : defaultThemes.length) > 10;
-  useEffect(function () {
-    if (didScrollActiveThemeIntoView.current || !(currentTheme !== null && currentTheme !== void 0 && currentTheme.id)) return;
-    didScrollActiveThemeIntoView.current = true;
-    setTimeout(function () {
-      scrollElementIntoView(currentTheme.id);
-    }, 200);
-  }, [didScrollActiveThemeIntoView, currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-theme-design-sidebar__scroll"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-6 space-y-3"
-  }, isSearchFieldVisible && /*#__PURE__*/React__default.createElement(Input$1, {
-    autoFocus: true,
-    autoComplete: "off",
-    className: "mt-1 mb-4 px-6",
-    placeholder: t("neetoMolecules.themeSidebar.searchThemes"),
-    prefix: /*#__PURE__*/React__default.createElement(Search, null),
-    type: "search",
-    value: searchQuery,
-    onChange: function onChange(e) {
-      return setSearchQuery(e.target.value);
-    }
-  }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default.createElement(Typography, {
-    className: "text-center",
-    style: "body2"
-  }, t("neetoMolecules.common.notFound.title", {
-    entity: t("neetoMolecules.themeSidebar.theme", {
-      count: 2
-    })
-  })), isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "my-4 px-4 uppercase md:px-5 lg:px-6",
-    "data-cy": "system-themes-header",
-    style: "h6",
-    weight: "semibold"
-  }, t("neetoMolecules.themeSidebar.systemThemes")), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-4 px-4 md:px-5 lg:px-6"
-  }, filteredDefaultThemes.map(function (theme) {
-    return /*#__PURE__*/React__default.createElement(ThemeCard, {
-      onApplyTheme: onApplyTheme,
-      onCloneTheme: onCloneTheme,
-      theme: theme,
-      active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
-      isApplyingTheme: applyingThemeId === theme.id,
-      isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
-      key: theme.id,
-      onSetPreviewTheme: setPreviewingTheme
-    });
-  })))), isNotEmpty(filteredThemes) && /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-6 space-y-3"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "my-4 px-4 uppercase md:px-5 lg:px-6",
-    "data-cy": "custom-themes-header",
-    style: "h6",
-    weight: "semibold"
-  }, t("neetoMolecules.themeSidebar.customThemes")), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-4 px-4 md:px-5 lg:px-6"
-  }, filteredThemes.map(function (theme) {
-    var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
-    return /*#__PURE__*/React__default.createElement(ThemeCard, {
-      onApplyTheme: onApplyTheme,
-      onCloneTheme: onCloneTheme,
-      onEditTheme: onEditTheme,
-      theme: theme,
-      active: isActive,
-      isHighLightedTheme: theme.id === themeToHighlight,
-      isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
-      key: theme.id,
-      onDeleteTheme: !isActive ? onDeleteTheme : null,
-      onSetPreviewTheme: setPreviewingTheme
-    });
-  }))));
-};
-
-var css = ".neeto-molecules-theme-design-sidebar{background-color:rgb(var(--neeto-ui-white));box-shadow:var(--neeto-ui-shadow-s);height:100%;width:320px}@media screen and (max-width:1024px){.neeto-molecules-theme-design-sidebar{width:280px}}@media screen and (max-width:768px){.neeto-molecules-theme-design-sidebar{width:240px}}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__scroll{height:94%;overflow-y:auto}.neeto-molecules-theme-design-sidebar .neeto-molecules-theme-design-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-molecules-theme-design-preview__wrapper{background-color:rgb(var(--neeto-ui-gray-100));flex-grow:1;height:100%;position:relative}.neeto-molecules-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}.neeto-molecules-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-700));box-shadow:0 0 0 1px rgb(var(--neeto-ui-gray-700))}.neeto-molecules-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-success-500));box-shadow:0 0 0 1px rgb(var(--neeto-ui-success-500));transition:border-color box-shadow .1s .1s}";
-n(css,{});
-
-var TitleBar = function TitleBar(_ref) {
-  var currentScreen = _ref.currentScreen,
-    handleBackPress = _ref.handleBackPress,
-    handleCreateNewTheme = _ref.handleCreateNewTheme,
-    isNewTheme = _ref.isNewTheme;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  if (currentScreen === DESIGN_SCREENS.CUSTOMIZE) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames("neeto-molecules-theme-design-sidebar__header px-4")
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "flex items-center justify-start space-x-2"
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      "data-cy": "customise-themes-back-button",
-      icon: LeftArrow,
-      iconPosition: "left",
-      style: "text",
-      tooltipProps: {
-        content: t("neetoMolecules.themeSidebar.backToThemes"),
-        position: "top"
-      },
-      onClick: handleBackPress
-    }), /*#__PURE__*/React__default.createElement(Typography, {
-      "data-cy": "themes-header",
-      lineHeight: "normal",
-      style: "h3",
-      weight: "semibold"
-    }, isNewTheme ? t("neetoMolecules.themeSidebar.createTheme.title") : t("neetoMolecules.themeSidebar.editTheme.title"))));
-  }
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("neeto-molecules-theme-design-sidebar__header px-4 md:px-5 lg:px-6")
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "themes-header",
-    lineHeight: "normal",
-    style: "h3",
-    weight: "semibold"
-  }, capitalize(t("neetoMolecules.themeSidebar.theme", {
-    count: 2
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "self-end"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "customise-themes-add-theme-button",
-    icon: Plus,
-    iconPosition: "left",
-    style: "text",
-    tooltipProps: {
-      content: t("neetoMolecules.themeSidebar.addNewTheme"),
-      position: "top"
-    },
-    onClick: handleCreateNewTheme
-  }))));
-};
-
-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; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ThemeSidebar = function ThemeSidebar(_ref) {
-  var defaultThemes = _ref.defaultThemes,
-    customThemes = _ref.customThemes,
-    createTheme = _ref.createTheme,
-    deleteTheme = _ref.deleteTheme,
-    editTheme = _ref.editTheme,
-    applyTheme = _ref.applyTheme,
-    currentTheme = _ref.currentTheme,
-    isLoadingThemes = _ref.isLoadingThemes,
-    applyingThemeId = _ref.applyingThemeId;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(DESIGN_SCREENS.THEMES),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentScreen = _useState2[0],
-    setCurrentScreen = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    previewingTheme = _useState4[0],
-    setPreviewingTheme = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    themeToHighlight = _useState6[0],
-    setThemeToHighlight = _useState6[1];
-  var didScrollActiveThemeIntoView = useRef(null);
-  useEffect(function () {
-    isLoadingThemes && setCurrentScreen(DESIGN_SCREENS.LOADING);
-  }, [isLoadingThemes]);
-  useEffect(function () {
-    !previewingTheme && setCurrentScreen(DESIGN_SCREENS.THEMES);
-  }, [previewingTheme]);
-  var handleEditTheme = function handleEditTheme(theme) {
-    setPreviewingTheme(theme);
-    setCurrentScreen(DESIGN_SCREENS.CUSTOMIZE);
-  };
-  var handleBackPress = function handleBackPress() {
-    setCurrentScreen(DESIGN_SCREENS.THEMES);
-    setPreviewingTheme(null);
-  };
-  var handleCreateNewTheme = function handleCreateNewTheme() {
-    setPreviewingTheme(_objectSpread(_objectSpread({}, defaultThemes[0]), {}, {
-      id: null,
-      name: t("neetoMolecules.themeSidebar.defaultThemeName")
-    }));
-    setCurrentScreen(DESIGN_SCREENS.CUSTOMIZE);
-  };
-  var highlightTheme = function highlightTheme(themeToHighlight) {
-    setTimeout(function () {
-      scrollElementIntoView(themeToHighlight.id);
-    }, 1500);
-    setTimeout(function () {
-      setThemeToHighlight(null);
-    }, 4000);
-    setThemeToHighlight(themeToHighlight.id);
-  };
-  var createThemeCallback = function createThemeCallback(createdTheme) {
-    setCurrentScreen(DESIGN_SCREENS.THEMES);
-    setPreviewingTheme(createdTheme.id);
-    highlightTheme(createdTheme);
-  };
-  var handleCloneTheme = function handleCloneTheme(data) {
-    var themeToClone = _objectSpread(_objectSpread({}, data), {}, {
-      name: "".concat(data.name, " - clone")
-    });
-    createTheme(themeToClone, createThemeCallback);
-  };
-  var handleFormSubmit = function handleFormSubmit(values) {
-    var formattedValues = transformTheme(values);
-    if (!(previewingTheme !== null && previewingTheme !== void 0 && previewingTheme.id)) {
-      createTheme(formattedValues, createThemeCallback);
-    } else {
-      editTheme(_objectSpread(_objectSpread({}, formattedValues), {}, {
-        id: previewingTheme.id
-      }));
-    }
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-theme-design-sidebar neeto-ui-border-gray-200 border-r"
-  }, /*#__PURE__*/React__default.createElement(TitleBar, {
-    currentScreen: currentScreen,
-    handleBackPress: handleBackPress,
-    handleCreateNewTheme: handleCreateNewTheme,
-    isNewTheme: !(previewingTheme !== null && previewingTheme !== void 0 && previewingTheme.id)
-  }), currentScreen === DESIGN_SCREENS.LOADING && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React__default.createElement(Spinner, null)), currentScreen === DESIGN_SCREENS.THEMES && /*#__PURE__*/React__default.createElement(Themes, {
-    applyingThemeId: applyingThemeId,
-    currentTheme: currentTheme,
-    customThemes: customThemes,
-    defaultThemes: defaultThemes,
-    didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
-    highlightTheme: highlightTheme,
-    previewingTheme: previewingTheme,
-    setPreviewingTheme: setPreviewingTheme,
-    themeToHighlight: themeToHighlight,
-    onApplyTheme: applyTheme,
-    onCloneTheme: handleCloneTheme,
-    onDeleteTheme: deleteTheme,
-    onEditTheme: handleEditTheme
-  }), currentScreen === DESIGN_SCREENS.CUSTOMIZE && /*#__PURE__*/React__default.createElement(Customize, {
-    handleFormSubmit: handleFormSubmit,
-    theme: previewingTheme
-  }));
-};
-
-export { ThemeSidebar as default };
-//# sourceMappingURL=ThemeSidebar.js.map