@saasquatch/mint-components 1.5.0-3 → 1.5.0-30

package/dist/cjs/sqm-card-feed-view-4113807b.js

@@ -0,0 +1,374 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-95c698c1.js');
+
+const DEFAULT_MAX_COL_WIDTH = 500;
+const DEFAULT_COLS = "auto";
+const DEFAULT_DEBOUNCE_MS = 300;
+const DEFAULT_GAP_PX = 24;
+const COL_COUNT_CSS_VAR_NAME = `--_masonry-layout-col-count`;
+const GAP_CSS_VAR_NAME = `--_masonry-layout-gap`;
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+const ELEMENT_NODE_TYPE = 1;
+const DEBOUNCE_MAP = new Map();
+/**
+ * Returns a number attribute from an element.
+ * @param $elem
+ * @param name
+ * @param defaultValue
+ */
+function getNumberAttribute($elem, name, defaultValue) {
+    const value = parseFloat($elem.getAttribute(name) || "");
+    return isNaN(value) ? defaultValue : value;
+}
+/**
+ * Returns the amount of cols that the masonry grid should have.
+ * @param totalWidth
+ * @param cols
+ * @param maxColWidth
+ */
+function getColCount(totalWidth, cols, maxColWidth) {
+    return isNaN(cols)
+        ? Math.max(1, Math.ceil(totalWidth / maxColWidth))
+        : cols;
+}
+/**
+ * Debounces a function.
+ * @param cb
+ * @param ms
+ * @param id
+ */
+function debounce(cb, ms, id) {
+    const existingTimeout = DEBOUNCE_MAP.get(id);
+    if (existingTimeout != null)
+        window.clearTimeout(existingTimeout);
+    DEBOUNCE_MAP.set(id, window.setTimeout(cb, ms));
+}
+/**
+ * Returns the index of the column with the smallest height.
+ * @param colHeights
+ */
+function findSmallestColIndex(colHeights) {
+    let smallestIndex = 0;
+    let smallestHeight = Infinity;
+    colHeights.forEach((height, i) => {
+        if (height < smallestHeight) {
+            smallestHeight = height;
+            smallestIndex = i;
+        }
+    });
+    return smallestIndex;
+}
+
+/**
+ * Template for the masonry layout.
+ * Max width of each column is computed as the width in percentage of
+ * the column minus the total with of the gaps divided between each column.
+ */
+const $template = document.createElement("template");
+$template.innerHTML = `
+  <style>
+    :host {
+      display: flex;
+      align-items: flex-start;
+      justify-content: stretch;
+    }
+
+    .column {
+	  max-width: calc((100% / var(${COL_COUNT_CSS_VAR_NAME}, 1) - ((var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px) * (var(${COL_COUNT_CSS_VAR_NAME}, 1) - 1) / var(${COL_COUNT_CSS_VAR_NAME}, 1)))));
+	  width: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .column:not(:last-child) {
+      margin-right: var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px);
+    }
+
+    .column ::slotted(*) {
+      margin-bottom: var(${GAP_CSS_VAR_NAME}, ${DEFAULT_GAP_PX}px);
+      box-sizing: border-box;
+      width: 100%;
+    }
+
+    /* Hide the items that has not yet found the correct slot */
+    #unset-items {
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+  </style>
+  <div id="unset-items">
+    <slot></slot>
+  </div>
+`;
+// Use polyfill only in browsers that lack native Shadow DOM.
+window.ShadyCSS && window.ShadyCSS.prepareTemplateStyles($template, "masonry-layout");
+/**
+ * Masonry layout web component. It places the slotted elements in the optimal position based
+ * on the available vertical space, just like mason fitting stones in a wall.
+ * @example <masonry-layout><div class="item"></div><div class="item"></div></masonry-layout>
+ * @csspart column - Each column of the masonry layout.
+ * @csspart column-index - The specific column at the given index (eg. column-0 would target the first column and so on)
+ * @slot - Items that should be distributed in the layout.
+ */
+class MasonryLayout extends HTMLElement {
+    /**
+     * Attach the shadow DOM.
+     */
+    constructor() {
+        super();
+        // Unique debounce ID so different masonry layouts on one page won't affect eachother
+        this.debounceId = `layout_${Math.random()}`;
+        // Resize observer that layouts when necessary
+        this.ro = undefined;
+        // The current request animation frame callback
+        this.currentRequestAnimationFrameCallback = undefined;
+        const shadow = this.attachShadow({ mode: "open" });
+        shadow.appendChild($template.content.cloneNode(true));
+        this.onSlotChange = this.onSlotChange.bind(this);
+        this.onResize = this.onResize.bind(this);
+        this.layout = this.layout.bind(this);
+        this.$unsetElementsSlot = this.shadowRoot.querySelector("#unset-items > slot");
+    }
+    // The observed attributes.
+    // Whenever one of these changes we need to update the layout.
+    static get observedAttributes() {
+        return ["maxcolwidth", "gap", "cols"];
+    }
+    /**
+     * The maximum width of each column if cols are set to auto.
+     * @attr maxcolwidth
+     * @param v
+     */
+    set maxColWidth(v) {
+        this.setAttribute("maxcolwidth", v.toString());
+    }
+    get maxColWidth() {
+        return getNumberAttribute(this, "maxcolwidth", DEFAULT_MAX_COL_WIDTH);
+    }
+    /**
+     * The amount of columns.
+     * @attr cols
+     * @param v
+     */
+    set cols(v) {
+        this.setAttribute("cols", v.toString());
+    }
+    get cols() {
+        return getNumberAttribute(this, "cols", DEFAULT_COLS);
+    }
+    /**
+     * The gap in pixels between the columns.
+     * @attr gap
+     * @param v
+     */
+    set gap(v) {
+        this.setAttribute("gap", v.toString());
+    }
+    get gap() {
+        return getNumberAttribute(this, "gap", DEFAULT_GAP_PX);
+    }
+    /**
+     * The ms of debounce when the element resizes.
+     * @attr debounce
+     * @param v
+     */
+    set debounce(v) {
+        this.setAttribute("debounce", v.toString());
+    }
+    get debounce() {
+        return getNumberAttribute(this, "debounce", DEFAULT_DEBOUNCE_MS);
+    }
+    /**
+     * The column elements.
+     */
+    get $columns() {
+        return Array.from(this.shadowRoot.querySelectorAll(`.column`));
+    }
+    /**
+     * Hook up event listeners when added to the DOM.
+     */
+    connectedCallback() {
+        this.$unsetElementsSlot.addEventListener("slotchange", this.onSlotChange);
+        // Attach resize observer so we can relayout eachtime the size changes
+        if ("ResizeObserver" in window) {
+            this.ro = new ResizeObserver(this.onResize);
+            this.ro.observe(this);
+        }
+        else {
+            window.addEventListener("resize", this.onResize);
+        }
+    }
+    /**
+     * Remove event listeners when removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.$unsetElementsSlot.removeEventListener("slotchange", this.onSlotChange);
+        window.removeEventListener("resize", this.onResize);
+        if (this.ro != null) {
+            this.ro.unobserve(this);
+        }
+    }
+    /**
+     * Updates the layout when one of the observed attributes changes.
+     */
+    attributeChangedCallback(name) {
+        switch (name) {
+            case "gap":
+                this.style.setProperty(GAP_CSS_VAR_NAME, `${this.gap}px`);
+                break;
+        }
+        // Recalculate the layout
+        this.scheduleLayout();
+    }
+    /**
+     *
+     */
+    onSlotChange() {
+        // Grab unset elements
+        const $unsetElements = (this.$unsetElementsSlot.assignedNodes() || [])
+            .filter(node => node.nodeType === ELEMENT_NODE_TYPE);
+        // If there are more items not yet set layout straight awy to avoid the item being delayed in its render.
+        if ($unsetElements.length > 0) {
+            this.layout();
+        }
+    }
+    /**
+     * Each time the element resizes we need to schedule a layout
+     * if the amount available columns has has changed.
+     * @param entries
+     */
+    onResize(entries) {
+        // Grab the width of the element. If it isn't provided by the resize observer entry
+        // we compute it ourselves by looking at the offset width of the element.
+        const { width } = entries != null && Array.isArray(entries) && entries.length > 0
+            ? entries[0].contentRect : { width: this.offsetWidth };
+        // Get the amount of columns we should have
+        const colCount = getColCount(width, this.cols, this.maxColWidth);
+        // Compare the amount of columns we should have to the current amount of columns.
+        // Schedule a layout if they are no longer the same.
+        if (colCount !== this.$columns.length) {
+            this.scheduleLayout();
+        }
+    }
+    /**
+     * Render X amount of columns.
+     * @param colCount
+     */
+    renderCols(colCount) {
+        // Get the current columns
+        const $columns = this.$columns;
+        // If the amount of columns is correct we don't have to add new columns.
+        if ($columns.length === colCount) {
+            return;
+        }
+        // Remove all of the current columns
+        for (const $column of $columns) {
+            $column.parentNode && $column.parentNode.removeChild($column);
+        }
+        // Add some new columns
+        for (let i = 0; i < colCount; i++) {
+            // Create a column element
+            const $column = document.createElement(`div`);
+            $column.classList.add(`column`);
+            $column.setAttribute(`part`, `column column-${i}`);
+            // Add a slot with the name set to the index of the column
+            const $slot = document.createElement(`slot`);
+            $slot.setAttribute(`name`, i.toString());
+            // Append the slot to the column an the column to the shadow root.
+            $column.appendChild($slot);
+            this.shadowRoot.appendChild($column);
+        }
+        // Set the column count so we can compute the correct width of the columns
+        this.style.setProperty(COL_COUNT_CSS_VAR_NAME, colCount.toString());
+        // Commit the changes for ShadyCSS
+        window.ShadyCSS && window.ShadyCSS.styleElement(this);
+    }
+    /**
+     * Schedules a layout.
+     * @param ms
+     */
+    scheduleLayout(ms = this.debounce) {
+        debounce(this.layout, ms, this.debounceId);
+    }
+    /**
+     * Layouts the elements.
+     */
+    layout() {
+        // Cancel the current animation frame callback
+        if (this.currentRequestAnimationFrameCallback != null) {
+            window.cancelAnimationFrame(this.currentRequestAnimationFrameCallback);
+        }
+        // Layout in the next animationframe
+        this.currentRequestAnimationFrameCallback = requestAnimationFrame(() => {
+            // console.time("layout");
+            // Compute relevant values we are going to use for layouting the elements.
+            const gap = this.gap;
+            const $elements = Array.from(this.children)
+                .filter(node => node.nodeType === ELEMENT_NODE_TYPE);
+            const colCount = getColCount(this.offsetWidth, this.cols, this.maxColWidth);
+            // Have an array that keeps track of the highest col height.
+            const colHeights = Array(colCount).fill(0);
+            // Instead of interleaving reads and writes we create an array for all writes so we can batch them at once.
+            const writes = [];
+            // Go through all elements and figure out what column (aka slot) they should be put in.
+            // We only do reads in this for loop and postpone the writes
+            for (const $elem of $elements) {
+                // Read the height of the element
+                const height = $elem.getBoundingClientRect().height;
+                // Find the currently smallest column
+                let smallestColIndex = findSmallestColIndex(colHeights);
+                // Add the height of the item and the gap to the column heights.
+                // It is very important we add the gap since the more elements we have,
+                // the bigger the role the margins play when computing the actual height of the columns.
+                colHeights[smallestColIndex] += height + gap;
+                // Set the slot on the element to get the element to the correct column.
+                // Only do it if the slot has actually changed.
+                const newSlot = smallestColIndex.toString();
+                if ($elem.slot !== newSlot) {
+                    writes.push(() => ($elem.slot = newSlot));
+                }
+            }
+            // Batch all the writes at once
+            for (const write of writes) {
+                write();
+            }
+            // Render the columns
+            this.renderCols(colCount);
+            // Commit the changes for ShadyCSS
+            window.ShadyCSS && window.ShadyCSS.styleElement(this);
+            // console.timeEnd("layout");
+        });
+    }
+}
+customElements.define("masonry-layout", MasonryLayout);
+
+function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        marginBottom: "24px",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("div", { class: sheet.classes.Container }, children)));
+}
+
+exports.CardFeedView = CardFeedView;

