@bigbinary/neeto-molecules 1.3.14 → 1.3.15

package/dist/cjs/ThemeSidebar.js

@@ -1824,7 +1824,7 @@ var Themes = function Themes(_ref) {
   }, isSearchFieldVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
     autoFocus: true,
     autoComplete: "off",
-    className: "mb-4 mt-1 px-6",
+    className: "mt-1 mb-4 px-6",
     placeholder: t("neetoMolecules.themeSidebar.searchThemes"),
     prefix: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Search, null),
     type: "search",
@@ -1840,50 +1840,50 @@ var Themes = function Themes(_ref) {
       count: 2
     })
   })), neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "my-4 px-6 uppercase",
+    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["default"].createElement("div", {
-    className: "flex flex-col gap-4 px-6"
+    className: "flex flex-col gap-4 px-4 md:px-5 lg:px-6"
   }, filteredDefaultThemes.map(function (theme) {
     return /*#__PURE__*/React__default["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,
-      onApplyTheme: onApplyTheme,
-      onCloneTheme: onCloneTheme,
-      theme: theme,
       onSetPreviewTheme: setPreviewingTheme
     });
   })))), neetoCist.isNotEmpty(filteredThemes) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-6 space-y-3"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "my-4 px-6 uppercase",
+    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["default"].createElement("div", {
-    className: "flex flex-col gap-4 px-6"
+    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["default"].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,
+      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}.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}";
+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) {
@@ -1916,7 +1916,7 @@ var TitleBar = function TitleBar(_ref) {
     }, isNewTheme ? t("neetoMolecules.themeSidebar.createTheme.title") : t("neetoMolecules.themeSidebar.editTheme.title"))));
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("neeto-molecules-theme-design-sidebar__header px-6")
+    className: classnames__default["default"]("neeto-molecules-theme-design-sidebar__header px-4 md:px-5 lg:px-6")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between space-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {