@bigbinary/neeto-themes-frontend 2.1.3 → 2.1.5

package/dist/NeetoThemesBuilder.js

@@ -1,27 +1,29 @@
 import { shallow } from 'zustand/shallow';
-import { createElement, useEffect, useState, useRef, memo, useCallback } from 'react';
+import { useState, createElement, useEffect, 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';
-import { B as BASE_URL, a as scrollElementIntoView, b as setCustomCSS, g as getDominantColorFromUrl, i as isFunction } from './index-383fae09.js';
-import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils } from './useThemeUtils-3875c1d1.js';
+import { B as BASE_URL, a as scrollElementIntoView, b as setCustomCSS, g as getDominantColorFromUrl, i as isFunction } from './index-da3e7846.js';
+import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils } from './useThemeUtils-500caefe.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import classNames from 'classnames';
+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';
 import * as yup from 'yup';
 import Editor from '@monaco-editor/react';
 import { useFormikContext, Field } from 'formik';
+import Down from '@bigbinary/neeto-icons/Down';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
@@ -62,7 +64,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 .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}}.neeto-themes-nano-alignment-block{border-radius:6px}.neeto-themes-nano-alignment-button{--neeto-ui-btn-padding-x:12px!important}.neeto-themes-nano-alignment-button__alignment-left{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.neeto-themes-nano-alignment-button__alignment-center{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.neeto-themes-nano-alignment-button.neeto-ui-btn--style-primary{--neeto-ui-btn-bg-color:rgb(var(--neeto-ui-primary-100))!important;--neeto-ui-btn-hover-bg-color:rgb(var(--neeto-ui-primary-100))!important}.neeto-themes-nano-alignment-divider{background:rgb(var(--neeto-ui-gray-200));height:32px;width:1px}.neeto-themes-nano-section__content--open{max-height:1500px;opacity:1;padding-top:4px;visibility:visible}.neeto-themes-nano-section__content--closed{max-height:0;opacity:0;visibility:hidden}.neeto-themes-nano-section__title:focus-visible{box-shadow:0 0 0 3px rgba(var(--neeto-ui-primary-500),15%)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvdGhlbWVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsdUJBRUUsWUFBQSxDQURBLFVBQUYsQ0FHRSw2Q0FHRSwyQ0FBQSxDQURBLFdBQUEsQ0FJQSxNQUFBLENBR0EsZ0JBQUEsQ0FMQSxjQUFBLENBQ0EsS0FBQSxDQUVBLGVBQUEsQ0FOQSxVQUFBLENBT0EsV0FBSixDQUdJLHVEQUVFLGNBQUEsQ0FEQSxxQkFBTixDQUlJLG9DQWhCRiw2Q0FpQkksV0FESixDQUNGLENBR0ksb0NBcEJGLDZDQXVCSSx5QkFBQSxDQUZBLGFBQUEsQ0FDQSxpQkFDSixDQUNGLENBRUkscUNBMUJGLDZDQTJCSSxXQUNKLENBQ0YsQ0FDSSxxQ0E5QkYsNkNBK0JJLFdBRUosQ0FDRixDQUFJLHdEQUVFLFdBQUEsQ0FDQSxXQUFBLENBRkEsT0FJTixDQUFNLHVGQUNFLG1CQUVSLENBQVEsb0NBSEYsdUZBSUksU0FHUixDQUNGLENBRFEsb0NBUEYsdUZBU0ksUUFBQSxDQURBLFVBS1IsQ0FDRixDQURNLHNGQUNFLFlBR1IsQ0FDSSwyRUFFRSxrQkFBQSxDQURBLGdCQUVOLENBRUksMkVBR0UsWUFBQSxDQUNBLHFCQUFBLENBSEEsMEJBQUEsQ0FDQSxlQUVOLENBR1EsNElBQ0UsWUFEVixDQU9FLG9EQUNFLDBCQUxKLENBUUUsbURBQ0UsWUFOSixDQVNFLHNEQUdFLFdBQUEsQ0FEQSx5QkFBQSxDQURBLGlCQUxKLENBV0EsOENBQ0Usb0RBQUEsQ0FDQSx5REFSRixDQVdBLHNDQUNFLHVEQUFBLENBQ0EsNERBUkYsQ0FXQSxnREFDRSxvREFBQSxDQUNBLHlEQVJGLENBV0EseUNBQ0UsNkJBQUEsQ0FDQSxrQ0FSRixDQVNFLHFHQUVFLG1CQVJKLENBWUEsZ0RBRUUsd0JBQUEsQ0FDQSxpREFBQSxDQUNBLGtEQUFBLENBSEEsWUFORixDQVVFLG9DQUxGLGdEQU1JLFlBUEYsQ0FDRixDQVdFLDJFQUVFLG9EQUFBLENBQ0EscURBUkosQ0FhRSxxRUFDRSx5QkFWSixDQWNBLGdDQU1FLCtDQUFBLENBQ0EsWUFBQSxDQUZBLFdBQUEsQ0FGQSxNQUFBLENBRkEsY0FBQSxDQUNBLEtBQUEsQ0FNQSxpQkFBQSxDQUpBLFVBQUEsQ0FLQSxXQVhGLENBYUUsb0NBWEYsZ0NBWUksYUFBQSxDQUNBLGtCQVZGLENBQ0YsQ0FhQSwrQkFJRSxhQUFBLENBREEscUJBQUEsQ0FGQSxpQkFBQSxDQUNBLE9BQUEsQ0FHQSxnQ0FWRixDQVlFLHFDQVBGLCtCQVFJLFNBQUEsQ0FDQSxtQkFURixDQUNGLENBV0Usb0NBWkYsK0JBYUksU0FBQSxDQUNBLFVBUkYsQ0FDRixDQVdBLG1DQUNFLGlCQVJGLENBV0Esb0NBQ0UsdUNBUkYsQ0FVRSxvREFFRSxzQ0FBQSxDQURBLG1DQVBKLENBV0Usc0RBRUUscUNBQUEsQ0FEQSxrQ0FSSixDQVlFLGdFQUNFLGtFQUFBLENBQ0Esd0VBVkosQ0FjQSxxQ0FHRSx3Q0FBQSxDQURBLFdBQUEsQ0FEQSxTQVRGLENBZUUsMENBQ0UsaUJBQUEsQ0FDQSxTQUFBLENBRUEsZUFBQSxDQURBLGtCQVhKLENBY0UsNENBQ0UsWUFBQSxDQUNBLFNBQUEsQ0FDQSxpQkFaSixDQWdCQSxnREFDRSwwREFiRiIsInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCIuLi9hYnN0cmFjdHMvdmFyaWFibGVzXCI7XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcblxuICAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgICB6LWluZGV4OiAxMDI7XG4gICAgcGFkZGluZy10b3A6IDI0cHg7XG5cbiAgICAmLS1leHBhbmRlZCB7XG4gICAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLWV4cGFuZGVkICFpbXBvcnRhbnQ7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgfVxuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTc2cHgpIHtcbiAgICAgIHdpZHRoOiAkdGhlbWVzLXNpZGViYXItd2lkdGgtc207XG4gICAgfVxuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNzY3cHgpIHtcbiAgICAgIHBhZGRpbmctdG9wOiAwO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gI3skYnVpbGRlci1oZWFkZXItaGVpZ2h0fSk7XG4gICAgfVxuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gICAgICB3aWR0aDogJHRoZW1lcy1zaWRlYmFyLXdpZHRoLWxnO1xuICAgIH1cblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDEyODBweCkge1xuICAgICAgd2lkdGg6ICR0aGVtZXMtc2lkZWJhci13aWR0aC14bDtcbiAgICB9XG5cbiAgICAmLS1jb2xsYXBzZWQge1xuICAgICAgd2lkdGg6IDBweDtcbiAgICAgIG1heC13aWR0aDogMHB4O1xuICAgICAgbWluLXdpZHRoOiAwcHg7XG5cbiAgICAgIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoLTEpO1xuXG4gICAgICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gICAgICAgICAgdG9wOiAxMDlweDtcbiAgICAgICAgfVxuXG4gICAgICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU3NnB4KSB7XG4gICAgICAgICAgcmlnaHQ6IGF1dG87XG4gICAgICAgICAgbGVmdDogOHB4O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2hlYWRlciB7XG4gICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgIHBhZGRpbmctYm90dG9tOiA4cHg7XG4gICAgfVxuXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICAgICAgaGVpZ2h0OiBjYWxjKDEwMHZoIC0gMTIwcHgpO1xuICAgICAgb3ZlcmZsb3cteTogYXV0bztcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXG4gICAgICAubmVldG8tdWktY29sb3JwaWNrZXJfX3RhcmdldCB7XG4gICAgICAgIC5uZWV0by11aS1jb2xvcnBpY2tlci10YXJnZXRfX2NvZGUge1xuICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAuY3NzLWVkaXRvci1oZWlnaHRfX2V4cGFuZGVkIHtcbiAgICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAzMDBweCk7XG4gIH1cblxuICAuY3NzLWVkaXRvci1oZWlnaHRfX3JlZ3VsYXIge1xuICAgIGhlaWdodDogMzg0cHg7XG4gIH1cblxuICAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBoZWlnaHQ6IGNhbGMoMTAwdmggLSAjeyRidWlsZGVyLWhlYWRlci1oZWlnaHR9KTtcbiAgICBmbGV4LWdyb3c6IDE7XG4gIH1cbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLXByZXZpZXctYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS02MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAxcHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNjAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbiAgb3V0bGluZTogMnB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1oaWdobGlnaHQtYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS00MDApKSAhaW1wb3J0YW50O1xuICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNDAwKSkgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX2FwcGx5LWJ0biB7XG4gIC0tbmVldG8tdWktYnRuLXBhZGRpbmcteDogMTJweDtcbiAgLS1uZWV0by11aS1idG4tYm9yZGVyLXJhZGl1czogMTAwcHg7XG4gICY6ZGlzYWJsZWQsXG4gICZbZGlzYWJsZWRdIHtcbiAgICBvcGFjaXR5OiAxICFpbXBvcnRhbnQ7XG4gIH1cbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19jdXN0b20tY3NzLWVkaXRvci1oZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWUxZTFlO1xuICBib3JkZXItdG9wLWxlZnQtcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkLWxnKTtcbiAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xuICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1NzZweCkge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgLm92ZXJmbG93LWd1YXJkLFxuICAubW9uYWNvLWVkaXRvciB7XG4gICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZC1sZyk7XG4gICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQtbGcpO1xuICB9XG59XG5cbi5uZWV0by10aGVtZXMtc2lkZWJhcl9fY3VzdG9tLWNzcy13cmFwcGVyIHtcbiAgLm5lZXRvLXRoZW1lcy1uYW5vLXNlY3Rpb24ge1xuICAgIGJvcmRlci1ib3R0b206IDAgIWltcG9ydGFudDtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX2JhY2tkcm9wIHtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEodmFyKC0tbmVldG8tdWktYmxhY2spLCAwLjQpO1xuICBkaXNwbGF5OiBub25lO1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIHotaW5kZXg6IDEwMTtcblxuICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyX190b2dnbGVyIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDhweDtcbiAgbGVmdDogY2FsYygxMDAlICsgOHB4KTtcbiAgZmxleC1zaHJpbms6IDA7XG4gIHRyYW5zaXRpb246IGNvbG9yIDAuM3MgZWFzZS1pbi1vdXQ7XG5cbiAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gICAgb3BhY2l0eTogMDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuXG4gIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU3NnB4KSB7XG4gICAgbGVmdDogYXV0bztcbiAgICByaWdodDogMjRweDtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tYWxpZ25tZW50LWJsb2NrIHtcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tYWxpZ25tZW50LWJ1dHRvbiB7XG4gIC0tbmVldG8tdWktYnRuLXBhZGRpbmcteDogMTJweCAhaW1wb3J0YW50O1xuXG4gICZfX2FsaWdubWVudC1sZWZ0IHtcbiAgICBib3JkZXItdG9wLXJpZ2h0LXJhZGl1czogMHB4ICFpbXBvcnRhbnQ7XG4gICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IDBweCAhaW1wb3J0YW50O1xuICB9XG5cbiAgJl9fYWxpZ25tZW50LWNlbnRlciB7XG4gICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogMHB4ICFpbXBvcnRhbnQ7XG4gICAgYm9yZGVyLWJvdHRvbS1sZWZ0LXJhZGl1czogMHB4ICFpbXBvcnRhbnQ7XG4gIH1cblxuICAmLm5lZXRvLXVpLWJ0bi0tc3R5bGUtcHJpbWFyeSB7XG4gICAgLS1uZWV0by11aS1idG4tYmctY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTEwMCkpICFpbXBvcnRhbnQ7XG4gICAgLS1uZWV0by11aS1idG4taG92ZXItYmctY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTEwMCkpICFpbXBvcnRhbnQ7XG4gIH1cbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLWFsaWdubWVudC1kaXZpZGVyIHtcbiAgd2lkdGg6IDFweDtcbiAgaGVpZ2h0OiAzMnB4O1xuICBiYWNrZ3JvdW5kOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0yMDApKTtcbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLXNlY3Rpb25fX2NvbnRlbnQge1xuICAmLS1vcGVuIHtcbiAgICBtYXgtaGVpZ2h0OiAxNTAwcHg7XG4gICAgb3BhY2l0eTogMTtcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICAgIHBhZGRpbmctdG9wOiA0cHg7XG4gIH1cbiAgJi0tY2xvc2VkIHtcbiAgICBtYXgtaGVpZ2h0OiAwcHg7XG4gICAgb3BhY2l0eTogMDtcbiAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIH1cbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLXNlY3Rpb25fX3RpdGxlOmZvY3VzLXZpc2libGUge1xuICBib3gtc2hhZG93OiAwIDAgMCAzcHggcmdiYSh2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCksIDE1JSk7XG59XG4iXX0= */";
 n(css,{});
 
 var _excluded$1 = ["themeId"];
@@ -234,6 +236,12 @@ var OVERLAY_OPACITY_SLIDER_MARKS = {
   0: " "
 };
 var HUNDRED = 100;
+var ACCORDIAN_OPEN_STATE = {
+  name: true,
+  style: true,
+  images: false,
+  customcss: false
+};
 
 var DESIGN_SCREENS = {
   THEMES: "Themes",
@@ -242,25 +250,49 @@ var DESIGN_SCREENS = {
 };
 var ONE_MEGABYTE = 1;
 
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Card$2 = function Card(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "" : _ref$title,
-    children = _ref.children;
+    children = _ref.children,
+    name = _ref.name,
+    className = _ref.className;
+  var _useState = useState(ACCORDIAN_OPEN_STATE),
+    _useState2 = _slicedToArray(_useState, 2),
+    accordianOpenState = _useState2[0],
+    setAccordianOpenState = _useState2[1];
   return /*#__PURE__*/jsxs("div", {
-    className: "neeto-themes-nano-section neeto-ui-border-gray-200 mb-4 space-y-3 border-b pb-4",
     "data-cy": "theme-".concat(hyphenate(title), "-properties"),
-    children: [title && /*#__PURE__*/jsx("div", {
-      className: "neeto-themes-nano-section__title flex items-center justify-between",
-      children: /*#__PURE__*/jsx(Typography, {
-        className: "min-w-0 flex-grow",
+    className: classnames("neeto-themes-nano-section neeto-ui-border-gray-200 border-b pt-2 transition-all duration-300 last:border-none", className, {
+      "pb-2": !accordianOpenState[name],
+      "pb-3": accordianOpenState[name]
+    }),
+    children: [title && /*#__PURE__*/jsxs("button", {
+      className: "neeto-themes-nano-section__title flex w-full cursor-pointer items-center justify-between px-1 py-2 focus:outline-none",
+      type: "button",
+      onClick: function onClick() {
+        return setAccordianOpenState(_objectSpread$5(_objectSpread$5({}, accordianOpenState), {}, _defineProperty({}, name, !accordianOpenState[name])));
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "min-w-0 flex-grow text-left",
+        component: "span",
         "data-cy": "theme-properties",
         lineHeight: "normal",
         style: "h4",
         weight: "semibold",
         children: title
-      })
+      }), /*#__PURE__*/jsx(Down, {
+        size: 20,
+        className: classnames("transition-all duration-300", {
+          "rotate-180": accordianOpenState[name]
+        })
+      })]
     }), children && /*#__PURE__*/jsx("div", {
-      className: "neeto-themes-nano-section__content w-full",
+      className: classnames("neeto-themes-nano-section__content w-full space-y-3 overflow-hidden px-1 transition-all duration-300", {
+        "neeto-themes-nano-section__content--closed": !accordianOpenState[name],
+        "neeto-themes-nano-section__content--open pb-1": accordianOpenState[name]
+      }),
       children: children
     })]
   });
@@ -315,33 +347,37 @@ var CustomCSS = function CustomCSS(_ref) {
   return /*#__PURE__*/jsx("div", {
     className: "neeto-themes-sidebar__custom-css-wrapper",
     id: "css-editor",
-    children: /*#__PURE__*/jsxs(Card$2, {
+    children: /*#__PURE__*/jsx(Card$2, {
+      name: "customcss",
       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",
-        children: /*#__PURE__*/jsx(Button, {
-          size: "small",
-          style: "secondary",
-          label: isCustomCssScreen ? t("neetoThemes.buttons.minimizeEditor") : t("neetoThemes.buttons.expandEditor"),
-          onClick: handleEditorToggle
-        })
-      }), /*#__PURE__*/jsx(Editor, {
-        language: "css",
-        options: {
-          scrollBeyondLastLine: false,
-          minimap: {
-            enabled: false
-          }
-        },
-        theme: "vs-dark",
-        value: customCSS.value,
-        className: classNames({
-          rounded: true,
-          "css-editor-height__expanded": isCustomCssScreen,
-          "css-editor-height__regular": !isCustomCssScreen
-        }),
-        onChange: handleChange
-      })]
+      children: /*#__PURE__*/jsxs("div", {
+        className: "w-full",
+        children: [/*#__PURE__*/jsx("div", {
+          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",
+            label: isCustomCssScreen ? t("neetoThemes.buttons.minimizeEditor") : t("neetoThemes.buttons.expandEditor"),
+            onClick: handleEditorToggle
+          })
+        }), /*#__PURE__*/jsx(Editor, {
+          language: "css",
+          theme: "vs-dark",
+          value: customCSS.value,
+          className: classnames({
+            rounded: true,
+            "css-editor-height__expanded": isCustomCssScreen,
+            "css-editor-height__regular": !isCustomCssScreen
+          }),
+          options: {
+            scrollBeyondLastLine: false,
+            minimap: {
+              enabled: false
+            }
+          },
+          onChange: handleChange
+        })]
+      })
     })
   });
 };
@@ -481,7 +517,7 @@ var SelectBlock = function SelectBlock(_ref) {
     options = _ref.options,
     onChange = _ref.onChange;
   return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center justify-between py-2 first:pt-0 last:pb-0",
+    className: "flex items-center justify-between",
     "data-cy": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
       "data-cy": "logo-field-labels",
@@ -576,7 +612,7 @@ var ImageBlock = function ImageBlock(_ref) {
     };
   }();
   return /*#__PURE__*/jsxs("div", {
-    className: "space-y-3 py-3 first:pt-0 last:pb-0",
+    className: "space-y-3",
     "data-cy": "theme-style-".concat(joinHyphenCase(label)),
     children: [label && /*#__PURE__*/jsx("div", {
       className: "flex items-center justify-between",
@@ -609,14 +645,17 @@ var ImageBlock = function ImageBlock(_ref) {
 };
 
 var Images = function Images(_ref) {
-  var attribute = _ref.attribute;
+  var attribute = _ref.attribute,
+    className = _ref.className;
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values;
   var key = snakeToCamelCase(attribute);
   var title = buildLabel(key, "image");
   var imageData = values[key];
   return /*#__PURE__*/jsx(Card$2, {
+    className: className,
     title: title,
+    name: "images",
     children: /*#__PURE__*/jsx(ImageBlock, {
       attribute: attribute,
       imageData: imageData,
@@ -629,7 +668,7 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
   var label = _ref.label,
     name = _ref.name;
   return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0",
+    className: "flex items-center justify-between gap-2",
     "data-cy": joinHyphenCase(label),
     children: [/*#__PURE__*/jsx(Typography, {
       "data-cy": "style-fields-labels",
@@ -641,12 +680,22 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
         var value = _ref2.field.value,
           setFieldValue = _ref2.form.setFieldValue;
         return /*#__PURE__*/jsxs("div", {
-          className: "flex items-center gap-3",
+          className: "neeto-ui-border-gray-300 neeto-themes-nano-alignment-block flex items-center border",
           children: [/*#__PURE__*/jsx(Button, {
+            className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-left",
             "data-cy": "alignment-left",
-            icon: LeftAlign,
-            size: "large",
+            size: "medium",
             style: value === "left" ? "primary" : "text",
+            icon: function icon() {
+              return /*#__PURE__*/jsx(LeftAlign, {
+                size: 20,
+                className: classnames({
+                  rounded: true,
+                  "neeto-ui-text-primary-800": value === "left",
+                  "neeto-ui-text-gray-600": value !== "left"
+                })
+              });
+            },
             tooltipProps: {
               content: "Left align",
               position: "bottom"
@@ -654,11 +703,23 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
             onClick: function onClick() {
               return setFieldValue(name, "left");
             }
+          }), /*#__PURE__*/jsx("div", {
+            className: "neeto-themes-nano-alignment-divider"
           }), /*#__PURE__*/jsx(Button, {
+            className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-center",
             "data-cy": "alignment-center",
-            icon: CenterAlign,
-            size: "large",
+            size: "medium",
             style: value === "center" ? "primary" : "text",
+            icon: function icon() {
+              return /*#__PURE__*/jsx(CenterAlign, {
+                size: 20,
+                className: classnames({
+                  rounded: true,
+                  "neeto-ui-text-primary-800": value === "center",
+                  "neeto-ui-text-gray-600": value !== "center"
+                })
+              });
+            },
             tooltipProps: {
               content: "Center align",
               position: "bottom"
@@ -680,7 +741,7 @@ var ColorBlock = function ColorBlock(_ref) {
     onChange = _ref.onChange,
     showTransparencyControl = _ref.showTransparencyControl;
   return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center justify-between py-2 first:pt-0 last:pb-0",
+    className: "flex items-center justify-between",
     "data-cy": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
       "data-cy": "style-fields-labels",
@@ -691,7 +752,7 @@ var ColorBlock = function ColorBlock(_ref) {
       onChange: onChange,
       showTransparencyControl: showTransparencyControl,
       showEyeDropper: true,
-      size: "large"
+      size: "medium"
     })]
   });
 };
@@ -706,7 +767,7 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
     options = _ref.options,
     onChange = _ref.onChange;
   return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center justify-between py-2 first:pt-0 last:pb-0",
+    className: "flex items-center justify-between",
     "data-cy": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
       "data-cy": "style-fields-labels",
@@ -741,7 +802,7 @@ var SliderBlock = function SliderBlock(_ref) {
     max = _ref.max,
     marks = _ref.marks;
   return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0",
+    className: "flex items-center justify-between gap-3",
     "data-cy": "theme-style-".concat(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
       "data-cy": "style-fields-labels",
@@ -774,13 +835,13 @@ var SwitchBlock = function SwitchBlock(_ref) {
   var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
   var doesHelpTextExist = i18n.exists(translationKey);
   return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center justify-between py-2 first:pt-0 last:pb-0",
+    className: "flex items-center justify-between",
     children: [/*#__PURE__*/jsxs("div", {
       className: "inline-flex items-center gap-4",
       children: [/*#__PURE__*/jsx(Typography, {
         "data-cy": "style-fields-labels",
         style: "body2",
-        className: classNames({
+        className: classnames({
           "w-32": doesHelpTextExist,
           "w-auto": !doesHelpTextExist
         }),
@@ -798,7 +859,8 @@ var SwitchBlock = function SwitchBlock(_ref) {
 };
 
 var Properties = function Properties(_ref) {
-  var onPropertiesChange = _ref.onPropertiesChange;
+  var onPropertiesChange = _ref.onPropertiesChange,
+    className = _ref.className;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useConfigStore = useConfigStore(function (store) {
@@ -856,6 +918,8 @@ var Properties = function Properties(_ref) {
     });
   }, [values]);
   return /*#__PURE__*/jsx(Card$2, {
+    className: className,
+    name: "style",
     title: t("neetoThemes.common.style"),
     children: values.properties.sort(function (a, b) {
       var order = function order(key) {
@@ -966,8 +1030,11 @@ var Properties = function Properties(_ref) {
 };
 
 var ThemeMeta = withT(function (_ref) {
-  var t = _ref.t;
+  var t = _ref.t,
+    className = _ref.className;
   return /*#__PURE__*/jsx(Card$2, {
+    className: className,
+    name: "name",
     title: t("neetoThemes.common.name"),
     children: /*#__PURE__*/jsx(Input, {
       autoFocus: true,
@@ -1053,37 +1120,32 @@ var Customize = function Customize(_ref) {
       return /*#__PURE__*/jsxs("div", {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxs("div", {
-          className: "neeto-themes-sidebar__scroll-content flex flex-grow flex-col px-4 py-2 lg:px-5 xl:px-6",
-          children: [/*#__PURE__*/jsx("div", {
-            className: classNames({
+          className: "neeto-themes-sidebar__scroll-content flex flex-grow flex-col px-4 pb-4 lg:px-5",
+          children: [/*#__PURE__*/jsx(ThemeMeta, {
+            className: classnames({
               hidden: isCustomCssScreen
-            }),
-            children: /*#__PURE__*/jsx(ThemeMeta, {})
-          }), /*#__PURE__*/jsx("div", {
-            className: classNames({
-              hidden: isCustomCssScreen
-            }),
-            children: /*#__PURE__*/jsx(Properties, {
-              onPropertiesChange: onPropertiesChange
             })
-          }), /*#__PURE__*/jsx("div", {
-            className: classNames("flex flex-col gap-6", {
+          }), /*#__PURE__*/jsx(Properties, {
+            onPropertiesChange: onPropertiesChange,
+            className: classnames({
               hidden: isCustomCssScreen
-            }),
-            children: filterBy({
-              kind: "image"
-            }, themePropertiesSchema).map(function (_ref5) {
-              var key = _ref5.key;
-              return /*#__PURE__*/jsx(Images, {
-                attribute: key
-              }, key);
             })
+          }), filterBy({
+            kind: "image"
+          }, themePropertiesSchema).map(function (_ref5) {
+            var key = _ref5.key;
+            return /*#__PURE__*/jsx(Images, {
+              attribute: key,
+              className: classnames({
+                hidden: isCustomCssScreen
+              })
+            }, key);
           }), /*#__PURE__*/jsx(CustomCSS, {
             currentScreen: currentScreen,
             onEditCSSClick: onEditCSSClick
           })]
         }), /*#__PURE__*/jsxs("div", {
-          className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 left-0 right-0 flex justify-end gap-x-2 px-4 py-6",
+          className: "neeto-ui-bg-white neeto-ui-shadow-s sticky bottom-0 left-0 right-0 flex justify-end gap-x-2 px-4 py-6 lg:px-5 xl:px-6",
           children: [/*#__PURE__*/jsx(Button, {
             "data-cy": "reset-button",
             disabled: !dirty || isSubmitting,
@@ -1249,7 +1311,7 @@ var Thumbnail = function Thumbnail(_ref) {
     }, themePropertiesSchema)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
   }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
   return /*#__PURE__*/jsx("div", {
-    className: classNames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
+    className: classnames("neeto-themes-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-themes-theme-thumbnail--active": active,
       "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
@@ -1327,7 +1389,7 @@ var Card = function Card(_ref) {
     "data-cy": active ? "active-theme-card" : "theme-card",
     id: theme.id,
     children: /*#__PURE__*/jsxs("div", {
-      className: classNames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg cursor-pointer border transition-all duration-300 ease-in-out", {
+      className: classnames("neeto-themes-theme-thumbnail neeto-ui-rounded-lg cursor-pointer border transition-all duration-300 ease-in-out", {
         "neeto-ui-border-gray-200": !active,
         "neeto-themes-theme-thumbnail--active": active,
         "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
@@ -1344,7 +1406,7 @@ var Card = function Card(_ref) {
             className: "flex-shrink-0",
             "data-cy": "active-theme-label"
           }) : /*#__PURE__*/jsx("div", {
-            className: classNames({
+            className: classnames({
               hidden: !isPreviewing,
               "group-hover:block": true
             }),
@@ -1506,13 +1568,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 +1636,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 +1712,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 +1839,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);
+        }
+      })]
     })]
   });
 };