package/dist/cjs/sqm-card-feed.cjs.entry.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const _extends = require('./extends-0302d27d.js');
+require('./JSS-95c698c1.js');
+const utils = require('./utils-95e5317c.js');
+const sqmCardFeedView = require('./sqm-card-feed-view-4113807b.js');
+
+const CardFeed = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Card Width
+     */
+    this.width = 347;
+    /**
+     * @uiName Column Gap
+     * @uiType number
+     */
+    this.gap = 24;
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(sqmCardFeedView.CardFeedView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+  }
+};
+
+exports.sqm_card_feed = CardFeed;

package/dist/cjs/sqm-graphql-client-provider.cjs.entry.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 
 async function useGraphQLClientProvider({ domain }) {
-  const token = index_module.Q();
+  const token = index_module.ee();
   const appDomain = domain;
-  const tenantAlias = index_module.k();
+  const tenantAlias = index_module.j();
   // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = index_module.pe(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = _extends.m(index_module.ge, managedIdentityClient);
+  const managedIdentityClient = index_module.Pe(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = _extends.m(index_module.qe, managedIdentityClient);
   _extends.useEffect(() => {
     setGraphQLClient(managedIdentityClient);
   }, [managedIdentityClient]);

package/dist/cjs/{sqm-hero-view-bb3d00a1.js → sqm-hero-view-9edbbcc3.js}

@@ -3,7 +3,7 @@
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 const useCallback = require('./use-callback-fadb2643.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {
@@ -118,8 +118,7 @@ function HeroView(props) {
       minHeight: "100%",
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
   :host{    

package/dist/cjs/sqm-hero.cjs.entry.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmHeroView = require('./sqm-hero-view-bb3d00a1.js');
+const sqmHeroView = require('./sqm-hero-view-9edbbcc3.js');
 
 const Hero = class {
   constructor(hostRef) {

package/dist/cjs/{sqm-leaderboard-rank-view-7dd44d62.js → sqm-leaderboard-rank-view-f11e8d8f.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-6223fe8f.js');
-const index_module = require('./index.module-7dd4b981.js');
+const global = require('./global-0dfbf15e.js');
+const index_module = require('./index.module-548bf279.js');
 
 var docCache = new Map();
 var fragmentSourceMap = new Map();

package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const global = require('./global-6223fe8f.js');
+const global = require('./global-0dfbf15e.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 const cjs = require('./cjs-1066ec21.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-7dd44d62.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-f11e8d8f.js');
 
 const GET_RANK = sqmLeaderboardRankView.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
@@ -26,7 +26,7 @@ const GET_RANK = sqmLeaderboardRankView.gql `
 function useLeaderboardRank(props) {
   var _a, _b, _c;
   const programId = index_module.M();
-  const user = index_module.T();
+  const user = index_module.ne();
   const rankVariables = {
     type: props.leaderboardType,
     filter: { programId_eq: programId },
@@ -34,7 +34,7 @@ function useLeaderboardRank(props) {
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;
   }
-  const { data: rankData } = index_module.en(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = index_module.mn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const fullRankText = ((_a = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _a === void 0 ? void 0 : _a.leaderboardRank) ? global.intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
     rank: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c[props.rankType],
   })
@@ -59,7 +59,7 @@ const LeaderboardRank = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = index_module.j()
+    const props = index_module.k()
       ? useLeaderboardRankDemo(this)
       : useLeaderboardRank(this);
     return index.h(sqmLeaderboardRankView.LeaderboardRankView, Object.assign({}, props));

package/dist/cjs/sqm-leaderboard.cjs.entry.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 const cjs = require('./cjs-1066ec21.js');
-const ShadowViewAddon = require('./ShadowViewAddon-a85b8c8d.js');
+const ShadowViewAddon = require('./ShadowViewAddon-66d88ca5.js');
 
-const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}table{width:100%}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-x-small) var(--sl-spacing-small)}.User{width:100%}.Score{width:auto;white-space:nowrap}";
+const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}.header-title{font-size:var(--sl-font-size-large);font-weight:var(--sl-font-weight-semibold)}.header-description{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal);margin-bottom:var(--sl-spacing-large)}.cover-image{width:100%;margin-bottom:var(--sl-spacing-large)}table{width:100%;border-collapse:collapse}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}tr:not(:first-child){border-top:1px solid var(--sl-color-neutral-200)}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-medium)}th{padding:var(--sl-spacing-medium);padding-top:0}.User{width:100%}.Score{width:auto;white-space:nowrap}";
 
 const Leaderboard = class {
   constructor(hostRef) {
@@ -20,9 +20,11 @@ const Leaderboard = class {
   }
   disconnectedCallback() { }
   render() {
+    const loading = index.h(ShadowViewAddon.LoadingSlot, null);
+    const empty = index.h(ShadowViewAddon.EmptySkeleton, { label: "No Users Yet" });
     const props = {
-      empty: index.h("slot", { name: "empty" }),
-      loadingstate: index.h("slot", { name: "loading" }),
+      empty: empty,
+      loadingstate: loading,
       usersheading: this.usersheading,
       statsheading: this.statsheading,
       rankType: this.rankType,
@@ -30,7 +32,7 @@ const Leaderboard = class {
       interval: this.interval,
     };
     const demoProps = { ...props, demoData: this.demoData };
-    const viewprops = index_module.j()
+    const viewprops = index_module.k()
       ? useLeaderboardDemo(demoProps)
       : ShadowViewAddon.useLeaderboard(props);
     return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, viewprops));
@@ -59,8 +61,8 @@ function useLeaderboardDemo(props) {
       ],
     },
     elements: {
-      empty: props.empty ? props.empty : index.h("div", null, "Empty"),
-      loadingstate: props.loadingstate ? (props.loadingstate) : (index.h("div", null, "Loading")),
+      empty: props.empty ? (props.empty) : (index.h(ShadowViewAddon.EmptySkeleton, { label: "No Users Yet" })),
+      loadingstate: props.loadingstate ? (props.loadingstate) : (index.h(ShadowViewAddon.LoadingSkeleton, null)),
     },
   }, props.demoProps || {}, { arrayMerge: (_, a) => a });
 }

package/dist/cjs/sqm-media-view-47ab3f6e.js

@@ -0,0 +1,107 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-95c698c1.js');
+
+function MediaView(props, children) {
+  const overlay = Boolean(props.imageHeader || props.imageDescription);
+  const showButton = Boolean(props.buttonText || props.buttonLink);
+  const style = {
+    Container: {
+      position: "relative",
+      maxWidth: props.width ? props.width : "100%",
+      maxHeight: props.height ? props.height : "100%",
+      "&:before": {
+        content: overlay ? '""' : "",
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        background: "var(--sl-color-primary-900)",
+        opacity: "0.75",
+      },
+    },
+    Image: {
+      display: "block",
+      maxWidth: "inherit",
+      maxHeight: "inherit",
+      objectFit: props.objectFit ? props.objectFit : "cover",
+    },
+    Center: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      textAlign: "center",
+      transform: "translate(-50%, -50%)",
+    },
+    ImageHeader: {
+      color: "var(--sl-color-neutral-0)",
+      fontSize: "var(--sl-font-size-xxx-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      "@media (max-width: 899px)": {
+        fontSize: "var(--sl-font-size-x-large)",
+      },
+      "@media (max-width: 499px)": {
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "@media (max-width: 399px)": {
+        fontSize: "var(--sl-font-size-x-small)",
+      },
+    },
+    ImageDescription: {
+      color: "var(--sl-color-neutral-0)",
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      "@media (max-width: 899px)": {
+        fontSize: "var(--sl-font-size-medium)",
+      },
+      "@media (max-width: 499px)": {
+        fontSize: "var(--sl-font-size-x-small)",
+      },
+      "@media (max-width: 399px)": {
+        fontSize: "var(--sl-font-size-xx-small)",
+      },
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-normal)",
+    },
+    Button: {
+      marginTop: "var(--sl-spacing-medium)",
+      "@media (max-width: 499px)": {
+        marginTop: "var(--sl-spacing-small)",
+        transform: "scale(0.75)",
+      },
+      "@media (max-width: 399px)": {
+        marginTop: "0",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{
+    display: block;
+  }`;
+  return (index.h("div", null,
+    props.header && index.h("div", { class: sheet.classes.Header }, props.header),
+    props.description && (index.h("div", { class: sheet.classes.Description }, props.description)),
+    index.h("div", { class: sheet.classes.Container },
+      index.h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString),
+      props.imgUrl && (index.h("img", { class: sheet.classes.Image, src: props.imgUrl })),
+      index.h("div", { class: sheet.classes.Center },
+        props.imageHeader && (index.h("div", { class: sheet.classes.ImageHeader }, props.imageHeader)),
+        props.imageDescription && (index.h("div", { class: sheet.classes.ImageDescription }, props.imageDescription)),
+        showButton && (index.h("div", { class: sheet.classes.Button },
+          index.h("sl-button", { type: "primary", onClick: () => props.buttonNewTab
+              ? window.open(props.buttonLink)
+              : window.open(props.buttonLink, "_parent") }, props.buttonText))))),
+    children));
+}
+
+exports.MediaView = MediaView;