@bigbinary/neeto-molecules 1.1.10 → 1.1.12

package/dist/SubHeader/subheader.scss

@@ -0,0 +1,78 @@
+$neeto-molecules-sub-header-height: 37px;
+$neeto-molecules-sub-header-bottom-margin: 20px;
+
+:root {
+  --neeto-molecules-sub-header-height: #{$neeto-molecules-sub-header-height};
+  --neeto-molecules-sub-header-bottom-margin: #{$neeto-molecules-sub-header-bottom-margin};
+}
+
+.neeto-molecules-subheader {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  min-height: var(--neeto-molecules-sub-header-height);
+  margin-bottom: var(--neeto-molecules-sub-header-bottom-margin);
+  background-color: rgb(var(--neeto-ui-white));
+
+  .neeto-molecules-subheader__left-wrapper {
+    display: flex;
+    flex-grow: 1;
+
+    .neeto-molecules-subheader__left {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+
+      .neeto-molecules-input__prefix {
+        color: rgb(var(--neeto-ui-gray-400));
+      }
+    }
+  }
+
+  .neeto-molecules-subheader__right {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 12px;
+
+    &-actions {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 8px;
+
+      & > :not([hidden]) ~ :not([hidden]) {
+        border-left: thin solid rgb(var(--neeto-ui-gray-300));
+        padding-left: 8px;
+      }
+    }
+  }
+
+  &__download {
+    position: relative;
+
+    &-count {
+      position: absolute;
+      right: -2px;
+      top: -2px;
+      min-width: 16px;
+      min-height: 16px;
+
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+
+      background-color: rgb(var(--neeto-ui-primary-500));
+      color: rgb(var(--neeto-ui-white));
+      border-radius: var(--neeto-ui-rounded-full);
+      font-size: 10px;
+      z-index: 1;
+    }
+  }
+}

package/dist/TableWrapper/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import classNames from "classnames";
+var TableWrapper = function TableWrapper(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$hasPagination = _ref.hasPagination,
+    hasPagination = _ref$hasPagination === void 0 ? false : _ref$hasPagination;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "table-wrapper",
+    className: classNames("flex min-h-0 w-full flex-grow flex-col pb-6", className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("min-h-0 flex-grow", {
+      "pb-11": hasPagination
+    })
+  }, children));
+};
+export default TableWrapper;

package/dist/ThemeSidebar/Customize/Logo.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { findBy } from "@bigbinary/neeto-commons-frontend/pure";
+import { mergeLeft, isEmpty } from "ramda";
+import { useTranslation } from "react-i18next";
+import { POSITION_OPTIONS } from "../constants";
+import Card from "../fields/Card";
+import ImageBlock from "../fields/ImageBlock";
+import SelectBlock from "../fields/SelectBlock";
+var Logo = function Logo(_ref) {
+  var logo = _ref.logo,
+    _onChange = _ref.onChange;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(Card, {
+    title: t("neetoMolecules.themeSidebar.logo")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "divide-y divide-gray-200"
+  }, /*#__PURE__*/React.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.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);
+    }
+  })));
+};
+export default /*#__PURE__*/React.memo(Logo);

package/dist/ThemeSidebar/Customize/Properties.js

@@ -0,0 +1,170 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,62 @@
+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;