@bigbinary/neeto-molecules 1.1.16 → 1.1.18

package/dist/ThemeSidebar/Customize/Properties.js

@@ -1,170 +0,0 @@
-import React, { useEffect } from "react";
-import { findBy } from "@bigbinary/neeto-commons-frontend/pure";
-import { useTranslation } from "react-i18next";
-import { BACKGROUND_POSITION_OPTIONS, FONT_OPTIONS } from "../constants";
-import AlignmentBlock from "../fields/AlignmentBlock";
-import Card from "../fields/Card";
-import ColorBlock from "../fields/ColorBlock";
-import FontPickerBlock from "../fields/FontPickerBlock";
-import ImageBlock from "../fields/ImageBlock";
-import SelectBlock from "../fields/SelectBlock";
-import SliderBlock from "../fields/SliderBlock";
-import SwitchBlock from "../fields/SwitchBlock";
-import { getContrast, hexToRgb } from "../utils";
-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.createElement(Card, {
-    title: t("neetoMolecules.themeSidebar.style")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "divide-y divide-gray-200"
-  }, /*#__PURE__*/React.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.createElement(ColorBlock, {
-    color: questionColor,
-    label: t("neetoMolecules.themeSidebar.questions"),
-    onChange: handleColorChange("questionColor")
-  }), /*#__PURE__*/React.createElement(ColorBlock, {
-    color: answerColor,
-    label: t("neetoMolecules.themeSidebar.answerColor"),
-    onChange: handleAnswerColorChange
-  }), /*#__PURE__*/React.createElement(ColorBlock, {
-    color: buttonBackgroundColor,
-    label: t("neetoMolecules.themeSidebar.buttons"),
-    onChange: handleColorChange("buttonBackgroundColor")
-  }), /*#__PURE__*/React.createElement(ColorBlock, {
-    color: buttonTextColor,
-    label: t("neetoMolecules.themeSidebar.buttonText"),
-    onChange: handleColorChange("buttonTextColor")
-  }), /*#__PURE__*/React.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.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.createElement(SwitchBlock, {
-    label: t("neetoMolecules.themeSidebar.enableContentBackground"),
-    name: "isContentBackgroundEnabled"
-  }), isContentBackgroundEnabled && /*#__PURE__*/React.createElement(ColorBlock, {
-    color: contentBackgroundColor,
-    label: t("neetoMolecules.themeSidebar.formBackgroundColor"),
-    onChange: handleColorChange("contentBackgroundColor")
-  }), /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderBlock, {
-    defaultValue: backgroundOverlayOpacity,
-    label: t("neetoMolecules.themeSidebar.backgroundOverlay"),
-    marks: {
-      0: " "
-    },
-    max: 100,
-    min: -100,
-    onChange: handleOverlayChange
-  }), /*#__PURE__*/React.createElement(SwitchBlock, {
-    name: "isDominantBackgroundColorEnabled",
-    label: t("neetoMolecules.themeSidebar.enableDominantBackgroundColor")
-  }), /*#__PURE__*/React.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.createElement(AlignmentBlock, {
-    label: t("neetoMolecules.themeSidebar.thankYouTextAlignment"),
-    name: "thankYouTextAlignment"
-  }), /*#__PURE__*/React.createElement(AlignmentBlock, {
-    label: t("neetoMolecules.themeSidebar.welcomeTextAlignment"),
-    name: "welcomeTextAlignment"
-  }), /*#__PURE__*/React.createElement(AlignmentBlock, {
-    label: t("neetoMolecules.themeSidebar.questionsTextAlignment"),
-    name: "questionsTextAlignment"
-  })));
-};
-export default Properties;

package/dist/ThemeSidebar/Customize/index.js

