@bigbinary/neeto-themes-frontend 2.1.3 → 2.1.4

package/dist/NeetoThemesBuilder.js

@@ -2,7 +2,7 @@ import { shallow } from 'zustand/shallow';
 import { createElement, useEffect, useState, useRef, memo, useCallback } from 'react';
 import { t as t$1 } from 'i18next';
 import { hyphenate, findBy, findIndexBy, isPresent, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
-import { useMutationWithInvalidation, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { useMutationWithInvalidation, withT, useBreakpoints, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
@@ -10,12 +10,13 @@ import { B as BASE_URL, a as scrollElementIntoView, b as setCustomCSS, g as getD
 import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils } from './useThemeUtils-3875c1d1.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
+import Collapse from '@bigbinary/neeto-icons/Collapse';
 import Alert from '@bigbinary/neetoui/Alert';
+import Button from '@bigbinary/neetoui/Button';
 import { useTranslation, Trans } from 'react-i18next';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import Close from '@bigbinary/neeto-icons/Close';
-import Button from '@bigbinary/neetoui/Button';
 import Popover from '@bigbinary/neetoui/Popover';
 import Typography from '@bigbinary/neetoui/Typography';
 import Form from '@bigbinary/neetoui/formik/Form';
@@ -62,7 +63,7 @@ var useShowThemeEntity = function useShowThemeEntity(entityId) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-themes__wrapper{display:flex;width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));height:calc(100vh - 64px);width:280px}@media (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px}}@media (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:340px}.neeto-themes__wrapper .neeto-themes-sidebar--expanded{max-width:50%;width:520px}}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{display:flex;flex-direction:column;height:calc(100vh - 120px);overflow-y:auto}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-ui-colorpicker__target-size--medium{--neeto-ui-colorpicker-target-padding:6px}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-ui-colorpicker__target-size--medium .neeto-ui-colorpicker-target__color{border-radius:0!important;height:20px;width:20px}.neeto-themes__wrapper .css-editor-height__expanded{height:calc(100vh - 300px)}.neeto-themes__wrapper .css-editor-height__regular{height:384px}.neeto-themes__wrapper .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 64px);position:relative}.neeto-themes-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-600))!important;outline:1px solid rgb(var(--neeto-ui-gray-600))!important}.neeto-themes-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:2px solid rgb(var(--neeto-ui-primary-500))!important}.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-gray-400))!important;outline:2px solid rgb(var(--neeto-ui-gray-400))!important}.neeto-themes-theme-thumbnail__apply-btn{--neeto-ui-btn-padding-x:12px;--neeto-ui-btn-border-radius:100px}.neeto-themes-theme-thumbnail__apply-btn:disabled,.neeto-themes-theme-thumbnail__apply-btn[disabled]{opacity:1!important}.neeto-themes-sidebar__custom-css-editor-header{background-color:#1e1e1e;border-top-left-radius:var(--neeto-ui-rounded-lg);border-top-right-radius:var(--neeto-ui-rounded-lg)}.neeto-themes-sidebar .monaco-editor,.neeto-themes-sidebar .overflow-guard{border-bottom-left-radius:var(--neeto-ui-rounded-lg);border-bottom-right-radius:var(--neeto-ui-rounded-lg)}.neeto-themes-sidebar__custom-css-wrapper .neeto-themes-nano-section{border-bottom:0!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvdGhlbWVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsdUJBRUUsWUFBQSxDQURBLFVBQUYsQ0FHRSw2Q0FHRSwyQ0FBQSxDQURBLHlCQUFBLENBREEsV0FDSixDQUdJLDBCQUxGLDZDQU1JLFdBQUosQ0FDRixDQUNJLDBCQVJGLDZDQVNJLFdBRUosQ0FBSSx1REFFRSxhQUFBLENBREEsV0FHTixDQUNGLENBQ0ksMkVBRUUsa0JBQUEsQ0FEQSxnQkFFTixDQUVJLDJFQUdFLFlBQUEsQ0FDQSxxQkFBQSxDQUhBLDBCQUFBLENBQ0EsZUFFTixDQUdRLDRJQUNFLFlBRFYsQ0FLSSx3RkFDRSx5Q0FITixDQUlNLDRIQUdFLHlCQUFBLENBRkEsV0FBQSxDQUNBLFVBRFIsQ0FPRSxvREFDRSwwQkFMSixDQVFFLG1EQUNFLFlBTkosQ0FTRSxzREFHRSxXQUFBLENBREEseUJBQUEsQ0FEQSxpQkFMSixDQVdBLDhDQUNFLG9EQUFBLENBQ0EseURBUkYsQ0FXQSxzQ0FDRSx1REFBQSxDQUNBLDREQVJGLENBV0EsZ0RBQ0Usb0RBQUEsQ0FDQSx5REFSRixDQVdBLHlDQUNFLDZCQUFBLENBQ0Esa0NBUkYsQ0FTRSxxR0FFRSxtQkFSSixDQVlBLGdEQUNFLHdCQUFBLENBQ0EsaURBQUEsQ0FDQSxrREFURixDQWFFLDJFQUVFLG9EQUFBLENBQ0EscURBVkosQ0FlRSxxRUFDRSx5QkFaSiIsInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCIuLi9hYnN0cmFjdHMvdmFyaWFibGVzXCI7XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcblxuICAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtc207XG4gICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG5cbiAgICBAc2NyZWVuIGxnIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtbGc7XG4gICAgfVxuICAgIEBzY3JlZW4geGwge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC14bDtcblxuICAgICAgJi0tZXhwYW5kZWQge1xuICAgICAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLWV4cGFuZGVkO1xuICAgICAgICBtYXgtd2lkdGg6IDUwJTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA4cHg7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTIwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXG4gICAgICAubmVldG8tdWktY29sb3JwaWNrZXJfX3RhcmdldCB7XG4gICAgICAgIC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyX190YXJnZXQtc2l6ZS0tbWVkaXVtIHtcbiAgICAgIC0tbmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0LXBhZGRpbmc6IDZweDtcbiAgICAgIC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvbG9yIHtcbiAgICAgICAgaGVpZ2h0OiAyMHB4O1xuICAgICAgICB3aWR0aDogMjBweDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMCAhaW1wb3J0YW50O1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC5jc3MtZWRpdG9yLWhlaWdodF9fZXhwYW5kZWQge1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDMwMHB4KTtcbiAgfVxuXG4gIC5jc3MtZWRpdG9yLWhlaWdodF9fcmVndWxhciB7XG4gICAgaGVpZ2h0OiAzODRweDtcbiAgfVxuXG4gIC5uZWV0by10aGVtZXMtcHJldmlld19fd3JhcHBlciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtICN7JGJ1aWxkZXItaGVhZGVyLWhlaWdodH0pO1xuICAgIGZsZXgtZ3JvdzogMTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWhpZ2hsaWdodC1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS00MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fYXBwbHktYnRuIHtcbiAgLS1uZWV0by11aS1idG4tcGFkZGluZy14OiAxMnB4O1xuICAtLW5lZXRvLXVpLWJ0bi1ib3JkZXItcmFkaXVzOiAxMDBweDtcbiAgJjpkaXNhYmxlZCxcbiAgJltkaXNhYmxlZF0ge1xuICAgIG9wYWNpdHk6IDEgIWltcG9ydGFudDtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3MtZWRpdG9yLWhlYWRlciB7XG4gIGJhY2tncm91bmQtY29sb3I6ICMxZTFlMWU7XG4gIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZC1sZyk7XG59XG5cbi5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gIC5vdmVyZmxvdy1ndWFyZCxcbiAgLm1vbmFjby1lZGl0b3Ige1xuICAgIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xuICAgIGJvcmRlci1ib3R0b20tcmlnaHQtcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkLWxnKTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3Mtd3JhcHBlciB7XG4gIC5uZWV0by10aGVtZXMtbmFuby1zZWN0aW9uIHtcbiAgICBib3JkZXItYm90dG9tOiAwICFpbXBvcnRhbnQ7XG4gIH1cbn1cbiJdfQ== */";
+var css = ".neeto-themes__wrapper{display:flex;width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:rgb(var(--neeto-ui-white));height:100%;left:0;padding-top:24px;position:fixed;top:0;transition:none;width:100%;z-index:102}.neeto-themes__wrapper .neeto-themes-sidebar--expanded{max-width:100%;width:520px!important}@media screen and (min-width:576px){.neeto-themes__wrapper .neeto-themes-sidebar{width:280px}}@media screen and (min-width:767px){.neeto-themes__wrapper .neeto-themes-sidebar{height:calc(100vh - 64px);padding-top:0;position:relative}}@media screen and (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px}}@media screen and (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:340px}}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed{max-width:0;min-width:0;width:0}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{transform:scale(-1)}@media screen and (max-width:767px){.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{top:109px}}@media screen and (max-width:576px){.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{left:8px;right:auto}}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__header{display:none}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__header{padding-bottom:8px;padding-top:16px}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{display:flex;flex-direction:column;height:calc(100vh - 120px);overflow-y:auto}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll .neeto-ui-colorpicker__target .neeto-ui-colorpicker-target__code{display:none}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-ui-colorpicker__target-size--medium{--neeto-ui-colorpicker-target-padding:6px}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-ui-colorpicker__target-size--medium .neeto-ui-colorpicker-target__color{border-radius:0!important;height:20px;width:20px}.neeto-themes__wrapper .css-editor-height__expanded{height:calc(100vh - 300px)}.neeto-themes__wrapper .css-editor-height__regular{height:384px}.neeto-themes__wrapper .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 64px);position:relative}.neeto-themes-theme-thumbnail--preview-active{border-color:rgb(var(--neeto-ui-gray-600))!important;outline:1px solid rgb(var(--neeto-ui-gray-600))!important}.neeto-themes-theme-thumbnail--active{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:2px solid rgb(var(--neeto-ui-primary-500))!important}.neeto-themes-theme-thumbnail--highlight-active{border-color:rgb(var(--neeto-ui-gray-400))!important;outline:2px solid rgb(var(--neeto-ui-gray-400))!important}.neeto-themes-theme-thumbnail__apply-btn{--neeto-ui-btn-padding-x:12px;--neeto-ui-btn-border-radius:100px}.neeto-themes-theme-thumbnail__apply-btn:disabled,.neeto-themes-theme-thumbnail__apply-btn[disabled]{opacity:1!important}.neeto-themes-sidebar__custom-css-editor-header{background-color:#1e1e1e;border-top-left-radius:var(--neeto-ui-rounded-lg);border-top-right-radius:var(--neeto-ui-rounded-lg);display:flex}@media screen and (max-width:576px){.neeto-themes-sidebar__custom-css-editor-header{display:none}}.neeto-themes-sidebar .monaco-editor,.neeto-themes-sidebar .overflow-guard{border-bottom-left-radius:var(--neeto-ui-rounded-lg);border-bottom-right-radius:var(--neeto-ui-rounded-lg)}.neeto-themes-sidebar__custom-css-wrapper .neeto-themes-nano-section{border-bottom:0!important}.neeto-themes-sidebar__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:101}@media screen and (max-width:767px){.neeto-themes-sidebar__backdrop{display:block;visibility:visible}}.neeto-themes-sidebar__toggler{flex-shrink:0;left:calc(100% + 8px);position:absolute;top:8px;transition:color .3s ease-in-out}@media screen and (min-width:1024px){.neeto-themes-sidebar__toggler{opacity:0;pointer-events:none}}@media screen and (max-width:576px){.neeto-themes-sidebar__toggler{left:auto;right:24px}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvdGhlbWVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsdUJBRUUsWUFBQSxDQURBLFVBQUYsQ0FHRSw2Q0FHRSwyQ0FBQSxDQURBLFdBQUEsQ0FJQSxNQUFBLENBR0EsZ0JBQUEsQ0FMQSxjQUFBLENBQ0EsS0FBQSxDQUVBLGVBQUEsQ0FOQSxVQUFBLENBT0EsV0FBSixDQUdJLHVEQUVFLGNBQUEsQ0FEQSxxQkFBTixDQUlJLG9DQWhCRiw2Q0FpQkksV0FESixDQUNGLENBR0ksb0NBcEJGLDZDQXVCSSx5QkFBQSxDQUZBLGFBQUEsQ0FDQSxpQkFDSixDQUNGLENBRUkscUNBMUJGLDZDQTJCSSxXQUNKLENBQ0YsQ0FDSSxxQ0E5QkYsNkNBK0JJLFdBRUosQ0FDRixDQUFJLHdEQUVFLFdBQUEsQ0FDQSxXQUFBLENBRkEsT0FJTixDQUFNLHVGQUNFLG1CQUVSLENBQVEsb0NBSEYsdUZBSUksU0FHUixDQUNGLENBRFEsb0NBUEYsdUZBU0ksUUFBQSxDQURBLFVBS1IsQ0FDRixDQURNLHNGQUNFLFlBR1IsQ0FDSSwyRUFFRSxrQkFBQSxDQURBLGdCQUVOLENBRUksMkVBR0UsWUFBQSxDQUNBLHFCQUFBLENBSEEsMEJBQUEsQ0FDQSxlQUVOLENBR1EsNElBQ0UsWUFEVixDQUtJLHdGQUNFLHlDQUhOLENBSU0sNEhBR0UseUJBQUEsQ0FGQSxXQUFBLENBQ0EsVUFEUixDQU9FLG9EQUNFLDBCQUxKLENBUUUsbURBQ0UsWUFOSixDQVNFLHNEQUdFLFdBQUEsQ0FEQSx5QkFBQSxDQURBLGlCQUxKLENBV0EsOENBQ0Usb0RBQUEsQ0FDQSx5REFSRixDQVdBLHNDQUNFLHVEQUFBLENBQ0EsNERBUkYsQ0FXQSxnREFDRSxvREFBQSxDQUNBLHlEQVJGLENBV0EseUNBQ0UsNkJBQUEsQ0FDQSxrQ0FSRixDQVNFLHFHQUVFLG1CQVJKLENBWUEsZ0RBRUUsd0JBQUEsQ0FDQSxpREFBQSxDQUNBLGtEQUFBLENBSEEsWUFORixDQVVFLG9DQUxGLGdEQU1JLFlBUEYsQ0FDRixDQVdFLDJFQUVFLG9EQUFBLENBQ0EscURBUkosQ0FhRSxxRUFDRSx5QkFWSixDQWNBLGdDQU1FLCtDQUFBLENBQ0EsWUFBQSxDQUZBLFdBQUEsQ0FGQSxNQUFBLENBRkEsY0FBQSxDQUNBLEtBQUEsQ0FNQSxpQkFBQSxDQUpBLFVBQUEsQ0FLQSxXQVhGLENBYUUsb0NBWEYsZ0NBWUksYUFBQSxDQUNBLGtCQVZGLENBQ0YsQ0FhQSwrQkFJRSxhQUFBLENBREEscUJBQUEsQ0FGQSxpQkFBQSxDQUNBLE9BQUEsQ0FHQSxnQ0FWRixDQVlFLHFDQVBGLCtCQVFJLFNBQUEsQ0FDQSxtQkFURixDQUNGLENBV0Usb0NBWkYsK0JBYUksU0FBQSxDQUNBLFVBUkYsQ0FDRiIsInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCIuLi9hYnN0cmFjdHMvdmFyaWFibGVzXCI7XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcblxuICAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgICB6LWluZGV4OiAxMDI7XG4gICAgcGFkZGluZy10b3A6IDI0cHg7XG5cbiAgICAmLS1leHBhbmRlZCB7XG4gICAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLWV4cGFuZGVkICFpbXBvcnRhbnQ7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgfVxuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTc2cHgpIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtc207XG4gICAgfVxuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNzY3cHgpIHtcbiAgICAgIHBhZGRpbmctdG9wOiAwO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgfVxuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gICAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLXdpZHRoLWxnO1xuICAgIH1cblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDEyODBweCkge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC14bDtcbiAgICB9XG5cbiAgICAmLS1jb2xsYXBzZWQge1xuICAgICAgd2lkdGg6IDBweDtcbiAgICAgIG1heC13aWR0aDogMHB4O1xuICAgICAgbWluLXdpZHRoOiAwcHg7XG5cbiAgICAgIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoLTEpO1xuXG4gICAgICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gICAgICAgICAgdG9wOiAxMDlweDtcbiAgICAgICAgfVxuXG4gICAgICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU3NnB4KSB7XG4gICAgICAgICAgcmlnaHQ6IGF1dG87XG4gICAgICAgICAgbGVmdDogOHB4O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA4cHg7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTIwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXG4gICAgICAubmVldG8tdWktY29sb3JwaWNrZXJfX3RhcmdldCB7XG4gICAgICAgIC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gICAgLm5lZXRvLXVpLWNvbG9ycGlja2VyX190YXJnZXQtc2l6ZS0tbWVkaXVtIHtcbiAgICAgIC0tbmVldG8tdWktY29sb3JwaWNrZXItdGFyZ2V0LXBhZGRpbmc6IDZweDtcbiAgICAgIC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvbG9yIHtcbiAgICAgICAgaGVpZ2h0OiAyMHB4O1xuICAgICAgICB3aWR0aDogMjBweDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMCAhaW1wb3J0YW50O1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC5jc3MtZWRpdG9yLWhlaWdodF9fZXhwYW5kZWQge1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDMwMHB4KTtcbiAgfVxuXG4gIC5jc3MtZWRpdG9yLWhlaWdodF9fcmVndWxhciB7XG4gICAgaGVpZ2h0OiAzODRweDtcbiAgfVxuXG4gIC5uZWV0by10aGVtZXMtcHJldmlld19fd3JhcHBlciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGhlaWdodDogY2FsYygxMDB2aCAtICN7JGJ1aWxkZXItaGVhZGVyLWhlaWdodH0pO1xuICAgIGZsZXgtZ3JvdzogMTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTYwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWhpZ2hsaWdodC1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpICFpbXBvcnRhbnQ7XG4gIG91dGxpbmU6IDJweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS00MDApKSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fYXBwbHktYnRuIHtcbiAgLS1uZWV0by11aS1idG4tcGFkZGluZy14OiAxMnB4O1xuICAtLW5lZXRvLXVpLWJ0bi1ib3JkZXItcmFkaXVzOiAxMDBweDtcbiAgJjpkaXNhYmxlZCxcbiAgJltkaXNhYmxlZF0ge1xuICAgIG9wYWNpdHk6IDEgIWltcG9ydGFudDtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3MtZWRpdG9yLWhlYWRlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJhY2tncm91bmQtY29sb3I6ICMxZTFlMWU7XG4gIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xuICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZC1sZyk7XG4gIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU3NnB4KSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAub3ZlcmZsb3ctZ3VhcmQsXG4gIC5tb25hY28tZWRpdG9yIHtcbiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkLWxnKTtcbiAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZC1sZyk7XG4gIH1cbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19jdXN0b20tY3NzLXdyYXBwZXIge1xuICAubmVldG8tdGhlbWVzLW5hbm8tc2VjdGlvbiB7XG4gICAgYm9yZGVyLWJvdHRvbTogMCAhaW1wb3J0YW50O1xuICB9XG59XG5cbi5uZWV0by10aGVtZXMtc2lkZWJhcl9fYmFja2Ryb3Age1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSh2YXIoLS1uZWV0by11aS1ibGFjayksIDAuNCk7XG4gIGRpc3BsYXk6IG5vbmU7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgei1pbmRleDogMTAxO1xuXG4gIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX3RvZ2dsZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogOHB4O1xuICBsZWZ0OiBjYWxjKDEwMCUgKyA4cHgpO1xuICBmbGV4LXNocmluazogMDtcbiAgdHJhbnNpdGlvbjogY29sb3IgMC4zcyBlYXNlLWluLW91dDtcblxuICBAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgICBvcGFjaXR5OiAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG5cbiAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNTc2cHgpIHtcbiAgICBsZWZ0OiBhdXRvO1xuICAgIHJpZ2h0OiAyNHB4O1xuICB9XG59XG4iXX0= */";
 n(css,{});
 
 var _excluded$1 = ["themeId"];
@@ -318,7 +319,7 @@ var CustomCSS = function CustomCSS(_ref) {
     children: /*#__PURE__*/jsxs(Card$2, {
       title: isCustomCssScreen ? "" : t("neetoThemes.build.leftSideBar.themes.customCSS"),
       children: [/*#__PURE__*/jsx("div", {
-        className: "neeto-themes-sidebar__custom-css-editor-header flex w-full justify-end gap-1 rounded-b-none p-2",
+        className: "neeto-themes-sidebar__custom-css-editor-header w-full justify-end gap-1 rounded-b-none p-2",
         children: /*#__PURE__*/jsx(Button, {
           size: "small",
           style: "secondary",
@@ -1506,13 +1507,13 @@ var Themes = function Themes(_ref) {
         children: t("neetoThemes.common.noResultsFound")
       }), isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(Typography, {
-          className: "my-4 px-4 uppercase lg:px-5 xl:px-6",
+          className: "my-4 px-6 uppercase lg:px-5 xl:px-6",
           "data-cy": "system-themes-header",
           style: "h6",
           weight: "semibold",
           children: t("neetoThemes.build.leftSideBar.themes.systemThemes")
         }), /*#__PURE__*/jsx("div", {
-          className: "flex flex-col gap-4 px-4 pb-10 lg:px-5 xl:px-6",
+          className: "flex flex-col gap-4 px-6 pb-10 lg:px-5 xl:px-6",
           "data-cy": "system-themes",
           children: filteredDefaultThemes.map(function (theme) {
             return /*#__PURE__*/createElement(Card$1, {
@@ -1574,7 +1575,7 @@ var TitleBar = function TitleBar(_ref) {
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
   if (currentScreen === DESIGN_SCREENS.THEMES) {
     return /*#__PURE__*/jsx("div", {
-      className: "neeto-themes-sidebar__header px-4 lg:px-5 xl:px-6",
+      className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
       children: /*#__PURE__*/jsxs("div", {
         className: "flex items-center justify-between space-x-2",
         children: [/*#__PURE__*/jsx(Typography, {
@@ -1650,6 +1651,16 @@ var Sidebar = function Sidebar(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     themeBeingApplied = _useState8[0],
     setThemeBeingApplied = _useState8[1];
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isLargerScreen = !isSize("mobile");
+  var _useState9 = useState(!isLargerScreen),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isThemesSidebarCollapsed = _useState10[0],
+    setIsThemesSidebarCollapsed = _useState10[1];
+  useEffect(function () {
+    setIsThemesSidebarCollapsed(!isLargerScreen);
+  }, [isLargerScreen]);
   var _useConfigStore = useConfigStore(function (store) {
       return {
         entityType: store["entityType"],
@@ -1767,57 +1778,73 @@ var Sidebar = function Sidebar(_ref) {
       }
     });
   }, [deleteTheme, themeToDelete]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames("neeto-themes-sidebar neeto-ui-border-gray-200 flex-shrink-0 border-r transition-all duration-300", {
-      "neeto-themes-sidebar--expanded": isCustomCssScreen
-    }),
-    children: [/*#__PURE__*/jsx(TitleBar, {
-      currentScreen: currentScreen,
-      handleBackPress: handleBackPress,
-      handleCreateNewTheme: function handleCreateNewTheme() {
-        return handleEditTheme({});
-      },
-      isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id),
-      themeToEdit: themeToEdit.current
-    }), currentScreen === DESIGN_SCREENS.THEMES ? /*#__PURE__*/jsx(Themes, {
-      currentTheme: currentTheme,
-      defaultThemes: defaultThemes,
-      didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
-      highlightTheme: highlightTheme,
-      isApplyingTheme: isApplyingTheme,
-      isCurrentThemeLoading: isCurrentThemeLoading,
-      onApplyTheme: onApplyTheme,
-      themeBeingApplied: themeBeingApplied,
-      themeToHighlight: themeToHighlight,
-      themes: themes,
-      thumbnail: thumbnail,
-      isLoading: isLoading || isFetchingSchema,
-      onDeleteTheme: handleDelete,
-      onEditTheme: handleEditTheme
-    }) : /*#__PURE__*/jsx(Customize, {
-      currentScreen: currentScreen,
-      isApplyingTheme: isApplyingTheme,
-      onApplyTheme: onApplyTheme,
-      onCreateTheme: onCreateTheme,
-      onPropertiesChange: onPropertiesChange,
-      onUpdateThemeSuccess: onUpdateThemeSuccess,
-      theme: themeToEdit.current,
-      themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id,
-      onEditCSSClick: setCurrentScreen
-    }), /*#__PURE__*/jsx(MemoizedAlert, {
-      isOpen: isDeleteAlertOpen,
-      isSubmitting: isDeleting,
-      title: t("neetoThemes.alerts.title.deleteTheme"),
-      message: t("neetoThemes.alerts.message.deleteTheme", {
-        name: (_themeToDelete$curren2 = themeToDelete.current) === null || _themeToDelete$curren2 === void 0 ? void 0 : _themeToDelete$curren2.name,
-        count: (_themeToDelete$curren3 = themeToDelete.current) === null || _themeToDelete$curren3 === void 0 ? void 0 : _themeToDelete$curren3.appliedCount,
-        defaultThemeName: defaultThemeName,
-        entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
-          count: (_themeToDelete$curren4 = themeToDelete.current) === null || _themeToDelete$curren4 === void 0 ? void 0 : _themeToDelete$curren4.appliedCount
-        })
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isThemesSidebarCollapsed && /*#__PURE__*/jsx("div", {
+      className: "neeto-themes-sidebar__backdrop",
+      onClick: function onClick() {
+        setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: classNames("neeto-themes-sidebar neeto-ui-border-gray-200 flex-shrink-0 border-r transition-all duration-300", {
+        "neeto-themes-sidebar--expanded": isCustomCssScreen
+      }, {
+        "neeto-themes-sidebar--collapsed": isThemesSidebarCollapsed
       }),
-      onClose: handleCloseDeleteAlert,
-      onSubmit: handleDeleteTheme
+      children: [/*#__PURE__*/jsx(TitleBar, {
+        currentScreen: currentScreen,
+        handleBackPress: handleBackPress,
+        handleCreateNewTheme: function handleCreateNewTheme() {
+          return handleEditTheme({});
+        },
+        isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id),
+        themeToEdit: themeToEdit.current
+      }), currentScreen === DESIGN_SCREENS.THEMES ? /*#__PURE__*/jsx(Themes, {
+        currentTheme: currentTheme,
+        defaultThemes: defaultThemes,
+        didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
+        highlightTheme: highlightTheme,
+        isApplyingTheme: isApplyingTheme,
+        isCurrentThemeLoading: isCurrentThemeLoading,
+        onApplyTheme: onApplyTheme,
+        themeBeingApplied: themeBeingApplied,
+        themeToHighlight: themeToHighlight,
+        themes: themes,
+        thumbnail: thumbnail,
+        isLoading: isLoading || isFetchingSchema,
+        onDeleteTheme: handleDelete,
+        onEditTheme: handleEditTheme
+      }) : /*#__PURE__*/jsx(Customize, {
+        currentScreen: currentScreen,
+        isApplyingTheme: isApplyingTheme,
+        onApplyTheme: onApplyTheme,
+        onCreateTheme: onCreateTheme,
+        onPropertiesChange: onPropertiesChange,
+        onUpdateThemeSuccess: onUpdateThemeSuccess,
+        theme: themeToEdit.current,
+        themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id,
+        onEditCSSClick: setCurrentScreen
+      }), /*#__PURE__*/jsx(MemoizedAlert, {
+        isOpen: isDeleteAlertOpen,
+        isSubmitting: isDeleting,
+        title: t("neetoThemes.alerts.title.deleteTheme"),
+        message: t("neetoThemes.alerts.message.deleteTheme", {
+          name: (_themeToDelete$curren2 = themeToDelete.current) === null || _themeToDelete$curren2 === void 0 ? void 0 : _themeToDelete$curren2.name,
+          count: (_themeToDelete$curren3 = themeToDelete.current) === null || _themeToDelete$curren3 === void 0 ? void 0 : _themeToDelete$curren3.appliedCount,
+          defaultThemeName: defaultThemeName,
+          entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
+            count: (_themeToDelete$curren4 = themeToDelete.current) === null || _themeToDelete$curren4 === void 0 ? void 0 : _themeToDelete$curren4.appliedCount
+          })
+        }),
+        onClose: handleCloseDeleteAlert,
+        onSubmit: handleDeleteTheme
+      }), /*#__PURE__*/jsx(Button, {
+        className: "neeto-themes-sidebar__toggler",
+        icon: Collapse,
+        style: "secondary",
+        onClick: function onClick() {
+          setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);
+        }
+      })]
     })]
   });
 };