@bigbinary/neeto-themes-frontend 4.0.29 → 4.0.31

package/dist/cjs/v2/NeetoThemesBuilder.js

@@ -6,47 +6,34 @@ var neetoAtoms = require('@bigbinary/neeto-atoms');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
 var reactI18next = require('react-i18next');
-var useGlobalThemesApi = require('../../useGlobalThemesApi-DOH4EK5Q.js');
-var useExpandedSection = require('../../useExpandedSection-GpzbAxmE.js');
+var useGlobalThemesApi = require('../../useGlobalThemesApi-CuO0V6wS.js');
+var useExpandedSection = require('../../useExpandedSection-BTBI4UqP.js');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classnames = require('classnames');
+var lucideReact = require('lucide-react');
 var utils$1 = require('@bigbinary/neeto-commons-frontend/v2/utils');
-var Collapse = require('@bigbinary/neeto-icons/Collapse');
 var reactRouterDom = require('react-router-dom');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var formik$1 = require('@bigbinary/neeto-atoms/formik');
-var Close = require('@bigbinary/neeto-icons/Close');
 var ramda = require('ramda');
 var i18n = require('i18next');
 var yup = require('yup');
 var formik = require('formik');
-var utils = require('../../index-BUeeI0XI.js');
+var utils = require('../../index-CZdpMMBb.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Right = require('@bigbinary/neeto-icons/Right');
-var Left = require('@bigbinary/neeto-icons/Left');
 var HelpPopover = require('@bigbinary/neeto-molecules/v2/HelpPopover');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var reactDom = require('react-dom');
-var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
-var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
-var antd = require('antd');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/v2/ImageUploader');
 var Search = require('@bigbinary/neeto-molecules/v2/Search');
-var AddImage = require('@bigbinary/neeto-icons/AddImage');
-var CodeBlock = require('@bigbinary/neeto-icons/CodeBlock');
-var ColorPicker = require('@bigbinary/neeto-icons/ColorPicker');
 var MoreDropdown = require('@bigbinary/neeto-molecules/v2/MoreDropdown');
-var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
-var RightArrow = require('@bigbinary/neeto-icons/RightArrow');
-var Search$1 = require('@bigbinary/neeto-icons/Search');
 require('@tanstack/react-query');
 require('axios');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('zustand');
-require('@bigbinary/neetoui/Toastr');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -67,6 +54,9 @@ function _interopNamespaceDefault(e) {
 
 var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
 
+var css = ":root{--themes-sidebar-expanded:520px;--themes-sidebar-width-xl:340px;--themes-sidebar-width-lg:320px;--themes-sidebar-width-sm:280px;--themes-sidebar-header-height:120px;--builder-header-height:65px}.neeto-themes__wrapper{display:flex;height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));width:100%}.neeto-themes__wrapper .neeto-themes-sidebar{background-color:var(--background);height:100%;inset-inline-start:0;padding-top:1.5rem;position:fixed;top:0;transition:none;width:100%;z-index:102}.neeto-themes__wrapper .neeto-themes-sidebar--expanded{max-width:100%;width:520px!important;width:var(--themes-sidebar-expanded)!important}@media screen and (min-width:576px){.neeto-themes__wrapper .neeto-themes-sidebar{width:280px;width:var(--themes-sidebar-width-sm)}}@media screen and (min-width:768px){.neeto-themes__wrapper .neeto-themes-sidebar{height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));padding-top:0;position:relative;z-index:auto}}@media screen and (min-width:1024px){.neeto-themes__wrapper .neeto-themes-sidebar{width:320px;width:var(--themes-sidebar-width-lg)}}@media screen and (min-width:1280px){.neeto-themes__wrapper .neeto-themes-sidebar{width:340px;width:var(--themes-sidebar-width-xl)}}.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:6.8125rem}}@media screen and (max-width:576px){.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__toggler{inset-inline-end:auto;inset-inline-start:.5rem}}.neeto-themes__wrapper .neeto-themes-sidebar--collapsed .neeto-themes-sidebar__header{display:none}.neeto-themes__wrapper .neeto-themes-sidebar .neeto-themes-sidebar__scroll{display:flex;flex-direction:column;height:calc(100vh - 120px);height:calc(var(--viewport-height, 100vh) - var(--themes-sidebar-header-height));overflow-y:auto}.neeto-themes__wrapper .css-editor-height__expanded{height:calc(100vh - 300px);height:calc(var(--viewport-height, 100vh) - 300px)}.neeto-themes__wrapper .css-editor-height__regular{height:384px}.neeto-themes__wrapper .neeto-themes-preview__wrapper{flex-grow:1;height:calc(100vh - 65px);height:calc(var(--viewport-height, 100vh) - var(--builder-header-height));position:relative}.neeto-themes-theme-thumbnail:hover{box-shadow:0 0 0 2px var(--border)}.neeto-themes-theme-thumbnail--preview-active{border-color:var(--muted-foreground)!important;box-shadow:none!important}.neeto-themes-theme-thumbnail--preview-active .neeto-themes-theme-thumbnail__overlay{opacity:.6}.neeto-themes-theme-thumbnail--active{border-color:var(--primary)!important;box-shadow:none!important}.neeto-themes-theme-thumbnail--active .neeto-themes-theme-thumbnail__overlay{opacity:.6}.neeto-themes-theme-thumbnail--highlight-active{border-color:var(--input)!important;box-shadow:none!important}.neeto-themes-theme-thumbnail__preview-btn--disabled{box-shadow:inset 0 0 0 1px var(--border);color:var(--muted-foreground)}.neeto-themes-sidebar__custom-css-editor-header{background-color:#1e1e1e;border-start-end-radius:var(--radius-lg);border-start-start-radius:var(--radius-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-end-end-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg)}.neeto-themes-sidebar__custom-css-wrapper .neeto-themes-nano-section{border-bottom:0!important}.neeto-themes-sidebar__backdrop{background-color:color-mix(in oklab,var(--foreground) 40%,transparent);display:none;height:100%;inset-inline-start: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;inset-inline-start:calc(100% + .5rem);position:absolute;top:.5rem;transition:color .3s ease-in-out;z-index:1}@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{inset-inline-end:1.5rem;inset-inline-start:auto}}.neeto-themes-nano-alignment-button{padding-inline:.75rem!important}.neeto-themes-nano-alignment-button__alignment-left{border-end-end-radius:0!important;border-start-end-radius:0!important}.neeto-themes-nano-alignment-button__alignment-center{border-end-start-radius:0!important;border-start-start-radius:0!important}.neeto-themes-nano-section__content--open{max-height:1500px;opacity:1;padding-top:.25rem;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 color-mix(in oklab,var(--primary) 15%,transparent)}.neeto-themes-dependent-property{margin-inline-start:2.5rem;position:relative;width:calc(100% - 2.5rem)}.neeto-themes-dependent-property__connector{inset-inline-start:-2rem;pointer-events:none;position:absolute;top:-1.75rem}.neeto-themes-flip-animating{transition:transform .9s cubic-bezier(.22,1,.36,1);will-change:transform}.neeto-themes-default-theme-toggle [role=switch]{opacity:1}.neeto-themes-default-theme-toggle [role=switch][aria-checked=true]{background-color:var(--primary)}.neeto-themes-default-theme-toggle [role=switch][aria-checked=false]{background-color:var(--input);box-shadow:inset 0 0 0 1px var(--border)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2Fic3RyYWN0cy92YXJpYWJsZXMuY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvdjIvY29tcG9uZW50cy90aGVtZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQ0UsK0JBQWdDLENBQ2hDLCtCQUFnQyxDQUNoQywrQkFBZ0MsQ0FDaEMsK0JBQWdDLENBQ2hDLG9DQUFxQyxDQUNyQyw0QkFDRixDQ1BBLHVCQUVFLFlBQWEsQ0FDYix5QkFBMEUsQ0FBMUUseUVBQTBFLENBRjFFLFVBR0YsQ0FFQSw2Q0FHRSxrQ0FBbUMsQ0FEbkMsV0FBWSxDQUlaLG9CQUFxQixDQUdyQixrQkFBbUIsQ0FMbkIsY0FBZSxDQUNmLEtBQU0sQ0FFTixlQUFnQixDQU5oQixVQUFXLENBT1gsV0FFRixDQUVBLHVEQUVFLGNBQWUsQ0FEZixxQkFBZ0QsQ0FBaEQsOENBRUYsQ0FFQSxvQ0FDRSw2Q0FDRSxXQUFxQyxDQUFyQyxvQ0FDRixDQUNGLENBRUEsb0NBQ0UsNkNBT0UseUJBQTBFLENBQTFFLHlFQUEwRSxDQU4xRSxhQUFjLENBQ2QsaUJBQWtCLENBSWxCLFlBRUYsQ0FDRixDQUVBLHFDQUNFLDZDQUNFLFdBQXFDLENBQXJDLG9DQUNGLENBQ0YsQ0FFQSxxQ0FDRSw2Q0FDRSxXQUFxQyxDQUFyQyxvQ0FDRixDQUNGLENBRUEsd0RBRUUsV0FBZSxDQUNmLFdBQWUsQ0FGZixPQUdGLENBRUEsdUZBR0UsbUJBQ0YsQ0FFQSxvQ0FDRSx1RkFHRSxhQUNGLENBQ0YsQ0FFQSxvQ0FDRSx1RkFHRSxxQkFBc0IsQ0FDdEIsd0JBQ0YsQ0FDRixDQUVBLHNGQUdFLFlBQ0YsQ0FFQSwyRUFLRSxZQUFhLENBQ2IscUJBQXNCLENBTHRCLDBCQUVDLENBRkQsZ0ZBRUMsQ0FDRCxlQUdGLENBRUEsb0RBQ0UsMEJBQW1ELENBQW5ELGtEQUNGLENBRUEsbURBQ0UsWUFDRixDQUVBLHNEQUdFLFdBQVksQ0FEWix5QkFBMEUsQ0FBMUUseUVBQTBFLENBRDFFLGlCQUdGLENBRUEsb0NBQ0Usa0NBQ0YsQ0FFQSw4Q0FDRSw4Q0FBZ0QsQ0FDaEQseUJBQ0YsQ0FFQSxxRkFFRSxVQUNGLENBRUEsc0NBQ0UscUNBQXVDLENBQ3ZDLHlCQUNGLENBRUEsNkVBQ0UsVUFDRixDQUVBLGdEQUNFLG1DQUFxQyxDQUNyQyx5QkFDRixDQUVBLHFEQUVFLHdDQUF5QyxDQUR6Qyw2QkFFRixDQUVBLGdEQUVFLHdCQUF5QixDQUV6Qix3Q0FBeUMsQ0FEekMsMENBQTJDLENBRjNDLFlBSUYsQ0FFQSxvQ0FDRSxnREFDRSxZQUNGLENBQ0YsQ0FFQSwyRUFHRSxzQ0FBdUMsQ0FEdkMsd0NBRUYsQ0FFQSxxRUFDRSx5QkFDRixDQUVBLGdDQU1FLHNFQUF5RSxDQUN6RSxZQUFhLENBRmIsV0FBWSxDQUZaLG9CQUFxQixDQUZyQixjQUFlLENBQ2YsS0FBTSxDQU1OLGlCQUFrQixDQUpsQixVQUFXLENBS1gsV0FDRixDQUVBLG9DQUNFLGdDQUNFLGFBQWMsQ0FDZCxrQkFDRixDQUNGLENBRUEsK0JBT0UsYUFBYyxDQUpkLHFDQUF1QyxDQUZ2QyxpQkFBa0IsQ0FDbEIsU0FBVyxDQU1YLGdDQUFrQyxDQUZsQyxTQUdGLENBRUEscUNBQ0UsK0JBQ0UsU0FBVSxDQUNWLG1CQUNGLENBQ0YsQ0FFQSxvQ0FDRSwrQkFFRSx1QkFBd0IsQ0FEeEIsdUJBRUYsQ0FDRixDQUVBLG9DQUNFLCtCQUNGLENBRUEsb0RBRUUsaUNBQXFDLENBRHJDLG1DQUVGLENBRUEsc0RBRUUsbUNBQXVDLENBRHZDLHFDQUVGLENBRUEsMENBQ0UsaUJBQWtCLENBQ2xCLFNBQVUsQ0FFVixrQkFBb0IsQ0FEcEIsa0JBRUYsQ0FFQSw0Q0FDRSxZQUFlLENBQ2YsU0FBVSxDQUNWLGlCQUNGLENBRUEsZ0RBQ0UsdUVBQ0YsQ0FFQSxpQ0FHRSwwQkFBMkIsQ0FGM0IsaUJBQWtCLENBQ2xCLHlCQUVGLENBRUEsNENBR0Usd0JBQXlCLENBQ3pCLG1CQUFvQixDQUhwQixpQkFBa0IsQ0FDbEIsWUFHRixDQUVBLDZCQUNFLGtEQUEwRCxDQUMxRCxxQkFDRixDQVVBLGlEQUNFLFNBQ0YsQ0FFQSxvRUFDRSwrQkFDRixDQUVBLHFFQUNFLDZCQUE4QixDQUM5Qix3Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbIjpyb290IHtcbiAgLS10aGVtZXMtc2lkZWJhci1leHBhbmRlZDogNTIwcHg7XG4gIC0tdGhlbWVzLXNpZGViYXItd2lkdGgteGw6IDM0MHB4O1xuICAtLXRoZW1lcy1zaWRlYmFyLXdpZHRoLWxnOiAzMjBweDtcbiAgLS10aGVtZXMtc2lkZWJhci13aWR0aC1zbTogMjgwcHg7XG4gIC0tdGhlbWVzLXNpZGViYXItaGVhZGVyLWhlaWdodDogMTIwcHg7XG4gIC0tYnVpbGRlci1oZWFkZXItaGVpZ2h0OiA2NXB4O1xufVxuIiwiLm5lZXRvLXRoZW1lc19fd3JhcHBlciB7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSB2YXIoLS1idWlsZGVyLWhlYWRlci1oZWlnaHQpKTtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kKTtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIGluc2V0LWlubGluZS1zdGFydDogMDtcbiAgdHJhbnNpdGlvbjogbm9uZTtcbiAgei1pbmRleDogMTAyO1xuICBwYWRkaW5nLXRvcDogMS41cmVtO1xufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhci0tZXhwYW5kZWQge1xuICB3aWR0aDogdmFyKC0tdGhlbWVzLXNpZGViYXItZXhwYW5kZWQpICFpbXBvcnRhbnQ7XG4gIG1heC13aWR0aDogMTAwJTtcbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTc2cHgpIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHdpZHRoOiB2YXIoLS10aGVtZXMtc2lkZWJhci13aWR0aC1zbSk7XG4gIH1cbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNzY4cHgpIHtcbiAgLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIge1xuICAgIHBhZGRpbmctdG9wOiAwO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAvKiBUaGUgei1pbmRleCBhYm92ZSBpcyBvbmx5IG5lZWRlZCBmb3IgdGhlIG1vYmlsZSBmaXhlZCBvdmVybGF5LiBPbiBkZXNrdG9wXG4gICAgICAgaXQgd291bGQgY3JlYXRlIGEgc3RhY2tpbmcgY29udGV4dCB0aGF0IHNpdHMgYWJvdmUgcG9ydGFsbGVkIHRvb2x0aXBzL1xuICAgICAgIHBvcG92ZXJzICh6LTUwKSwgaGlkaW5nIHRoZW0gYmVoaW5kIHRoZSBzaWRlYmFyIOKAlCBzbyByZXNldCBpdCBoZXJlLiAqL1xuICAgIHotaW5kZXg6IGF1dG87XG4gICAgaGVpZ2h0OiBjYWxjKHZhcigtLXZpZXdwb3J0LWhlaWdodCwgMTAwdmgpIC0gdmFyKC0tYnVpbGRlci1oZWFkZXItaGVpZ2h0KSk7XG4gIH1cbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyIHtcbiAgICB3aWR0aDogdmFyKC0tdGhlbWVzLXNpZGViYXItd2lkdGgtbGcpO1xuICB9XG59XG5cbkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDEyODBweCkge1xuICAubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhciB7XG4gICAgd2lkdGg6IHZhcigtLXRoZW1lcy1zaWRlYmFyLXdpZHRoLXhsKTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5uZWV0by10aGVtZXMtc2lkZWJhci0tY29sbGFwc2VkIHtcbiAgd2lkdGg6IDByZW07XG4gIG1heC13aWR0aDogMHJlbTtcbiAgbWluLXdpZHRoOiAwcmVtO1xufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyXG4gIC5uZWV0by10aGVtZXMtc2lkZWJhci0tY29sbGFwc2VkXG4gIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gIHRyYW5zZm9ybTogc2NhbGUoLTEpO1xufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAubmVldG8tdGhlbWVzX193cmFwcGVyXG4gICAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyLS1jb2xsYXBzZWRcbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXJfX3RvZ2dsZXIge1xuICAgIHRvcDogNi44MTI1cmVtO1xuICB9XG59XG5cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU3NnB4KSB7XG4gIC5uZWV0by10aGVtZXNfX3dyYXBwZXJcbiAgICAubmVldG8tdGhlbWVzLXNpZGViYXItLWNvbGxhcHNlZFxuICAgIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gICAgaW5zZXQtaW5saW5lLWVuZDogYXV0bztcbiAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDAuNXJlbTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyXG4gIC5uZWV0by10aGVtZXMtc2lkZWJhci0tY29sbGFwc2VkXG4gIC5uZWV0by10aGVtZXMtc2lkZWJhcl9faGVhZGVyIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXNpZGViYXIgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19zY3JvbGwge1xuICBoZWlnaHQ6IGNhbGMoXG4gICAgdmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSB2YXIoLS10aGVtZXMtc2lkZWJhci1oZWFkZXItaGVpZ2h0KVxuICApO1xuICBvdmVyZmxvdy15OiBhdXRvO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG4ubmVldG8tdGhlbWVzX193cmFwcGVyIC5jc3MtZWRpdG9yLWhlaWdodF9fZXhwYW5kZWQge1xuICBoZWlnaHQ6IGNhbGModmFyKC0tdmlld3BvcnQtaGVpZ2h0LCAxMDB2aCkgLSAzMDBweCk7XG59XG5cbi5uZWV0by10aGVtZXNfX3dyYXBwZXIgLmNzcy1lZGl0b3ItaGVpZ2h0X19yZWd1bGFyIHtcbiAgaGVpZ2h0OiAzODRweDtcbn1cblxuLm5lZXRvLXRoZW1lc19fd3JhcHBlciAubmVldG8tdGhlbWVzLXByZXZpZXdfX3dyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogY2FsYyh2YXIoLS12aWV3cG9ydC1oZWlnaHQsIDEwMHZoKSAtIHZhcigtLWJ1aWxkZXItaGVhZGVyLWhlaWdodCkpO1xuICBmbGV4LWdyb3c6IDE7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsOmhvdmVyIHtcbiAgYm94LXNoYWRvdzogMHB4IDBweCAwcHggMnB4IHZhcigtLWJvcmRlcik7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1wcmV2aWV3LWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tbXV0ZWQtZm9yZWdyb3VuZCkgIWltcG9ydGFudDtcbiAgYm94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbC0tcHJldmlldy1hY3RpdmVcbiAgLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWxfX292ZXJsYXkge1xuICBvcGFjaXR5OiAwLjY7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsLS1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHZhcigtLXByaW1hcnkpICFpbXBvcnRhbnQ7XG4gIGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWFjdGl2ZSAubmVldG8tdGhlbWVzLXRoZW1lLXRodW1ibmFpbF9fb3ZlcmxheSB7XG4gIG9wYWNpdHk6IDAuNjtcbn1cblxuLm5lZXRvLXRoZW1lcy10aGVtZS10aHVtYm5haWwtLWhpZ2hsaWdodC1hY3RpdmUge1xuICBib3JkZXItY29sb3I6IHZhcigtLWlucHV0KSAhaW1wb3J0YW50O1xuICBib3gtc2hhZG93OiBub25lICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtdGhlbWUtdGh1bWJuYWlsX19wcmV2aWV3LWJ0bi0tZGlzYWJsZWQge1xuICBjb2xvcjogdmFyKC0tbXV0ZWQtZm9yZWdyb3VuZCk7XG4gIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCB2YXIoLS1ib3JkZXIpO1xufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3MtZWRpdG9yLWhlYWRlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJhY2tncm91bmQtY29sb3I6ICMxZTFlMWU7XG4gIGJvcmRlci1zdGFydC1zdGFydC1yYWRpdXM6IHZhcigtLXJhZGl1cy1sZyk7XG4gIGJvcmRlci1zdGFydC1lbmQtcmFkaXVzOiB2YXIoLS1yYWRpdXMtbGcpO1xufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1NzZweCkge1xuICAubmVldG8tdGhlbWVzLXNpZGViYXJfX2N1c3RvbS1jc3MtZWRpdG9yLWhlYWRlciB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXIgLm92ZXJmbG93LWd1YXJkLFxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyIC5tb25hY28tZWRpdG9yIHtcbiAgYm9yZGVyLWVuZC1zdGFydC1yYWRpdXM6IHZhcigtLXJhZGl1cy1sZyk7XG4gIGJvcmRlci1lbmQtZW5kLXJhZGl1czogdmFyKC0tcmFkaXVzLWxnKTtcbn1cblxuLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19jdXN0b20tY3NzLXdyYXBwZXIgLm5lZXRvLXRoZW1lcy1uYW5vLXNlY3Rpb24ge1xuICBib3JkZXItYm90dG9tOiAwICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtc2lkZWJhcl9fYmFja2Ryb3Age1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogMDtcbiAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBjb2xvci1taXgoaW4gb2tsYWIsIHZhcigtLWZvcmVncm91bmQpIDQwJSwgdHJhbnNwYXJlbnQpO1xuICBkaXNwbGF5OiBub25lO1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIHotaW5kZXg6IDEwMTtcbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY3cHgpIHtcbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX19iYWNrZHJvcCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLXNpZGViYXJfX3RvZ2dsZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMC41cmVtO1xuICBpbnNldC1pbmxpbmUtc3RhcnQ6IGNhbGMoMTAwJSArIDAuNXJlbSk7XG4gIC8qIEtlZXAgdGhlIHRvZ2dsZXIgYWJvdmUgdGhlIHByZXZpZXcgcGFuZSBub3cgdGhhdCB0aGUgZGVza3RvcCBzaWRlYmFyIG5vXG4gICAgIGxvbmdlciBsaWZ0cyBpdHMgY2hpbGRyZW4gdmlhIHotaW5kZXguICovXG4gIHotaW5kZXg6IDE7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICB0cmFuc2l0aW9uOiBjb2xvciAwLjNzIGVhc2UtaW4tb3V0O1xufVxuXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiAxMDI0cHgpIHtcbiAgLm5lZXRvLXRoZW1lcy1zaWRlYmFyX190b2dnbGVyIHtcbiAgICBvcGFjaXR5OiAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG59XG5cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDU3NnB4KSB7XG4gIC5uZWV0by10aGVtZXMtc2lkZWJhcl9fdG9nZ2xlciB7XG4gICAgaW5zZXQtaW5saW5lLXN0YXJ0OiBhdXRvO1xuICAgIGluc2V0LWlubGluZS1lbmQ6IDEuNXJlbTtcbiAgfVxufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tYWxpZ25tZW50LWJ1dHRvbiB7XG4gIHBhZGRpbmctaW5saW5lOiAwLjc1cmVtICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1hbGlnbm1lbnQtYnV0dG9uX19hbGlnbm1lbnQtbGVmdCB7XG4gIGJvcmRlci1zdGFydC1lbmQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbiAgYm9yZGVyLWVuZC1lbmQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLWFsaWdubWVudC1idXR0b25fX2FsaWdubWVudC1jZW50ZXIge1xuICBib3JkZXItc3RhcnQtc3RhcnQtcmFkaXVzOiAwcHggIWltcG9ydGFudDtcbiAgYm9yZGVyLWVuZC1zdGFydC1yYWRpdXM6IDBweCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tdGhlbWVzLW5hbm8tc2VjdGlvbl9fY29udGVudC0tb3BlbiB7XG4gIG1heC1oZWlnaHQ6IDE1MDBweDtcbiAgb3BhY2l0eTogMTtcbiAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgcGFkZGluZy10b3A6IDAuMjVyZW07XG59XG5cbi5uZWV0by10aGVtZXMtbmFuby1zZWN0aW9uX19jb250ZW50LS1jbG9zZWQge1xuICBtYXgtaGVpZ2h0OiAwcHg7XG4gIG9wYWNpdHk6IDA7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLm5lZXRvLXRoZW1lcy1uYW5vLXNlY3Rpb25fX3RpdGxlOmZvY3VzLXZpc2libGUge1xuICBib3gtc2hhZG93OiAwIDAgMCAzcHggY29sb3ItbWl4KGluIG9rbGFiLCB2YXIoLS1wcmltYXJ5KSAxNSUsIHRyYW5zcGFyZW50KTtcbn1cblxuLm5lZXRvLXRoZW1lcy1kZXBlbmRlbnQtcHJvcGVydHkge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSAyLjVyZW0pO1xuICBtYXJnaW4taW5saW5lLXN0YXJ0OiAyLjVyZW07XG59XG5cbi5uZWV0by10aGVtZXMtZGVwZW5kZW50LXByb3BlcnR5X19jb25uZWN0b3Ige1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogLTEuNzVyZW07XG4gIGluc2V0LWlubGluZS1zdGFydDogLTJyZW07XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xufVxuXG4ubmVldG8tdGhlbWVzLWZsaXAtYW5pbWF0aW5nIHtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDkwMG1zIGN1YmljLWJlemllcigwLjIyLCAxLCAwLjM2LCAxKTtcbiAgd2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcbn1cblxuLyogVGhlIFwiU2V0IGFzIGRlZmF1bHQgdGhlbWVcIiBzd2l0Y2ggaXMgd3JhcHBlZCBpbiBhIFRvb2x0aXAuIFRoZSB0b29sdGlwXG4gICB0cmlnZ2VyIG1lcmdlcyBpdHMgcHJvcHMgb250byB0aGUgc3dpdGNoIGJ1dHRvbiwgY2xvYmJlcmluZyB0aGUgc3dpdGNoJ3Mgb3duXG4gICBkYXRhLXNsb3QvZGF0YS1zdGF0ZSwgc28gdGhlIGF0b21zIGBkYXRhLWNoZWNrZWQ6YmctcHJpbWFyeWAgL1xuICAgYGRhdGEtdW5jaGVja2VkOmJnLWlucHV0YCB0cmFjayBjbGFzc2VzIG5ldmVyIG1hdGNoIOKAlCB0aGUgdHJhY2sgcmVuZGVycyB3aXRoXG4gICBubyBiYWNrZ3JvdW5kIGFuZCBpcyBpbnZpc2libGUuIFRoZSBidXR0b24gZG9lcyBrZWVwIGEgcmVsaWFibGVcbiAgIGBhcmlhLWNoZWNrZWRgLCBzbyBkcml2ZSB0aGUgdHJhY2sgY29sb3VyIGZyb20gdGhhdCBpbnN0ZWFkLiBBbHNvIGZvcmNlIGZ1bGxcbiAgIG9wYWNpdHkgKHRoZSBkaXNhYmxlZCBzdGF0ZSBvdGhlcndpc2UgZmFkZXMgaXQgdG8gNTAlKSBhbmQgb3V0bGluZSB0aGVcbiAgIG9mZi1zdGF0ZSBzbyBpdCBzdGF5cyB2aXNpYmxlIG9uIHRoZSBjYXJkJ3Mgd2hpdGUgYmFja2dyb3VuZC4gKi9cbi5uZWV0by10aGVtZXMtZGVmYXVsdC10aGVtZS10b2dnbGUgW3JvbGU9XCJzd2l0Y2hcIl0ge1xuICBvcGFjaXR5OiAxO1xufVxuXG4ubmVldG8tdGhlbWVzLWRlZmF1bHQtdGhlbWUtdG9nZ2xlIFtyb2xlPVwic3dpdGNoXCJdW2FyaWEtY2hlY2tlZD1cInRydWVcIl0ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5KTtcbn1cblxuLm5lZXRvLXRoZW1lcy1kZWZhdWx0LXRoZW1lLXRvZ2dsZSBbcm9sZT1cInN3aXRjaFwiXVthcmlhLWNoZWNrZWQ9XCJmYWxzZVwiXSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWlucHV0KTtcbiAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHZhcigtLWJvcmRlcik7XG59XG4iXX0= */";
+useGlobalThemesApi.n(css,{});
+
 var getImageFromUrl = function getImageFromUrl(source) {
   var image = new Image();
   image.crossOrigin = "anonymous";
@@ -272,8 +262,8 @@ var Editor = function Editor(_ref) {
   });
 };
 
-function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(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,
@@ -287,10 +277,13 @@ var Card$2 = function Card(_ref) {
     setExpandedSection = _useExpandedSection.setExpandedSection;
   var isOpen = expandedSection === name;
   var isRTL = i18n.dir() === "rtl";
-  var ToggleIcon = isRTL ? Left : Right;
+  var ToggleIcon = isRTL ? lucideReact.ChevronLeft : lucideReact.ChevronRight;
   var handleToggle = function handleToggle() {
     return setExpandedSection(isOpen ? "" : name);
   };
+  var sectionId = name || neetoCist.hyphenate(title);
+  var triggerId = "neeto-themes-section-".concat(sectionId, "-trigger");
+  var contentId = "neeto-themes-section-".concat(sectionId, "-content");
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     "data-testid": "theme-".concat(neetoCist.hyphenate(title), "-properties"),
     className: classnames("neeto-themes-nano-section border-border border-b pt-2 transition-all duration-300 last:border-none", className, {
@@ -298,29 +291,35 @@ var Card$2 = function Card(_ref) {
       "pb-3": isOpen
     }),
     children: [title && /*#__PURE__*/jsxRuntime.jsxs("button", {
-      className: "neeto-themes-nano-section__title flex w-full cursor-pointer items-center justify-between px-1 py-2 focus:outline-none",
+      "aria-controls": contentId,
+      "aria-expanded": isOpen,
+      className: "neeto-themes-nano-section__title flex w-full cursor-pointer items-center justify-between rounded-md px-1 py-2 focus:outline-none",
+      id: triggerId,
       type: "button",
       onClick: handleToggle,
       children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
         asChild: true,
         className: "flex min-w-0 grow items-center gap-2 text-start",
         "data-testid": "theme-properties",
-        variant: "h4",
-        weight: "semibold",
+        variant: "h6",
         children: /*#__PURE__*/jsxRuntime.jsxs("span", {
           children: [title, required && /*#__PURE__*/jsxRuntime.jsx("span", {
             "aria-hidden": true,
             className: "-ms-1",
             children: "*"
-          }), neetoCist.isPresent(helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread$4({}, helpPopoverProps))]
+          }), neetoCist.isPresent(helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread$3({}, helpPopoverProps))]
         })
       }), /*#__PURE__*/jsxRuntime.jsx(ToggleIcon, {
+        "aria-hidden": true,
         size: 20,
         className: classnames("transition-all duration-300", {
           "rotate-90 rtl:-rotate-90": isOpen
         })
       })]
     }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
