@behold/widget 0.5.57 → 0.5.59

package/dist/base-GZO73SkY.js

@@ -1,1220 +0,0 @@
-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 };