@athoscommerce/snap-preact 1.0.0

package/dist/cjs/src/Templates/Stores/TemplateStore.js

@@ -0,0 +1,344 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.TemplatesStore = exports.TEMPLATE_STORE_KEY = void 0;
+exports.transformTranslationsToTheme = transformTranslationsToTheme;
+var mobx_1 = require("mobx");
+var snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
+var ThemeStore_1 = require("./ThemeStore");
+var TargetStore_1 = require("./TargetStore");
+var LibraryStore_1 = require("./LibraryStore");
+var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var RESIZE_DEBOUNCE = 100;
+exports.TEMPLATE_STORE_KEY = 'athos-templates';
+var TemplatesStore = /** @class */ (function () {
+    function TemplatesStore(params) {
+        var _this = this;
+        var _a, _b;
+        this.loading = false;
+        this.window = { innerWidth: 0 };
+        var _c = params || {}, config = _c.config, settings = _c.settings;
+        this.config = config;
+        this.platform = config.config.platform || 'other';
+        this.storage = new snap_store_mobx_1.StorageStore({ type: snap_store_mobx_1.StorageType.local, key: exports.TEMPLATE_STORE_KEY });
+        this.dependencies = {
+            storage: this.storage,
+        };
+        this.settings = settings || { editMode: false };
+        this.targets = {
+            search: {},
+            autocomplete: {},
+            recommendation: {
+                bundle: {},
+                default: {},
+                email: {},
+            },
+        };
+        this.themes = {
+            local: {},
+            library: {},
+        };
+        this.library = new LibraryStore_1.LibraryStore({ components: config.components });
+        this.language =
+            (this.settings.editMode && this.storage.get('overrides.config.language')) ||
+                (((_a = this.config.config) === null || _a === void 0 ? void 0 : _a.language) && this.config.config.language in this.library.import.language && this.config.config.language) ||
+                'en';
+        this.currency =
+            (this.settings.editMode && this.storage.get('overrides.config.currency')) ||
+                (((_b = this.config.config) === null || _b === void 0 ? void 0 : _b.currency) && this.config.config.currency in this.library.import.currency && this.config.config.currency) ||
+                'usd';
+        // import locale selections
+        var importCurrency = this.library.import.currency[this.currency]();
+        var importLanguage = this.library.import.language[this.language]();
+        // configure window properties and add event listeners
+        if (window) {
+            this.setInnerWidth(window.innerWidth);
+            var debouncedHandleResize = (0, snap_toolbox_1.debounce)(function () {
+                _this.setInnerWidth(window.innerWidth);
+            }, RESIZE_DEBOUNCE);
+            window.addEventListener('resize', debouncedHandleResize);
+        }
+        // theme loading promise
+        this.loading = true;
+        var themePromises = [];
+        // setup local themes
+        var themeConfiguration = config.theme;
+        // add promise
+        var themeDefer = new Deferred();
+        themePromises.push(themeDefer.promise);
+        // import component if defined
+        if (themeConfiguration.resultComponent && this.library.import.component.result[themeConfiguration.resultComponent]) {
+            this.library.import.component.result[themeConfiguration.resultComponent]();
+        }
+        // import theme dependencies
+        var themeImports = [importCurrency, importLanguage, this.library.import.theme[themeConfiguration.extends]()];
+        Promise.all(themeImports).then(function () {
+            var base = _this.library.themes[themeConfiguration.extends];
+            var overrides = themeConfiguration.overrides || {};
+            var variables = themeConfiguration.variables || {};
+            var currency = _this.library.locales.currencies[_this.currency] || {};
+            var language = _this.library.locales.languages[_this.language] || {};
+            var languageOverrides = transformTranslationsToTheme((_this.config.translations && _this.config.translations[_this.language]) || {});
+            var translatedOverrides = {
+                components: overrides.default,
+                responsive: {
+                    mobile: overrides.mobile,
+                    tablet: overrides.tablet,
+                    desktop: overrides.desktop,
+                },
+            };
+            var themeConfig = {
+                name: 'global',
+                style: themeConfiguration.style,
+                type: 'local',
+                base: base,
+                overrides: translatedOverrides,
+                variables: variables,
+                currency: currency,
+                language: language,
+                languageOverrides: languageOverrides,
+                innerWidth: _this.window.innerWidth,
+            };
+            if (_this.settings.editMode) {
+                var themeOverrides = _this.storage.get('overrides.theme.variables') || {};
+                themeConfig.editorOverrides = { variables: themeOverrides || {} };
+            }
+            _this.addTheme(themeConfig);
+            themeDefer.resolve();
+        });
+        Promise.all(themePromises).then(function () {
+            _this.loading = false;
+        });
+        (0, mobx_1.makeObservable)(this, {
+            loading: mobx_1.observable,
+            targets: mobx_1.observable,
+            themes: mobx_1.observable,
+        });
+    }
+    TemplatesStore.prototype.addTarget = function (type, target) {
+        var targetId = target.selector || target.component;
+        if (targetId) {
+            var path = type.split('/');
+            var targetPath = this.targets;
+            for (var index = 0; index < path.length; index++) {
+                if (!targetPath[path[index]]) {
+                    return;
+                }
+                targetPath = targetPath[path[index]];
+            }
+            targetPath[targetId] = new TargetStore_1.TargetStore({
+                target: target,
+                dependencies: this.dependencies,
+                settings: this.settings,
+            });
+            if (this.settings.editMode) {
+                // triggers a rerender for TemplateEditor
+                this.targets = __assign({}, this.targets);
+            }
+            return targetId;
+        }
+    };
+    TemplatesStore.prototype.getTarget = function (type, targetId) {
+        var path = type.split('/');
+        path.push(targetId);
+        var targetPath = this.targets;
+        for (var index = 0; index < path.length; index++) {
+            if (!targetPath[path[index]]) {
+                return;
+            }
+            targetPath = targetPath[path[index]];
+        }
+        return targetPath;
+    };
+    TemplatesStore.prototype.addTheme = function (config) {
+        var theme = new ThemeStore_1.ThemeStore({
+            config: config,
+            dependencies: this.dependencies,
+            settings: this.settings,
+        });
+        var themeLocation = this.themes[config.type] || {};
+        themeLocation[config.name] = theme;
+    };
+    TemplatesStore.prototype.setInnerWidth = function (innerWidth) {
+        if (this.window.innerWidth === innerWidth)
+            return;
+        this.window.innerWidth = innerWidth;
+        for (var themeName in this.themes.local) {
+            var theme = this.themes.local[themeName];
+            theme.setInnerWidth(this.window.innerWidth);
+        }
+        for (var themeName in this.themes.library) {
+            var theme = this.themes.library[themeName];
+            theme.setInnerWidth(this.window.innerWidth);
+        }
+    };
+    TemplatesStore.prototype.getThemeStore = function (themeName) {
+        if (themeName) {
+            return this.themes.local[themeName] || this.themes.library[themeName];
+        }
+    };
+    TemplatesStore.prototype.setCurrency = function (currencyCode) {
+        return __awaiter(this, void 0, void 0, function () {
+            var currency, themeName, theme, themeName, theme;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(currencyCode in this.library.import.currency)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.library.import.currency[currencyCode]()];
+                    case 1:
+                        _a.sent();
+                        currency = this.library.locales.currencies[currencyCode];
+                        if (currency) {
+                            this.currency = currencyCode;
+                            this.storage.set('overrides.config.currency', this.currency);
+                            for (themeName in this.themes.local) {
+                                theme = this.themes.local[themeName];
+                                theme.setCurrency(currency);
+                            }
+                            for (themeName in this.themes.library) {
+                                theme = this.themes.library[themeName];
+                                theme.setCurrency(currency);
+                            }
+                        }
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    TemplatesStore.prototype.setLanguage = function (languageCode) {
+        return __awaiter(this, void 0, void 0, function () {
+            var language, themeName, theme, themeName, theme;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(languageCode in this.library.import.language)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.library.import.language[languageCode]()];
+                    case 1:
+                        _a.sent();
+                        language = this.library.locales.languages[languageCode];
+                        if (language) {
+                            this.language = languageCode;
+                            this.storage.set('overrides.config.language', this.language);
+                            for (themeName in this.themes.local) {
+                                theme = this.themes.local[themeName];
+                                theme.setLanguage(language);
+                            }
+                            for (themeName in this.themes.library) {
+                                theme = this.themes.library[themeName];
+                                theme.setLanguage(language);
+                            }
+                        }
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    TemplatesStore.prototype.preLoad = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var themeName, theme, themeConfig, themeOverrides;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        // preload the library
+                        this.loading = true;
+                        return [4 /*yield*/, this.library.preLoad()];
+                    case 1:
+                        _a.sent();
+                        // build out the library themes
+                        this.themes.library = {};
+                        for (themeName in this.library.themes) {
+                            theme = this.library.themes[themeName];
+                            themeConfig = {
+                                name: themeName,
+                                type: 'library',
+                                base: theme,
+                                language: this.library.locales.languages[this.language] || {},
+                                languageOverrides: transformTranslationsToTheme((this.config.translations && this.config.translations[this.language]) || {}),
+                                currency: this.library.locales.currencies[this.currency] || {},
+                                innerWidth: this.window.innerWidth,
+                            };
+                            if (this.settings.editMode) {
+                                themeOverrides = this.storage.get('overrides.theme.variables') || {};
+                                themeConfig.editorOverrides = { variables: themeOverrides || {} };
+                            }
+                            this.addTheme(themeConfig);
+                        }
+                        this.loading = false;
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return TemplatesStore;
+}());
+exports.TemplatesStore = TemplatesStore;
+function transformTranslationsToTheme(translations) {
+    var components = {};
+    Object.keys(translations).forEach(function (component) {
+        components[component] = {
+            // @ts-ignore - don't know which component it may be
+            lang: translations[component],
+        };
+    });
+    return {
+        components: components,
+    };
+}
+var Deferred = /** @class */ (function () {
+    function Deferred() {
+        var _this = this;
+        this.promise = new Promise(function (resolve, reject) {
+            _this.reject = reject;
+            _this.resolve = resolve;
+        });
+    }
+    return Deferred;
+}());

package/dist/cjs/src/Templates/Stores/ThemeStore.d.ts

@@ -0,0 +1,52 @@
+import { TemplateThemeTypes, type TemplatesStoreConfigSettings, type TemplatesStoreDependencies } from './TemplateStore';
+import { ThemeMinimal, ThemeVariablesPartial, type Theme, ThemePartial, ThemeOverrides, ThemeVariableBreakpoints, ResponsiveKeys, ThemeComplete } from '../../../components/src';
+import type { GlobalThemeStyleScript } from '../../types';
+export type ThemeStoreThemeConfig = {
+    name: string;
+    type: TemplateThemeTypes;
+    base: ThemeComplete;
+    overrides?: ThemeOverrides;
+    editorOverrides?: ThemePartial;
+    variables?: ThemeVariablesPartial;
+    currency: ThemeMinimal;
+    language: ThemeMinimal;
+    languageOverrides: ThemeMinimal;
+    innerWidth?: number;
+    style?: GlobalThemeStyleScript;
+};
+type ThemeStoreConfig = {
+    config: ThemeStoreThemeConfig;
+    dependencies: TemplatesStoreDependencies;
+    settings: TemplatesStoreConfigSettings;
+};
+export declare class ThemeStore {
+    name: string;
+    type: string;
+    private dependencies;
+    private base;
+    private overrides;
+    editorOverrides: ThemePartial;
+    variables: ThemeVariablesPartial;
+    currency: ThemeMinimal;
+    language: ThemeMinimal;
+    languageOverrides: ThemeMinimal;
+    stored: ThemePartial;
+    innerWidth?: number;
+    editMode: boolean;
+    constructor(params: ThemeStoreConfig);
+    get theme(): Theme;
+    setInnerWidth(innerWidth: number): void;
+    setCurrency(currency: ThemeMinimal): void;
+    setLanguage(language: ThemeMinimal): void;
+    setOverride(obj: {
+        path: string[];
+        rootEditingKey: string;
+        value: unknown;
+    }): void;
+    setEditorOverrides(overrides: ThemePartial): void;
+}
+export declare function mergeThemeLayers(...layers: ThemePartial[]): ThemePartial;
+export declare function getActiveBreakpoint(width: number | undefined, breakpoints: ThemeVariableBreakpoints | undefined): ResponsiveKeys;
+export declare function getOverridesAtActiveBreakpoint(activeBreakpoint: ResponsiveKeys, theme: ThemePartial): ThemePartial;
+export {};
+//# sourceMappingURL=ThemeStore.d.ts.map

package/dist/cjs/src/Templates/Stores/ThemeStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeStore.d.ts","sourceRoot":"","sources":["../../../../../src/Templates/Stores/ThemeStore.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,KAAK,4BAA4B,EAAE,KAAK,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAGzH,OAAO,EACN,YAAY,EACZ,qBAAqB,EACrB,KAAK,KAAK,EACV,YAAY,EACZ,cAAc,EACd,wBAAwB,EAExB,cAAc,EACd,aAAa,EACb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,kBAAkB,CAAC;IACzB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,iBAAiB,EAAE,YAAY,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAC/B,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,YAAY,EAAE,0BAA0B,CAAC;IACzC,QAAQ,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,qBAAa,UAAU;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IAEpB,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,IAAI,CAAgB;IAC5B,OAAO,CAAC,SAAS,CAAiB;IAClC,eAAe,EAAE,YAAY,CAAC;IAC9B,SAAS,EAAE,qBAAqB,CAAC;IACjC,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,iBAAiB,EAAE,YAAY,CAAC;IAChC,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;gBAEN,MAAM,EAAE,gBAAgB;IAiEpC,IAAW,KAAK,IAAI,KAAK,CAoFxB;IAEM,aAAa,CAAC,UAAU,EAAE,MAAM;IAIhC,WAAW,CAAC,QAAQ,EAAE,YAAY;IAIlC,WAAW,CAAC,QAAQ,EAAE,YAAY;IAIlC,WAAW,CAAC,GAAG,EAAE;QAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,cAAc,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE;IAqB3E,kBAAkB,CAAC,SAAS,EAAE,YAAY;CAGjD;AAED,wBAAgB,gBAAgB,CAAC,GAAG,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAExE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,WAAW,EAAE,wBAAwB,GAAG,SAAS,GAAG,cAAc,CAahI;AAED,wBAAgB,8BAA8B,CAAC,gBAAgB,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,GAAG,YAAY,CAOlH"}

package/dist/cjs/src/Templates/Stores/ThemeStore.js

@@ -0,0 +1,264 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeStore = void 0;
+exports.mergeThemeLayers = mergeThemeLayers;
+exports.getActiveBreakpoint = getActiveBreakpoint;
+exports.getOverridesAtActiveBreakpoint = getOverridesAtActiveBreakpoint;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var preact_1 = require("preact");
+var mobx_1 = require("mobx");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var is_plain_object_1 = require("is-plain-object");
+var react_1 = require("@emotion/react");
+var cache_1 = require("../../../components/src/providers/cache");
+var mergeProps_1 = require("../../../components/src/utilities/mergeProps");
+var ThemeStore = /** @class */ (function () {
+    function ThemeStore(params) {
+        var _a, _b, _c, _d, _e, _f;
+        var config = params.config, dependencies = params.dependencies, settings = params.settings;
+        this.dependencies = dependencies;
+        this.editMode = settings.editMode;
+        var name = config.name, style = config.style, type = config.type, base = config.base, overrides = config.overrides, editorOverrides = config.editorOverrides, variables = config.variables, currency = config.currency, language = config.language, languageOverrides = config.languageOverrides, innerWidth = config.innerWidth;
+        // add prefixes to base theme components and responsive components
+        base.components = prefixComponentKeys('*', base.components);
+        if (base.responsive) {
+            base.responsive.mobile = prefixComponentKeys('*(M)', (_a = base.responsive) === null || _a === void 0 ? void 0 : _a.mobile);
+            base.responsive.tablet = prefixComponentKeys('*(T)', (_b = base.responsive) === null || _b === void 0 ? void 0 : _b.tablet);
+            base.responsive.desktop = prefixComponentKeys('*(D)', (_c = base.responsive) === null || _c === void 0 ? void 0 : _c.desktop);
+        }
+        if (overrides === null || overrides === void 0 ? void 0 : overrides.responsive) {
+            overrides.responsive.mobile = prefixComponentKeys('(M)', (_d = overrides.responsive) === null || _d === void 0 ? void 0 : _d.mobile);
+            overrides.responsive.tablet = prefixComponentKeys('(T)', (_e = overrides.responsive) === null || _e === void 0 ? void 0 : _e.tablet);
+            overrides.responsive.desktop = prefixComponentKeys('(D)', (_f = overrides.responsive) === null || _f === void 0 ? void 0 : _f.desktop);
+        }
+        this.name = name;
+        this.type = type;
+        this.base = base;
+        this.overrides = overrides || {};
+        this.editorOverrides = editorOverrides || {};
+        this.variables = variables || {};
+        this.currency = currency;
+        this.language = language;
+        this.languageOverrides = languageOverrides;
+        this.stored = (settings.editMode && this.dependencies.storage.get("themes.".concat(this.type, ".").concat(this.name, ".variables"))) || {};
+        this.innerWidth = innerWidth;
+        (0, mobx_1.makeObservable)(this, {
+            name: mobx_1.observable,
+            variables: mobx_1.observable,
+            currency: mobx_1.observable,
+            language: mobx_1.observable,
+            editorOverrides: mobx_1.observable,
+            stored: mobx_1.observable,
+            innerWidth: mobx_1.observable,
+            theme: mobx_1.computed, // make theme getter a computed property (memoized)
+        });
+        // handle adding the style to the document (should only happen once per theme)
+        if (style) {
+            var GlobalStyle = (0, mobx_react_lite_1.observer)(function (props) {
+                var _a;
+                var self = props.self;
+                var theme = self.theme;
+                var styles = (0, react_1.css)((_a = {},
+                    _a[".ss__theme__".concat(theme.name)] = style({ name: theme.name, variables: theme.variables }),
+                    _a));
+                return ((0, jsx_runtime_1.jsx)(cache_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Global, { styles: styles }) }));
+            });
+            var styleElem = document.createElement('style');
+            styleElem.innerHTML = "<!-- athos style injection point for \"".concat(this.name, "\" theme -->");
+            document.head.appendChild(styleElem);
+            (0, preact_1.render)((0, jsx_runtime_1.jsx)(GlobalStyle, { theme: this.theme, self: this, themeName: this.name }), styleElem);
+        }
+    }
+    Object.defineProperty(ThemeStore.prototype, "theme", {
+        get: function () {
+            /*
+                Themes consist of layers which are deep merged together in order (last merge has highest priority)
+                    1. base theme
+                    2. base theme responsive breakpoints
+                    3. currency
+                    4. language
+                    5. language translation overrides
+                    6. theme overrides
+                    7. theme overrides at responsive breakpoints
+                    8. altered theme variables
+                    9. stored theme editor overrides
+            */
+            var _a, _b, _c;
+            // const breakpoints = this.variables.breakpoints || this.base.variables?.breakpoints;
+            var breakpoints = deepmerge_1.default.all([
+                this.base.variables.breakpoints,
+                this.variables.breakpoints || {},
+                (this.editMode && ((_b = (_a = this.editorOverrides) === null || _a === void 0 ? void 0 : _a.variables) === null || _b === void 0 ? void 0 : _b.breakpoints)) || {},
+            ]);
+            var activeBreakpoint = getActiveBreakpoint(this.innerWidth, breakpoints);
+            // overrides breakpoint is index file responsive overrides that match current breakpoint
+            var overrideBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.overrides);
+            // currently selected theme layer for current breakpoint
+            var baseBreakpoint = getOverridesAtActiveBreakpoint(activeBreakpoint, this.base);
+            // currently selected theme
+            var base = __assign({}, this.base);
+            // overrides is index file default overrides
+            var overrides = __assign({}, this.overrides);
+            var themeOverrides = mergeThemeLayers(overrides, overrideBreakpoint, {
+                variables: (0, mobx_1.toJS)(this.variables),
+            });
+            var theme = mergeThemeLayers(base, baseBreakpoint, this.currency, this.language, this.languageOverrides, themeOverrides, {
+                activeBreakpoint: activeBreakpoint,
+            });
+            var _loop_1 = function (componentName) {
+                var component = theme.components[componentName];
+                var themeComponents = (_c = component === null || component === void 0 ? void 0 : component.theme) === null || _c === void 0 ? void 0 : _c.components;
+                // if a component has a theme property with components
+                if (themeComponents) {
+                    var _loop_2 = function (themeComponentName) {
+                        var themeComponentsApplicableSelectors = (0, mergeProps_1.filterSelectors)(themeOverrides.components || {}, "".concat(componentName, " ").concat(themeComponentName)).sort(mergeProps_1.sortSelectors);
+                        themeComponentsApplicableSelectors.forEach(function (selector) {
+                            var themeComponentPropsOverrides = themeOverrides.components[selector];
+                            if (themeComponentPropsOverrides) {
+                                var themeComponentProps = themeComponents[themeComponentName];
+                                // @ts-ignore - hard to type this
+                                themeComponents[themeComponentName] = __assign(__assign({}, themeComponentProps), themeComponentPropsOverrides);
+                            }
+                        });
+                    };
+                    for (var themeComponentName in themeComponents) {
+                        _loop_2(themeComponentName);
+                    }
+                }
+            };
+            /*
+                Ensure 'theme' prop has overrides applied to it
+                - separate the "base" theme from "overrides"
+                - inspect the "base" theme object for keys that have a 'theme' property
+                - if the 'theme' property exists, merge overrides for matching keys in overrides
+            */
+            // loop through all components
+            for (var componentName in theme.components) {
+                _loop_1(componentName);
+            }
+            // TemplateEditor overrides
+            if (this.stored) {
+                theme = mergeThemeLayers(theme, this.stored);
+            }
+            // TemplateEditor variable overrides
+            if (this.editMode) {
+                theme = mergeThemeLayers(theme, this.editorOverrides);
+            }
+            // change the theme name to match the ThemeStore theme name
+            theme.name = this.name;
+            return theme;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ThemeStore.prototype.setInnerWidth = function (innerWidth) {
+        this.innerWidth = innerWidth;
+    };
+    ThemeStore.prototype.setCurrency = function (currency) {
+        this.currency = currency;
+    };
+    ThemeStore.prototype.setLanguage = function (language) {
+        this.language = language;
+    };
+    ThemeStore.prototype.setOverride = function (obj) {
+        var _a;
+        var path = obj.path, rootEditingKey = obj.rootEditingKey, value = obj.value;
+        var overrides = (_a = {},
+            _a[rootEditingKey] = path
+                .slice()
+                .reverse()
+                .reduce(function (res, key) {
+                var _a, _b;
+                if (path.indexOf(key) === path.length - 1) {
+                    return _a = {},
+                        _a[key] = value,
+                        _a;
+                }
+                return _b = {},
+                    _b[key] = res,
+                    _b;
+            }, {}),
+            _a);
+        this.stored = mergeThemeLayers(this.stored, overrides);
+        this.dependencies.storage.set("themes.".concat(this.type, ".").concat(this.name, ".variables"), this.stored);
+    };
+    ThemeStore.prototype.setEditorOverrides = function (overrides) {
+        this.editorOverrides = overrides;
+    };
+    return ThemeStore;
+}());
+exports.ThemeStore = ThemeStore;
+function mergeThemeLayers() {
+    var layers = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        layers[_i] = arguments[_i];
+    }
+    return deepmerge_1.default.all(layers, { arrayMerge: arrayMerge });
+}
+function getActiveBreakpoint(width, breakpoints) {
+    var breakpoint;
+    if (Number.isInteger(width) && breakpoints) {
+        Object.keys(breakpoints).forEach(function (bp) {
+            if (width <= breakpoints[bp]) {
+                if (!breakpoint || breakpoints[breakpoint] > breakpoints[bp]) {
+                    breakpoint = bp;
+                }
+            }
+        });
+    }
+    return breakpoint || 'default';
+}
+function getOverridesAtActiveBreakpoint(activeBreakpoint, theme) {
+    var overrides = {};
+    if (activeBreakpoint && theme.responsive) {
+        overrides = (theme.responsive && theme.responsive[activeBreakpoint]) || {};
+    }
+    return { components: overrides };
+}
+var arrayMerge = function (target, source, options) {
+    // trim off any excess array entries
+    var destination = target.slice(0, source.length);
+    source.forEach(function (item, index) {
+        if (typeof destination[index] === 'undefined') {
+            destination[index] = options.cloneUnlessOtherwiseSpecified(item, options);
+        }
+        else if ((0, is_plain_object_1.isPlainObject)(item)) {
+            destination[index] = (0, deepmerge_1.default)(target[index], item, options);
+        }
+        else {
+            destination[index] = item;
+        }
+    });
+    return destination;
+};
+function prefixComponentKeys(prefix, components) {
+    // TODO: remove any?
+    var newComponents = {};
+    if (components) {
+        Object.keys(components).forEach(function (key) {
+            //does the key already have the prefix? - this is needed when using the editor.
+            if (key.indexOf(prefix) === 0) {
+                newComponents[key] = components[key];
+                return;
+            }
+            // add the prefix to the key
+            newComponents["".concat(prefix).concat(key)] = components[key];
+        });
+    }
+    return newComponents;
+}

package/dist/cjs/src/Templates/Stores/library/components/AutocompleteFixed.d.ts

@@ -0,0 +1,2 @@
+export { AutocompleteFixed } from '../../../../../components/src/components/Templates/AutocompleteFixed';
+//# sourceMappingURL=AutocompleteFixed.d.ts.map

package/dist/cjs/src/Templates/Stores/library/components/AutocompleteFixed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/library/components/AutocompleteFixed.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC"}