+      "aria-labelledby": title ? triggerId : undefined,
+      id: contentId,
+      role: title ? "region" : undefined,
       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": !isOpen,
         "neeto-themes-nano-section__content--open pb-1": isOpen
@@ -493,6 +492,7 @@ var CustomCSS = function CustomCSS(_ref) {
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "px-1 py-2",
         children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          color: "muted",
           variant: "body2",
           children: t("neetoThemes.common.proFeature.customCSS.description")
         })
@@ -567,8 +567,8 @@ var LogoPosition = function LogoPosition() {
   });
 };
 
-function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // Capitalizes the first letter of the displayed label while keeping the
 // underlying value untouched (position values like "top left" are used
@@ -595,7 +595,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
         dependsOn = _ref.dependsOn;
       switch (kind) {
         case "text_input":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: defaultValue || "",
             kind: "text_input",
             key: key,
@@ -604,7 +604,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "color":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: defaultValue,
             kind: "color",
             key: key,
@@ -613,7 +613,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "font_family":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
             kind: "font_family",
             key: key,
@@ -622,7 +622,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "overlay_opacity":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: 0,
             kind: "overlay_opacity",
             key: key,
@@ -631,7 +631,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "slider":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: 0,
             kind: "slider",
             key: key,
@@ -640,7 +640,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "radius":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: defaultValue,
             kind: "radius",
             key: key,
@@ -649,7 +649,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "boolean":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: String(defaultValue),
             kind: "boolean",
             key: key,
@@ -658,7 +658,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "order_selector":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: defaultValue,
             kind: "order_selector",
             key: key,
@@ -667,7 +667,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "alignment_block":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: defaultValue,
             kind: "alignment_block",
             key: key,
@@ -676,7 +676,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "custom_css":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: defaultValue,
             kind: "custom_css",
             key: key,
@@ -685,7 +685,7 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             order: order
           });
         case "logo_position":
