@brndts/brndts-ads 1.1.5 → 1.2.0

package/dist/index.mjs

@@ -499,22 +499,22 @@ var require_events = __commonJS({
         var NumberIsNaN = Number.isNaN || function NumberIsNaN2(value2) {
             return value2 !== value2;
         };
-        function EventEmitter6() {
-            EventEmitter6.init.call(this);
+        function EventEmitter7() {
+            EventEmitter7.init.call(this);
         }
-        module2.exports = EventEmitter6;
+        module2.exports = EventEmitter7;
         module2.exports.once = once;
-        EventEmitter6.EventEmitter = EventEmitter6;
-        EventEmitter6.prototype._events = void 0;
-        EventEmitter6.prototype._eventsCount = 0;
-        EventEmitter6.prototype._maxListeners = void 0;
+        EventEmitter7.EventEmitter = EventEmitter7;
+        EventEmitter7.prototype._events = void 0;
+        EventEmitter7.prototype._eventsCount = 0;
+        EventEmitter7.prototype._maxListeners = void 0;
         var defaultMaxListeners = 10;
         function checkListener(listener2) {
             if (typeof listener2 !== "function") {
                 throw new TypeError('The "listener" argument must be of type Function. Received type ' + (typeof listener2 === "undefined" ? "undefined" : _type_of(listener2)));
             }
         }
-        Object.defineProperty(EventEmitter6, "defaultMaxListeners", {
+        Object.defineProperty(EventEmitter7, "defaultMaxListeners", {
             enumerable: true,
             get: function get() {
                 return defaultMaxListeners;
@@ -526,14 +526,14 @@ var require_events = __commonJS({
                 defaultMaxListeners = arg;
             }
         });
-        EventEmitter6.init = function() {
+        EventEmitter7.init = function() {
             if (this._events === void 0 || this._events === Object.getPrototypeOf(this)._events) {
                 this._events = /* @__PURE__ */ Object.create(null);
                 this._eventsCount = 0;
             }
             this._maxListeners = this._maxListeners || void 0;
         };
-        EventEmitter6.prototype.setMaxListeners = function setMaxListeners(n) {
+        EventEmitter7.prototype.setMaxListeners = function setMaxListeners(n) {
             if (typeof n !== "number" || n < 0 || NumberIsNaN(n)) {
                 throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received ' + n + ".");
             }
@@ -541,13 +541,13 @@ var require_events = __commonJS({
             return this;
         };
         function _getMaxListeners(that) {
-            if (that._maxListeners === void 0) return EventEmitter6.defaultMaxListeners;
+            if (that._maxListeners === void 0) return EventEmitter7.defaultMaxListeners;
             return that._maxListeners;
         }
-        EventEmitter6.prototype.getMaxListeners = function getMaxListeners() {
+        EventEmitter7.prototype.getMaxListeners = function getMaxListeners() {
             return _getMaxListeners(this);
         };
-        EventEmitter6.prototype.emit = function emit(type) {
+        EventEmitter7.prototype.emit = function emit(type) {
             var args = [];
             for(var i = 1; i < arguments.length; i++)args.push(arguments[i]);
             var doError = type === "error";
@@ -621,11 +621,11 @@ var require_events = __commonJS({
             }
             return target;
         }
-        EventEmitter6.prototype.addListener = function addListener(type, listener2) {
+        EventEmitter7.prototype.addListener = function addListener(type, listener2) {
             return _addListener(this, type, listener2, false);
         };
-        EventEmitter6.prototype.on = EventEmitter6.prototype.addListener;
-        EventEmitter6.prototype.prependListener = function prependListener(type, listener2) {
+        EventEmitter7.prototype.on = EventEmitter7.prototype.addListener;
+        EventEmitter7.prototype.prependListener = function prependListener(type, listener2) {
             return _addListener(this, type, listener2, true);
         };
         function onceWrapper() {
@@ -649,17 +649,17 @@ var require_events = __commonJS({
             state.wrapFn = wrapped;
             return wrapped;
         }
-        EventEmitter6.prototype.once = function once2(type, listener2) {
+        EventEmitter7.prototype.once = function once2(type, listener2) {
             checkListener(listener2);
             this.on(type, _onceWrap(this, type, listener2));
             return this;
         };
-        EventEmitter6.prototype.prependOnceListener = function prependOnceListener(type, listener2) {
+        EventEmitter7.prototype.prependOnceListener = function prependOnceListener(type, listener2) {
             checkListener(listener2);
             this.prependListener(type, _onceWrap(this, type, listener2));
             return this;
         };
-        EventEmitter6.prototype.removeListener = function removeListener(type, listener2) {
+        EventEmitter7.prototype.removeListener = function removeListener(type, listener2) {
             var list, events, position, i, originalListener;
             checkListener(listener2);
             events = this._events;
@@ -691,8 +691,8 @@ var require_events = __commonJS({
             }
             return this;
         };
-        EventEmitter6.prototype.off = EventEmitter6.prototype.removeListener;
-        EventEmitter6.prototype.removeAllListeners = function removeAllListeners(type) {
+        EventEmitter7.prototype.off = EventEmitter7.prototype.removeListener;
+        EventEmitter7.prototype.removeAllListeners = function removeAllListeners(type) {
             var listeners, events, i;
             events = this._events;
             if (events === void 0) return this;
@@ -741,20 +741,20 @@ var require_events = __commonJS({
             ];
             return unwrap ? unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
         }
-        EventEmitter6.prototype.listeners = function listeners(type) {
+        EventEmitter7.prototype.listeners = function listeners(type) {
             return _listeners(this, type, true);
         };
-        EventEmitter6.prototype.rawListeners = function rawListeners(type) {
+        EventEmitter7.prototype.rawListeners = function rawListeners(type) {
             return _listeners(this, type, false);
         };
-        EventEmitter6.listenerCount = function(emitter, type) {
+        EventEmitter7.listenerCount = function(emitter, type) {
             if (typeof emitter.listenerCount === "function") {
                 return emitter.listenerCount(type);
             } else {
                 return listenerCount.call(emitter, type);
             }
         };
-        EventEmitter6.prototype.listenerCount = listenerCount;
+        EventEmitter7.prototype.listenerCount = listenerCount;
         function listenerCount(type) {
             var events = this._events;
             if (events !== void 0) {
@@ -767,7 +767,7 @@ var require_events = __commonJS({
             }
             return 0;
         }
-        EventEmitter6.prototype.eventNames = function eventNames() {
+        EventEmitter7.prototype.eventNames = function eventNames() {
             return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : [];
         };
         function arrayClone(arr, n) {
@@ -19029,12 +19029,8 @@ function _getGeneralInfo() {
         var info;
         return _ts_generator(this, function(_state) {
             info = {};
-            try {
-                info.ua = navigator.userAgent;
-                info.domain = window.location.hostname;
-            } catch (error) {
-                console.log("Error getting info", error);
-            }
+            info.ua = navigator.userAgent;
+            info.domain = window.location.hostname;
             return [
                 2,
                 info
@@ -19215,8 +19211,8 @@ var defaults = {
         enabled: true,
         useLocalCache: false,
         presentation: {
-            duration: 2,
-            cooldown: 10
+            duration: 3,
+            cooldown: 3
         },
         regions: {
             useCache: true,
@@ -19822,41 +19818,70 @@ var MappedCollection = /*#__PURE__*/ function() {
     ]);
     return MappedCollection;
 }();
-// src/Ads/Regions/Region.ts
-var Plane = /*#__PURE__*/ function() {
+// src/Ads/Regions/RegionComponents.ts
+var import_events = __toESM(require_events());
+var RegionContours = /*#__PURE__*/ function(_import_events_default) {
     "use strict";
-    function Plane(descriptor) {
-        _class_call_check(this, Plane);
-        this.size = _object_spread({
-            width: 0,
-            height: 0
-        }, descriptor || {});
+    _inherits(_RegionContours, _import_events_default);
+    function _RegionContours(contours) {
+        _class_call_check(this, _RegionContours);
+        var _this;
+        _this = _call_super(this, _RegionContours);
+        _this.points = _to_consumable_array(contours || []);
+        return _this;
     }
-    _create_class(Plane, [
+    _create_class(_RegionContours, [
+        {
+            key: "isEqual",
+            value: function isEqual(points) {
+                return _RegionContours.isEqual(this.points, points);
+            }
+        },
         {
             key: "update",
-            value: function update(descriptor) {
-                this.size = _object_spread({
-                    width: 0,
-                    height: 0
-                }, descriptor || {});
+            value: function update(contours) {
+                this.points = _to_consumable_array(contours);
+                this.emit("update");
+            }
+        }
+    ], [
+        {
+            key: "isEqual",
+            value: function isEqual(contoursA, contoursB) {
+                return contoursA.every(function(v, i) {
+                    return v.x === contoursB[i].x && v.y === contoursB[i].y;
+                });
             }
         }
     ]);
-    return Plane;
-}();
-var RegionBox = /*#__PURE__*/ function() {
+    return _RegionContours;
+}(import_events.default);
+var RegionBox = /*#__PURE__*/ function(_import_events_default) {
     "use strict";
+    _inherits(_RegionBox, _import_events_default);
     function _RegionBox(coords) {
         _class_call_check(this, _RegionBox);
-        this.coords = _object_spread({
+        var _this;
+        _this = _call_super(this, _RegionBox);
+        _this.coords = _object_spread({
             x1: 0,
             x2: 0,
             y1: 0,
             y2: 0
         }, coords || {});
+        return _this;
     }
     _create_class(_RegionBox, [
+        {
+            key: "update",
+            value: function update(coords) {
+                if (_RegionBox.isEqual(this.coords, coords)) {
+                    return;
+                }
+                this.coords = _object_spread({}, coords);
+                this.emit("update");
+            }
+        },
         {
             key: "isEqual",
             value: function isEqual(coordsB) {
@@ -19908,30 +19933,121 @@ var RegionBox = /*#__PURE__*/ function() {
         }
     ]);
     return _RegionBox;
+}(import_events.default);
+var Plane = /*#__PURE__*/ function(_import_events_default) {
+    "use strict";
+    _inherits(Plane, _import_events_default);
+    function Plane(descriptor) {
+        _class_call_check(this, Plane);
+        var _this;
+        _this = _call_super(this, Plane);
+        _this.size = _object_spread({
+            width: 0,
+            height: 0
+        }, descriptor || {});
+        return _this;
+    }
+    _create_class(Plane, [
+        {
+            key: "update",
+            value: function update(descriptor) {
+                this.size = _object_spread({
+                    width: 0,
+                    height: 0
+                }, descriptor || {});
+                this.emit("update");
+            }
+        }
+    ]);
+    return Plane;
+}(import_events.default);
+var RegionContent = /*#__PURE__*/ function() {
+    "use strict";
+    function RegionContent(plane, box) {
+        _class_call_check(this, RegionContent);
+        this.plane = plane;
+        this.box = box;
+        this.container = document.createElement("div");
+        this.container.classList.add("BRNDTS_RB");
+        this.render();
+    }
+    _create_class(RegionContent, [
+        {
+            key: "view",
+            get: function get() {
+                return this.container;
+            }
+        },
+        {
+            key: "hasContent",
+            get: function get() {
+                return this.container.childNodes.length > 0;
+            }
+        },
+        {
+            key: "addContent",
+            value: function addContent(content) {
+                var _this = this;
+                this.container.innerHTML = "";
+                if (Array.isArray(content)) {
+                    content.forEach(function(element) {
+                        return _this.container.appendChild(element);
+                    });
+                } else {
+                    this.container.appendChild(content);
+                }
+                this.render();
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                this.container.style.width = "".concat(this.box.width(this.plane.size), "px");
+                this.container.style.height = "".concat(this.box.height(this.plane.size), "px");
+                this.container.style.visibility = this.box.area(this.plane.size) > 0 ? "visible" : "hidden";
+            }
+        },
+        {
+            key: "clear",
+            value: function clear() {
+                this.container.style.width = "0px";
+                this.container.style.height = "0px";
+                this.container.style.visibility = "hidden";
+            }
+        },
+        {
+            key: "destroy",
+            value: function destroy() {
+                this.container.innerHTML = "";
+                this.clear();
+            }
+        }
+    ]);
+    return RegionContent;
 }();
+// src/Ads/Regions/Region.ts
 var Region = /*#__PURE__*/ function() {
     "use strict";
     function Region(id, regionDescriptor, planeDescriptor, deps) {
         var _this = this;
         _class_call_check(this, Region);
+        this.onScreen = false;
         this.visible = false;
+        this.plugins = [];
         this.id = id;
         this.regionDescriptor = regionDescriptor;
-        this.contours = [];
-        this.box = new RegionBox();
+        this.contours = new RegionContours(regionDescriptor.contours);
+        this.box = new RegionBox(regionDescriptor.box);
         this.plane = new Plane(planeDescriptor);
         this.deps = deps;
+        this.plugins = _to_consumable_array(this.plugins).concat(_to_consumable_array(this.deps.plugins || []));
         this.container = document.createElement("div");
         this.container.id = this.id;
         this.container.classList.add("BRNDTS_R");
         this.container.style.position = "absolute";
         this.container.style.pointerEvents = "all";
-        this.boxView = document.createElement("div");
-        this.boxView.classList.add("BRNDTS_RB");
-        this.maskLayer = document.createElement("canvas");
-        this.maskLayer.classList.add("BRNDTS_RM");
-        this.container.appendChild(this.boxView);
-        this.container.appendChild(this.maskLayer);
+        this.content = new RegionContent(this.plane, this.box);
+        this.container.appendChild(this.content.view);
         this.handleClick = this.handleClick.bind(this);
         this.handleMouseEnter = this.handleMouseEnter.bind(this);
         this.handleMouseLeave = this.handleMouseLeave.bind(this);
@@ -19940,18 +20056,18 @@ var Region = /*#__PURE__*/ function() {
         this.container.addEventListener("mouseleave", this.handleMouseLeave);
         if (this.deps.provider) {
             this.deps.provider.onRefreshContents(function(contents) {
-                var _this_deps_recorder;
-                _this.boxView.innerHTML = "";
-                for(var index = 0; index < contents.length; index++){
-                    _this.boxView.appendChild(contents[index]);
-                }
-                (_this_deps_recorder = _this.deps.recorder) === null || _this_deps_recorder === void 0 ? void 0 : _this_deps_recorder.presentationStateChanged(_this);
+                _this.content.clear();
+                _this.content.addContent(contents);
             });
+            if (this.boxArea > 0) {
+                this.requestContent();
+            }
+            {
+                this.content.clear();
+                this.content.addContent(this.deps.provider.contents());
+            }
         }
         this.render(regionDescriptor.contours, regionDescriptor.box);
-        if (this.boxArea > 0) {
-            this.requestContent();
-        }
     }
     _create_class(Region, [
         {
@@ -19991,6 +20107,56 @@ var Region = /*#__PURE__*/ function() {
                 this.isPresented && ((_this_deps_recorder = this.deps.recorder) === null || _this_deps_recorder === void 0 ? void 0 : _this_deps_recorder.mouseLeave(this));
             }
         },
+        {
+            key: "applyPlugins",
+            value: function applyPlugins(key) {
+                var _this = this;
+                return _async_to_generator(function() {
+                    var index, _this_plugins_index_key, _this_plugins_index;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                index = 0;
+                                _state.label = 1;
+                            case 1:
+                                if (!(index < _this.plugins.length)) return [
+                                    3,
+                                    4
+                                ];
+                                return [
+                                    4,
+                                    (_this_plugins_index_key = (_this_plugins_index = _this.plugins[index])[key]) === null || _this_plugins_index_key === void 0 ? void 0 : _this_plugins_index_key.call(_this_plugins_index, _this)
+                                ];
+                            case 2:
+                                _state.sent();
+                                _state.label = 3;
+                            case 3:
+                                index++;
+                                return [
+                                    3,
+                                    1
+                                ];
+                            case 4:
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                })();
+            }
+        },
+        {
+            key: "shouldPresent",
+            value: function shouldPresent() {
+                return this.box.area(this.plane.size) > 0 && this.content.hasContent && !this.visible;
+            }
+        },
+        {
+            key: "shouldHide",
+            value: function shouldHide() {
+                return (this.box.area(this.plane.size) === 0 || !this.content.hasContent) && this.visible;
+            }
+        },
         {
             key: "updateRegion",
             value: function updateRegion(region) {
@@ -20005,7 +20171,13 @@ var Region = /*#__PURE__*/ function() {
                     width: width,
                     height: height
                 });
-                this.render(this.contours, this.box.coords);
+                this.render(this.contours.points, this.box.coords);
+            }
+        },
+        {
+            key: "regionContours",
+            get: function get() {
+                return this.contours;
             }
         },
         {
@@ -20061,7 +20233,7 @@ var Region = /*#__PURE__*/ function() {
             get: function get() {
                 var _this = this;
                 var area = 0;
-                var mappedVertices = this.contours.map(function(v) {
+                var mappedVertices = this.contours.points.map(function(v) {
                     return {
                         x: v.x * _this.plane.size.width,
                         y: v.y * _this.plane.size.height
@@ -20079,26 +20251,26 @@ var Region = /*#__PURE__*/ function() {
         {
             key: "isPresented",
             get: function get() {
-                return this.boxWidth * this.boxHeight > 0;
+                return this.box.area(this.plane.size) > 0;
             }
         },
         {
             key: "isVisible",
             get: function get() {
-                return this.visible;
+                return this.onScreen;
             }
         },
         {
             key: "hasContent",
             get: function get() {
-                return this.boxView.children.length > 0;
+                return this.content.hasContent;
             }
         },
         {
             key: "updateVisibility",
             value: function updateVisibility(value2) {
                 var _this_deps_recorder;
-                this.visible = value2;
+                this.onScreen = value2;
                 (_this_deps_recorder = this.deps.recorder) === null || _this_deps_recorder === void 0 ? void 0 : _this_deps_recorder.displayStateChanged(this);
             }
         },
@@ -20106,61 +20278,81 @@ var Region = /*#__PURE__*/ function() {
             key: "render",
             value: function render(contours, box) {
                 var _this = this;
-                var _this_deps_recorder;
-                this.contours = contours;
-                var newBox = new RegionBox(box);
-                if (!this.box.isEqual(newBox.coords) && newBox.area(this.plane.size) > 0) {
-                    this.box = newBox;
-                    this.requestContent();
-                }
-                this.box = newBox;
-                this.container.style.width = "".concat(this.boxWidth, "px");
-                this.container.style.height = "".concat(this.boxHeight, "px");
-                this.container.style.left = "".concat(this.boxLeft, "px");
-                this.container.style.top = "".concat(this.boxTop, "px");
-                this.boxView.style.width = "".concat(Math.floor(this.boxWidth), "px");
-                this.boxView.style.height = "".concat(Math.floor(this.boxHeight), "px");
-                if (this.maskLayer) {
-                    this.maskLayer.width = this.boxWidth;
-                    this.maskLayer.style.width = "".concat(this.boxWidth, "px");
-                    this.maskLayer.height = this.boxHeight;
-                    this.maskLayer.style.height = "".concat(this.boxHeight, "px");
-                    var ctx = this.maskLayer.getContext("2d");
-                    if (!ctx) {
-                        return;
-                    }
-                    if (this.contours.length === 0) {
-                        ctx.clearRect(0, 0, this.boxWidth, this.boxHeight);
-                        ctx.fillStyle = "white";
-                        ctx.fill();
-                        ctx.fillStyle = "black";
-                        ctx.strokeStyle = "black";
-                        ctx.lineWidth = 2;
-                    } else {
-                        ctx.beginPath();
-                        ctx.moveTo(this.contours[0].x * this.plane.size.width - this.boxLeft, this.contours[0].y * this.plane.size.height - this.boxTop);
-                        this.contours.forEach(function(point) {
-                            return ctx.lineTo(point.x * _this.plane.size.width - _this.boxLeft, point.y * _this.plane.size.height - _this.boxTop);
-                        });
-                        ctx.closePath();
-                        ctx.stroke();
-                        ctx.filter = "blur(1px)";
-                        ctx.fillStyle = "black";
-                        ctx.fill();
-                    }
-                    var maskUrl = "url(" + this.maskLayer.toDataURL() + ")";
-                    if (this.boxView) {
-                        this.boxView.style.maskImage = maskUrl;
-                    }
-                }
-                (_this_deps_recorder = this.deps.recorder) === null || _this_deps_recorder === void 0 ? void 0 : _this_deps_recorder.presentationStateChanged(this);
+                return _async_to_generator(function() {
+                    var _this_deps_recorder, newBox;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                _this.applyPlugins("beforeRender");
+                                newBox = new RegionBox(box);
+                                if (!_this.box.isEqual(newBox.coords) && newBox.area(_this.plane.size) > 0) {
+                                    _this.requestContent();
+                                }
+                                _this.box.update(box);
+                                _this.contours.update(contours);
+                                if (!_this.shouldPresent()) return [
+                                    3,
+                                    1
+                                ];
+                                _this.applyPlugins("beforeShow");
+                                _this.container.style.width = "".concat(_this.box.width(_this.plane.size), "px");
+                                _this.container.style.height = "".concat(_this.box.height(_this.plane.size), "px");
+                                _this.container.style.left = "".concat(_this.boxLeft, "px");
+                                _this.container.style.top = "".concat(_this.boxTop, "px");
+                                _this.content.render();
+                                _this.applyPlugins("afterShow");
+                                _this.visible = true;
+                                return [
+                                    3,
+                                    4
+                                ];
+                            case 1:
+                                if (!_this.shouldHide()) return [
+                                    3,
+                                    3
+                                ];
+                                return [
+                                    4,
+                                    _this.applyPlugins("beforeHide")
+                                ];
+                            case 2:
+                                _state.sent();
+                                _this.container.style.width = "0px";
+                                _this.container.style.height = "0px";
+                                _this.container.style.left = "0px";
+                                _this.container.style.top = "0px";
+                                _this.content.render();
+                                _this.applyPlugins("afterHide");
+                                _this.visible = false;
+                                return [
+                                    3,
+                                    4
+                                ];
+                            case 3:
+                                if (_this.visible) {
+                                    _this.container.style.width = "".concat(_this.box.width(_this.plane.size), "px");
+                                    _this.container.style.height = "".concat(_this.box.height(_this.plane.size), "px");
+                                    _this.container.style.left = "".concat(_this.boxLeft, "px");
+                                    _this.container.style.top = "".concat(_this.boxTop, "px");
+                                    _this.content.render();
+                                }
+                                _state.label = 4;
+                            case 4:
+                                _this.applyPlugins("afterRender");
+                                (_this_deps_recorder = _this.deps.recorder) === null || _this_deps_recorder === void 0 ? void 0 : _this_deps_recorder.presentationStateChanged(_this);
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                })();
             }
         },
         {
             key: "clear",
             value: function clear() {
                 this.updateRegion({
-                    id: 0,
+                    id: this.regionDescriptor.id,
                     box: {
                         x1: 0,
                         x2: 0,
@@ -20208,6 +20400,211 @@ var AdRegion = /*#__PURE__*/ function(Region) {
     ]);
     return AdRegion;
 }(Region);
+// src/Ads/Regions/Plugins/Animation/RegionAnimationPlugin.ts
+var RegionAnimationPlugin = /*#__PURE__*/ function() {
+    "use strict";
+    function RegionAnimationPlugin() {
+        _class_call_check(this, RegionAnimationPlugin);
+    }
+    _create_class(RegionAnimationPlugin, [
+        {
+            key: "getBoxPosition",
+            value: function getBoxPosition(plane, box) {
+                var planeWidth = plane.size.width;
+                var planeHeight = plane.size.height;
+                var coords = {
+                    x1: box.coords.x1 * planeWidth,
+                    y1: box.coords.y1 * planeHeight,
+                    x2: box.coords.x2 * planeWidth,
+                    y2: box.coords.y2 * planeHeight
+                };
+                var centerX = (coords.x1 + coords.x2) / 2;
+                var centerY = (coords.y1 + coords.y2) / 2;
+                var isTop = centerY < planeHeight / 2;
+                var isBottom = centerY >= planeHeight / 2;
+                var isLeft = centerX < planeWidth / 3;
+                var isCenter = centerX >= planeWidth / 3 && centerX < 2 * planeWidth / 3;
+                var isRight = centerX >= 2 * planeWidth / 3;
+                if (isTop && isLeft) return "TOP_LEFT";
+                if (isTop && isCenter) return "TOP_CENTER";
+                if (isTop && isRight) return "TOP_RIGHT";
+                if (isBottom && isRight) return "BOTTOM_RIGHT";
+            }
+        },
+        {
+            key: "getAnimationForEntrance",
+            value: function getAnimationForEntrance(region) {
+                var position = this.getBoxPosition(region.referencePlane, region.boundingBox);
+                if (!position) {
+                    return;
+                }
+                return "SLIDE_IN_".concat(position);
+            }
+        },
+        {
+            key: "animateEntrance",
+            value: function animateEntrance(region) {
+                var position = this.getBoxPosition(region.referencePlane, region.boundingBox);
+                if (!position) {
+                    return;
+                }
+                region.position = position;
+                region.content.view.classList.remove("SLIDE_OUT_".concat(position));
+                region.content.view.classList.add("SLIDE_IN_".concat(position));
+            }
+        },
+        {
+            key: "animateExit",
+            value: function animateExit(region) {
+                var position = region.position || this.getBoxPosition(region.referencePlane, region.boundingBox);
+                if (!position) {
+                    return;
+                }
+                region.position = void 0;
+                region.content.view.classList.remove("SLIDE_IN_".concat(position));
+                region.content.view.classList.add("SLIDE_OUT_".concat(position));
+            }
+        },
+        {
+            key: "beforeRender",
+            value: function beforeRender(region) {
+                region.content.view.classList.add("ANIMATE");
+                return Promise.resolve();
+            }
+        },
+        {
+            key: "afterShow",
+            value: function afterShow(region) {
+                this.animateEntrance(region);
+                return Promise.resolve();
+            }
+        },
+        {
+            key: "beforeHide",
+            value: function beforeHide(region) {
+                this.animateExit(region);
+                return new Promise(function(resolve) {
+                    return setTimeout(resolve, 1e3);
+                });
+            }
+        }
+    ]);
+    return RegionAnimationPlugin;
+}();
+// src/Ads/Regions/Plugins/Mask/RegionMaskPlugin.ts
+var RegionMask = /*#__PURE__*/ function() {
+    "use strict";
+    function RegionMask() {
+        _class_call_check(this, RegionMask);
+        this.width = 0;
+        this.height = 0;
+        this.mask = document.createElement("canvas");
+        this.mask.classList.add("BRNDTS_RM");
+    }
+    _create_class(RegionMask, [
+        {
+            key: "view",
+            get: function get() {
+                return this.mask;
+            }
+        },
+        {
+            key: "maskUrl",
+            get: function get() {
+                return "url(" + this.mask.toDataURL() + ")";
+            }
+        },
+        {
+            key: "render",
+            value: function render(plane, box, contours) {
+                this.width = box.width(plane.size);
+                this.height = box.height(plane.size);
+                this.mask.width = box.width(plane.size);
+                this.mask.style.width = "".concat(box.width(plane.size), "px");
+                this.mask.height = box.height(plane.size);
+                this.mask.style.height = "".concat(box.height(plane.size), "px");
+                if (contours.length === 0) {
+                    this.clear();
+                } else {
+                    var ctx = this.mask.getContext("2d");
+                    if (!ctx) {
+                        return;
+                    }
+                    ctx.beginPath();
+                    ctx.moveTo(contours[0].x * plane.size.width - box.coords.x1 * plane.size.width, contours[0].y * plane.size.height - box.coords.y1 * plane.size.height);
+                    contours.forEach(function(point) {
+                        return ctx.lineTo(point.x * plane.size.width - box.coords.x1 * plane.size.width, point.y * plane.size.height - box.coords.y1 * plane.size.height);
+                    });
+                    ctx.closePath();
+                    ctx.stroke();
+                    ctx.filter = "blur(1px)";
+                    ctx.fillStyle = "black";
+                    ctx.fill();
+                }
+            }
+        },
+        {
+            key: "clear",
+            value: function clear() {
+                var ctx = this.mask.getContext("2d");
+                if (!ctx) {
+                    return;
+                }
+                ctx.clearRect(0, 0, this.width, this.height);
+                ctx.fillStyle = "white";
+                ctx.fill();
+                ctx.fillStyle = "black";
+                ctx.strokeStyle = "black";
+                ctx.lineWidth = 2;
+            }
+        }
+    ]);
+    return RegionMask;
+}();
+var RegionMaskPlugin = /*#__PURE__*/ function() {
+    "use strict";
+    function RegionMaskPlugin() {
+        _class_call_check(this, RegionMaskPlugin);
+        this.countours = new RegionContours();
+        this.mask = new RegionMask();
+    }
+    _create_class(RegionMaskPlugin, [
+        {
+            key: "afterRender",
+            value: function afterRender(region) {
+                this.countours.update(region.regionContours.points);
+                this.mask.render(region.referencePlane, region.boundingBox, this.countours.points);
+                region.content.view.style.maskImage = this.mask.maskUrl;
+                return Promise.resolve();
+            }
+        }
+    ]);
+    return RegionMaskPlugin;
+}();
+// src/Ads/Regions/Plugins/Border/RegionBorderPlugin.ts
+var RegionBorderPlugin = /*#__PURE__*/ function() {
+    "use strict";
+    function RegionBorderPlugin() {
+        _class_call_check(this, RegionBorderPlugin);
+    }
+    _create_class(RegionBorderPlugin, [
+        {
+            key: "beforeShow",
+            value: function beforeShow(region) {
+                region.content.view.classList.toggle("BRNDTS_R_B", true);
+                return Promise.resolve();
+            }
+        },
+        {
+            key: "afterHide",
+            value: function afterHide(region) {
+                region.content.view.classList.toggle("BRNDTS_R_B", false);
+                return Promise.resolve();
+            }
+        }
+    ]);
+    return RegionBorderPlugin;
+}();
 // src/Ads/Regions/RegionFactory.ts
 var RegionFactory = /*#__PURE__*/ function() {
     "use strict";
@@ -20217,11 +20614,35 @@ var RegionFactory = /*#__PURE__*/ function() {
         this.deps = deps;
     }
     _create_class(RegionFactory, [
+        {
+            key: "getPluginForStrategy",
+            value: function getPluginForStrategy() {
+                var _this_deps;
+                if (!((_this_deps = this.deps) === null || _this_deps === void 0 ? void 0 : _this_deps.strategy)) {
+                    return [
+                        new RegionMaskPlugin()
+                    ];
+                }
+                if (this.deps.strategy === "blend") {
+                    return [
+                        new RegionMaskPlugin()
+                    ];
+                }
+                if (this.deps.strategy === "banner" || this.deps.strategy === "bannerv2" || this.deps.strategy === "bannerv2_ocr" || this.deps.strategy === "test") {
+                    return [
+                        new RegionBorderPlugin(),
+                        new RegionAnimationPlugin()
+                    ];
+                }
+            }
+        },
         {
             key: "get",
             value: function get(regionDescriptor, planeDescriptor) {
                 if (regionDescriptor && planeDescriptor) {
-                    return new AdRegion(regionDescriptor, planeDescriptor, this.deps || {});
+                    return new AdRegion(regionDescriptor, planeDescriptor, _object_spread_props(_object_spread({}, this.deps || {}), {
+                        plugins: this.getPluginForStrategy()
+                    }));
                 }
                 throw new InternalError("Unable to create region with provided properties!");
             }
@@ -20333,7 +20754,8 @@ var RegionRenderer = /*#__PURE__*/ function() {
         this.regionsContainerView = new RegionsContainerView(width, height);
         this.regionFactory = new RegionFactory({
             recorder: this.options.recorder,
-            provider: this.options.provider
+            provider: this.options.provider,
+            strategy: this.options.strategy
         });
         var initialRegion = this.regionFactory.get({
             id: 0,
@@ -20422,10 +20844,8 @@ var RegionRenderer = /*#__PURE__*/ function() {
         {
             key: "clear",
             value: function clear() {
-                var _this = this;
                 this.regionsData = [];
                 this.regionsObjects.forEach(function(region) {
-                    _this.intersectionObserver.unobserve(region.view);
                     region.clear();
                 });
             }
@@ -20433,10 +20853,12 @@ var RegionRenderer = /*#__PURE__*/ function() {
         {
             key: "destroy",
             value: function destroy() {
-                this.clear();
                 while(this.regionsObjects.length){
-                    var _this_regionsObjects_pop;
-                    (_this_regionsObjects_pop = this.regionsObjects.pop()) === null || _this_regionsObjects_pop === void 0 ? void 0 : _this_regionsObjects_pop.destroy();
+                    var region = this.regionsObjects.pop();
+                    if (region) {
+                        this.intersectionObserver.unobserve(region.view);
+                        region.destroy();
+                    }
                 }
                 this.regionsContainerView.destroy();
             }
@@ -20445,16 +20867,16 @@ var RegionRenderer = /*#__PURE__*/ function() {
     return RegionRenderer;
 }();
 // src/Ads/PresentationStrategy/AbstractPresentation.ts
-var import_events = __toESM(require_events());
-var AbstractPresentation = /*#__PURE__*/ function(_import_events_default) {
+var import_events2 = __toESM(require_events());
+var AbstractPresentation = /*#__PURE__*/ function(_import_events2_default) {
     "use strict";
-    _inherits(AbstractPresentation, _import_events_default);
+    _inherits(AbstractPresentation, _import_events2_default);
     function AbstractPresentation() {
         _class_call_check(this, AbstractPresentation);
         return _call_super(this, AbstractPresentation);
     }
     return AbstractPresentation;
-}(import_events.default);
+}(import_events2.default);
 // src/Ads/PresentationStrategy/CooldownPresentation.ts
 var CooldownPresentation = /*#__PURE__*/ function(AbstractPresentation) {
     "use strict";
@@ -20752,6 +21174,7 @@ var AdsTerraProvider = /*#__PURE__*/ function(ContentProvider) {
     return AdsTerraProvider;
 }(ContentProvider);
 // src/Ads/Providers/BRNDTSDefault/BRNDTSDefaultProvider.ts
+var icon = '\n<?xml version="1.0" encoding="UTF-8"?>\n<svg id="Camada_1" data-name="Camada 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 875 245">\n  <defs>\n    <style>\n      .cls-1 {\n        fill: #fff;\n      }\n    </style>\n  </defs>\n  <g>\n    <path class="cls-1" d="M279.16,182.12v-116.12h48.13c12.5,0,21.49,2.76,26.96,8.28,5.47,5.52,8.2,13.08,8.2,22.66,0,4.48-.6,8.41-1.8,11.8-1.2,3.39-2.97,6.2-5.31,8.44-2.34,2.24-5.29,3.78-8.83,4.61,2.71.73,5.26,1.82,7.66,3.28,2.4,1.46,4.48,3.39,6.25,5.78,1.77,2.4,3.15,5.21,4.14,8.44.99,3.23,1.48,6.88,1.48,10.94,0,7.61-1.36,13.75-4.06,18.44-2.71,4.69-6.77,8.1-12.19,10.24-5.42,2.14-12.14,3.2-20.16,3.2h-50.48ZM309.48,111.64h17.5c2.29,0,3.98-.88,5.08-2.66,1.09-1.77,1.64-3.96,1.64-6.56,0-3.54-.7-5.96-2.11-7.27-1.41-1.3-2.94-1.95-4.61-1.95h-17.5v18.44ZM309.48,154.93h19.22c1.88,0,3.44-.42,4.69-1.25,1.25-.83,2.21-2,2.89-3.52.68-1.51,1.02-3.31,1.02-5.39s-.34-3.88-1.02-5.39c-.68-1.51-1.64-2.68-2.89-3.52-1.25-.83-2.81-1.25-4.69-1.25h-19.22v20.32Z"/>\n    <path class="cls-1" d="M379.65,182.12v-116.12h49.54c5.1,0,9.79.63,14.07,1.88,4.27,1.25,7.97,3.36,11.1,6.33,3.13,2.97,5.55,6.95,7.27,11.96s2.58,11.31,2.58,18.91c0,4.79-.42,8.96-1.25,12.5-.84,3.54-1.95,6.54-3.36,8.99-1.41,2.45-3.07,4.51-5,6.17-1.93,1.67-3.99,3.13-6.17,4.38l20.16,45.01h-30.79l-16.25-40.01h-11.57v40.01h-30.32ZM409.97,118.05h13.75c1.67,0,3.13-.23,4.38-.7s2.32-1.22,3.2-2.27c.88-1.04,1.54-2.37,1.95-3.98.41-1.61.62-3.57.62-5.86s-.21-4.22-.62-5.78c-.42-1.56-1.07-2.79-1.95-3.67-.89-.88-1.95-1.54-3.2-1.95-1.25-.42-2.71-.62-4.38-.62h-13.75v24.85Z"/>\n    <path class="cls-1" d="M479.67,182.12v-116.12h24.07l40.79,64.7v-64.7h30.32v116.12h-24.07l-40.79-64.7v64.7h-30.32Z"/>\n    <path class="cls-1" d="M592.03,182.12v-116.12h51.26c8.44,0,15.37,1.48,20.79,4.45,5.42,2.97,9.69,7.11,12.81,12.42,3.13,5.31,5.31,11.49,6.56,18.52,1.25,7.03,1.88,14.61,1.88,22.74,0,13.65-1.54,24.72-4.61,33.21-3.07,8.49-7.71,14.74-13.91,18.75-6.2,4.01-14.04,6.02-23.52,6.02h-51.26ZM622.35,154.93h17.82c3.85,0,6.85-1.04,8.99-3.13,2.13-2.08,3.65-5.39,4.53-9.92.88-4.53,1.33-10.44,1.33-17.74,0-6.88-.34-12.37-1.02-16.49-.68-4.11-1.67-7.21-2.97-9.3-1.3-2.08-2.87-3.46-4.69-4.14-1.82-.68-3.88-1.02-6.17-1.02h-17.82v61.73Z"/>\n    <path class="cls-1" d="M721.9,182.12v-88.92h-29.22v-27.19h88.77v27.19h-29.22v88.92h-30.32Z"/>\n    <path class="cls-1" d="M828.95,183.06c-3.44,0-6.8-.11-10.08-.31-3.28-.21-6.51-.52-9.69-.94-3.18-.42-6.23-.88-9.14-1.41-2.92-.52-5.73-1.15-8.44-1.88v-24.07c3.54.31,7.37.57,11.49.78,4.11.21,8.28.37,12.5.47,4.22.1,8.15.16,11.8.16,3.44,0,6.3-.26,8.6-.78,2.29-.52,4.01-1.35,5.16-2.5,1.15-1.15,1.72-2.71,1.72-4.69v-1.88c0-2.29-.81-4.01-2.42-5.16-1.62-1.15-3.52-1.72-5.7-1.72h-8.28c-12.09,0-21.25-2.66-27.51-7.97-6.25-5.31-9.38-14.22-9.38-26.72v-5.16c0-11.46,3.44-20.03,10.31-25.71,6.88-5.68,16.77-8.52,29.69-8.52,4.9,0,9.51.23,13.83.7,4.32.47,8.39,1.04,12.19,1.72,3.8.68,7.21,1.38,10.24,2.11v24.07c-4.79-.42-10.18-.75-16.17-1.02-5.99-.26-11.44-.39-16.33-.39-2.92,0-5.52.21-7.81.63-2.29.42-4.06,1.25-5.31,2.5-1.25,1.25-1.88,3.07-1.88,5.47v1.56c0,2.61.83,4.59,2.5,5.94,1.67,1.36,4.22,2.03,7.66,2.03h10.31c7.29,0,13.36,1.38,18.21,4.14,4.84,2.76,8.49,6.51,10.94,11.25,2.45,4.74,3.67,10.13,3.67,16.17v5.16c0,9.9-1.72,17.45-5.16,22.66-3.44,5.21-8.34,8.73-14.69,10.55-6.36,1.82-13.96,2.74-22.82,2.74Z"/>\n  </g>\n  <path class="cls-1" d="M193.77,2.19H53.62C25.87,2.19,3.39,24.68,3.39,52.42v140.15c0,27.75,22.49,50.23,50.23,50.23h140.15c27.75,0,50.23-22.49,50.23-50.23V52.42c0-27.74-22.49-50.23-50.23-50.23ZM127.13,65.24c0-9.25,7.5-16.74,16.74-16.74h53.45v53.45c0,9.25-7.5,16.74-16.74,16.74h-53.45v-53.45ZM120.23,179.77c0,9.25-7.5,16.74-16.74,16.74h-36.71c-9.25,0-16.74-7.5-16.74-16.74v-114.53c0-9.25,7.5-16.74,16.74-16.74h36.71c9.25,0,16.74,7.5,16.74,16.74v114.53ZM197.33,162.19c-.55,18.26-16.3,33.95-34.45,34.31-17.61.35-33.5-12.89-35.21-30.88-1.15-12.1-.22-24.4-.22-38.93,14.98,0,27.35-.98,39.49.23,18.36,1.83,30.93,17.24,30.38,35.27Z"/>\n</svg>';
 var BRNDTSDefaultProvider = /*#__PURE__*/ function(ContentProvider) {
     "use strict";
     _inherits(BRNDTSDefaultProvider, ContentProvider);
@@ -20768,28 +21191,28 @@ var BRNDTSDefaultProvider = /*#__PURE__*/ function(ContentProvider) {
         container.style.height = "100%";
         var box = document.createElement("div");
         box.classList.add("box");
+        var iconBox = document.createElement("div");
+        iconBox.classList.add("icon");
+        iconBox.innerHTML = icon;
+        box.appendChild(iconBox);
         container.appendChild(box);
-        container.appendChild(_this.createText("BRNDTS"));
         _this.content.push(container);
         return _this;
     }
     _create_class(BRNDTSDefaultProvider, [
         {
-            key: "createText",
-            value: function createText(text2) {
-                var textElement = document.createElement("div");
-                textElement.classList.add("text");
-                textElement.textContent = text2;
-                return textElement;
+            key: "contents",
+            value: function contents() {
+                return this.content.map(function(v) {
+                    return v.cloneNode(true);
+                });
             }
         },
         {
             key: "request",
             value: function request() {
-                var _this = this;
                 return _async_to_generator(function() {
                     return _ts_generator(this, function(_state) {
-                        _this.notify();
                         return [
                             2
                         ];
@@ -73013,7 +73436,8 @@ var Ads = /*#__PURE__*/ function() {
                     this.regionsRenderer = new RegionRenderer(this.context.media.viewWidth, this.context.media.viewHeight, {
                         debug: this.context.config.get("debug"),
                         recorder: this.context.recorder,
-                        provider: ContentProviderFactory.getProvider(this.context, this.context.config.get("ads").provider)
+                        provider: ContentProviderFactory.getProvider(this.context, this.context.config.get("ads").provider),
+                        strategy: this.context.config.get("ads").regions.strategy
                     });
                 } catch (e2) {
                     if (_instanceof(e2, Error)) {
@@ -73084,7 +73508,6 @@ var Ads = /*#__PURE__*/ function() {
                     }
                 }).on("cooldown", function() {
                     var _this_regionsRenderer;
-                    _this.context.logger.log("cooldown");
                     (_this_regionsRenderer = _this.regionsRenderer) === null || _this_regionsRenderer === void 0 ? void 0 : _this_regionsRenderer.clear();
                 });
                 (_this_context_media = this.context.media) === null || _this_context_media === void 0 ? void 0 : _this_context_media.on("SEEKED", function() {
@@ -73118,7 +73541,7 @@ var Ads = /*#__PURE__*/ function() {
 // src/Ads/index.ts
 var Ads_default = Ads;
 // src/UI/Interface.ts
-var import_events3 = __toESM(require_events());
+var import_events4 = __toESM(require_events());
 // src/Common/utils/elements.ts
 function wrap(elements2, wrapper) {
     var targets = elements2.length ? elements2 : [
@@ -73324,16 +73747,16 @@ var elements = {
 };
 var elements_default = elements;
 // src/UI/Controls/ControlEvents.ts
-var import_events2 = __toESM(require_events());
-var ControlsEvents = /*#__PURE__*/ function(_import_events2_default) {
+var import_events3 = __toESM(require_events());
+var ControlsEvents = /*#__PURE__*/ function(_import_events3_default) {
     "use strict";
-    _inherits(ControlsEvents, _import_events2_default);
+    _inherits(ControlsEvents, _import_events3_default);
     function ControlsEvents() {
         _class_call_check(this, ControlsEvents);
         return _call_super(this, ControlsEvents, arguments);
     }
     return ControlsEvents;
-}(import_events2.default);
+}(import_events3.default);
 // node_modules/@fortawesome/fontawesome-svg-core/index.mjs
 var noop2 = function() {};
 var _WINDOW = {};
@@ -74121,12 +74544,12 @@ function codePointAt(string, index) {
 }
 function normalizeIcons(icons) {
     return Object.keys(icons).reduce(function(acc, iconName) {
-        var icon2 = icons[iconName];
-        var expanded = !!icon2.icon;
+        var icon3 = icons[iconName];
+        var expanded = !!icon3.icon;
         if (expanded) {
-            acc[icon2.iconName] = icon2.icon;
+            acc[icon3.iconName] = icon3.icon;
         } else {
-            acc[iconName] = icon2;
+            acc[iconName] = icon3;
         }
         return acc;
     }, {});
@@ -74175,12 +74598,12 @@ var build = function() {
             return o$$1;
         }, {});
     };
-    _byUnicode = lookup3(function(acc, icon2, iconName) {
-        if (icon2[3]) {
-            acc[icon2[3]] = iconName;
+    _byUnicode = lookup3(function(acc, icon3, iconName) {
+        if (icon3[3]) {
+            acc[icon3[3]] = iconName;
         }
-        if (icon2[2]) {
-            var aliases = icon2[2].filter(function(a$$1) {
+        if (icon3[2]) {
+            var aliases = icon3[2].filter(function(a$$1) {
                 return typeof a$$1 === "number";
             });
             aliases.forEach(function(alias) {
@@ -74189,10 +74612,10 @@ var build = function() {
         }
         return acc;
     });
-    _byLigature = lookup3(function(acc, icon2, iconName) {
+    _byLigature = lookup3(function(acc, icon3, iconName) {
         acc[iconName] = iconName;
-        if (icon2[2]) {
-            var aliases = icon2[2].filter(function(a$$1) {
+        if (icon3[2]) {
+            var aliases = icon3[2].filter(function(a$$1) {
                 return typeof a$$1 === "string";
             });
             aliases.forEach(function(alias) {
@@ -74201,8 +74624,8 @@ var build = function() {
         }
         return acc;
     });
-    _byAlias = lookup3(function(acc, icon2, iconName) {
-        var aliases = icon2[2];
+    _byAlias = lookup3(function(acc, icon3, iconName) {
+        var aliases = icon3[2];
         acc[iconName] = iconName;
         aliases.forEach(function(alias) {
             acc[alias] = iconName;
@@ -74398,17 +74821,17 @@ var Library = /*#__PURE__*/ function() {
                     0: definition
                 } : definition;
                 Object.keys(normalized).map(function(key) {
-                    var _normalized_key = normalized[key], prefix = _normalized_key.prefix, iconName = _normalized_key.iconName, icon2 = _normalized_key.icon;
-                    var aliases = icon2[2];
+                    var _normalized_key = normalized[key], prefix = _normalized_key.prefix, iconName = _normalized_key.iconName, icon3 = _normalized_key.icon;
+                    var aliases = icon3[2];
                     if (!additions[prefix]) additions[prefix] = {};
                     if (aliases.length > 0) {
                         aliases.forEach(function(alias) {
                             if (typeof alias === "string") {
-                                additions[prefix][alias] = icon2;
+                                additions[prefix][alias] = icon3;
                             }
                         });
                     }
-                    additions[prefix][iconName] = icon2;
+                    additions[prefix][iconName] = icon3;
                 });
                 return additions;
             }
@@ -74529,26 +74952,26 @@ var dom = {
     }
 };
 var parse = {
-    icon: function(icon2) {
-        if (icon2 === null) {
+    icon: function(icon3) {
+        if (icon3 === null) {
             return null;
         }
-        if ((typeof icon2 === "undefined" ? "undefined" : _type_of(icon2)) === "object" && icon2.prefix && icon2.iconName) {
+        if ((typeof icon3 === "undefined" ? "undefined" : _type_of(icon3)) === "object" && icon3.prefix && icon3.iconName) {
             return {
-                prefix: icon2.prefix,
-                iconName: byAlias(icon2.prefix, icon2.iconName) || icon2.iconName
+                prefix: icon3.prefix,
+                iconName: byAlias(icon3.prefix, icon3.iconName) || icon3.iconName
             };
         }
-        if (Array.isArray(icon2) && icon2.length === 2) {
-            var iconName = icon2[1].indexOf("fa-") === 0 ? icon2[1].slice(3) : icon2[1];
-            var prefix = getCanonicalPrefix(icon2[0]);
+        if (Array.isArray(icon3) && icon3.length === 2) {
+            var iconName = icon3[1].indexOf("fa-") === 0 ? icon3[1].slice(3) : icon3[1];
+            var prefix = getCanonicalPrefix(icon3[0]);
             return {
                 prefix: prefix,
                 iconName: byAlias(prefix, iconName) || iconName
             };
         }
-        if (typeof icon2 === "string" && (icon2.indexOf("".concat(config.cssPrefix, "-")) > -1 || icon2.match(ICON_SELECTION_SYNTAX_PATTERN))) {
-            var canonicalIcon = getCanonicalIcon(icon2.split(" "), {
+        if (typeof icon3 === "string" && (icon3.indexOf("".concat(config.cssPrefix, "-")) > -1 || icon3.match(ICON_SELECTION_SYNTAX_PATTERN))) {
+            var canonicalIcon = getCanonicalIcon(icon3.split(" "), {
                 skipLookups: true
             });
             return {
@@ -74556,11 +74979,11 @@ var parse = {
                 iconName: byAlias(canonicalIcon.prefix, canonicalIcon.iconName) || canonicalIcon.iconName
             };
         }
-        if (typeof icon2 === "string") {
+        if (typeof icon3 === "string") {
             var prefix1 = getDefaultUsablePrefix();
             return {
                 prefix: prefix1,
-                iconName: byAlias(prefix1, icon2) || icon2
+                iconName: byAlias(prefix1, icon3) || icon3
             };
         }
     }
@@ -74787,10 +75210,10 @@ function makeLayersCounterAbstract(params) {
     return val;
 }
 var styles$1 = namespace.styles;
-function asFoundIcon(icon2) {
-    var width = icon2[0];
-    var height = icon2[1];
-    var _icon2_slice = _sliced_to_array(icon2.slice(4), 1), vectorData = _icon2_slice[0];
+function asFoundIcon(icon3) {
+    var width = icon3[0];
+    var height = icon3[1];
+    var _icon3_slice = _sliced_to_array(icon3.slice(4), 1), vectorData = _icon3_slice[0];
     var element = null;
     if (Array.isArray(vectorData)) {
         element = {
@@ -74855,8 +75278,8 @@ function findIcon(iconName, prefix) {
             prefix = shim.prefix || prefix;
         }
         if (iconName && prefix && styles$1[prefix] && styles$1[prefix][iconName]) {
-            var icon2 = styles$1[prefix][iconName];
-            return resolve(asFoundIcon(icon2));
+            var icon3 = styles$1[prefix][iconName];
+            return resolve(asFoundIcon(icon3));
         }
         maybeNotifyMissing(iconName, prefix);
         resolve(_object_spread_props(_object_spread({}, missingIconResolutionMixin), {
@@ -74891,8 +75314,8 @@ function isWatched(node) {
 }
 function hasPrefixAndIcon(node) {
     var prefix = node.getAttribute ? node.getAttribute(DATA_PREFIX) : null;
-    var icon2 = node.getAttribute ? node.getAttribute(DATA_ICON) : null;
-    return prefix && icon2;
+    var icon3 = node.getAttribute ? node.getAttribute(DATA_ICON) : null;
+    return prefix && icon3;
 }
 function hasBeenReplaced(node) {
     return node && node.classList && node.classList.contains && node.classList.contains(config.replacementClass);
@@ -75274,7 +75697,7 @@ var render = function render(iconDefinition) {
     var params = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
     var _params_transform = params.transform, transform = _params_transform === void 0 ? meaninglessTransform : _params_transform, _params_symbol = params.symbol, symbol = _params_symbol === void 0 ? false : _params_symbol, _params_mask = params.mask, mask = _params_mask === void 0 ? null : _params_mask, _params_maskId = params.maskId, maskId = _params_maskId === void 0 ? null : _params_maskId, _params_title = params.title, title = _params_title === void 0 ? null : _params_title, _params_titleId = params.titleId, titleId = _params_titleId === void 0 ? null : _params_titleId, _params_classes = params.classes, classes = _params_classes === void 0 ? [] : _params_classes, _params_attributes = params.attributes, attributes = _params_attributes === void 0 ? {} : _params_attributes, tmp = params.styles, styles2 = tmp === void 0 ? {} : tmp;
     if (!iconDefinition) return;
-    var prefix = iconDefinition.prefix, iconName = iconDefinition.iconName, icon2 = iconDefinition.icon;
+    var prefix = iconDefinition.prefix, iconName = iconDefinition.iconName, icon3 = iconDefinition.icon;
     return domVariants(_object_spread({
         type: "icon"
     }, iconDefinition), function() {
@@ -75292,7 +75715,7 @@ var render = function render(iconDefinition) {
         }
         return makeInlineSvgAbstract({
             icons: {
-                main: asFoundIcon(icon2),
+                main: asFoundIcon(icon3),
                 mask: mask ? asFoundIcon(mask.icon) : {
                     found: false,
                     width: null,
@@ -76055,7 +76478,7 @@ var dom$1 = api.dom;
 var parse$1 = api.parse;
 var findIconDefinition$1 = api.findIconDefinition;
 var toHtml$1 = api.toHtml;
-var icon = api.icon;
+var icon2 = api.icon;
 var layer = api.layer;
 var text = api.text;
 var counter = api.counter;
@@ -76088,11 +76511,11 @@ var faUpRightAndDownLeftFromCenter = {
 };
 // src/Common/utils/Icons.ts
 library$1.add(faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter);
-var expand = icon({
+var expand = icon2({
     prefix: "fas",
     iconName: "up-right-and-down-left-from-center"
 }).html;
-var compress = icon({
+var compress = icon2({
     prefix: "fas",
     iconName: "down-left-and-up-right-to-center"
 }).html;
@@ -76392,9 +76815,9 @@ var Controls = /*#__PURE__*/ function() {
     return Controls;
 }();
 // src/UI/Interface.ts
-var Interface = /*#__PURE__*/ function(_import_events3_default) {
+var Interface = /*#__PURE__*/ function(_import_events4_default) {
     "use strict";
-    _inherits(Interface, _import_events3_default);
+    _inherits(Interface, _import_events4_default);
     function Interface(context) {
         _class_call_check(this, Interface);
         var _this;
@@ -76553,7 +76976,7 @@ var Interface = /*#__PURE__*/ function(_import_events3_default) {
         }
     ]);
     return Interface;
-}(import_events3.default);
+}(import_events4.default);
 // src/State/Store.ts
 function reducer(state, action) {
     switch(action.type){
@@ -77044,7 +77467,7 @@ var InteractionLog = /*#__PURE__*/ function() {
     return InteractionLog;
 }();
 // src/BRNDTSService.ts
-var import_events4 = __toESM(require_events());
+var import_events5 = __toESM(require_events());
 // node_modules/engine.io-parser/build/esm/commons.js
 var PACKET_TYPES = /* @__PURE__ */ Object.create(null);
 PACKET_TYPES["open"] = "0";
@@ -80908,9 +81331,9 @@ Object.assign(lookup2, {
     connect: lookup2
 });
 // src/BRNDTSService.ts
-var BRNDTSService = /*#__PURE__*/ function(_import_events4_default) {
+var BRNDTSService = /*#__PURE__*/ function(_import_events5_default) {
     "use strict";
-    _inherits(BRNDTSService, _import_events4_default);
+    _inherits(BRNDTSService, _import_events5_default);
     function BRNDTSService(deps, options) {
         _class_call_check(this, BRNDTSService);
         var _this;
@@ -80994,12 +81417,12 @@ var BRNDTSService = /*#__PURE__*/ function(_import_events4_default) {
         }
     ]);
     return BRNDTSService;
-}(import_events4.default);
+}(import_events5.default);
 // src/Media/GenericMediaElement.ts
-var import_events5 = __toESM(require_events());
-var GenericMediaElement = /*#__PURE__*/ function(_import_events5_default) {
+var import_events6 = __toESM(require_events());
+var GenericMediaElement = /*#__PURE__*/ function(_import_events6_default) {
     "use strict";
-    _inherits(GenericMediaElement, _import_events5_default);
+    _inherits(GenericMediaElement, _import_events6_default);
     function GenericMediaElement(context) {
         _class_call_check(this, GenericMediaElement);
         var _this;
@@ -81163,7 +81586,7 @@ var GenericMediaElement = /*#__PURE__*/ function(_import_events5_default) {
         }
     ]);
     return GenericMediaElement;
-}(import_events5.default);
+}(import_events6.default);
 // src/Media/YoutubeMediaElements.ts
 var import_loadjs = __toESM(require_loadjs_umd());
 var DEFAULT_SEEK_INTERVAL = 10;