@@ -1,66 +0,0 @@
-import React from "react";
-import { Button } from "@bigbinary/neetoui";
-import { Form } from "@bigbinary/neetoui/formik";
-import { useTranslation } from "react-i18next";
-import Logo from "./Logo";
-import Properties from "./Properties";
-import { INITIAL_STATE, THEME_VALIDATION_SCHEMA } from "../constants";
-import Card from "../fields/Card";
-import TextBlock from "../fields/TextBlock";
-import { parseTheme } from "../utils";
-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.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.createElement("div", {
-      className: "neeto-molecules-theme-design-sidebar__scroll"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col gap-6 p-4"
-    }, /*#__PURE__*/React.createElement(Card, {
-      title: t("neetoMolecules.themeSidebar.name")
-    }, /*#__PURE__*/React.createElement(TextBlock, {
-      autoFocus: true,
-      name: "name"
-    })), /*#__PURE__*/React.createElement(Properties, {
-      handleChange: setFieldValue,
-      values: values
-    }), /*#__PURE__*/React.createElement(Logo, {
-      logo: values.logo,
-      onChange: setFieldValue
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 left-0 right-0 py-6 px-4"
-    }, /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "save-changes-button",
-      disabled: !dirty && theme.id,
-      label: t("neetoMolecules.common.actions.save"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React.createElement(Button, {
-      className: "ml-2",
-      "data-cy": "reset-button",
-      disabled: !dirty,
-      label: t("neetoMolecules.common.actions.reset"),
-      style: "text",
-      type: "reset"
-    })));
-  });
-};
-export default Customize;

package/dist/ThemeSidebar/Themes/ThemeCard.js

@@ -1,135 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name"];
-import React from "react";
-import classnames from "classnames";
-import { isPresent } from "@bigbinary/neeto-commons-frontend/pure";
-import { Typography, Tag, Button } from "@bigbinary/neetoui";
-import { path } from "ramda";
-import { useTranslation } from "react-i18next";
-import MoreDropdown from "../../MoreDropdown";
-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.createElement("div", {
-    className: "group space-y-2",
-    "data-cy": active ? "active-theme-card" : "theme-card",
-    id: theme.id
-  }, /*#__PURE__*/React.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.createElement("div", {
-    className: "group-hover:opacity-85 neeto-ui-rounded-lg cursor-pointer p-6 transition-all duration-300 ease-in-out"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mb-3"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h3",
-    weight: "semibold"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: path(["colorScheme", "questionColor"], styles)
-    }
-  }, t("neetoMolecules.themeSidebar.themeCard.question"))), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-600",
-    style: "body2"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: path(["colorScheme", "answerColor"], styles)
-    }
-  }, t("neetoMolecules.themeSidebar.themeCard.answer")))), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-rounded-lg h-5 w-12",
-    style: {
-      backgroundColor: path(["colorScheme", "buttonBackgroundColor"], styles)
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-start justify-between gap-1"
-  }, /*#__PURE__*/React.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.createElement("div", {
-    className: "flex items-center gap-2"
-  }, active ? /*#__PURE__*/React.createElement(Tag, {
-    className: "flex-shrink-0",
-    "data-cy": "active-theme-label",
-    label: t("neetoMolecules.themeSidebar.active"),
-    style: "success"
-  }) : /*#__PURE__*/React.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.createElement(MoreDropdown, {
-    buttonProps: {
-      buttonSize: "small"
-    },
-    menuItems: moreMenuItems,
-    dropdownButtonProps: {
-      "data-cy": "theme-card-options",
-      strategy: "fixed"
-    }
-  }))));
-};
-export default ThemeCard;

package/dist/ThemeSidebar/Themes/index.js