-          return _objectSpread$3({
+          return _objectSpread$2({
             value: defaultValue,
             kind: "logo_position",
             key: key,
@@ -774,17 +774,17 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
         var value = _ref2.field.value,
           setFieldValue = _ref2.form.setFieldValue;
         return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "border-input neeto-themes-nano-alignment-block flex items-center border",
+          className: "border-border neeto-themes-nano-alignment-block flex items-center rounded-md border",
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-left",
             "data-testid": "alignment-left",
             variant: value === "left" ? "default" : "ghost",
             icon: function icon() {
-              return /*#__PURE__*/jsxRuntime.jsx(LeftAlign, {
+              return /*#__PURE__*/jsxRuntime.jsx(lucideReact.AlignLeft, {
                 size: 20,
                 className: classnames({
                   rounded: true,
-                  "text-primary": value === "left",
+                  "text-primary-foreground": value === "left",
                   "text-muted-foreground": value !== "left"
                 })
               });
@@ -797,17 +797,17 @@ var AlignmentBlock = function AlignmentBlock(_ref) {
               return setFieldValue(name, "left");
             }
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "neeto-themes-nano-alignment-divider"
+            className: "neeto-themes-nano-alignment-divider bg-border h-8 w-px"
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             className: "neeto-themes-nano-alignment-button neeto-themes-nano-alignment-button__alignment-center",
             "data-testid": "alignment-center",
             variant: value === "center" ? "default" : "ghost",
             icon: function icon() {
-              return /*#__PURE__*/jsxRuntime.jsx(CenterAlign, {
+              return /*#__PURE__*/jsxRuntime.jsx(lucideReact.AlignCenter, {
                 size: 20,
                 className: classnames({
                   rounded: true,
-                  "text-primary": value === "center",
+                  "text-primary-foreground": value === "center",
                   "text-muted-foreground": value !== "center"
                 })
               });
@@ -833,11 +833,10 @@ var ColorBlock = function ColorBlock(_ref) {
     onChange = _ref.onChange,
     showTransparencyControl = _ref.showTransparencyControl;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center justify-between",
+    className: "flex min-h-9 items-center justify-between",
     "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
       "data-testid": "style-fields-labels",
-      variant: "body2",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.ColorPicker, {
       color: color,
@@ -849,8 +848,6 @@ var ColorBlock = function ColorBlock(_ref) {
   });
 };
 
-function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FontPickerBlock = function FontPickerBlock(_ref) {
   var label = _ref.label,
     _ref$placeholder = _ref.placeholder,
@@ -861,9 +858,8 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between",
     "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
       "data-testid": "style-fields-labels",
-      variant: "body2",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "w-40",
@@ -872,14 +868,16 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
         options: options,
         placeholder: placeholder,
         value: value,
-        menuPosition: "fixed",
-        styles: {
-          option: function option(styles, _ref2) {
-            var data = _ref2.data;
-            return _objectSpread$2(_objectSpread$2({}, styles), {}, {
-              fontFamily: data.value
-            });
-          }
+        contentProps: {
+          className: "min-w-max"
+        },
+        formatOptionLabel: function formatOptionLabel(option) {
+          return /*#__PURE__*/jsxRuntime.jsx("span", {
+            style: {
+              fontFamily: option.value
+            },
+            children: option.label
+          });
         }
       })
     })]
@@ -894,17 +892,22 @@ var SelectBlock = function SelectBlock(_ref) {
     options = _ref.options,
     onChange = _ref.onChange;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "border-border flex flex-col gap-2 border-t pt-3",
+    className: "flex min-h-9 items-center justify-between gap-3",
     "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
       "data-testid": "logo-field-labels",
-      variant: "body2",
       children: label
-    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Select, {
-      onChange: onChange,
-      options: options,
-      placeholder: placeholder,
-      value: value
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Select, {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value,
+        contentProps: {
+          className: "min-w-max"
+        }
+      })
     })]
   });
 };
@@ -914,25 +917,19 @@ var SliderBlock = function SliderBlock(_ref) {
     onChange = _ref.onChange,
     value = _ref.value,
     min = _ref.min,
-    max = _ref.max,
-    marks = _ref.marks;
+    max = _ref.max;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center justify-between gap-3",
+    className: "flex min-h-9 items-center justify-between gap-3",
     "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
       "data-testid": "style-fields-labels",
-      variant: "body2",
       children: label
-    }), /*#__PURE__*/jsxRuntime.jsx(antd.Slider, {
-      marks: marks,
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Slider, {
       max: max,
       min: min,
-      onChange: onChange,
       value: value,
       className: "my-2 w-20",
-      tooltip: {
-        formatter: null
-      }
+      onValueChange: onChange
     })]
   });
 };
