@behold/widget 0.5.56 → 0.5.57

package/dist/base-GZO73SkY.js

@@ -0,0 +1,1220 @@
+import { B as BaseElement, a as setClasses, h as hasChanges, s as setCssVars, c as createElement, t as throttle, b as getPlaceholderImage, f as forceLayout, i as isEqual, d as preloadMedia } from './index-R4lEDZFo.js';
+
+function RGBStringToHSLArray(rgb) {
+    if (!rgb)
+        return rgb;
+    let [r, g, b] = rgb.split(',');
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const l = Math.max(r, g, b);
+    const s = l - Math.min(r, g, b);
+    const h = s
+        ? l === r
+            ? (g - b) / s
+            : l === g
+                ? 2 + (b - r) / s
+                : 4 + (r - g) / s
+        : 0;
+    return [
+        60 * h < 0 ? 60 * h + 360 : 60 * h,
+        100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
+        (100 * (2 * l - s)) / 2,
+    ];
+}
+
+/*
+ *   Get the median HSL value from an array of HSL palettes
+ */
+function getMedianHSL(palettes, algo) {
+    algo = 'dominant' ;
+    const flattenedHSL = flattenByKey(palettes, algo).map((rgb) => RGBStringToHSLArray(rgb).join(','));
+    const hAvg = getArrayMedian(getHSLValueArray(flattenedHSL, 0));
+    const sAvg = getArrayMedian(getHSLValueArray(flattenedHSL, 1));
+    const lAvg = getArrayMedian(getHSLValueArray(flattenedHSL, 2));
+    return [hAvg, sAvg, lAvg];
+}
+/*
+ *   Flatten an array of objects into an array of values for a key
+ */
+function flattenByKey(arr, key) {
+    return arr.filter((item) => item[key]).map((item) => item[key]);
+}
+/*
+ *   Get the median value of an array of numbers
+ */
+function getArrayMedian(arr) {
+    const copy = [...arr];
+    copy.sort(function (a, b) {
+        return a - b;
+    });
+    const middle = Math.floor((copy.length - 1) / 2);
+    if (copy.length % 2) {
+        return copy[middle];
+    }
+    else {
+        return (copy[middle] + copy[middle + 1]) / 2;
+    }
+}
+/*
+ *   Get an array of integers at an index from a string of HSL values
+ */
+function getHSLValueArray(palettes, index) {
+    return palettes.map((hsl) => parseInt(hsl.split(',')[index]));
+}
+
+class BaseWidget extends BaseElement {
+    label = 'BaseWidget';
+    // Internal
+    shadow;
+    styleEl;
+    contents;
+    stylesAdded;
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: 'open' });
+        // Bind handlers
+        // NOTE: For some reason mangling these listeners breaks things, so no "_" prefix
+        // @todo investigate this bug
+        this.handleKeydown = this.handleKeydown.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleFocusout = this.handleFocusout.bind(this);
+        this.handleShadowFocusout = this.handleShadowFocusout.bind(this);
+        // On global state change
+        this.onGlobalStateChange(() => {
+            setClasses(this, {
+                'keyboard-nav': this.globalState.keyboardNavEnabled,
+            });
+        });
+        // Connected
+        this.onConnect(() => {
+            this.styleEl = document.createElement('style');
+            setClasses(this, {
+                'keyboard-nav': this.globalState.keyboardNavEnabled,
+            });
+            this.addEventListener('focus', this.handleFocus);
+            this.addEventListener('focusout', this.handleFocusout);
+            this.shadow.addEventListener('focusout', this.handleShadowFocusout);
+            this.addEventListener('keydown', this.handleKeydown);
+        });
+    }
+    /*
+     *   Focus previous post
+     */
+    focusPreviousPost() {
+        this.dispatchEvent(new CustomEvent('post-focus-previous'));
+    }
+    /*
+     *   Focus next post
+     */
+    focusNextPost() {
+        this.dispatchEvent(new CustomEvent('post-focus-next'));
+    }
+    /*
+     *   Handle keydown
+     */
+    handleKeydown(evt) {
+        if (evt.key === 'ArrowLeft' && evt.shiftKey) {
+            this.focusPreviousPost();
+        }
+        if (evt.key === 'ArrowRight' && evt.shiftKey) {
+            this.focusNextPost();
+        }
+        if (this.shadow.activeElement) {
+            this.classList.remove('has-focus');
+        }
+    }
+    /**
+     * Handle focus
+     */
+    handleFocus(evt) {
+        if (!this.shadow.activeElement) {
+            this.classList.add('has-focus');
+        }
+    }
+    /**
+     * Handle focusout
+     */
+    handleFocusout() {
+        this.classList.remove('has-focus');
+    }
+    /**
+     * Handle shadow focusout
+     */
+    handleShadowFocusout(evt) {
+        if (evt.relatedTarget === this) {
+            this.classList.add('has-focus');
+        }
+    }
+    /*
+     *   Render content
+     */
+    renderWidget(contents, styles) {
+        if (!this.stylesAdded || !this.contents) {
+            this.contents = contents;
+            this.styleEl.beholdReplaceChildren(...styles.map((style) => style.toString()));
+            this.shadow.beholdReplaceChildren(this.contents, this.styleEl);
+            this.stylesAdded = true;
+        }
+        else {
+            this.contents.replaceWith(contents);
+        }
+    }
+}
+
+/*
+ *   Get a loading color, ready to apply as a style
+ */
+function getLoadingColorString(loadingColor, colorPalette, loadingColorTone, medianPaletteHSL) {
+    let styleString = '';
+    switch (loadingColor) {
+        case 'dominant':
+        case 'vibrant':
+        case 'muted':
+        case 'vibrantLight':
+        case 'mutedLight':
+        case 'vibrantDark':
+        case 'mutedDark':
+            styleString = colorPalette
+                ? `rgb(${colorPalette[loadingColor]})`
+                : getHSLCSSFromArray(medianPaletteHSL);
+            break;
+        case 'tone':
+            if (loadingColorTone) {
+                const hslColor = loadingColorTone.split(',');
+                if (colorPalette) {
+                    const delta = getLogWithSign(1.6, RGBStringToHSLArray(colorPalette.dominant)[2] - medianPaletteHSL[2]);
+                    const hslString = `hsl(${hslColor[0]},${hslColor[1]}%,${parseInt(hslColor[2]) + delta}%)`;
+                    styleString = hslString;
+                }
+                else {
+                    styleString = `hsl(${hslColor[0]},${hslColor[1]}%,${hslColor[2]}%, ${Math.max(1 * Math.random(), 0.3)})`;
+                }
+            }
+            else {
+                styleString = getHSLCSSFromArray(medianPaletteHSL);
+            }
+    }
+    return styleString;
+}
+/*
+ *   Get logx of y, with positivity maintained
+ */
+function getLogWithSign(x, y) {
+    return (Math.log(Math.abs(y)) / Math.log(x)) * Math.sign(y);
+}
+/*
+ *   Get css hsl string
+ */
+function getHSLCSSFromArray(arr) {
+    if (!arr)
+        return '';
+    return `hsl(${arr[0]}, ${arr[1]}%, ${arr[2]}%, ${Math.max(1 * Math.random(), 0.3)})`;
+}
+
+/**
+ * @description
+ * Required props: 'post', 'widgetSettings', 'feedMetadata', 'medianPaletteHSL'
+ */
+class BasePost extends BaseElement {
+    label = 'BasePost';
+    // Provided
+    post;
+    widgetSettings;
+    feedMetadata;
+    medianPaletteHSL;
+    hasRowGap = false;
+    isLastRow = false;
+    onClick;
+    previewLoadingColors = null;
+    aspectRatio;
+    index;
+    totalPosts;
+    // Internal
+    _innerEl;
+    _captionEl;
+    constructor() {
+        super();
+        // Listen to Prop changes
+        this.onPropChange(this._baseHandlePropChange, [
+            'post',
+            'widgetSettings',
+            'feedMetadata',
+            'medianPaletteHSL',
+            'hasRowGap',
+            'isLastRow',
+            'previewLoadingColors',
+            'aspectRatio',
+            'index',
+            'totalPosts',
+        ], [
+            'post',
+            'widgetSettings',
+            'feedMetadata',
+            'medianPaletteHSL',
+            'index',
+            'totalPosts',
+        ]);
+        // Bind Event Handlers
+        this._handleButtonClick = this._handleButtonClick.bind(this);
+        this.onConnect(() => {
+            this.onResize(this, this, this._handleResize);
+        });
+    }
+    /*
+     *   Handle prop change
+     */
+    _baseHandlePropChange({ changedProp, oldValue, newValue }) {
+        switch (changedProp) {
+            case 'post':
+                if (hasChanges(newValue, oldValue, ['colorPalette'])) {
+                    this._setBackgroundColor();
+                }
+                break;
+            case 'widgetSettings':
+                if (hasChanges(newValue, oldValue, ['loadingColor', 'loadingColorTone'])) {
+                    this._setBackgroundColor();
+                }
+                if (this._innerEl &&
+                    hasChanges(newValue, oldValue, ['linkTarget']) &&
+                    newValue?.onPostClick?.toLowerCase().includes('link')) {
+                    this._innerEl.setAttribute('target', newValue.linkTarget);
+                }
+                if (this._innerEl &&
+                    hasChanges(newValue, oldValue, ['customLinkURL']) &&
+                    newValue.onPostClick === 'customLink') {
+                    this._innerEl.setAttribute('href', newValue.customLinkURL);
+                }
+                if (hasChanges(newValue, oldValue, [
+                    'hoverOverlayColor',
+                    'hoverOverlayCustomColor',
+                    'hoverOverlayOpacity',
+                ])) {
+                    this._setOverlayColor();
+                }
+                this._setContainerStyles();
+                break;
+            case 'previewLoadingColors':
+                this._setBackgroundColor();
+                break;
+            case 'hasRowGap':
+            case 'isLastRow':
+                this._setContainerStyles();
+                break;
+        }
+    }
+    /*
+     *   Set overlay color
+     */
+    _setOverlayColor() {
+        let overlayColor = 'rgba(0, 0, 0, 0.3)';
+        let overlayCustomColor = this.widgetSettings.hoverOverlayCustomColor ?? '0,0,0';
+        let overlayOpacity = this.widgetSettings.hoverOverlayOpacity ?? 65;
+        if (this.widgetSettings.hoverOverlayColor === 'auto') {
+            const hslArray = RGBStringToHSLArray(this.post.colorPalette?.dominant || '100,100,100').map((val) => Math.round(val));
+            overlayColor = `hsl(${hslArray[0]} ${Math.min(hslArray[1], 50)}% ${Math.min(hslArray[2], 40)}% / ${overlayOpacity / 100})`;
+        }
+        if (this.widgetSettings.hoverOverlayColor === 'custom') {
+            const hslArray = overlayCustomColor.split(',');
+            overlayColor = `hsl(${hslArray[0]} ${hslArray[1]}% ${hslArray[2]}% / ${overlayOpacity / 100})`;
+        }
+        setCssVars(this, { '--overlay-color': overlayColor });
+    }
+    /*
+     *   Set post styles
+     */
+    _setContainerStyles() {
+        setClasses(this, {
+            post: true,
+            'post--hover-icon': this.widgetSettings.onHover === 'showIcon',
+            'post--hover-caption': this.widgetSettings.onHover === 'showCaption',
+            'post--has-row-gap': this.hasRowGap,
+            'post--last-row': this.isLastRow,
+        });
+        this._setOverlayColor();
+    }
+    /*
+     *   Render contents
+     */
+    renderPost(contentEl) {
+        let elementType = 'div';
+        let link = this.post.permalink;
+        this._setContainerStyles();
+        if (this.widgetSettings.onPostClick === 'linkToProfile' &&
+            this.feedMetadata.username) {
+            link = `https://instagram.com/${this.feedMetadata.username}`;
+        }
+        if (this.widgetSettings.onPostClick === 'customLink' &&
+            this.widgetSettings.customLinkURL) {
+            link = this.widgetSettings?.customLinkURL;
+        }
+        if (this.widgetSettings.onPostClick.toLowerCase().includes('link')) {
+            elementType = 'a';
+        }
+        if (this.widgetSettings.onPostClick.toLowerCase().includes('popup')) {
+            elementType = 'button';
+        }
+        let _captionEl = null;
+        if (this.widgetSettings.onHover === 'showCaption') {
+            const innerCaptionEl = createElement({
+                contents: this.post.prunedCaption?.length
+                    ? this.post.prunedCaption
+                    : this.post.caption,
+                classes: `post-caption__inner`,
+            });
+            _captionEl = createElement({
+                contents: innerCaptionEl,
+                classes: `post-caption`,
+            });
+        }
+        let mediaType = 'image';
+        switch (this.post?.mediaType) {
+            case 'VIDEO':
+                mediaType = this.post.isReel ? 'reel' : 'video';
+                break;
+            case 'CAROUSEL_ALBUM':
+                mediaType = 'album';
+                break;
+            case 'IMAGE':
+            default:
+                mediaType = 'image';
+        }
+        this._innerEl = createElement({
+            type: elementType,
+            contents: [contentEl, _captionEl || ''],
+            attributes: {
+                draggable: 'false',
+                'aria-label': `${mediaType}, post ${this.index + 1} of ${this.totalPosts}`,
+                tabindex: -1,
+                ...(elementType === 'a'
+                    ? {
+                        href: link,
+                        target: this.widgetSettings.linkTarget,
+                    }
+                    : {}),
+            },
+            listeners: {
+                ...(elementType === 'button'
+                    ? {
+                        click: this._handleButtonClick,
+                    }
+                    : {}),
+            },
+        });
+        this.beholdReplaceChildren(this._innerEl);
+    }
+    /*
+     *   Set background color
+     */
+    _setBackgroundColor() {
+        const color = this.previewLoadingColors ?? this.widgetSettings.loadingColor;
+        this.style.backgroundColor = getLoadingColorString(color, this.post.colorPalette, this.widgetSettings.loadingColorTone, this.medianPaletteHSL);
+    }
+    /*
+     *   Handle Resize
+     */
+    _handleResize(entry) {
+        const width = entry?.borderBoxSize?.[0]?.inlineSize || entry?.contentRect?.width || 0;
+        const height = entry?.borderBoxSize?.[0]?.blockSize || entry?.contentRect?.height || 0;
+        setCssVars(this, {
+            '--post-width': width + 'px',
+            '--post-height': height + 'px',
+        });
+        let size = 'xlarge';
+        if (width < 600)
+            size = 'large';
+        if (width < 400)
+            size = 'medium';
+        if (width < 250)
+            size = 'small';
+        if (width < 175)
+            size = 'xsmall';
+        const widths = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+        widths.forEach((sizeString) => {
+            setClasses(this, {
+                [`post--${sizeString}`]: sizeString === size,
+            });
+        });
+    }
+    /**
+     * Handle button click
+     */
+    _handleButtonClick() {
+        if (this.onClick) {
+            this.onClick(this);
+        }
+    }
+    focus() {
+        this._innerEl.focus();
+    }
+}
+
+/**
+ * @description
+ * Required props: 'sizes', 'mediaUrl'
+ */
+class Image extends BaseElement {
+    label = 'Image';
+    // Provided
+    sizes;
+    mediaUrl;
+    aspectRatio;
+    showLoader = false;
+    // Internal
+    _imageEl;
+    _ldrEl;
+    _initialLocalState = {
+        isLoaded: false,
+        isVisible: false,
+        didError: false,
+        shouldPreload: false,
+        loaderIsShowing: false,
+        imageSrc: null,
+        sizeObj: null,
+    };
+    _throttledHandleResize;
+    constructor() {
+        super();
+        // Listen to prop changes
+        this.onPropChange(this._handlePropChange, ['sizes', 'mediaUrl', 'aspectRatio', 'showLoader'], ['sizes', 'mediaUrl', 'aspectRatio']);
+        // Listen to local state changes
+        this.onLocalStateChange(this._handleLocalStateChange, this._initialLocalState);
+        // Bind event handlers
+        this._handleIntersection = this._handleIntersection.bind(this);
+        this._handleImageLoad = this._handleImageLoad.bind(this);
+        this._handleImageError = this._handleImageError.bind(this);
+        this._throttledHandleResize = throttle(this._handleResize, 50, this);
+        this.preload = this.preload.bind(this);
+        this.onConnect(() => {
+            const height = this.aspectRatio ? 300 : this.sizes?.full.height ?? 300;
+            const width = this.aspectRatio
+                ? 300 * this.aspectRatio
+                : this.sizes?.full.width ?? 300;
+            this.style.aspectRatio = this.aspectRatio
+                ? `${this.aspectRatio}`
+                : `${width}/${height}`;
+            let src = !this.sizes?.full.height
+                ? this.mediaUrl ?? getPlaceholderImage(width, height)
+                : getPlaceholderImage(width, height);
+            this._imageEl = createElement({
+                type: 'img',
+                attributes: {
+                    alt: '',
+                    role: 'presentation',
+                    height: height + 'px',
+                    width: width + 'px',
+                    tabindex: -1,
+                    src,
+                    draggable: 'false',
+                },
+                listeners: {
+                    load: this._handleImageLoad,
+                    error: this._handleImageError,
+                },
+            });
+            if (this.showLoader) {
+                this._ldrEl = createElement({ classes: 'ldr' });
+                this.beholdReplaceChildren(this._ldrEl, this._imageEl);
+            }
+            else {
+                this.beholdReplaceChildren(this._imageEl);
+            }
+            forceLayout();
+            this.raf(() => {
+                this.onResize(this, this, this._throttledHandleResize);
+                this.onIntersection(this, this._handleIntersection);
+            }, 'connect');
+        });
+        this.onDisconnect(() => {
+            this.updateLocalState({
+                isVisible: false,
+                isLoaded: false,
+            });
+            if (this._imageEl) {
+                this._imageEl.removeEventListener('load', this._handleImageLoad);
+                this._imageEl.removeEventListener('error', this._handleImageError);
+            }
+        });
+    }
+    /*
+     *   Handle prop change
+     */
+    _handlePropChange({ changedProp, oldValue, newValue }) {
+        switch (changedProp) {
+            case 'showLoader':
+                if (!oldValue && newValue && this._imageEl) {
+                    this._ldrEl = createElement({ classes: 'ldr' });
+                    this.beholdReplaceChildren(this._ldrEl, this._imageEl);
+                }
+                break;
+            case 'sizes':
+                if (isEqual(oldValue, newValue))
+                    return;
+                // If _imageEl hasn't rendered yet, skip getting closest size
+                // since we don't have its size in the DOM
+                this.updateLocalState({
+                    isLoaded: false,
+                    sizeObj: this._imageEl?.isConnected
+                        ? this._getClosestSize(this.offsetWidth, this.offsetHeight)
+                        : null,
+                });
+                break;
+        }
+    }
+    /**
+     * Handle local state change
+     */
+    _handleLocalStateChange({ changedProps, newState }) {
+        if (changedProps.includes('loaderIsShowing')) {
+            if (this._ldrEl) {
+                setClasses(this._ldrEl, {
+                    'ldr--visible': newState.loaderIsShowing && !newState.isLoaded,
+                });
+            }
+        }
+        if (changedProps.includes('imageSrc')) {
+            if (this._imageEl &&
+                (newState.isVisible || newState.shouldPreload) &&
+                newState.imageSrc !== this._imageEl.src) {
+                this._imageEl.src = newState.imageSrc;
+            }
+        }
+        if (changedProps.includes('sizeObj')) {
+            if (!newState.didError) {
+                const backupSrc = this.mediaUrl;
+                this.updateLocalState({
+                    imageSrc: newState.sizeObj?.mediaUrl ?? backupSrc,
+                });
+            }
+        }
+    }
+    /*
+     *   Handle intersection
+     */
+    _handleIntersection(entry) {
+        if (entry.isIntersecting) {
+            this.updateLocalState({ isVisible: true });
+            if (!this.localState.isLoaded && this.showLoader) {
+                this.to(() => {
+                    this.updateLocalState({ loaderIsShowing: true });
+                }, 50, 'loader');
+            }
+            if (this.localState.imageSrc &&
+                this._imageEl.src !== this.localState.imageSrc) {
+                this._imageEl.src = this.localState.imageSrc;
+            }
+        }
+        else {
+            this.updateLocalState({ isVisible: false });
+        }
+    }
+    /*
+     *   Handle Resize
+     */
+    _handleResize(entry) {
+        let currentWidth = entry.borderBoxSize
+            ? entry.borderBoxSize[0].inlineSize
+            : entry.contentRect.width || 0;
+        let currentHeight = entry.borderBoxSize
+            ? entry.borderBoxSize[0].blockSize
+            : entry.contentRect.height || 0;
+        const closestSize = this._getClosestSize(currentWidth, currentHeight);
+        if (!this.localState.sizeObj?.width ||
+            this.localState.sizeObj?.width < closestSize?.width ||
+            this.localState.sizeObj?.height < closestSize?.height) {
+            this.updateLocalState({ sizeObj: closestSize });
+        }
+    }
+    /*
+     *   Handle image load
+     */
+    _handleImageLoad() {
+        if (this._imageEl.src !== this.localState.imageSrc &&
+            !this.localState.shouldPreload &&
+            this.sizes?.full.height) {
+            return;
+        }
+        this.cancelTo('loader');
+        this.updateLocalState({
+            isLoaded: true,
+            loaderIsShowing: false,
+        });
+        this.dispatchEvent(new Event('load'));
+        this.classList.add('is-loaded');
+    }
+    /**
+     * Handle error
+     */
+    _handleImageError() {
+        if (this.localState.imageSrc !== this.mediaUrl &&
+            !this.localState.didError) {
+            this.updateLocalState({ didError: true });
+            this.updateLocalState({ imageSrc: this.mediaUrl });
+        }
+    }
+    /**
+     * Get closest size to current max dimension
+     */
+    _getClosestSize(targetWidth, targetHeight) {
+        if (!this.sizes)
+            return;
+        return this.sizes
+            ? Object.values(this.sizes).reduce(function (acc, curr) {
+                // Is curr width closer to the target width than the accumulator size?
+                if (Math.abs(curr.width / 2 - targetWidth) <
+                    Math.abs(acc.width / 2 - targetWidth)) {
+                    return curr;
+                }
+                // Is curr height closer to the target height than the accumulator size?
+                if (Math.abs(curr.height / 2 - targetHeight) <
+                    Math.abs(acc.height / 2 - targetHeight)) {
+                    return curr;
+                }
+                // Nope, accumulator size is best
+                return acc;
+            })
+            : null;
+    }
+    /**
+     * Preload
+     */
+    preload() {
+        if (!this.localState.isLoaded) {
+            if (this.localState.imageSrc &&
+                this.localState.sizeObj &&
+                this._imageEl.src !== this.localState.imageSrc) {
+                this._imageEl.src = this.localState.imageSrc;
+            }
+            else {
+                this.updateLocalState({ shouldPreload: true });
+            }
+        }
+    }
+    /*
+     *   Register
+     */
+    static register(name = 'behold-image') {
+        if (!customElements.get(name)) {
+            customElements.define(name, Image);
+        }
+        return name;
+    }
+}
+
+/**
+ * @description
+ * Required props: 'post'
+ */
+class ImagePost extends BasePost {
+    label = 'ImagePost';
+    // Internal
+    _imageEl;
+    constructor() {
+        super();
+        // Register child components
+        Image.register();
+        // Listen to Prop changes
+        this.onPropChange(this._handlePropChange, ['post', 'widgetSettings', 'aspectRatio'], null, this._render);
+    }
+    /*
+     *   Handle prop change
+     */
+    _handlePropChange({ changedProp, oldValue, newValue }) {
+        switch (changedProp) {
+            case 'widgetSettings':
+                if (hasChanges(newValue, oldValue, ['onHover', 'onPostClick'])) {
+                    this._render();
+                }
+                break;
+            case 'post':
+            case 'aspectRatio':
+                this._render();
+                break;
+        }
+    }
+    /**
+     * Render
+     */
+    _render() {
+        const { sizes, mediaUrl } = this.post;
+        this._imageEl = createElement({
+            type: 'behold-image',
+            props: {
+                sizes,
+                mediaUrl,
+                aspectRatio: this.aspectRatio.reduce((w, h) => w / h),
+            },
+        });
+        this.renderPost(this._imageEl);
+    }
+    /*
+     *   Register
+     */
+    static register(name = 'behold-image-post') {
+        if (!customElements.get(name)) {
+            customElements.define(name, ImagePost);
+        }
+        return name;
+    }
+}
+
+/**
+ * @description
+ * Required props: 'mediaUrl', 'sizes'
+ */
+class Video extends BaseElement {
+    label = 'Video';
+    // Provided
+    mediaUrl;
+    sizes;
+    autoplay;
+    aspectRatio;
+    renderPlaceholder;
+    // Internal
+    _isPlaying;
+    _isAttemptingToPlay;
+    _videoEl;
+    _imageEl;
+    constructor() {
+        super();
+        this._isPlaying = this.autoplay || false;
+        this._isAttemptingToPlay = false;
+        // Bind event handlers
+        this._handleIntersection = this._handleIntersection.bind(this);
+        this._handleVideoLoad = this._handleVideoLoad.bind(this);
+        this._handlePageVisibility = this._handlePageVisibility.bind(this);
+        this._handlePlay = this._handlePlay.bind(this);
+        this._handlePause = this._handlePause.bind(this);
+        this.preload = this.preload.bind(this);
+        // Listen to page visibility
+        document.addEventListener('visibilitychange', this._handlePageVisibility);
+        // On loop
+        this.onLoop(async () => {
+            if (!this._videoEl || !this.isLoaded)
+                return;
+            if (!this._isAttemptingToPlay &&
+                this._isPlaying &&
+                !this._isVideoElPlaying) {
+                try {
+                    this._isAttemptingToPlay = true;
+                    await this._videoEl.play();
+                    this._isAttemptingToPlay = false;
+                }
+                catch (error) {
+                    this._isAttemptingToPlay = false;
+                }
+            }
+            if (!this._isPlaying && this._isVideoElPlaying) {
+                this._videoEl.pause();
+                this._isAttemptingToPlay = false;
+            }
+        }, 15);
+        // Listen to prop changes
+        this.onPropChange(({ changedProp, newValue }) => {
+            if (this.localState.shouldPreload && this.mediaUrl) {
+                preloadMedia('video', this.mediaUrl);
+            }
+            if (changedProp === 'autoplay') {
+                if (newValue) {
+                    this.play();
+                }
+                else {
+                    this.pause();
+                }
+            }
+        }, ['mediaUrl', 'sizes', 'autoplay', 'aspectRatio', 'renderPlaceholder'], ['mediaUrl', 'sizes', 'renderPlaceholder']);
+        // Listen to local state changes
+        this.onLocalStateChange(() => { }, {
+            isMuted: true,
+            isLoaded: false,
+            shouldPreload: false,
+        });
+        // Connect
+        this.onConnect(() => {
+            this.onIntersection(this, this._handleIntersection);
+            this.render();
+        });
+        // Cleanup
+        this.onDisconnect(() => {
+            document.removeEventListener('visibilitychange', this._handlePageVisibility);
+            if (this._videoEl) {
+                this._videoEl.removeEventListener('play', this._handlePlay);
+                this._videoEl.removeEventListener('pause', this._handlePause);
+                this._videoEl.removeEventListener('loadeddata', this._handleVideoLoad);
+            }
+        });
+    }
+    /**
+     * Add isPlaying property
+     */
+    get isPlaying() {
+        return this._isPlaying || false;
+    }
+    get _isVideoElPlaying() {
+        return !!(this._videoEl.currentTime > 0 &&
+            !this._videoEl.paused &&
+            !this._videoEl.ended &&
+            this._videoEl.readyState > 2);
+    }
+    /**
+     * Reflect props from videoEl
+     */
+    get paused() {
+        return this._videoEl?.paused;
+    }
+    get muted() {
+        return this._videoEl?.muted;
+    }
+    get isLoaded() {
+        return this.localState.isLoaded;
+    }
+    /*
+     * Render
+     */
+    render() {
+        this._videoEl = createElement({
+            type: 'video',
+            attributes: {
+                loop: true,
+                playsinline: true,
+                crossorigin: 'anonymous',
+                tabIndex: -1,
+                disablePictureInPicture: true,
+                disableremoteplayback: true,
+                height: this.sizes?.full.height || 100,
+                width: this.sizes?.full.width || 100,
+            },
+            props: {
+                muted: this.localState.isMuted,
+                autoplay: this.autoplay || false,
+            },
+            listeners: {
+                play: this._handlePlay,
+                pause: this._handlePause,
+            },
+        });
+        if (this.renderPlaceholder) {
+            this._imageEl = createElement({
+                type: 'img',
+                attributes: {
+                    height: this.sizes.full.height,
+                    width: this.sizes.full.width,
+                    src: getPlaceholderImage(this.sizes.full.width, this.sizes.full.height),
+                },
+            });
+            this.beholdReplaceChildren(this._imageEl);
+        }
+    }
+    /*
+     *   Handle intersectionObserver
+     */
+    _handleIntersection(entry) {
+        if (entry.isIntersecting && this._videoEl) {
+            if (this._videoEl.src !== this.mediaUrl) {
+                this._videoEl.addEventListener('loadeddata', this._handleVideoLoad, {
+                    once: true,
+                });
+                this._videoEl.src = this.mediaUrl;
+                // Fix for iOS
+                this._videoEl.load();
+            }
+        }
+        else if (!this.autoplay) {
+            this.pause();
+        }
+    }
+    /*
+     *   Handle video load
+     */
+    _handleVideoLoad() {
+        this.updateLocalState({ isLoaded: true });
+        if (!this.autoplay) {
+            this._videoEl.currentTime = 0.25;
+            this._videoEl.pause();
+        }
+        this.dispatchEvent(new Event('load'));
+        this.beholdReplaceChildren(this._videoEl);
+        forceLayout();
+        this.raf(() => {
+            this.classList.add('is-loaded');
+        }, '_handleVideoLoad');
+    }
+    /**
+     * Handle play
+     */
+    _handlePlay() {
+        this.dispatchEvent(new Event('play'));
+    }
+    /**
+     * Handle pause
+     */
+    _handlePause() {
+        this.dispatchEvent(new Event('pause'));
+    }
+    /*
+     *   Play
+     */
+    play() {
+        this._isPlaying = true;
+    }
+    /*
+     *   Pause
+     */
+    pause() {
+        this._isPlaying = false;
+    }
+    /**
+     * Mute
+     */
+    mute() {
+        this.updateLocalState({ isMuted: true });
+        if (this._videoEl) {
+            this._videoEl.muted = true;
+        }
+    }
+    /**
+     * Unmute
+     */
+    unmute() {
+        this.updateLocalState({ isMuted: false });
+        if (this._videoEl) {
+            this._videoEl.muted = false;
+        }
+    }
+    /*
+     *   Handle page visibility change
+     */
+    _handlePageVisibility() {
+        if (document.hidden) {
+            this.pause();
+            if (this._videoEl) {
+                this._videoEl.pause();
+            }
+        }
+        if (!document.hidden && this.autoplay) {
+            this.play();
+        }
+    }
+    /**
+     * Preload
+     */
+    preload() {
+        if (!this.localState.isLoaded && this.mediaUrl) {
+            preloadMedia('video', this.mediaUrl);
+        }
+        else {
+            this.updateLocalState({ shouldPreload: true });
+        }
+    }
+    /*
+     *   Register
+     */
+    static register(name = 'behold-video') {
+        if (!customElements.get(name)) {
+            customElements.define(name, Video);
+        }
+        return name;
+    }
+}
+
+/**
+ * @description
+ * Required props: 'post', 'widgetSettings',
+ */
+class VideoPost extends BasePost {
+    label = 'VideoPost';
+    // Internal
+    _videoEl;
+    _imageEl;
+    constructor() {
+        super();
+        // Listen to Prop changes
+        this.onPropChange(this._handlePropChange, ['post', 'widgetSettings', 'aspectRatio'], null, this._render);
+        // Register child components
+        Video.register();
+        Image.register();
+        // Bind listeners
+        this._handleMouseover = this._handleMouseover.bind(this);
+        this._handleMouseleave = this._handleMouseleave.bind(this);
+        this.onDisconnect(() => {
+            this.removeEventListener('mouseover', this._handleMouseover);
+            this.removeEventListener('mouseleave', this._handleMouseleave);
+        });
+    }
+    /*
+     *   Handle prop change
+     */
+    _handlePropChange({ changedProp, oldValue, newValue }) {
+        switch (changedProp) {
+            case 'widgetSettings':
+                if (hasChanges(oldValue, newValue, [
+                    'onHover',
+                    'onPostClick',
+                    'previewVideosOnHover',
+                ])) {
+                    this._render();
+                }
+                if (hasChanges(oldValue, newValue, ['autoplayVideos'])) {
+                    if (this.widgetSettings.previewVideosOnHover) {
+                        this._videoEl.autoplay = newValue.autoplayVideos;
+                    }
+                    else {
+                        this._render();
+                    }
+                }
+                break;
+            case 'post':
+            case 'aspectRatio':
+                this._render();
+                break;
+        }
+    }
+    /**
+     * handle mouseover
+     */
+    _handleMouseover() {
+        this._videoEl?.play();
+    }
+    /**
+     * Handle mouseleave
+     */
+    _handleMouseleave() {
+        if (!this.widgetSettings.autoplayVideos) {
+            this._videoEl?.pause();
+        }
+    }
+    /**
+     *  Render
+     */
+    _render() {
+        const { sizes, mediaUrl, thumbnailUrl } = this.post;
+        if (((this.widgetSettings.previewVideosOnHover ||
+            this.widgetSettings.autoplayVideos) &&
+            mediaUrl) ||
+            (!sizes.full.mediaUrl && !thumbnailUrl && mediaUrl)) {
+            this._videoEl = createElement({
+                type: 'behold-video',
+                props: {
+                    mediaUrl,
+                    sizes,
+                    autoplay: this.widgetSettings.autoplayVideos,
+                    aspectRatio: this.aspectRatio.reduce((w, h) => w / h),
+                    renderPlaceholder: false,
+                },
+                listeners: {
+                    mouseover: this._handleMouseover,
+                    mouseleave: this._handleMouseleave,
+                },
+            });
+            this.renderPost(this._videoEl);
+        }
+        else {
+            this._imageEl = createElement({
+                type: 'behold-image',
+                props: {
+                    sizes,
+                    mediaUrl: thumbnailUrl,
+                    aspectRatio: this.aspectRatio.reduce((w, h) => w / h),
+                },
+            });
+            this.renderPost(this._imageEl);
+        }
+    }
+    /*
+     *   Register
+     */
+    static register(name = 'behold-video-post') {
+        if (!customElements.get(name)) {
+            customElements.define(name, VideoPost);
+        }
+        return name;
+    }
+}
+
+/**
+ * @description
+ * Required props: 'post'
+ */
+class AlbumPost extends BasePost {
+    label = 'AlbumPost';
+    // Internal
+    _mediaEl;
+    constructor() {
+        super();
+        // Register child components
+        Image.register();
+        Video.register();
+        // Listen to Prop changes
+        this.onPropChange(this._handlePropChange, ['post', 'widgetSettings'], null, this._render);
+    }
+    /*
+     *   Handle prop change
+     */
+    _handlePropChange({ changedProp, oldValue, newValue }) {
+        switch (changedProp) {
+            case 'widgetSettings':
+                if (hasChanges(newValue, oldValue, ['onHover', 'onPostClick'])) {
+                    this._render();
+                }
+                break;
+            case 'post':
+            case 'aspectRatio':
+                this._render();
+                break;
+        }
+    }
+    /**
+     * Render
+     */
+    _render() {
+        let { sizes, mediaUrl, children } = this.post;
+        // No sizes or mediaUrl, use children instead
+        if (!sizes.full.mediaUrl && !mediaUrl) {
+            const firstChildWithImage = children.reduce((acc, curr) => {
+                if (curr.mediaType === 'VIDEO') {
+                    return curr.sizes.full.mediaUrl || curr.thumbnailUrl ? curr : acc;
+                }
+                return curr.sizes.full.mediaUrl || curr.mediaUrl ? curr : acc;
+            });
+            sizes = firstChildWithImage.sizes;
+            mediaUrl =
+                firstChildWithImage.thumbnailUrl ?? firstChildWithImage.mediaUrl;
+        }
+        if (this.post.mediaUrlIsVideo) {
+            this._mediaEl = createElement({
+                type: 'behold-video',
+                props: {
+                    sizes,
+                    mediaUrl,
+                    aspectRatio: this.aspectRatio.reduce((w, h) => w / h),
+                    renderPlaceholder: false,
+                },
+            });
+        }
+        else {
+            this._mediaEl = createElement({
+                type: 'behold-image',
+                props: {
+                    sizes,
+                    mediaUrl,
+                    aspectRatio: this.aspectRatio.reduce((w, h) => w / h),
+                },
+            });
+        }
+        this.renderPost(this._mediaEl);
+    }
+    /*
+     *   Register
+     */
+    static register(name = 'behold-album-post') {
+        if (!customElements.get(name)) {
+            customElements.define(name, AlbumPost);
+        }
+        return name;
+    }
+}
+
+var css_248z = ":host{--post-border-radius:0;--post-aspect-ratio:1;--icon-instagram:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M17.6 3.2c4.7 0 5.2 0 7.1.1 1.7.1 2.6.4 3.2.6.8.3 1.4.7 2 1.3.6.6 1 1.2 1.3 2 .2.6.5 1.5.6 3.3.1 1.8.1 2.4.1 7.1s0 5.2-.1 7.1c-.1 1.7-.4 2.6-.6 3.2-.6 1.5-1.8 2.7-3.3 3.3-.6.2-1.5.5-3.2.6-1.8.1-2.4.1-7.1.1s-5.2 0-7.1-.1c-1.7-.1-2.6-.4-3.2-.6-.8-.3-1.4-.7-2-1.3-.6-.6-1-1.2-1.3-2-.2-.6-.5-1.5-.6-3.2-.1-1.8-.1-2.4-.1-7.1s0-5.2.1-7.1c0-1.8.3-2.7.6-3.3.3-.8.7-1.4 1.3-2 .6-.6 1.2-1 2-1.3.6-.2 1.5-.5 3.2-.6 1.9-.1 2.4-.1 7.1-.1m0-3.2c-4.8 0-5.3 0-7.2.1-1.9.1-3.2.4-4.3.8C5 1.4 3.9 2 3 2.9c-.9.9-1.5 2-2 3.1C.6 7.1.3 8.4.2 10.2c-.1 1.9-.1 2.5-.1 7.2s0 5.3.1 7.2c.1 2 .4 3.2.8 4.4.4 1.2 1.1 2.2 2 3.1.9.9 1.9 1.6 3.1 2 1.1.4 2.4.7 4.2.8s2.5.1 7.2.1 5.3 0 7.2-.1c1.9-.1 3.1-.4 4.2-.8 2.3-.9 4.2-2.8 5.1-5.1.4-1.1.7-2.4.8-4.2.1-1.9.1-2.5.1-7.2s0-5.3-.1-7.2c-.1-1.9-.4-3.1-.8-4.2-.4-1.2-1.1-2.2-2-3.1-.9-.9-1.9-1.6-3.1-2-1.1-.4-2.4-.7-4.2-.8-1.8-.3-2.4-.3-7.1-.3z'/%3E%3Cpath fill='%23FFF' d='M17.6 8.5c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 14.8c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8 5.8 2.6 5.8 5.8-2.6 5.8-5.8 5.8z'/%3E%3Ccircle fill='%23FFF' cx='26.9' cy='8.2' r='2.1'/%3E%3C/svg%3E\");--icon-video:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M30.1 15.5 7.2 2.3c-1.5-.9-3.5.2-3.5 1.9v26.5c0 1.7 1.9 2.9 3.4 1.9L30 19.4c1.7-.8 1.7-3 .1-3.9z'/%3E%3C/svg%3E\");--icon-album:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M27.3 22.7v-17c0-2.6-2.1-4.7-4.7-4.7H5.7C3.1 1 1 3.1 1 5.7v17c0 2.6 2.1 4.7 4.7 4.7h17c2.5-.1 4.6-2.2 4.6-4.7zm4-13.4v14.6c0 4.1-3.4 7.4-7.4 7.4H9.2c-.5 0-.8.6-.5 1 .9 1 2.2 1.6 3.7 1.6h12.1c5.2 0 9.3-4.2 9.3-9.3V12.5c0-1.5-.6-2.8-1.6-3.7-.3-.4-.9 0-.9.5z'/%3E%3C/svg%3E\");align-items:center;border:none;box-shadow:none;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;margin:0;min-width:50px;outline:none;position:relative;width:100%}:host *{box-sizing:border-box}:host(.keyboard-nav.has-focus){outline:none}:host(.keyboard-nav.has-focus):before{background-color:rgba(0,0,0,.25);border-radius:6px;content:\"\";display:block;height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%;z-index:1}:host(.keyboard-nav.has-focus):after{background-color:#222;border-radius:6px;box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff,0 .6px .4px rgba(0,0,0,.042),0 1.3px 1px rgba(0,0,0,.061),0 2.5px 1.9px rgba(0,0,0,.075),0 4.5px 3.4px rgba(0,0,0,.089),0 8.4px 6.3px rgba(0,0,0,.108),0 20px 15px rgba(0,0,0,.15);color:#fff;content:\"Shift + arrow keys to navigate posts\";font-family:sans-serif;font-size:16px;max-width:80%;padding:15px;position:absolute;text-align:center;z-index:1}@media (max-width:1300px){:host(.keyboard-nav.has-focus):after{font-size:15px}}:host(.keyboard-nav.has-focus) .posts{opacity:.65}.posts{display:grid;margin:0;max-width:100%;padding:0;width:100%}.post{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;align-self:stretch;border:none;border-radius:var(--post-border-radius) /calc(var(--post-border-radius)*var(--post-aspect-ratio));color:inherit;font:inherit;isolation:isolate;line-height:normal;margin:0 0 -1px;overflow:hidden;transform:translateZ(0);transition:background .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(100% + .5px)}:host(.keyboard-nav) .post.post:focus-within{box-shadow:0 0 0 1px #fff,0 0 0 3px #4169e1,0 0 0 4px #fff;z-index:1}:host(.is-previewing-loading-colors) .post *{opacity:0}.post.post--has-row-gap,.post.post--last-row{margin:0}.post:before{background-color:transparent;border-radius:var(--post-border-radius) /calc(var(--post-border-radius)*var(--post-aspect-ratio));content:\"\";height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:all 2s cubic-bezier(.215,.61,.355,1);width:100%;z-index:2}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){[data-hover-effect*=blur i] .post:before{height:calc(100% - 1px);left:0;opacity:0;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}}.post.post--hover-icon:after{background-image:var(--icon);background-position:50%;background-repeat:no-repeat;background-size:auto 100%;border-radius:var(--post-border-radius) /calc(var(--post-border-radius)*var(--post-aspect-ratio));content:\"\";height:12%;height:calc(min(var(--post-width), var(--post-height))*.12);left:0;max-height:30px;min-height:20px;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%) scale(.75);transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%;will-change:transform;z-index:3}@media (prefers-reduced-motion){.post.post--hover-icon:after{transition:none}}.post behold-album,.post behold-image,.post behold-video{height:100%;width:100%}.post>a,.post>button,.post>div{background-color:transparent;border:0;box-shadow:none;color:inherit;display:block;font:inherit;height:100%;line-height:inherit;outline:none;padding:0;transition:opacity .3s ease;width:100%}.post a,.post button{cursor:pointer}behold-image-post{--icon:var(--icon-instagram)}behold-video-post{--icon:var(--icon-video)}behold-album-post{--icon:var(--icon-album)}.post-caption{align-items:center;background-color:var(--overlay-color);display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:15px;height:100%;justify-content:center;left:0;line-height:1.5;opacity:0;padding:15%;pointer-events:none;position:absolute;top:0;transition:opacity .4s ease;width:100%;z-index:2}.post:hover .post-caption,:host(:host(.keyboard-nav)) .post:focus-within .post-caption{opacity:1}.post--xlarge .post-caption{--lines:12;--innerScale:scale(0.98);padding:20%}.post--large .post-caption{--lines:9;--innerScale:scale(0.98)}.post--medium .post-caption{--lines:6;--innerScale:scale(0.97);font-size:14px}.post--small .post-caption{--lines:4;--innerScale:scale(0.95);font-size:13px;line-height:1.25}.post--xsmall .post-caption{--lines:3;--innerScale:scale(0.95);font-size:12px;line-height:1.25}.post-caption__inner{-webkit-line-clamp:var(--lines);-webkit-box-orient:vertical;color:#fff;display:-webkit-box;opacity:0;overflow:hidden;text-align:center;transform:var(--innerScale);transition:all .3s ease;white-space:pre-line;will-change:transform,opacity;word-break:none}@media (prefers-reduced-motion){.post-caption__inner{transform:none}}.post:hover .post-caption__inner,:host(.keyboard-nav) .post:focus-within .post-caption__inner{opacity:1;transform:none;transition:all .3s ease}:host(.keyboard-nav) .post:focus-within:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) .post:focus-within:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=fade] .post:focus-within:before,[data-hover-effect=fade] .post:hover:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=fade] .post:focus-within:after,[data-hover-effect=fade] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-image img,:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-video video,[data-hover-effect=zoomFade] .post:hover behold-image img,[data-hover-effect=zoomFade] .post:hover behold-video video{transform:scale(1.05)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-image img,:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-video video,[data-hover-effect=zoomFade] .post:hover behold-image img,[data-hover-effect=zoomFade] .post:hover behold-video video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within:before,[data-hover-effect=zoomFade] .post:hover:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within:after,[data-hover-effect=zoomFade] .post:hover:after{opacity:1;transform:translateY(-50%)}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within behold-video,[data-hover-effect=blur] .post:hover behold-image,[data-hover-effect=blur] .post:hover behold-video{filter:brightness(97%) blur(3px);transition:all .6s cubic-bezier(.215,.61,.355,1)}}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within:before,[data-hover-effect=blur] .post:hover:before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:rgba(0,0,0,.002);opacity:1}}:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within:after,[data-hover-effect=blur] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{transform:none}}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{filter:brightness(97%) blur(3px)}}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within:before,[data-hover-effect=zoomBlur] .post:hover:before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:rgba(0,0,0,.002);opacity:1}}:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within:after,[data-hover-effect=zoomBlur] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within behold-video,[data-hover-effect=toGreyscale] .post:hover behold-image,[data-hover-effect=toGreyscale] .post:hover behold-video{filter:grayscale(100%);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within:after,[data-hover-effect=toGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-video,[data-hover-effect=zoomToGreyscale] .post:hover behold-image,[data-hover-effect=zoomToGreyscale] .post:hover behold-video{filter:grayscale(100%);transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-video,[data-hover-effect=zoomToGreyscale] .post:hover behold-image,[data-hover-effect=zoomToGreyscale] .post:hover behold-video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within:after,[data-hover-effect=zoomToGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post,[data-hover-effect=fromGreyscale] .post{filter:grayscale(100%)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover,[data-hover-effect=fromGreyscale] .post:focus,[data-hover-effect=fromGreyscale] .post:hover{filter:grayscale(0);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus.post--hover-caption:before,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover.post--hover-caption:before,[data-hover-effect=fromGreyscale] .post:focus.post--hover-caption:before,[data-hover-effect=fromGreyscale] .post:hover.post--hover-caption:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus:after,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover:after,[data-hover-effect=fromGreyscale] .post:focus:after,[data-hover-effect=fromGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post,[data-hover-effect=zoomFromGreyscale] .post{filter:grayscale(100%)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover,[data-hover-effect=zoomFromGreyscale] .post:focus,[data-hover-effect=zoomFromGreyscale] .post:hover{filter:grayscale(0)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-video,[data-hover-effect=zoomFromGreyscale] .post:focus behold-image,[data-hover-effect=zoomFromGreyscale] .post:focus behold-video,[data-hover-effect=zoomFromGreyscale] .post:hover behold-image,[data-hover-effect=zoomFromGreyscale] .post:hover behold-video{transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-video,[data-hover-effect=zoomFromGreyscale] .post:focus behold-image,[data-hover-effect=zoomFromGreyscale] .post:focus behold-video,[data-hover-effect=zoomFromGreyscale] .post:hover behold-image,[data-hover-effect=zoomFromGreyscale] .post:hover behold-video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus.post--hover-caption:before,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover.post--hover-caption:before,[data-hover-effect=zoomFromGreyscale] .post:focus.post--hover-caption:before,[data-hover-effect=zoomFromGreyscale] .post:hover.post--hover-caption:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus:after,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover:after,[data-hover-effect=zoomFromGreyscale] .post:focus:after,[data-hover-effect=zoomFromGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}behold-image{display:block;height:0;overflow:hidden;padding:0;padding-bottom:calc(100%/var(--post-aspect-ratio));position:relative;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}behold-image img{border-radius:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1),opacity .6s ease;vertical-align:middle;width:100%;will-change:transform;z-index:1}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){[data-hover-effect=blur] behold-image img,[data-hover-effect=zoomBlur] behold-image img{height:calc(100% + 6px);left:-3px;top:-3px;width:calc(100% + 6px)}}.post--reel behold-image img{-o-object-position:center 25%;object-position:center 25%}behold-image.is-loaded img{opacity:1}behold-video{display:block;height:0;overflow:hidden;padding:0;padding-bottom:calc(100%/var(--post-aspect-ratio));position:relative;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}behold-video video{height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1),opacity .6s ease;vertical-align:middle;width:100%;will-change:transform}.post--reel behold-video video{-o-object-position:center 25%;object-position:center 25%}behold-video.is-loaded video{opacity:1}";
+var baseGridStyles = css_248z;
+
+export { AlbumPost as A, BaseWidget as B, ImagePost as I, RGBStringToHSLArray as R, VideoPost as V, Video as a, baseGridStyles as b, Image as c, getMedianHSL as g };