@@ -1,110 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useState } from "react";
-import { isNotEmpty } from "@bigbinary/neeto-commons-frontend/pure";
-import { Search } from "@bigbinary/neeto-icons";
-import { Input, Typography } from "@bigbinary/neetoui";
-import { isEmpty } from "ramda";
-import { useTranslation } from "react-i18next";
-import ThemeCard from "./ThemeCard";
-import { scrollElementIntoView } from "../utils";
-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.createElement("div", {
-    className: "neeto-molecules-theme-design-sidebar__scroll"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mb-6 space-y-3"
-  }, isSearchFieldVisible && /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    autoComplete: "off",
-    className: "mb-4 mt-1 px-6",
-    placeholder: t("neetoMolecules.themeSidebar.searchThemes"),
-    prefix: /*#__PURE__*/React.createElement(Search, null),
-    type: "search",
-    value: searchQuery,
-    onChange: function onChange(e) {
-      return setSearchQuery(e.target.value);
-    }
-  }), isEmpty(filteredThemes) && isEmpty(filteredDefaultThemes) && /*#__PURE__*/React.createElement(Typography, {
-    className: "text-center",
-    style: "body2"
-  }, t("neetoMolecules.common.notFound.title", {
-    entity: t("neetoMolecules.themeSidebar.theme", {
-      count: 2
-    })
-  })), isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-    className: "my-4 px-6 uppercase",
-    "data-cy": "system-themes-header",
-    style: "h6",
-    weight: "semibold"
-  }, t("neetoMolecules.themeSidebar.systemThemes")), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-4 px-6"
-  }, filteredDefaultThemes.map(function (theme) {
-    return /*#__PURE__*/React.createElement(ThemeCard, {
-      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,
-      onApplyTheme: onApplyTheme,
-      onCloneTheme: onCloneTheme,
-      theme: theme,
-      onSetPreviewTheme: setPreviewingTheme
-    });
-  })))), isNotEmpty(filteredThemes) && /*#__PURE__*/React.createElement("div", {
-    className: "mb-6 space-y-3"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "my-4 px-6 uppercase",
-    "data-cy": "custom-themes-header",
-    style: "h6",
-    weight: "semibold"
-  }, t("neetoMolecules.themeSidebar.customThemes")), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-4 px-6"
-  }, filteredThemes.map(function (theme) {
-    var isActive = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id;
-    return /*#__PURE__*/React.createElement(ThemeCard, {
-      active: isActive,
-      isHighLightedTheme: theme.id === themeToHighlight,
-      isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
-      key: theme.id,
-      onApplyTheme: onApplyTheme,
-      onCloneTheme: onCloneTheme,
-      onEditTheme: onEditTheme,
-      theme: theme,
-      onDeleteTheme: !isActive ? onDeleteTheme : null,
-      onSetPreviewTheme: setPreviewingTheme
-    });
-  }))));
-};
-export default Themes;

package/dist/ThemeSidebar/TitleBar.js

@@ -1,62 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { capitalize } from "@bigbinary/neeto-commons-frontend/pure";
-import { LeftArrow, Plus } from "@bigbinary/neeto-icons";
-import { Button, Typography } from "@bigbinary/neetoui";
-import { useTranslation } from "react-i18next";
-import { DESIGN_SCREENS } from "./constants";
-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.createElement("div", {
-      className: classnames("neeto-molecules-theme-design-sidebar__header px-4")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center justify-start space-x-2"
-    }, /*#__PURE__*/React.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.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.createElement("div", {
-    className: classnames("neeto-molecules-theme-design-sidebar__header px-6")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-between space-x-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "themes-header",
-    lineHeight: "normal",
-    style: "h3",
-    weight: "semibold"
-  }, capitalize(t("neetoMolecules.themeSidebar.theme", {
-    count: 2
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "self-end"
-  }, /*#__PURE__*/React.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
-  }))));
-};
-export default TitleBar;

package/dist/ThemeSidebar/constants.js

@@ -1,127 +0,0 @@
-import * as yup from "yup";
-export var DIRECT_UPLOAD_URL = "/api/direct_uploads";
-export var DESIGN_SCREENS = {
-  THEMES: "Themes",
-  CUSTOMIZE: "Customize",
-  LOADING: "Loading"
-};
-export 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"'
-};
-export var THEME_VALIDATION_SCHEMA = yup.object().shape({
-  name: yup.string().required("Name is required")
-});
-export var ONE_MEGABYTE = 1048576;
-export var FIVE_MEGABYTES = 5242880;
-export var POSITION_OPTIONS = [{
-  label: "Left",
-  value: "left"
-}, {
-  label: "Right",
-  value: "right"
-}];
-export 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"
-}];
-export 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"
-}];