@@ -953,7 +950,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
   var doesHelpTextExist = i18n.exists(translationKey);
   if (asCheckbox) {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex items-center gap-2",
+      className: "flex min-h-9 items-center gap-2",
       "data-testid": "theme-style-content-background",
       children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Checkbox, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
         label: label,
@@ -967,13 +964,12 @@ var SwitchBlock = function SwitchBlock(_ref) {
     });
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center justify-between",
+    className: "flex min-h-9 items-center justify-between",
     "data-testid": "theme-style-content-background",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "inline-flex items-center gap-4",
-      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
         "data-testid": "style-fields-labels",
-        variant: "body2",
         className: classnames({
           "w-32": doesHelpTextExist,
           "w-auto": !doesHelpTextExist
@@ -986,7 +982,8 @@ var SwitchBlock = function SwitchBlock(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Switch, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
       name: name
     }, inputProps)), {}, {
-      "data-testid": "enable-background-color-toggle"
+      "data-testid": "enable-background-color-toggle",
+      size: "default"
     }))]
   });
 };
@@ -1001,22 +998,18 @@ var TextBlock = function TextBlock(_ref) {
     placeholder = _ref.placeholder,
     error = _ref.error;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center justify-between",
+    className: "flex flex-col gap-2",
     "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
       "data-testid": "style-fields-labels",
-      variant: "body2",
       children: label
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-40",
-      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
-        error: error,
-        name: name,
-        onChange: onChange,
-        placeholder: placeholder,
-        type: type,
-        value: value
-      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+      error: error,
+      name: name,
+      onChange: onChange,
+      placeholder: placeholder,
+      type: type,
+      value: value
     })]
   });
 };
