@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/src/Templates/Stores/TemplateEditor/uiAbstractions/configUI.js

@@ -1,43 +1,7 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configUI = void 0;
-var configUI = function (store) {
+const configUI = (store) => {
     return [
         {
             description: '',
@@ -46,20 +10,18 @@ var configUI = function (store) {
                     type: 'text',
                     label: 'SiteId',
                     description: 'site id used to connect to the athos service',
-                    getDisplayState: function () { return 'disabled'; },
-                    getValue: function () {
-                        var _a, _b, _c;
+                    getDisplayState: () => 'disabled',
+                    getValue: () => {
                         // value is derived in the editorstore at construction time
-                        return (_c = (_b = (_a = store.overrides.config) === null || _a === void 0 ? void 0 : _a.siteId) !== null && _b !== void 0 ? _b : store.initial.config.siteId) !== null && _c !== void 0 ? _c : '';
+                        return store.overrides.config?.siteId ?? store.initial.config.siteId ?? '';
                     },
-                    shouldShowReset: function () {
-                        var _a;
-                        return typeof ((_a = store.overrides.config) === null || _a === void 0 ? void 0 : _a.siteId) !== 'undefined';
+                    shouldShowReset: () => {
+                        return typeof store.overrides.config?.siteId !== 'undefined';
                     },
-                    onValueChange: function (value) {
-                        store.setConfigOverride({ path: ['siteId'], value: value });
+                    onValueChange: (value) => {
+                        store.setConfigOverride({ path: ['siteId'], value });
                     },
-                    onReset: function () {
+                    onReset: () => {
                         store.setConfigOverride({ path: ['siteId'], value: undefined });
                     },
                 },
@@ -67,8 +29,8 @@ var configUI = function (store) {
                     type: 'dropdown',
                     label: 'Platform',
                     description: 'Storefront platform used for the project',
-                    getDisplayState: function () { return 'disabled'; },
-                    getOptions: function () { return [
+                    getDisplayState: () => 'disabled',
+                    getOptions: () => [
                         {
                             options: [
                                 { label: 'Shopify', value: 'shopify' },
@@ -77,22 +39,20 @@ var configUI = function (store) {
                                 { label: 'Other', value: 'other' },
                             ],
                         },
-                    ]; },
-                    getValue: function () {
-                        var _a;
-                        return ((_a = store.overrides.config) === null || _a === void 0 ? void 0 : _a.platform) || store.initial.config.platform || 'other';
+                    ],
+                    getValue: () => {
+                        return store.overrides.config?.platform || store.initial.config.platform || 'other';
                     },
-                    shouldShowReset: function () {
-                        var _a;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialPlatform = store.initial.config.platform || 'other';
-                        var overridePlatform = (_a = store.overrides.config) === null || _a === void 0 ? void 0 : _a.platform;
+                        const initialPlatform = store.initial.config.platform || 'other';
+                        const overridePlatform = store.overrides.config?.platform;
                         return typeof overridePlatform !== 'undefined' && initialPlatform != overridePlatform;
                     },
-                    onValueChange: function (value) {
-                        store.setConfigOverride({ path: ['platform'], value: value });
+                    onValueChange: (value) => {
+                        store.setConfigOverride({ path: ['platform'], value });
                     },
-                    onReset: function () {
+                    onReset: () => {
                         store.setConfigOverride({ path: ['platform'], value: undefined });
                     },
                 },
@@ -100,8 +60,8 @@ var configUI = function (store) {
                     type: 'dropdown',
                     label: 'Language',
                     description: 'Language used for the project',
-                    getDisplayState: function () { return 'visible'; },
-                    getOptions: function () { return [
+                    getDisplayState: () => 'visible',
+                    getOptions: () => [
                         {
                             options: [
                                 { label: 'English', value: 'en' },
@@ -109,34 +69,29 @@ var configUI = function (store) {
                                 { label: 'Spanish', value: 'es' },
                             ],
                         },
-                    ]; },
-                    getValue: function () {
-                        var _a;
-                        return ((_a = store.overrides.config) === null || _a === void 0 ? void 0 : _a.language) || store.initial.config.language || 'en';
+                    ],
+                    getValue: () => {
+                        return store.overrides.config?.language || store.initial.config.language || 'en';
                     },
-                    shouldShowReset: function () {
-                        var _a;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialLanguage = store.initial.config.language || 'en';
-                        var overrideLanguage = (_a = store.overrides.config) === null || _a === void 0 ? void 0 : _a.language;
+                        const initialLanguage = store.initial.config.language || 'en';
+                        const overrideLanguage = store.overrides.config?.language;
                         return typeof overrideLanguage !== 'undefined' && initialLanguage != overrideLanguage;
                     },
-                    onValueChange: function (value) {
-                        store.setConfigOverride({ path: ['language'], value: value });
+                    onValueChange: (value) => {
+                        store.setConfigOverride({ path: ['language'], value });
+                    },
+                    onReset: async () => {
+                        store.setConfigOverride({ path: ['language'], value: undefined });
                     },
-                    onReset: function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            store.setConfigOverride({ path: ['language'], value: undefined });
-                            return [2 /*return*/];
-                        });
-                    }); },
                 },
                 {
                     type: 'dropdown',
                     label: 'Currency',
                     description: 'Currency used for the project',
-                    getDisplayState: function () { return 'visible'; },
-                    getOptions: function () { return [
+                    getDisplayState: () => 'visible',
+                    getOptions: () => [
                         {
                             options: [
                                 { label: 'USD', value: 'usd' },
@@ -144,30 +99,22 @@ var configUI = function (store) {
                                 { label: 'AUD', value: 'aud' },
                             ],
                         },
-                    ]; },
-                    getValue: function () {
-                        var _a;
-                        return ((_a = store.overrides.config) === null || _a === void 0 ? void 0 : _a.currency) || store.initial.config.currency || 'usd';
+                    ],
+                    getValue: () => {
+                        return store.overrides.config?.currency || store.initial.config.currency || 'usd';
                     },
-                    shouldShowReset: function () {
-                        var _a;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialCurrency = store.initial.config.currency || 'usd';
-                        var overrideCurrency = (_a = store.overrides.config) === null || _a === void 0 ? void 0 : _a.currency;
+                        const initialCurrency = store.initial.config.currency || 'usd';
+                        const overrideCurrency = store.overrides.config?.currency;
                         return typeof overrideCurrency !== 'undefined' && initialCurrency != overrideCurrency;
                     },
-                    onValueChange: function (value) { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            store.setConfigOverride({ path: ['currency'], value: value });
-                            return [2 /*return*/];
-                        });
-                    }); },
-                    onReset: function () { return __awaiter(void 0, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            store.setConfigOverride({ path: ['currency'], value: undefined });
-                            return [2 /*return*/];
-                        });
-                    }); },
+                    onValueChange: async (value) => {
+                        store.setConfigOverride({ path: ['currency'], value });
+                    },
+                    onReset: async () => {
+                        store.setConfigOverride({ path: ['currency'], value: undefined });
+                    },
                 },
             ],
         },

package/dist/cjs/src/Templates/Stores/TemplateEditor/uiAbstractions/searchControllerUI.js

@@ -13,32 +13,30 @@ function searchTargetUI(store) {
                     type: 'dropdown',
                     label: 'Component',
                     description: 'Template component to render',
-                    getValue: function (index) {
+                    getValue: (index) => {
                         // all search targeters are in store.templatesStore.targets.search
-                        var _a;
                         // TODO: need to handle case where there are no targets
-                        var targetAtIndex = (_a = store.templatesStore.targets) === null || _a === void 0 ? void 0 : _a.search[index];
-                        return targetAtIndex === null || targetAtIndex === void 0 ? void 0 : targetAtIndex.component;
+                        const targetAtIndex = store.templatesStore.targets?.search[index];
+                        return targetAtIndex?.component;
                     },
-                    getOptions: function () {
+                    getOptions: () => {
                         // return list of available templates
-                        var templateList = Object.keys(store.templatesStore.library.components.search).map(function (name) { return ({ value: name }); });
+                        const templateList = Object.keys(store.templatesStore.library.components.search).map((name) => ({ value: name }));
                         return [{ options: templateList }];
                     },
-                    shouldShowReset: function (index) {
-                        var _a, _b, _c, _d;
+                    shouldShowReset: (index) => {
                         // if the override differs from the initial state, show reset
-                        var initialTargetAtIndex = (_b = (_a = store.initial.targets) === null || _a === void 0 ? void 0 : _a.search) === null || _b === void 0 ? void 0 : _b[index];
-                        var overrideTargetAtIndex = (_d = (_c = store.overrides.targets) === null || _c === void 0 ? void 0 : _c.search) === null || _d === void 0 ? void 0 : _d[index];
-                        return (Boolean(initialTargetAtIndex === null || initialTargetAtIndex === void 0 ? void 0 : initialTargetAtIndex.component) &&
-                            Boolean(overrideTargetAtIndex === null || overrideTargetAtIndex === void 0 ? void 0 : overrideTargetAtIndex.component) &&
+                        const initialTargetAtIndex = store.initial.targets?.search?.[index];
+                        const overrideTargetAtIndex = store.overrides.targets?.search?.[index];
+                        return (Boolean(initialTargetAtIndex?.component) &&
+                            Boolean(overrideTargetAtIndex?.component) &&
                             initialTargetAtIndex.component != overrideTargetAtIndex.component);
                     },
-                    onValueChange: function (value, index) {
-                        store.setTargetOverride({ path: ['search', "[".concat(index, "]"), 'component'], value: value });
+                    onValueChange: (value, index) => {
+                        store.setTargetOverride({ path: ['search', `[${index}]`, 'component'], value: value });
                     },
-                    onReset: function (index) {
-                        store.setTargetOverride({ path: ['search', "[".concat(index, "]"), 'component'], value: undefined });
+                    onReset: (index) => {
+                        store.setTargetOverride({ path: ['search', `[${index}]`, 'component'], value: undefined });
                     },
                 },
                 // {
@@ -90,41 +88,38 @@ function searchControllerUI(store) {
                     type: 'checkbox',
                     label: 'Infinite Scroll',
                     description: 'Enable infinite scroll',
-                    getValue: function (controller) {
-                        var _a, _b, _c;
+                    getValue: (controller) => {
                         // need to support both infinite without "enabled" (object simply exists) and with "enabled" in settings
-                        if ((_a = controller === null || controller === void 0 ? void 0 : controller.store.config.settings) === null || _a === void 0 ? void 0 : _a.infinite) {
-                            if (((_c = (_b = controller.store.config.settings) === null || _b === void 0 ? void 0 : _b.infinite) === null || _c === void 0 ? void 0 : _c.enabled) !== undefined) {
+                        if (controller?.store.config.settings?.infinite) {
+                            if (controller.store.config.settings?.infinite?.enabled !== undefined) {
                                 return controller.store.config.settings.infinite.enabled;
                             }
                             return true;
                         }
                         return false;
                     },
-                    shouldShowReset: function () {
-                        var _a, _b, _c, _d, _e;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialConfig = (_a = store.initial.controller.search) === null || _a === void 0 ? void 0 : _a.infinite;
-                        var initialEnabled = Boolean((initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.enabled) !== undefined ? initialConfig.enabled : initialConfig);
-                        var overrideEnabled = Boolean(((_c = (_b = store.overrides.controller.search) === null || _b === void 0 ? void 0 : _b.infinite) === null || _c === void 0 ? void 0 : _c.enabled) !== undefined);
-                        return overrideEnabled && initialEnabled !== ((_e = (_d = store.overrides.controller.search) === null || _d === void 0 ? void 0 : _d.infinite) === null || _e === void 0 ? void 0 : _e.enabled);
+                        const initialConfig = store.initial.controller.search?.infinite;
+                        const initialEnabled = Boolean(initialConfig?.enabled !== undefined ? initialConfig.enabled : initialConfig);
+                        const overrideEnabled = Boolean(store.overrides.controller.search?.infinite?.enabled !== undefined);
+                        return overrideEnabled && initialEnabled !== store.overrides.controller.search?.infinite?.enabled;
                     },
-                    onValueChange: function (value, controller) {
-                        var _a;
+                    onValueChange: (value, controller) => {
                         if (typeof value === 'undefined' || !controller)
                             return;
-                        var initialConfig = (_a = store.initial.controller.search) === null || _a === void 0 ? void 0 : _a.infinite;
-                        if (value == (initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.enabled) || (value === false && !initialConfig)) {
-                            store.setControllerOverride({ path: ['infinite'], controller: controller });
+                        const initialConfig = store.initial.controller.search?.infinite;
+                        if (value == initialConfig?.enabled || (value === false && !initialConfig)) {
+                            store.setControllerOverride({ path: ['infinite'], controller });
                         }
                         else {
-                            store.setControllerOverride({ path: ['infinite', 'enabled'], value: Boolean(value), controller: controller });
+                            store.setControllerOverride({ path: ['infinite', 'enabled'], value: Boolean(value), controller });
                         }
                     },
-                    onReset: function (controller) {
+                    onReset: (controller) => {
                         if (!controller)
                             return;
-                        store.setControllerOverride({ path: ['infinite'], controller: controller });
+                        store.setControllerOverride({ path: ['infinite'], controller });
                     },
                 },
             ],

package/dist/cjs/src/Templates/Stores/TemplateEditor/uiAbstractions/themeUI.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.themeUI = themeUI;
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 function themeUI(store) {
     return [
         {
@@ -10,11 +10,11 @@ function themeUI(store) {
                     type: 'dropdown',
                     label: 'Theme',
                     description: 'Theme for styling the templates',
-                    getDisplayState: function () { return 'visible'; },
-                    getOptions: function () {
-                        var libraryThemes = Object.keys(store.templatesStore.themes.library);
-                        var libraryThemeOptions = {
-                            options: libraryThemes.map(function (theme) { return ({ value: theme }); }),
+                    getDisplayState: () => 'visible',
+                    getOptions: () => {
+                        const libraryThemes = Object.keys(store.templatesStore.themes.library);
+                        const libraryThemeOptions = {
+                            options: libraryThemes.map((theme) => ({ value: theme })),
                         };
                         // Not using local themes for now...
                         // const localThemes = Object.keys(store.templatesStore.themes.local);
@@ -24,17 +24,16 @@ function themeUI(store) {
                         // };
                         return [libraryThemeOptions];
                     },
-                    getValue: function () {
-                        var _a, _b;
-                        return (_b = (_a = store.overrides.theme.extends) !== null && _a !== void 0 ? _a : store.initial.theme.extends) !== null && _b !== void 0 ? _b : 'global';
+                    getValue: () => {
+                        return store.overrides.theme.extends ?? store.initial.theme.extends ?? 'global';
                     },
-                    shouldShowReset: function () {
+                    shouldShowReset: () => {
                         return typeof store.overrides.theme.extends !== 'undefined';
                     },
-                    onValueChange: function (value) {
+                    onValueChange: (value) => {
                         store.setTheme(value);
                     },
-                    onReset: function () {
+                    onReset: () => {
                         store.setTheme(store.initial.theme.extends);
                     },
                 },
@@ -47,23 +46,21 @@ function themeUI(store) {
                     type: 'number',
                     label: 'Mobile Breakpoint',
                     description: 'Mobile breakpoint for responsive design',
-                    getDisplayState: function () { return 'visible'; },
-                    getValue: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    getDisplayState: () => 'visible',
+                    getValue: () => {
                         // value is derived in the editorstore at construction time
-                        return (_f = (_c = (_b = (_a = store.overrides.theme.variables) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.mobile) !== null && _c !== void 0 ? _c : (_e = (_d = store.initial.theme.variables) === null || _d === void 0 ? void 0 : _d.breakpoints) === null || _e === void 0 ? void 0 : _e.mobile) !== null && _f !== void 0 ? _f : '';
+                        return store.overrides.theme.variables?.breakpoints?.mobile ?? store.initial.theme.variables?.breakpoints?.mobile ?? '';
                     },
-                    shouldShowReset: function () {
-                        var _a, _b, _c, _d;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialMobile = (_b = (_a = store.initial.theme.variables) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.mobile;
-                        var overrideMobile = (_d = (_c = store.overrides.theme.variables) === null || _c === void 0 ? void 0 : _c.breakpoints) === null || _d === void 0 ? void 0 : _d.mobile;
+                        const initialMobile = store.initial.theme.variables?.breakpoints?.mobile;
+                        const overrideMobile = store.overrides.theme.variables?.breakpoints?.mobile;
                         return typeof overrideMobile !== 'undefined' && initialMobile != overrideMobile;
                     },
-                    onValueChange: function (value) {
-                        store.setThemeOverride({ path: ['variables', 'breakpoints', 'mobile'], value: value });
+                    onValueChange: (value) => {
+                        store.setThemeOverride({ path: ['variables', 'breakpoints', 'mobile'], value });
                     },
-                    onReset: function () {
+                    onReset: () => {
                         store.setThemeOverride({ path: ['variables', 'breakpoints', 'mobile'], value: undefined });
                     },
                 },
@@ -71,23 +68,21 @@ function themeUI(store) {
                     type: 'number',
                     label: 'Tablet Breakpoint',
                     description: 'Tablet breakpoint for responsive design',
-                    getDisplayState: function () { return 'visible'; },
-                    getValue: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    getDisplayState: () => 'visible',
+                    getValue: () => {
                         // value is derived in the editorstore at construction time
-                        return (_f = (_c = (_b = (_a = store.overrides.theme.variables) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.tablet) !== null && _c !== void 0 ? _c : (_e = (_d = store.initial.theme.variables) === null || _d === void 0 ? void 0 : _d.breakpoints) === null || _e === void 0 ? void 0 : _e.tablet) !== null && _f !== void 0 ? _f : '';
+                        return store.overrides.theme.variables?.breakpoints?.tablet ?? store.initial.theme.variables?.breakpoints?.tablet ?? '';
                     },
-                    shouldShowReset: function () {
-                        var _a, _b, _c, _d;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialTablet = (_b = (_a = store.initial.theme.variables) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.tablet;
-                        var overrideTablet = (_d = (_c = store.overrides.theme.variables) === null || _c === void 0 ? void 0 : _c.breakpoints) === null || _d === void 0 ? void 0 : _d.tablet;
+                        const initialTablet = store.initial.theme.variables?.breakpoints?.tablet;
+                        const overrideTablet = store.overrides.theme.variables?.breakpoints?.tablet;
                         return typeof overrideTablet !== 'undefined' && initialTablet != overrideTablet;
                     },
-                    onValueChange: function (value) {
-                        store.setThemeOverride({ path: ['variables', 'breakpoints', 'tablet'], value: value });
+                    onValueChange: (value) => {
+                        store.setThemeOverride({ path: ['variables', 'breakpoints', 'tablet'], value });
                     },
-                    onReset: function () {
+                    onReset: () => {
                         store.setThemeOverride({ path: ['variables', 'breakpoints', 'tablet'], value: undefined });
                     },
                 },
@@ -95,23 +90,21 @@ function themeUI(store) {
                     type: 'number',
                     label: 'Desktop Breakpoint',
                     description: 'Desktop breakpoint for responsive design',
-                    getDisplayState: function () { return 'visible'; },
-                    getValue: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    getDisplayState: () => 'visible',
+                    getValue: () => {
                         // value is derived in the editorstore at construction time
-                        return (_f = (_c = (_b = (_a = store.overrides.theme.variables) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.desktop) !== null && _c !== void 0 ? _c : (_e = (_d = store.initial.theme.variables) === null || _d === void 0 ? void 0 : _d.breakpoints) === null || _e === void 0 ? void 0 : _e.desktop) !== null && _f !== void 0 ? _f : '';
+                        return store.overrides.theme.variables?.breakpoints?.desktop ?? store.initial.theme.variables?.breakpoints?.desktop ?? '';
                     },
-                    shouldShowReset: function () {
-                        var _a, _b, _c, _d;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialDesktop = (_b = (_a = store.initial.theme.variables) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.desktop;
-                        var overrideDesktop = (_d = (_c = store.overrides.theme.variables) === null || _c === void 0 ? void 0 : _c.breakpoints) === null || _d === void 0 ? void 0 : _d.desktop;
+                        const initialDesktop = store.initial.theme.variables?.breakpoints?.desktop;
+                        const overrideDesktop = store.overrides.theme.variables?.breakpoints?.desktop;
                         return typeof overrideDesktop !== 'undefined' && initialDesktop != overrideDesktop;
                     },
-                    onValueChange: function (value) {
-                        store.setThemeOverride({ path: ['variables', 'breakpoints', 'desktop'], value: value });
+                    onValueChange: (value) => {
+                        store.setThemeOverride({ path: ['variables', 'breakpoints', 'desktop'], value });
                     },
-                    onReset: function () {
+                    onReset: () => {
                         store.setThemeOverride({ path: ['variables', 'breakpoints', 'desktop'], value: undefined });
                     },
                 },
@@ -124,23 +117,21 @@ function themeUI(store) {
                     type: 'color',
                     label: 'Primary Color',
                     description: 'Primary color for the theme',
-                    getDisplayState: function () { return 'visible'; },
-                    getValue: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    getDisplayState: () => 'visible',
+                    getValue: () => {
                         // value is derived in the editorstore at construction time
-                        return (_f = (_c = (_b = (_a = store.overrides.theme.variables) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.primary) !== null && _c !== void 0 ? _c : (_e = (_d = store.initial.theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary) !== null && _f !== void 0 ? _f : '';
+                        return store.overrides.theme.variables?.colors?.primary ?? store.initial.theme.variables?.colors?.primary ?? '';
                     },
-                    shouldShowReset: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialPrimary = (_c = (_b = (_a = store.initial.theme.variables) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.toUpperCase();
-                        var overridePrimary = (_f = (_e = (_d = store.overrides.theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f.toUpperCase();
+                        const initialPrimary = store.initial.theme.variables?.colors?.primary?.toUpperCase();
+                        const overridePrimary = store.overrides.theme.variables?.colors?.primary?.toUpperCase();
                         return typeof overridePrimary !== 'undefined' && initialPrimary != overridePrimary;
                     },
-                    onValueChange: (0, snap_toolbox_1.debounce)(function (value) {
-                        store.setThemeOverride({ path: ['variables', 'colors', 'primary'], value: value });
+                    onValueChange: (0, snap_toolbox_1.debounce)((value) => {
+                        store.setThemeOverride({ path: ['variables', 'colors', 'primary'], value });
                     }, 50),
-                    onReset: function () {
+                    onReset: () => {
                         store.setThemeOverride({ path: ['variables', 'colors', 'primary'], value: undefined });
                     },
                 },
@@ -148,23 +139,21 @@ function themeUI(store) {
                     type: 'color',
                     label: 'Secondary Color',
                     description: 'Secondary color for the theme',
-                    getDisplayState: function () { return 'visible'; },
-                    getValue: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    getDisplayState: () => 'visible',
+                    getValue: () => {
                         // value is derived in the editorstore at construction time
-                        return (_f = (_c = (_b = (_a = store.overrides.theme.variables) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.secondary) !== null && _c !== void 0 ? _c : (_e = (_d = store.initial.theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.secondary) !== null && _f !== void 0 ? _f : '';
+                        return store.overrides.theme.variables?.colors?.secondary ?? store.initial.theme.variables?.colors?.secondary ?? '';
                     },
-                    shouldShowReset: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialSecondary = (_c = (_b = (_a = store.initial.theme.variables) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.secondary) === null || _c === void 0 ? void 0 : _c.toUpperCase();
-                        var overrideSecondary = (_f = (_e = (_d = store.overrides.theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f.toUpperCase();
+                        const initialSecondary = store.initial.theme.variables?.colors?.secondary?.toUpperCase();
+                        const overrideSecondary = store.overrides.theme.variables?.colors?.secondary?.toUpperCase();
                         return typeof overrideSecondary !== 'undefined' && initialSecondary != overrideSecondary;
                     },
-                    onValueChange: (0, snap_toolbox_1.debounce)(function (value) {
-                        store.setThemeOverride({ path: ['variables', 'colors', 'secondary'], value: value });
+                    onValueChange: (0, snap_toolbox_1.debounce)((value) => {
+                        store.setThemeOverride({ path: ['variables', 'colors', 'secondary'], value });
                     }, 50),
-                    onReset: function () {
+                    onReset: () => {
                         store.setThemeOverride({ path: ['variables', 'colors', 'secondary'], value: undefined });
                     },
                 },
@@ -172,23 +161,21 @@ function themeUI(store) {
                     type: 'color',
                     label: 'Accent Color',
                     description: 'Accent color for the theme',
-                    getDisplayState: function () { return 'visible'; },
-                    getValue: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    getDisplayState: () => 'visible',
+                    getValue: () => {
                         // value is derived in the editorstore at construction time
-                        return (_f = (_c = (_b = (_a = store.overrides.theme.variables) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.accent) !== null && _c !== void 0 ? _c : (_e = (_d = store.initial.theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.accent) !== null && _f !== void 0 ? _f : '';
+                        return store.overrides.theme.variables?.colors?.accent ?? store.initial.theme.variables?.colors?.accent ?? '';
                     },
-                    shouldShowReset: function () {
-                        var _a, _b, _c, _d, _e, _f;
+                    shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        var initialAccent = (_c = (_b = (_a = store.initial.theme.variables) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.accent) === null || _c === void 0 ? void 0 : _c.toUpperCase();
-                        var overrideAccent = (_f = (_e = (_d = store.overrides.theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.accent) === null || _f === void 0 ? void 0 : _f.toUpperCase();
+                        const initialAccent = store.initial.theme.variables?.colors?.accent?.toUpperCase();
+                        const overrideAccent = store.overrides.theme.variables?.colors?.accent?.toUpperCase();
                         return typeof overrideAccent !== 'undefined' && initialAccent != overrideAccent;
                     },
-                    onValueChange: (0, snap_toolbox_1.debounce)(function (value) {
-                        store.setThemeOverride({ path: ['variables', 'colors', 'accent'], value: value });
+                    onValueChange: (0, snap_toolbox_1.debounce)((value) => {
+                        store.setThemeOverride({ path: ['variables', 'colors', 'accent'], value });
                     }, 50),
-                    onReset: function () {
+                    onReset: () => {
                         store.setThemeOverride({ path: ['variables', 'colors', 'accent'], value: undefined });
                     },
                 },