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

package/dist/cjs/sqm-refresh-button.cjs.entry.js

@@ -0,0 +1,53 @@
+'use strict';
+
+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-548bf279.js');
+const utils = require('./utils-95e5317c.js');
+
+function RefreshButtonView(props, children) {
+  return props.hide ? (index.h(index.Host, { style: { display: "none" } })) : (index.h(index.Host, null,
+    index.h("style", { type: "text/css" }, `:host{display:inline-block}`),
+    index.h("sl-button", { loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}-refresh-base` },
+      !props.hideicon && (index.h("sl-icon", { slot: props.iconslot, name: props.icon, exportparts: "icon" })),
+      !props.hidetext && children)));
+}
+
+const RefreshButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Icon to show in the slot
+     */
+    this.icon = "arrow-clockwise";
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const thisProps = utils.getProps(this);
+    const props = index_module.k()
+      ? useDemoRefereshButton(thisProps)
+      : useRefreshButton(thisProps);
+    return (index.h(RefreshButtonView, Object.assign({}, props), index.h("slot", null)));
+  }
+};
+function useDemoRefereshButton({ icon, }) {
+  return {
+    onClick: () => { },
+    icon,
+  };
+}
+function useRefreshButton({ icon }) {
+  //   const { refresh } = useRefreshDispatcher();
+  return {
+    disabled: false,
+    hide: false,
+    // onClick: refresh,
+    icon,
+  };
+}
+
+exports.sqm_refresh_button = RefreshButton;

package/dist/cjs/sqm-share-code.cjs.entry.js

@@ -5,12 +5,12 @@ 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');
-require('./jss-preset-default.esm-6304d24f.js');
+const index_module = require('./index.module-548bf279.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
-const sqmShareLinkView = require('./sqm-share-link-view-a935d07e.js');
+const sqmShareLinkView = require('./sqm-share-link-view-9c8b219a.js');
 
 const MessageLinkQuery = index_module.dist.gql `
   query ($programId: ID) {
@@ -29,10 +29,10 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
 function useShareCode(props) {
   var _a, _b;
   const programId = index_module.M();
-  const user = index_module.T();
+  const user = index_module.ne();
   const engagementMedium = index_module.x();
-  const { data } = index_module.en(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.be(WIDGET_ENGAGEMENT_EVENT);
+  const { data } = index_module.mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.De(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -80,7 +80,7 @@ const ShareCode = class {
   disconnectedCallback() { }
   render() {
     const thisProps = utils.getProps(this);
-    const props = index_module.j()
+    const props = index_module.k()
       ? useDemoShareCode(thisProps)
       : useShareCode(thisProps);
     return index.h(sqmShareLinkView.ShareLinkView, Object.assign({}, props));

package/dist/cjs/{sqm-share-link-view-a935d07e.js → sqm-share-link-view-9c8b219a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 const mixins = require('./mixins-7b7c59fe.js');
 
 const style = {
@@ -10,8 +10,7 @@ const style = {
     "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
   },
 };
-jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function ShareLinkView(props) {
   return (index.h("div", null,

package/dist/cjs/{sqm-stat-container-view-ee7b00ff.js → sqm-stat-container-view-80a57302.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 
 function StatContainerView(props, children) {
   const divideSpace = () => {
@@ -28,7 +28,7 @@ function StatContainerView(props, children) {
         height: "100%",
       },
       "& > ::slotted(*:last-child)": {
-        "border-right": "1px solid #ffffff",
+        "border-right": "none",
       },
     },
     StatFrame: {
@@ -40,8 +40,7 @@ function StatContainerView(props, children) {
       "margin-left": "-1px",
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   return (index.h("div", { class: sheet.classes.StatFrame },
     index.h("div", { class: sheet.classes.StatContainer },

package/dist/cjs/sqm-stat-container.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmStatContainerView = require('./sqm-stat-container-view-ee7b00ff.js');
+const sqmStatContainerView = require('./sqm-stat-container-view-80a57302.js');
 
 const StatContainer = class {
   constructor(hostRef) {

package/dist/cjs/{sqm-text-span-view-b5ae787b.js → sqm-text-span-view-96f53c04.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 
 function TextSpanView(props, children) {
   const style = {
@@ -42,8 +42,7 @@ function TextSpanView(props, children) {
       margin: "0",
     },
   };
-  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 = `
     sqm-text-span {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
-const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
+require('./JSS-95c698c1.js');
+const sqmTextSpanView = require('./sqm-text-span-view-96f53c04.js');
 
 const Text = class {
   constructor(hostRef) {

package/dist/cjs/sqm-titled-section.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-3b008930.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-2b445aa0.js');
 
 const TitledSection = class {
   constructor(hostRef) {

package/dist/cjs/{useDemoBigStat-2786227e.js → useDemoBigStat-18989b37.js}

@@ -2,8 +2,8 @@
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const index_module = require('./index.module-7dd4b981.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const index_module = require('./index.module-548bf279.js');
+const JSS = require('./JSS-95c698c1.js');
 const cjs = require('./cjs-1066ec21.js');
 
 /**
@@ -326,8 +326,7 @@ function BigStatView(props, children) {
       "text-align": alignment,
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   return (index.h("div", { part: "stat-wrapper", class: sheet.classes.Container },
     index.h("style", { type: "text/css" }, styleString),
@@ -338,12 +337,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.mn(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 +894,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 +926,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 +942,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",
@@ -15,6 +15,7 @@
     "./components/sqm-hook-story-container/sqm-hook-story-container.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
+    "./components/sqm-media/sqm-media.js",
     "./components/sqm-name-fields/sqm-name-fields.js",
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
@@ -47,7 +48,16 @@
     "./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-refresh-button/sqm-refresh-button.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",
@@ -55,13 +65,13 @@
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
+    "./components/sqm-table-cell/sqm-table-cell.js",
+    "./components/sqm-table-row/sqm-table-row.js",
     "./components/sqm-task-card/sqm-task-card.js",
     "./components/sqm-text/sqm-text.js",
     "./components/sqm-text-span/sqm-text-span.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
-    "./components/sqm-user-name/sqm-user-name.js",
-    "./tables/sqm-table-cell.js",
-    "./tables/sqm-table-row.js"
+    "./components/sqm-user-name/sqm-user-name.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -1,6 +1,5 @@
 import { getAssetPath, h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 const style = {
   CardContainer: {
     "box-sizing": "border-box",
@@ -32,8 +31,7 @@ const style = {
     },
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export const AssetCardView = (props) => {
   const { text: { titleText }, imgUrl, } = props;

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-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function BigStatView(props, children) {
   const { statvalue, flexReverse, alignment } = props;
   const style = {
@@ -27,8 +26,7 @@ export function BigStatView(props, children) {
       "text-align": alignment,
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),

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": "{ loading?: boolean; value?: number; statvalue?: string; 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))));
+};