@@ -1130,12 +1123,9 @@ var Properties = function Properties(_ref) {
           return /*#__PURE__*/jsxRuntime.jsx(FontPickerBlock, {
             label: buildLabel(key, kind),
             options: FONT_OPTIONS,
-            value: neetoCist.findBy({
-              value: value || null
-            }, FONT_OPTIONS),
-            onChange: function onChange(_ref4) {
-              var value = _ref4.value;
-              return handleChange(key, value);
+            value: value || "",
+            onChange: function onChange(newValue) {
+              return handleChange(key, newValue);
             }
           }, key);
         case "color":
@@ -1177,15 +1167,16 @@ var Properties = function Properties(_ref) {
             var options = (_findBy4 = neetoCist.findBy({
               key: key
             }, themePropertiesSchema)) === null || _findBy4 === void 0 || (_findBy4 = _findBy4.options) === null || _findBy4 === void 0 ? void 0 : _findBy4.map(toCapitalizedOption);
-            return /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
+            return /*#__PURE__*/react.createElement(SelectBlock, {
+              value: value,
+              key: key,
               label: buildLabel(key, kind),
               options: options || POSITION_OPTIONS,
               placeholder: "left",
-              value: toCapitalizedOption(value),
-              onChange: function onChange(option) {
-                return setFieldValue("properties[".concat(_index, "].value"), option.value);
+              onChange: function onChange(newValue) {
+                return setFieldValue("properties[".concat(_index, "].value"), newValue);
               }
-            }, key);
+            });
           }
         case "boolean":
           {
@@ -1214,7 +1205,7 @@ var Properties = function Properties(_ref) {
             return /*#__PURE__*/jsxRuntime.jsx(AlignmentBlock, {
               label: buildLabel(key, kind),
               name: "properties[".concat(_index3, "].value")
-            });
+            }, key);
           }
         default:
           return null;
