@lumx/react 2.1.7 → 2.1.9-alpha-thumbnail2

package/esm/_internal/Thumbnail2.js

@@ -1,752 +1,54 @@
-import { d as _slicedToArray, e as _toConsumableArray, _ as _objectSpread2, b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { AspectRatio, Size, Theme } from './components.js';
-import React, { useRef, useEffect, useState, useMemo, useLayoutEffect, useCallback, forwardRef } from 'react';
+import { d as _slicedToArray, b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { Size, Theme, AspectRatio } from './components.js';
+import React, { useState, useEffect, forwardRef, useRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
-import { r as mdiImageBrokenVariant } from './mdi.js';
-import { W as WINDOW } from './constants.js';
+import { r as mdiImageBroken } from './mdi.js';
 import { m as mergeRefs } from './mergeRefs.js';
 import { I as Icon } from './Icon2.js';
-import { c as clamp } from './clamp.js';
-import { isEqual } from 'lodash';
 
-/**
- * Check if browser is IE
- * @return Browser is IE or not
- */
-
-var isInternetExplorer = function isInternetExplorer() {
-  var _WINDOW$navigator;
-
-  var userAgent = WINDOW === null || WINDOW === void 0 ? void 0 : (_WINDOW$navigator = WINDOW.navigator) === null || _WINDOW$navigator === void 0 ? void 0 : _WINDOW$navigator.userAgent;
-
-  if (!userAgent) {
-    return false;
-  }
-
-  var msie = userAgent.indexOf('MSIE ');
-  var isIEVersion = !!userAgent.match(/Trident.*rv:11\./);
-  return msie > 0 || isIEVersion;
-};
-
-var resizeObservers = [];
-
-var hasActiveObservations = function () {
-    return resizeObservers.some(function (ro) { return ro.activeTargets.length > 0; });
-};
-
-var hasSkippedObservations = function () {
-    return resizeObservers.some(function (ro) { return ro.skippedTargets.length > 0; });
-};
-
-var msg = 'ResizeObserver loop completed with undelivered notifications.';
-var deliverResizeLoopError = function () {
-    var event;
-    if (typeof ErrorEvent === 'function') {
-        event = new ErrorEvent('error', {
-            message: msg
-        });
-    }
-    else {
-        event = document.createEvent('Event');
-        event.initEvent('error', false, false);
-        event.message = msg;
-    }
-    window.dispatchEvent(event);
-};
-
-var ResizeObserverBoxOptions;
-(function (ResizeObserverBoxOptions) {
-    ResizeObserverBoxOptions["BORDER_BOX"] = "border-box";
-    ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box";
-    ResizeObserverBoxOptions["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
-})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
-
-var DOMRectReadOnly = (function () {
-    function DOMRectReadOnly(x, y, width, height) {
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
-        this.top = this.y;
-        this.left = this.x;
-        this.bottom = this.top + this.height;
-        this.right = this.left + this.width;
-        return Object.freeze(this);
-    }
-    DOMRectReadOnly.prototype.toJSON = function () {
-        var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
-        return { x: x, y: y, top: top, right: right, bottom: bottom, left: left, width: width, height: height };
-    };
-    DOMRectReadOnly.fromRect = function (rectangle) {
-        return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
-    };
-    return DOMRectReadOnly;
-}());
-
-var isSVG = function (target) { return target instanceof SVGElement && 'getBBox' in target; };
-var isHidden = function (target) {
-    if (isSVG(target)) {
-        var _a = target.getBBox(), width = _a.width, height = _a.height;
-        return !width && !height;
-    }
-    var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
-    return !(offsetWidth || offsetHeight || target.getClientRects().length);
-};
-var isElement = function (obj) {
-    var _a, _b;
-    var scope = (_b = (_a = obj) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView;
-    return !!(scope && obj instanceof scope.Element);
-};
-var isReplacedElement = function (target) {
-    switch (target.tagName) {
-        case 'INPUT':
-            if (target.type !== 'image') {
-                break;
-            }
-        case 'VIDEO':
-        case 'AUDIO':
-        case 'EMBED':
-        case 'OBJECT':
-        case 'CANVAS':
-        case 'IFRAME':
-        case 'IMG':
-            return true;
-    }
-    return false;
-};
-
-var global = typeof window !== 'undefined' ? window : {};
-
-var cache = new WeakMap();
-var scrollRegexp = /auto|scroll/;
-var verticalRegexp = /^tb|vertical/;
-var IE = (/msie|trident/i).test(global.navigator && global.navigator.userAgent);
-var parseDimension = function (pixel) { return parseFloat(pixel || '0'); };
-var size = function (inlineSize, blockSize, switchSizes) {
-    if (inlineSize === void 0) { inlineSize = 0; }
-    if (blockSize === void 0) { blockSize = 0; }
-    if (switchSizes === void 0) { switchSizes = false; }
-    return Object.freeze({
-        inlineSize: (switchSizes ? blockSize : inlineSize) || 0,
-        blockSize: (switchSizes ? inlineSize : blockSize) || 0
-    });
-};
-var zeroBoxes = Object.freeze({
-    devicePixelContentBoxSize: size(),
-    borderBoxSize: size(),
-    contentBoxSize: size(),
-    contentRect: new DOMRectReadOnly(0, 0, 0, 0)
-});
-var calculateBoxSizes = function (target, forceRecalculation) {
-    if (forceRecalculation === void 0) { forceRecalculation = false; }
-    if (cache.has(target) && !forceRecalculation) {
-        return cache.get(target);
-    }
-    if (isHidden(target)) {
-        cache.set(target, zeroBoxes);
-        return zeroBoxes;
-    }
-    var cs = getComputedStyle(target);
-    var svg = isSVG(target) && target.ownerSVGElement && target.getBBox();
-    var removePadding = !IE && cs.boxSizing === 'border-box';
-    var switchSizes = verticalRegexp.test(cs.writingMode || '');
-    var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || '');
-    var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || '');
-    var paddingTop = svg ? 0 : parseDimension(cs.paddingTop);
-    var paddingRight = svg ? 0 : parseDimension(cs.paddingRight);
-    var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom);
-    var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft);
-    var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth);
-    var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth);
-    var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth);
-    var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth);
-    var horizontalPadding = paddingLeft + paddingRight;
-    var verticalPadding = paddingTop + paddingBottom;
-    var horizontalBorderArea = borderLeft + borderRight;
-    var verticalBorderArea = borderTop + borderBottom;
-    var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
-    var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
-    var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
-    var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
-    var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
-    var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
-    var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
-    var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
-    var boxes = Object.freeze({
-        devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
-        borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
-        contentBoxSize: size(contentWidth, contentHeight, switchSizes),
-        contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
-    });
-    cache.set(target, boxes);
-    return boxes;
-};
-var calculateBoxSize = function (target, observedBox, forceRecalculation) {
-    var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
-    switch (observedBox) {
-        case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
-            return devicePixelContentBoxSize;
-        case ResizeObserverBoxOptions.BORDER_BOX:
-            return borderBoxSize;
-        default:
-            return contentBoxSize;
-    }
-};
-
-var ResizeObserverEntry = (function () {
-    function ResizeObserverEntry(target) {
-        var boxes = calculateBoxSizes(target);
-        this.target = target;
-        this.contentRect = boxes.contentRect;
-        this.borderBoxSize = [boxes.borderBoxSize];
-        this.contentBoxSize = [boxes.contentBoxSize];
-        this.devicePixelContentBoxSize = [boxes.devicePixelContentBoxSize];
-    }
-    return ResizeObserverEntry;
-}());
-
-var calculateDepthForNode = function (node) {
-    if (isHidden(node)) {
-        return Infinity;
-    }
-    var depth = 0;
-    var parent = node.parentNode;
-    while (parent) {
-        depth += 1;
-        parent = parent.parentNode;
-    }
-    return depth;
-};
-
-var broadcastActiveObservations = function () {
-    var shallowestDepth = Infinity;
-    var callbacks = [];
-    resizeObservers.forEach(function processObserver(ro) {
-        if (ro.activeTargets.length === 0) {
-            return;
-        }
-        var entries = [];
-        ro.activeTargets.forEach(function processTarget(ot) {
-            var entry = new ResizeObserverEntry(ot.target);
-            var targetDepth = calculateDepthForNode(ot.target);
-            entries.push(entry);
-            ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox);
-            if (targetDepth < shallowestDepth) {
-                shallowestDepth = targetDepth;
-            }
-        });
-        callbacks.push(function resizeObserverCallback() {
-            ro.callback.call(ro.observer, entries, ro.observer);
-        });
-        ro.activeTargets.splice(0, ro.activeTargets.length);
-    });
-    for (var _i = 0, callbacks_1 = callbacks; _i < callbacks_1.length; _i++) {
-        var callback = callbacks_1[_i];
-        callback();
-    }
-    return shallowestDepth;
-};
-
-var gatherActiveObservationsAtDepth = function (depth) {
-    resizeObservers.forEach(function processObserver(ro) {
-        ro.activeTargets.splice(0, ro.activeTargets.length);
-        ro.skippedTargets.splice(0, ro.skippedTargets.length);
-        ro.observationTargets.forEach(function processTarget(ot) {
-            if (ot.isActive()) {
-                if (calculateDepthForNode(ot.target) > depth) {
-                    ro.activeTargets.push(ot);
-                }
-                else {
-                    ro.skippedTargets.push(ot);
-                }
-            }
-        });
-    });
-};
-
-var process = function () {
-    var depth = 0;
-    gatherActiveObservationsAtDepth(depth);
-    while (hasActiveObservations()) {
-        depth = broadcastActiveObservations();
-        gatherActiveObservationsAtDepth(depth);
-    }
-    if (hasSkippedObservations()) {
-        deliverResizeLoopError();
-    }
-    return depth > 0;
-};
-
-var trigger;
-var callbacks = [];
-var notify = function () { return callbacks.splice(0).forEach(function (cb) { return cb(); }); };
-var queueMicroTask = function (callback) {
-    if (!trigger) {
-        var toggle_1 = 0;
-        var el_1 = document.createTextNode('');
-        var config = { characterData: true };
-        new MutationObserver(function () { return notify(); }).observe(el_1, config);
-        trigger = function () { el_1.textContent = "" + (toggle_1 ? toggle_1-- : toggle_1++); };
-    }
-    callbacks.push(callback);
-    trigger();
-};
-
-var queueResizeObserver = function (cb) {
-    queueMicroTask(function ResizeObserver() {
-        requestAnimationFrame(cb);
-    });
-};
-
-var watching = 0;
-var isWatching = function () { return !!watching; };
-var CATCH_PERIOD = 250;
-var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
-var events = [
-    'resize',
-    'load',
-    'transitionend',
-    'animationend',
-    'animationstart',
-    'animationiteration',
-    'keyup',
-    'keydown',
-    'mouseup',
-    'mousedown',
-    'mouseover',
-    'mouseout',
-    'blur',
-    'focus'
-];
-var time = function (timeout) {
-    if (timeout === void 0) { timeout = 0; }
-    return Date.now() + timeout;
-};
-var scheduled = false;
-var Scheduler = (function () {
-    function Scheduler() {
-        var _this = this;
-        this.stopped = true;
-        this.listener = function () { return _this.schedule(); };
-    }
-    Scheduler.prototype.run = function (timeout) {
-        var _this = this;
-        if (timeout === void 0) { timeout = CATCH_PERIOD; }
-        if (scheduled) {
-            return;
-        }
-        scheduled = true;
-        var until = time(timeout);
-        queueResizeObserver(function () {
-            var elementsHaveResized = false;
-            try {
-                elementsHaveResized = process();
-            }
-            finally {
-                scheduled = false;
-                timeout = until - time();
-                if (!isWatching()) {
-                    return;
-                }
-                if (elementsHaveResized) {
-                    _this.run(1000);
-                }
-                else if (timeout > 0) {
-                    _this.run(timeout);
-                }
-                else {
-                    _this.start();
-                }
-            }
-        });
-    };
-    Scheduler.prototype.schedule = function () {
-        this.stop();
-        this.run();
-    };
-    Scheduler.prototype.observe = function () {
-        var _this = this;
-        var cb = function () { return _this.observer && _this.observer.observe(document.body, observerConfig); };
-        document.body ? cb() : global.addEventListener('DOMContentLoaded', cb);
-    };
-    Scheduler.prototype.start = function () {
-        var _this = this;
-        if (this.stopped) {
-            this.stopped = false;
-            this.observer = new MutationObserver(this.listener);
-            this.observe();
-            events.forEach(function (name) { return global.addEventListener(name, _this.listener, true); });
-        }
-    };
-    Scheduler.prototype.stop = function () {
-        var _this = this;
-        if (!this.stopped) {
-            this.observer && this.observer.disconnect();
-            events.forEach(function (name) { return global.removeEventListener(name, _this.listener, true); });
-            this.stopped = true;
-        }
-    };
-    return Scheduler;
-}());
-var scheduler = new Scheduler();
-var updateCount = function (n) {
-    !watching && n > 0 && scheduler.start();
-    watching += n;
-    !watching && scheduler.stop();
-};
-
-var skipNotifyOnElement = function (target) {
-    return !isSVG(target)
-        && !isReplacedElement(target)
-        && getComputedStyle(target).display === 'inline';
-};
-var ResizeObservation = (function () {
-    function ResizeObservation(target, observedBox) {
-        this.target = target;
-        this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
-        this.lastReportedSize = {
-            inlineSize: 0,
-            blockSize: 0
-        };
-    }
-    ResizeObservation.prototype.isActive = function () {
-        var size = calculateBoxSize(this.target, this.observedBox, true);
-        if (skipNotifyOnElement(this.target)) {
-            this.lastReportedSize = size;
-        }
-        if (this.lastReportedSize.inlineSize !== size.inlineSize
-            || this.lastReportedSize.blockSize !== size.blockSize) {
-            return true;
-        }
-        return false;
-    };
-    return ResizeObservation;
-}());
-
-var ResizeObserverDetail = (function () {
-    function ResizeObserverDetail(resizeObserver, callback) {
-        this.activeTargets = [];
-        this.skippedTargets = [];
-        this.observationTargets = [];
-        this.observer = resizeObserver;
-        this.callback = callback;
-    }
-    return ResizeObserverDetail;
-}());
-
-var observerMap = new WeakMap();
-var getObservationIndex = function (observationTargets, target) {
-    for (var i = 0; i < observationTargets.length; i += 1) {
-        if (observationTargets[i].target === target) {
-            return i;
-        }
-    }
-    return -1;
-};
-var ResizeObserverController = (function () {
-    function ResizeObserverController() {
-    }
-    ResizeObserverController.connect = function (resizeObserver, callback) {
-        var detail = new ResizeObserverDetail(resizeObserver, callback);
-        observerMap.set(resizeObserver, detail);
-    };
-    ResizeObserverController.observe = function (resizeObserver, target, options) {
-        var detail = observerMap.get(resizeObserver);
-        var firstObservation = detail.observationTargets.length === 0;
-        if (getObservationIndex(detail.observationTargets, target) < 0) {
-            firstObservation && resizeObservers.push(detail);
-            detail.observationTargets.push(new ResizeObservation(target, options && options.box));
-            updateCount(1);
-            scheduler.schedule();
-        }
-    };
-    ResizeObserverController.unobserve = function (resizeObserver, target) {
-        var detail = observerMap.get(resizeObserver);
-        var index = getObservationIndex(detail.observationTargets, target);
-        var lastObservation = detail.observationTargets.length === 1;
-        if (index >= 0) {
-            lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
-            detail.observationTargets.splice(index, 1);
-            updateCount(-1);
-        }
-    };
-    ResizeObserverController.disconnect = function (resizeObserver) {
-        var _this = this;
-        var detail = observerMap.get(resizeObserver);
-        detail.observationTargets.slice().forEach(function (ot) { return _this.unobserve(resizeObserver, ot.target); });
-        detail.activeTargets.splice(0, detail.activeTargets.length);
-    };
-    return ResizeObserverController;
-}());
-
-var ResizeObserver = (function () {
-    function ResizeObserver(callback) {
-        if (arguments.length === 0) {
-            throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
-        }
-        if (typeof callback !== 'function') {
-            throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
-        }
-        ResizeObserverController.connect(this, callback);
-    }
-    ResizeObserver.prototype.observe = function (target, options) {
-        if (arguments.length === 0) {
-            throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
-        }
-        if (!isElement(target)) {
-            throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
-        }
-        ResizeObserverController.observe(this, target, options);
-    };
-    ResizeObserver.prototype.unobserve = function (target) {
-        if (arguments.length === 0) {
-            throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
-        }
-        if (!isElement(target)) {
-            throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
-        }
-        ResizeObserverController.unobserve(this, target);
-    };
-    ResizeObserver.prototype.disconnect = function () {
-        ResizeObserverController.disconnect(this);
-    };
-    ResizeObserver.toString = function () {
-        return 'function ResizeObserver () { [polyfill code] }';
-    };
-    return ResizeObserver;
-}());
-
-var _ref;
-var ResizeObserver$1 = ((_ref = WINDOW) === null || _ref === void 0 ? void 0 : _ref.ResizeObserver) || ResizeObserver;
-function useOnResize(element, update) {
-  var observerRef = useRef(null);
-  var previousSize = useRef();
-  useEffect(function () {
-    if (!element || !update) {
-      return undefined;
-    }
-
-    previousSize.current = undefined;
-    var observer = observerRef.current || new ResizeObserver$1(function (_ref2) {
-      var _previousSize$current, _previousSize$current2;
-
-      var _ref3 = _slicedToArray(_ref2, 1),
-          entry = _ref3[0];
-
-      var updateFunction = update.current;
+function getState(img, event) {
+  // Error event occurred or image loaded empty.
+  if ((event === null || event === void 0 ? void 0 : event.type) === 'error' || (img === null || img === void 0 ? void 0 : img.complete) && ((img === null || img === void 0 ? void 0 : img.naturalWidth) === 0 || (img === null || img === void 0 ? void 0 : img.naturalHeight) === 0)) {
+    return 'hasError';
+  } // Image is undefined or incomplete.
 
-      if (!updateFunction) {
-        return;
-      }
 
-      var _entry$contentRect = entry.contentRect,
-          width = _entry$contentRect.width,
-          height = _entry$contentRect.height;
+  if (!img || !img.complete) {
+    return 'isLoading';
+  } // Else loaded.
 
-      if (((_previousSize$current = previousSize.current) === null || _previousSize$current === void 0 ? void 0 : _previousSize$current.width) === width && ((_previousSize$current2 = previousSize.current) === null || _previousSize$current2 === void 0 ? void 0 : _previousSize$current2.height) === height) {
-        return;
-      }
 
-      window.requestAnimationFrame(function () {
-        return updateFunction();
-      });
-      previousSize.current = entry.contentRect;
-    });
-    if (!observerRef.current) observerRef.current = observer;
-    observer.observe(element);
-    return function () {
-      observer.unobserve(element);
-    };
-  }, [element, update]);
-}
-
-var IMG_STYLES = {
-  bottom: 0,
-  left: 0,
-  position: 'absolute',
-  right: 0,
-  top: 0,
-  minHeight: '100%',
-  minWidth: '100%'
-};
-var WRAPPER_STYLES = {
-  overflow: 'hidden',
-  position: 'relative'
-};
-
-function calculateSizes(imageElement, parentElement, aspectRatio) {
-  if (!imageElement || !parentElement || !aspectRatio || aspectRatio === AspectRatio.original) return undefined;
-
-  var _ref = imageElement || {
-    naturalWidth: 0,
-    naturalHeight: 0
-  },
-      imgWidth = _ref.naturalWidth,
-      imgHeight = _ref.naturalHeight;
-
-  var _ref2 = (parentElement === null || parentElement === void 0 ? void 0 : parentElement.getBoundingClientRect()) || {
-    width: 0,
-    height: 0
-  },
-      containerWidth = _ref2.width,
-      containerHeight = _ref2.height;
-
-  return {
-    imgWidth: imgWidth,
-    imgHeight: imgHeight,
-    containerWidth: containerWidth,
-    containerHeight: containerHeight,
-    aspectRatio: aspectRatio
-  };
-}
-
-var parseFocusPoint = function parseFocusPoint() {
-  var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return {
-    x: point.x ? clamp(point.x, -1, 1) : 0,
-    y: point.y ? clamp(point.y, -1, 1) : 0
-  };
-};
-
-function calculateImageShift(containerToImageSizeRatio, containerSize, imageSize, focusSize, toMinus) {
-  var containerCenter = Math.floor(containerSize / 2); // Container center in px
-
-  var focusFactor = (focusSize + 1) / 2; // Focus point of resize image in px
-
-  var scaledImage = Math.floor(imageSize / containerToImageSizeRatio); // Can't use width() as images may be display:none
-
-  var focus = Math.floor(focusFactor * scaledImage);
-
-  if (toMinus) {
-    focus = scaledImage - focus;
-  }
-
-  var focusOffset = focus - containerCenter; // Calculate difference between focus point and center
-
-  var remainder = scaledImage - focus; // Reduce offset if necessary so image remains filled
-
-  var containerRemainder = containerSize - containerCenter;
-
-  if (remainder < containerRemainder) {
-    focusOffset -= containerRemainder - remainder;
-  }
-
-  if (focusOffset < 0) {
-    focusOffset = 0;
-  }
-
-  return focusOffset * -100 / containerSize;
-}
-
-function calculateImageStyle(sizes, point) {
-  if (!sizes.imgWidth || !sizes.imgHeight || !sizes.containerWidth || !sizes.containerHeight) {
-    return undefined;
-  } // Which is over by more?
-
-
-  var widthRatio = sizes.imgWidth / sizes.containerWidth;
-  var heightRatio = sizes.imgHeight / sizes.containerHeight;
-
-  var image = _objectSpread2({}, IMG_STYLES); // Minimize image while still filling space
-
-
-  if (sizes.imgWidth > sizes.containerWidth && sizes.imgHeight > sizes.containerHeight) {
-    image[widthRatio > heightRatio ? 'maxHeight' : 'maxWidth'] = '100%';
-  }
-
-  if (widthRatio > heightRatio) {
-    image.left = "".concat(calculateImageShift(heightRatio, sizes.containerWidth, sizes.imgWidth, point.x), "%");
-  } else if (widthRatio < heightRatio) {
-    image.top = "".concat(calculateImageShift(widthRatio, sizes.containerHeight, sizes.imgHeight, point.y, true), "%");
-  }
-
-  return {
-    image: image,
-    wrapper: WRAPPER_STYLES
-  };
+  return 'isLoaded';
 }
-/**
- * Hook that calculate CSS style to shift the image in it's container according to the focus point.
- */
-
-
-var useFocusPoint = function useFocusPoint(options) {
-  var image = options.image,
-      aspectRatio = options.aspectRatio,
-      focusPoint = options.focusPoint,
-      imgRef = options.imgRef,
-      loadingState = options.loadingState,
-      wrapper = options.wrapper;
-  var point = parseFocusPoint(focusPoint);
-  var previousPoint = useRef();
-  var previousSizes = useRef({});
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      style = _useState2[0],
-      setStyle = _useState2[1]; // Update style.
-
-
-  var updateRef = useRef(null);
-  var update = useMemo(function () {
-    var updateFunction = function updateFunction() {
-      var sizes = calculateSizes(imgRef === null || imgRef === void 0 ? void 0 : imgRef.current, wrapper, aspectRatio);
-
-      if (!sizes || isEqual(sizes, previousSizes.current) && isEqual(point, previousPoint.current)) {
-        // Nothing changed.
-        return;
-      }
-
-      setStyle(calculateImageStyle(sizes, point));
-      previousPoint.current = point;
-      previousSizes.current = sizes;
-    };
-
-    updateRef.current = updateFunction;
-    return updateFunction;
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [].concat(_toConsumableArray(Object.values(point)), [imgRef, wrapper, aspectRatio])); // Update on image loaded.
-
-  useLayoutEffect(update, [image, update, loadingState]); // Update on parent resize.
-
-  useOnResize(wrapper, updateRef);
-  return style;
-};
 
-function useImageLoad(imgRef) {
+function useImageLoad(imageURL, imgRef) {
   var _imgRef$current;
 
-  var _useState = useState('isLoading'),
+  var _useState = useState(getState(imgRef === null || imgRef === void 0 ? void 0 : imgRef.current)),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1];
+      setState = _useState2[1]; // Update state when changing image URL or DOM reference.
 
-  var update = useCallback(function (event) {
-    var img = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current;
-
-    if (!img || !img.complete) {
-      setState('isLoading');
-      return;
-    }
 
-    if ((event === null || event === void 0 ? void 0 : event.type) === 'error' || img.complete && (img === null || img === void 0 ? void 0 : img.naturalWidth) === 0) {
-      setState('hasError');
-      return;
-    }
+  useEffect(function () {
+    setState(getState(imgRef === null || imgRef === void 0 ? void 0 : imgRef.current));
+  }, [imageURL, imgRef]); // Listen to `load` and `error` event on image
 
-    setState('isLoaded');
-  }, [imgRef]);
   useEffect(function () {
     var img = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current;
     if (!img) return undefined;
-    update();
+
+    var update = function update(event) {
+      return setState(getState(img, event));
+    };
+
     img.addEventListener('load', update);
     img.addEventListener('error', update);
     return function () {
       img.removeEventListener('load', update);
       img.removeEventListener('error', update);
     };
-  }, [update, imgRef, imgRef === null || imgRef === void 0 ? void 0 : (_imgRef$current = imgRef.current) === null || _imgRef$current === void 0 ? void 0 : _imgRef$current.src]);
+  }, [imgRef, imgRef === null || imgRef === void 0 ? void 0 : (_imgRef$current = imgRef.current) === null || _imgRef$current === void 0 ? void 0 : _imgRef$current.src]);
   return state;
 }
 
