@saasquatch/mint-components 1.5.0-2 → 1.5.0-20

package/dist/cjs/{useDemoBigStat-2786227e.js → useDemoBigStat-49cd314a.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const index_module = require('./index.module-7dd4b981.js');
+const index_module = require('./index.module-c0bf9df0.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 
@@ -338,12 +338,12 @@ function BigStatView(props, children) {
 const debug = _extends.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.en(query, variables);
+  const res = index_module.cn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
   const stat = getStat(res);
-  return stat;
+  return { ...stat, loading: res.loading };
 };
 const referralsCountQuery = (programId, 
 // locale
@@ -895,14 +895,13 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = index_module.M();
+  const { statType, flexReverse, alignment, programId = index_module.M(), } = props;
   const locale = index_module.R();
-  const userIdent = index_module.T();
+  const userIdent = index_module.ne();
   const re = _extends.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
-      props: { value: 0, statvalue: "!!!", flexReverse, alignment },
+      props: { value: 0, statvalue: "!!!", flexReverse, alignment, loading: false },
       label: "BAD PROP TYPE",
     };
   }
@@ -928,6 +927,7 @@ function useBigStat(props) {
     props: {
       value: stat === null || stat === void 0 ? void 0 : stat.value,
       statvalue: (_a = stat === null || stat === void 0 ? void 0 : stat.statvalue) !== null && _a !== void 0 ? _a : LOADING,
+      loading: stat.loading,
       flexReverse,
       alignment,
     },
@@ -943,6 +943,7 @@ function useDemoBigStat(props) {
       props: {
         value: 0,
         statvalue: "!!!",
+        loading: false,
         flexReverse: false,
         alignment: "center",
       },

package/dist/collection/collection-manifest.json

@@ -3,10 +3,10 @@
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
     "./components/sqm-reward-exchange-list/sqm-reward-exchange-list.js",
-    "./components/sqm-rewards-table/sqm-rewards-table.js",
     "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
     "./components/sqm-brand/sqm-brand.js",
+    "./components/sqm-card-feed/sqm-card-feed.js",
     "./components/sqm-divided-layout/sqm-divided-layout.js",
     "./components/sqm-edit-profile/sqm-edit-profile.js",
     "./components/sqm-form-message/sqm-form-message.js",
@@ -47,7 +47,15 @@
     "./components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-status-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-user-column.js",
-    "./components/sqm-rewards-table/sqm-rewards-table-column.js",
+    "./components/sqm-rewards-table/sqm-rewards-table.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-date-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-rewards-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-date-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js",
     "./components/sqm-route/sqm-route.js",
     "./components/sqm-router/sqm-router.js",
     "./components/sqm-share-button/sqm-share-button.js",

package/dist/collection/components/sqm-big-stat/BigStat.stories.js

@@ -4,7 +4,7 @@ export default {
   title: "Components/Big Stat",
 };
 export const Default = () => {
-  const props = { value: 990000, statvalue: "9.900,00" };
+  const props = { value: 990000, statvalue: "9.900,00", loading: false };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 export const LeftAlign = () => {
@@ -12,6 +12,7 @@ export const LeftAlign = () => {
     value: 500,
     statvalue: "500",
     alignment: "left",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -20,6 +21,7 @@ export const RightAlign = () => {
     value: 500,
     statvalue: "500",
     alignment: "right",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -28,6 +30,7 @@ export const FlexReverse = () => {
     value: 500,
     statvalue: "500",
     flexReverse: true,
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -37,6 +40,7 @@ export const FlexReverseRight = () => {
     statvalue: "500",
     flexReverse: true,
     alignment: "right",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -46,6 +50,7 @@ export const FlexReverseLeft = () => {
     statvalue: "500",
     flexReverse: true,
     alignment: "left",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -53,6 +58,7 @@ export const NoStatValue = () => {
   const props = {
     value: 0,
     statvalue: "...",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -60,6 +66,7 @@ export const InvalidStatValue = () => {
   const props = {
     value: 0,
     statvalue: "!!!",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -100,12 +100,32 @@ export class BigStat {
       "attribute": "alignment",
       "reflect": false
     },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID",
+            "name": "uiName"
+          }],
+        "text": "The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<BigStatViewProps>",
-        "resolved": "{ value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; }",
+        "resolved": "{ value?: number; statvalue?: string; loading?: boolean; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -11,7 +11,7 @@ const debugQuery = (query, variables, getStat) => {
     console.error("issue getting stat:", res);
   }
   const stat = getStat(res);
-  return stat;
+  return { ...stat, loading: res.loading };
 };
 const referralsCountQuery = (programId, 
 // locale
@@ -563,14 +563,13 @@ export const StatPaths = [
 export const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 export function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = useProgramId();
+  const { statType, flexReverse, alignment, programId = useProgramId(), } = props;
   const locale = useLocale();
   const userIdent = useUserIdentity();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
-      props: { value: 0, statvalue: "!!!", flexReverse, alignment },
+      props: { value: 0, statvalue: "!!!", flexReverse, alignment, loading: false },
       label: "BAD PROP TYPE",
     };
   }
@@ -596,6 +595,7 @@ export function useBigStat(props) {
     props: {
       value: stat === null || stat === void 0 ? void 0 : stat.value,
       statvalue: (_a = stat === null || stat === void 0 ? void 0 : stat.statvalue) !== null && _a !== void 0 ? _a : LOADING,
+      loading: stat.loading,
       flexReverse,
       alignment,
     },

package/dist/collection/components/sqm-big-stat/useDemoBigStat.js

@@ -9,6 +9,7 @@ export function useDemoBigStat(props) {
       props: {
         value: 0,
         statvalue: "!!!",
+        loading: false,
         flexReverse: false,
         alignment: "center",
       },

package/dist/collection/components/sqm-brand/SqmBrand.stories.js

@@ -3,18 +3,19 @@ export default {
   title: "Components/Brand",
 };
 const SampleComponents = () => (h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
-  h("sl-button", { type: "default" }, "Default"),
-  h("sl-button", { type: "primary" }, "Primary"),
-  h("sl-button", { type: "success" }, "Success"),
-  h("sl-button", { type: "neutral" }, "Neutral"),
-  h("sl-button", { type: "warning" }, "Warning"),
-  h("sl-button", { type: "danger" }, "Danger"),
-  h("br", null),
-  h("sl-badge", { type: "primary" }, "Primary"),
-  h("sl-badge", { type: "success" }, "Success"),
-  h("sl-badge", { type: "neutral" }, "Neutral"),
-  h("sl-badge", { type: "warning" }, "Warning"),
-  h("sl-badge", { type: "danger" }, "Danger"),
+  h("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
+    h("sl-button", { type: "default" }, "Default"),
+    h("sl-button", { type: "primary" }, "Primary"),
+    h("sl-button", { type: "success" }, "Success"),
+    h("sl-button", { type: "neutral" }, "Neutral"),
+    h("sl-button", { type: "warning" }, "Warning"),
+    h("sl-button", { type: "danger" }, "Danger")),
+  h("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
+    h("sl-badge", { type: "primary" }, "Primary"),
+    h("sl-badge", { type: "success" }, "Success"),
+    h("sl-badge", { type: "neutral" }, "Neutral"),
+    h("sl-badge", { type: "warning" }, "Warning"),
+    h("sl-badge", { type: "danger" }, "Danger")),
   h("div", { class: "color-palette" },
     h("div", { class: "color-palette__name" },
       "Primary",
@@ -66,10 +67,27 @@ export const Nested = () => {
 function ColorSwatch({ depth }) {
   return (h("div", { style: {
       backgroundColor: `var(--sl-color-primary-${depth})`,
+      color: `var(--sl-color-neutral-${1000 - depth})`,
       width: "50px",
       height: "50px",
       display: "flex",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
     } }, depth));
 }
+export const Fonts = () => {
+  return (h("div", null,
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-font": "Roboto" },
+      "Roboto",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Open Sans" },
+      "Open Sans",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Lato" },
+      "Lato",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Oswald" },
+      "Oswald",
+      h(SampleComponents, null))));
+};

package/dist/collection/components/sqm-brand/sqm-brand.js

@@ -1,32 +1,51 @@
-import { Component, h, Host, Prop } from "@stencil/core";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { autoColorScaleCss, } from "../sqm-stencilbook/AutoColor";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { Component, h, Host, Prop } from "@stencil/core";
+import { buildFontsCssUrl } from "../../fonts/GoogleFonts";
+import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
 /**
  *
- * @uiName Big Stat
- * @slot the description of the component
+ * @uiName Brand Container
+ * @slot Controls the brand color and font of Mint Components wrapped by the container.
  */
 export class BrandComponent {
   constructor() {
-    /**
-     * Controls the primary brand color used in the Mint Components library. Note that this
-     * does not affect vanilla components or other component libraries.
-     *
-     * @uiName Brand Color
-     */
-    this.brandColor = "#0000FF";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const css = autoColorScaleCss(this.brandColor);
+    var _a, _b;
+    const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "inherit";
+    const css = autoColorScaleCss(brandColor);
+    const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "").trim() || undefined;
+    useEffect(() => {
+      if (!sanitizedFont) {
+        // Nothing required in default case.
+        return;
+      }
+      const sheet = document.createElement("link");
+      sheet.setAttribute("href", buildFontsCssUrl(sanitizedFont));
+      sheet.setAttribute("rel", "stylesheet");
+      document.head.appendChild(sheet);
+      return () => document.head.removeChild(sheet);
+    }, [sanitizedFont]);
+    const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "inherit";
     return (h(Host, null,
       h("style", null, `
           :host{
             display: contents;
           }
-          /* Selects any element placed inside a slot */
+          /* 
+          Selects any element placed inside a slot
+           - resets css variable inheritence for fonts
+          
+          */
           ::slotted(*) {
+            --sl-font-sans: "${font}", arial;
+            --sl-input-font-family: "${font}", arial;
+            --sl-tooltip-font-family: "${font}", arial;
+            font-family:  "${font}", arial;
+
             ${css}
           }`),
       h("slot", null)));
@@ -52,8 +71,27 @@ export class BrandComponent {
         "text": "Controls the primary brand color used in the Mint Components library. Note that this\r\ndoes not affect vanilla components or other component libraries."
       },
       "attribute": "brand-color",
-      "reflect": false,
-      "defaultValue": "\"#0000FF\""
+      "reflect": false
+    },
+    "brandFont": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand Font",
+            "name": "uiName"
+          }],
+        "text": "The brand font that you want to use"
+      },
+      "attribute": "brand-font",
+      "reflect": false
     }
   }; }
 }

package/dist/collection/components/sqm-card-feed/CardFeed.stories.js

@@ -0,0 +1,92 @@
+import { h } from "@stencil/core";
+import { CardFeedView } from "./sqm-card-feed-view";
+import { TaskCardView } from "../sqm-task-card/sqm-task-card-view";
+export default {
+  title: "Components/Card Feed",
+};
+const props = {
+  width: 347,
+  gap: 24,
+};
+const taskCardProps = {
+  rewardAmount: "20",
+  rewardUnit: "SaaSquatch Points",
+  cardTitle: "Complete a survey",
+  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+  repeatable: false,
+  showProgressBar: false,
+  progress: 0,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+  goal: 1,
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  openNewTab: false,
+  showExpiry: false,
+  rewardDuration: null,
+  loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
+  finite: 0,
+};
+const coupleActions = {
+  rewardAmount: "40",
+  rewardUnit: "SaaSquatch Points",
+  cardTitle: "Comment on 5 articles",
+  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+  repeatable: false,
+  showProgressBar: true,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+  steps: true,
+  progress: 1,
+  goal: 5,
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  openNewTab: false,
+  showExpiry: false,
+  rewardDuration: null,
+  loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
+  finite: 0,
+};
+const manyActions = {
+  rewardAmount: "150",
+  rewardUnit: "SaaSquatch Points",
+  cardTitle: "Spend $500 at our Store",
+  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+  repeatable: false,
+  showProgressBar: true,
+  progress: 100,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+  goal: 500,
+  progressBarUnit: "$",
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  openNewTab: false,
+  showExpiry: false,
+  rewardDuration: null,
+  loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
+  finite: 0,
+};
+export const TaskCardGrid = () => {
+  return (h(CardFeedView, Object.assign({}, props),
+    h(TaskCardView, Object.assign({}, taskCardProps)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, taskCardProps)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, taskCardProps)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};

package/dist/collection/components/sqm-card-feed/sqm-card-feed-view.js

@@ -0,0 +1,29 @@
+import { h } from "@stencil/core";
+import "@appnest/masonry-layout";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        marginBottom: "24px",
+      },
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container }, children)));
+}

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -0,0 +1,79 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { CardFeedView } from "./sqm-card-feed-view";
+/**
+ * @uiName Card Feed
+ */
+export class CardFeed {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Card Width
+     */
+    this.width = 347;
+    /**
+     * @uiName Column Gap
+     * @uiType number
+     */
+    this.gap = 24;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(CardFeedView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-card-feed"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Width",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "347"
+    },
+    "gap": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Column Gap",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-portal-container/PortalContainer.stories.js

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-portal-container.feature";
+export default {
+  title: "Components/Portal Container",
+  parameters: {
+    scenario,
+  },
+};
+export const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px dashed grey" } },
+  h("sqm-portal-container", null,
+    h("div", { style: { background: "grey", border: "1px solid red" } }, "Small"),
+    h("div", { style: { background: "lightblue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
+export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { direction: "row", "min-width": "160px" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { direction: "row", minWidth: "160px", maxWidth: "50%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { direction: "row", maxWidth: "100%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -7,14 +7,16 @@ export function PortalContainerView(props, children) {
       display: "grid",
       "grid-template-columns": props.direction === "row"
         ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
-        : "",
+        : "100%",
       "grid-gap": `var(--sl-spacing-${props.gap})`,
       padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+      maxWidth: props.maxWidth ? props.maxWidth : "",
     },
   };
   const vanillaStyle = `
   :host{
     width: 100%;
+    display: block;
   }`;
   jss.setup(preset());
   const sheet = jss.createStyleSheet(style);