@@ -1307,9 +1298,8 @@ var ImageBlock = function ImageBlock(_ref) {
     "data-testid": "theme-style-".concat(label ? utils$1.joinHyphenCase(label) : "image-block"),
     children: [label && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex items-center justify-between",
-      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
         "data-testid": "style-fields-labels",
-        variant: "body2",
         children: label
       })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1326,11 +1316,11 @@ var ImageBlock = function ImageBlock(_ref) {
         label: buildLabel("".concat(name, "Position"), "image"),
         options: (options === null || options === void 0 ? void 0 : options.map(toCapitalizedOption)) || POSITION_OPTIONS,
         placeholder: t("neetoThemes.common.left"),
-        value: toCapitalizedOption(((_findBy = neetoCist.findBy({
+        value: ((_findBy = neetoCist.findBy({
           key: "".concat(name, "_position")
-        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
-        onChange: function onChange(option) {
-          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
+        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue),
+        onChange: function onChange(newValue) {
+          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), newValue);
         }
       })]
     })]
@@ -1579,7 +1569,7 @@ var Customize = function Customize(_ref) {
             isEnabled: enabledFeatures.customCSS,
             isProFeature: proFeatures.customCSS
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "bg-muted/50 border-border mt-2 flex flex-col space-y-2 border p-2",
+            className: "neeto-themes-default-theme-toggle border-border mt-4 flex flex-col space-y-2 rounded-lg border p-2",
             children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
               disabled: !isThemeGlobalTheme,
               content: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.tooltipContent"),
@@ -1587,6 +1577,7 @@ var Customize = function Customize(_ref) {
                 checked: values.shouldSetAsGlobalTheme,
                 disabled: isThemeGlobalTheme,
                 name: "shouldSetAsGlobalTheme",
+                size: "lg",
                 label: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.label"),
                 onCheckedChange: function onCheckedChange(checked) {
                   return setFieldValue("shouldSetAsGlobalTheme", checked);
@@ -1594,6 +1585,7 @@ var Customize = function Customize(_ref) {
               })
             }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
               className: "text-sm",
+              color: "muted",
               variant: "body2",
               children: t("neetoThemes.build.leftSideBar.themes.themeOptions.setAsGlobalTheme.helpText", {
                 entityType: t("neetoThemes.entityType.".concat(entityType.toLowerCase()), {
@@ -1603,7 +1595,7 @@ var Customize = function Customize(_ref) {
             })]
           })]
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "bg-background shadow-sm sticky bottom-0 start-0 end-0 flex justify-end gap-x-2 px-4 py-6 lg:px-5 xl:px-6",
+          className: "bg-background border-border sticky bottom-0 start-0 end-0 flex justify-end gap-x-2 border-t px-4 py-6 lg:px-5 xl:px-6",
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
             "data-testid": "reset-button",
             disabled: !dirty || isSubmitting,
@@ -1611,6 +1603,7 @@ var Customize = function Customize(_ref) {
             type: "reset",
             variant: "ghost"
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Popover, {
+            disabled: !isNotAppliedCondition,
             open: isNotAppliedPopoverOpen,
             position: "top",
             trigger: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
@@ -1630,7 +1623,7 @@ var Customize = function Customize(_ref) {
               className: "flex flex-col items-start gap-2",
               children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
                 className: "absolute end-1 top-1 z-0",
-                icon: Close,
+                icon: lucideReact.X,
                 size: "sm",
                 variant: "ghost",
                 onClick: function onClick() {
@@ -1672,12 +1665,14 @@ var QuickActionRow = function QuickActionRow(_ref) {
     testId = _ref.testId;
   return /*#__PURE__*/jsxRuntime.jsxs("button", {
     onClick: onClick,
-    className: "border-border hover:bg-muted flex w-full cursor-pointer items-center gap-3 border-t px-3 py-2 text-start transition-colors",
+    className: "border-border hover:bg-muted flex w-full cursor-pointer items-center gap-2 border-t px-3 py-1.5 text-start transition-colors",
     "data-testid": testId,
     type: "button",
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+      className: "text-muted-foreground",
       size: 16
     }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      className: "text-sm",
       variant: "body2",
       children: label
     })]
@@ -1718,8 +1713,8 @@ var Thumbnail = function Thumbnail(_ref) {
   }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classnames("neeto-themes-theme-thumbnail rounded-lg border transition-all duration-300 ease-in-out", {
-      "border-gray-400": !active,
-      "border-gray-800 neeto-themes-theme-thumbnail--active": active,
+      "border-border": !active,
+      "border-foreground neeto-themes-theme-thumbnail--active": active,
       "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
       "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
     }),
@@ -1734,8 +1729,7 @@ var Thumbnail = function Thumbnail(_ref) {
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "mb-3",
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            variant: "h3",
-            weight: "semibold",
+            variant: "h5",
             children: /*#__PURE__*/jsxRuntime.jsx("span", {
               style: {
                 color: primaryColor
@@ -1743,7 +1737,7 @@ var Thumbnail = function Thumbnail(_ref) {
               children: primaryLabel
             })
           }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-muted-foreground",
+            color: "muted",
             variant: "body2",
             children: /*#__PURE__*/jsxRuntime.jsx("span", {
               style: {
@@ -1806,8 +1800,8 @@ var Card = function Card(_ref) {
     "data-testid": active ? "active-theme-card" : "theme-card",
     id: theme.id,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classnames("neeto-themes-theme-thumbnail rounded-lg relative cursor-pointer border-2 transition-all duration-300 ease-in-out", {
-        "border-gray-400": !active,
+      className: classnames("neeto-themes-theme-thumbnail group/thumbnail rounded-lg relative cursor-pointer overflow-hidden border-2 transition-all duration-300 ease-in-out", {
+        "border-border": !active,
         "neeto-themes-theme-thumbnail--active": active,
         "neeto-themes-theme-thumbnail--preview-active": isPreviewing,
         "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
@@ -1816,9 +1810,9 @@ var Card = function Card(_ref) {
         return onSetPreviewTheme(theme);
       },
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "rounded-lg relative overflow-hidden rounded-bl-none rounded-br-none transition-all duration-300 ease-in-out",
+        className: "relative overflow-hidden transition-all duration-300 ease-in-out",
         children: [active ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "neeto-themes-theme-thumbnail__active-banner absolute start-0 top-0 z-10 w-full py-1 text-center text-xs font-semibold uppercase tracking-wide",
+          className: "neeto-themes-theme-thumbnail__active-banner bg-primary text-primary-foreground absolute start-0 top-0 z-10 w-full py-1 text-center text-xs font-semibold uppercase tracking-wide",
           "data-testid": "active-theme-label",
           children: t("neetoThemes.common.activeTheme")
         }) : /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1835,13 +1829,13 @@ var Card = function Card(_ref) {
               variant: "secondary",
               className: classnames({
                 "neeto-themes-theme-thumbnail__preview-btn--disabled opacity-100": isPreviewing,
-                "neeto-themes-theme-thumbnail__preview-btn shrink-0 justify-center": true
+                "neeto-themes-theme-thumbnail__preview-btn w-[8.125rem] max-w-full shrink-0 justify-center": true
               }),
               onClick: function onClick() {
                 return onSetPreviewTheme(theme);
               }
             }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-              className: "neeto-themes-theme-thumbnail__apply-btn shrink-0 justify-center",
+              className: "neeto-themes-theme-thumbnail__apply-btn w-[8.125rem] max-w-full shrink-0 justify-center disabled:opacity-100!",
               "data-testid": "apply-theme-button",
               disabled: isApplyingTheme,
               label: t("neetoThemes.common.useTheme"),
@@ -1853,7 +1847,7 @@ var Card = function Card(_ref) {
             })]
           })
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "neeto-themes-theme-thumbnail__overlay w-full transition-all duration-300 ease-in-out",
+          className: "neeto-themes-theme-thumbnail__overlay w-full transition-all duration-300 ease-in-out group-hover/thumbnail:opacity-60",
           children: Thumbnail$1 ? /*#__PURE__*/jsxRuntime.jsx(Thumbnail$1, {
             active: active,
             isHighLightedTheme: isHighLightedTheme,
@@ -1867,18 +1861,26 @@ var Card = function Card(_ref) {
           })
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "border-border flex items-start justify-between gap-1 border-t p-2",
+        className: "border-border flex items-start justify-between gap-1 border-t px-2 py-1.5",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center space-x-2",
+          className: classnames("flex items-center space-x-2", {
+            grow: !showMoreDropdown
+          }),
           children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-muted-foreground line-clamp-2 min-w-0 grow wrap-anywhere pt-1 italic",
+            color: "muted",
             "data-testid": "theme-name",
             variant: "body2",
+            className: classnames("line-clamp-2 min-w-0 grow wrap-anywhere text-sm italic", {
+              "pt-1": showMoreDropdown
+            }),
             children: name
           }), isGlobalTheme && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "text-muted-foreground shrink-0 pt-1 italic",
+            color: "muted",
             "data-testid": "default-theme-label",
             variant: "body2",
+            className: classnames("shrink-0 text-sm italic", {
+              "pt-1": showMoreDropdown
+            }),
             children: t("neetoThemes.common.defaultTheme")
           })]
         }), showMoreDropdown && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
@@ -1886,7 +1888,7 @@ var Card = function Card(_ref) {
             size: "sm"
           },
           dropdownProps: {
-            strategy: "fixed",
+            className: "w-max",
             onClick: function onClick(e) {
               return e.stopPropagation();
             }
@@ -1905,7 +1907,7 @@ var Card = function Card(_ref) {
       }), active && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col",
         children: [/*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
-          icon: ColorPicker,
+          icon: lucideReact.Pipette,
           label: t("neetoThemes.common.customizeStyle"),
           testId: "quick-customize-style",
           onClick: handleQuickEdit("style")
@@ -1917,13 +1919,13 @@ var Card = function Card(_ref) {
           var action = hasImage ? "change" : "add";
           var specificKey = "neetoThemes.common.".concat(action).concat(neetoCist.capitalize(camelKey));
           return /*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
-            icon: AddImage,
+            icon: lucideReact.ImagePlus,
             label: t([specificKey, "neetoThemes.common.addImage"]),
             testId: "quick-add-".concat(neetoCist.hyphenate(key)),
             onClick: handleQuickEdit(camelKey)
           }, key);
         }), /*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
-          icon: CodeBlock,
+          icon: lucideReact.Code,
           label: t("neetoThemes.build.leftSideBar.themes.customCSS"),
           testId: "quick-custom-css",
           onClick: handleQuickEdit("customcss")
@@ -2106,14 +2108,17 @@ var Themes = function Themes(_ref) {
     className: "neeto-themes-sidebar__scroll",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mb-6 space-y-3",
-      children: [isSearchVisible && /*#__PURE__*/jsxRuntime.jsx(Search, {
-        autoFocus: true,
-        enableUrlSync: true,
-        autoComplete: "off",
-        className: "mb-4 mt-1 px-6",
-        placeholder: t("neetoThemes.common.searchThemes")
+      children: [isSearchVisible && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "mb-4 mt-1 px-6 lg:px-5 xl:px-6",
+        children: /*#__PURE__*/jsxRuntime.jsx(Search, {
+          autoFocus: true,
+          enableUrlSync: true,
+          autoComplete: "off",
+          placeholder: t("neetoThemes.common.searchThemes")
+        })
       }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
         className: "text-center",
+        color: "muted",
         "data-testid": "no-data-title",
         variant: "body2",
         children: t("neetoThemes.common.noResultsFound")
@@ -2146,10 +2151,10 @@ var TitleBar = function TitleBar(_ref) {
   var isCustomizeScreen = isEditThemeRoute() || isNewThemeRoute();
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
   var isRTL = i18n.dir() === "rtl";
-  var BackButtonIcon = isRTL ? RightArrow : LeftArrow;
+  var BackButtonIcon = isRTL ? lucideReact.ArrowRight : lucideReact.ArrowLeft;
   if (isCustomizeScreen) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "neeto-themes-sidebar__header px-4",
+      className: "neeto-themes-sidebar__header px-4 pt-4 pb-2",
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex items-center justify-start space-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
@@ -2159,30 +2164,28 @@ var TitleBar = function TitleBar(_ref) {
           variant: "ghost",
           tooltipProps: {
             content: isCustomCssScreen ? t("neetoThemes.buttons.backToEdit") : t("neetoThemes.buttons.backToThemes"),
-            position: "top"
+            position: "bottom"
           },
           onClick: function onClick() {
             return handleBackPress(themeId);
           }
         }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
           "data-testid": "themes-header",
-          variant: "h3",
-          weight: "semibold",
+          variant: "h5",
           children: [isCustomizeScreen && !isCustomCssScreen && (isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
         })]
       })
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
+    className: "neeto-themes-sidebar__header px-6 pt-4 pb-2 lg:px-5 xl:px-6",
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center justify-between space-x-2",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex space-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
           "data-testid": "themes-header",
-          variant: "h3",
-          weight: "semibold",
+          variant: "h5",
           children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
         }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
           helpLinkProps: helpDocUrl && {
@@ -2197,12 +2200,12 @@ var TitleBar = function TitleBar(_ref) {
         className: "self-end",
         children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
           "data-testid": "themes-search-toggle-button",
-          icon: Search$1,
+          icon: lucideReact.Search,
           iconPosition: "left",
           variant: "ghost",
           tooltipProps: {
             content: t("neetoThemes.common.searchThemes"),
-            position: "top"
+            position: "bottom"
           },
           onClick: handleToggleSearch
         })
@@ -2267,7 +2270,9 @@ var Sidebar = function Sidebar(_ref) {
     setThemeState = _useThemeStore.setThemeState;
   var didScrollActiveThemeIntoView = react.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var ToggleIcon = i18n.dir() === "rtl" ? lucideReact.ChevronsRight : lucideReact.ChevronsLeft;
   var _useThemeUtils = useExpandedSection.useThemeUtils(),
     setTheme = _useThemeUtils.setTheme;
   var _useListThemes = useGlobalThemesApi.useListThemes(entityId),
@@ -2490,7 +2495,7 @@ var Sidebar = function Sidebar(_ref) {
         onSubmit: handleDeleteTheme
       }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
         className: "neeto-themes-sidebar__toggler",
-        icon: Collapse,
+        icon: ToggleIcon,
         variant: "outline",
         onClick: function onClick() {
           setIsThemesSidebarCollapsed(!isThemesSidebarCollapsed);