@@ -764,10 +66,17 @@ var CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 
 var DEFAULT_PROPS = {
-  fallback: mdiImageBrokenVariant,
+  fallback: mdiImageBroken,
   loading: 'lazy',
   theme: Theme.light
 };
+
+function getObjectPosition(aspectRatio, focusPoint) {
+  if (aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x)) return undefined;
+  var x = (((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2 * 100;
+  var y = (((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2 * 100;
+  return "".concat(Math.round(x), "% ").concat(Math.round(y), "%");
+}
 /**
  * Thumbnail component.
  *
@@ -776,12 +85,12 @@ var DEFAULT_PROPS = {
  * @return React element.
  */
 
-var Thumbnail = forwardRef(function (props, ref) {
-  var _wrapper$getBoundingC;
 
+var Thumbnail = forwardRef(function (props, ref) {
   var align = props.align,
       alt = props.alt,
-      aspectRatio = props.aspectRatio,
+      _props$aspectRatio = props.aspectRatio,
+      aspectRatio = _props$aspectRatio === void 0 ? AspectRatio.original : _props$aspectRatio,
       badge = props.badge,
       className = props.className,
       crossOrigin = props.crossOrigin,
@@ -791,25 +100,22 @@ var Thumbnail = forwardRef(function (props, ref) {
       image = props.image,
       imgProps = props.imgProps,
       propImgRef = props.imgRef,
+      isLoadingProp = props.isLoading,
       loading = props.loading,
       size = props.size,
       theme = props.theme,
       variant = props.variant,
       linkProps = props.linkProps,
       linkAs = props.linkAs,
-      forwardedProps = _objectWithoutProperties(props, ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "loading", "size", "theme", "variant", "linkProps", "linkAs"]);
+      _props$showSkeletonLo = props.showSkeletonLoading,
+      showSkeletonLoading = _props$showSkeletonLo === void 0 ? true : _props$showSkeletonLo,
+      forwardedProps = _objectWithoutProperties(props, ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs", "showSkeletonLoading"]);
 
   var imgRef = useRef(null); // Image loading state.
 
-  var loadingState = useImageLoad(imgRef);
+  var loadingState = useImageLoad(image, imgRef);
+  var isLoading = isLoadingProp || loadingState === 'isLoading';
   var hasError = loadingState === 'hasError';
-  var isLoading = loadingState === 'isLoading';
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      wrapper = _useState2[0],
-      setWrapper = _useState2[1];
-
   var isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
   var isButton = !!forwardedProps.onClick;
   var isClickable = isButton || isLink;
@@ -822,19 +128,10 @@ var Thumbnail = forwardRef(function (props, ref) {
     Object.assign(wrapperProps, linkProps);
   } else if (isButton) {
     Wrapper = 'button';
-  } // Update img style according to focus point and aspect ratio.
-
+  }
 
-  var style = useFocusPoint({
-    image: image,
-    focusPoint: focusPoint,
-    aspectRatio: aspectRatio,
-    imgRef: imgRef,
-    loadingState: loadingState,
-    wrapper: wrapper
-  });
   return React.createElement(Wrapper, _extends({}, wrapperProps, {
-    ref: mergeRefs(setWrapper, ref),
+    ref: ref,
     className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
       align: align,
       aspectRatio: aspectRatio,
@@ -843,32 +140,32 @@ var Thumbnail = forwardRef(function (props, ref) {
       theme: theme,
       variant: variant,
       isClickable: isClickable,
+      hasError: hasError,
+      isLoading: showSkeletonLoading && isLoading,
       hasBadge: !!badge
-    }), isLoading && (wrapper === null || wrapper === void 0 ? void 0 : (_wrapper$getBoundingC = wrapper.getBoundingClientRect()) === null || _wrapper$getBoundingC === void 0 ? void 0 : _wrapper$getBoundingC.height) && 'lumx-color-background-dark-L6', fillHeight && "".concat(CLASSNAME, "--fill-height"))
+    }), fillHeight && "".concat(CLASSNAME, "--fill-height"))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME, "__background"),
-    style: _objectSpread2({}, style === null || style === void 0 ? void 0 : style.wrapper, {
-      // Remove from layout if image not loaded correctly (use fallback)
-      display: hasError ? 'none' : undefined,
-      // Hide while loading.
-      visibility: isLoading ? 'hidden' : undefined
-    })
+    className: "".concat(CLASSNAME, "__background")
   }, React.createElement("img", _extends({}, imgProps, {
-    style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {}, style === null || style === void 0 ? void 0 : style.image),
+    style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {
+      // Hide on error.
+      visibility: hasError ? 'hidden' : undefined,
+      // Focus point.
+      objectPosition: getObjectPosition(aspectRatio, focusPoint)
+    }),
     ref: mergeRefs(imgRef, propImgRef),
-    className: (style === null || style === void 0 ? void 0 : style.image) ? "".concat(CLASSNAME, "__focused-image") : "".concat(CLASSNAME, "__image"),
-    crossOrigin: crossOrigin && !isInternetExplorer() ? crossOrigin : undefined,
+    className: classnames("".concat(CLASSNAME, "__image"), isLoading && "".concat(CLASSNAME, "__image--is-loading")),
+    crossOrigin: crossOrigin,
     src: image,
     alt: alt,
     loading: loading
-  }))), hasError && (typeof fallback === 'string' ? React.createElement(Icon, {
-    className: "".concat(CLASSNAME, "__fallback"),
+  })), !isLoading && hasError && React.createElement("div", {
+    className: "".concat(CLASSNAME, "__fallback")
+  }, typeof fallback === 'string' ? React.createElement(Icon, {
     icon: fallback,
-    size: size || Size.m,
+    size: Size.xxs,
     theme: theme
-  }) : React.createElement("div", {
-    className: "".concat(CLASSNAME, "__fallback")
-  }, fallback)), badge && React.cloneElement(badge, {
+  }) : fallback)), badge && React.cloneElement(badge, {
     className: classnames("".concat(CLASSNAME, "__badge"), badge.props.className)
   }));
 });