@saasquatch/mint-components 1.4.0-0 → 1.5.0-10

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

@@ -35,7 +35,13 @@ _, status) => {
           }
         }
       }
-    `, { queryFilter }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+    `, { queryFilter }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const programGoalsQuery = (programId, locale, metricType, goalId) => {
   // Confirm this behaviour
@@ -55,9 +61,33 @@ const programGoalsQuery = (programId, locale, metricType, goalId) => {
         }
       }
     `, { programId, metricType, goalId, locale }, (res) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const goal = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.programGoals) === null || _c === void 0 ? void 0 : _c.filter((goal) => goal.goalId === goalId && goal.programId === programId);
-    return ((_e = (_d = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _d === void 0 ? void 0 : _d[metricType]) === null || _e === void 0 ? void 0 : _e.toString()) || 0;
+    return {
+      value: ((_d = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _d === void 0 ? void 0 : _d[metricType]) || 0,
+      statvalue: ((_f = (_e = goal === null || goal === void 0 ? void 0 : goal[0]) === null || _e === void 0 ? void 0 : _e[metricType]) === null || _f === void 0 ? void 0 : _f.toString()) || 0,
+    };
+  });
+};
+const customFieldsQuery = (programId, locale, fieldName, goalId) => {
+  // Confirm this behaviour
+  if (programId === "classic")
+    return null;
+  return debugQuery(gql `
+      query {
+        viewer {
+          ... on User {
+            customFields
+          }
+        }
+      }
+    `, { programId, fieldName, goalId, locale }, (res) => {
+    var _a, _b, _c;
+    const customField = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.customFields) === null || _c === void 0 ? void 0 : _c[fieldName];
+    return {
+      value: customField || 0,
+      statvalue: (customField === null || customField === void 0 ? void 0 : customField.toString()) || "0",
+    };
   });
 };
 const referralsMonthQuery = (programId) => {
@@ -78,7 +108,13 @@ const referralsMonthQuery = (programId) => {
           }
         }
       }
-    `, { filter }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+    `, { filter }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const referralsWeekQuery = (programId) => {
   const programFilter = programId === "classic"
@@ -98,7 +134,13 @@ const referralsWeekQuery = (programId) => {
           }
         }
       }
-    `, { filter }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+    `, { filter }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsCountQuery = (programId, 
 // locale
@@ -115,7 +157,13 @@ _, global = "") => {
       }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsCountFilteredQuery = (programId, 
 // locale
@@ -148,7 +196,13 @@ _, type, unit, status, global = "") => {
     unit,
     type,
     statusFilter,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const integrationRewardsCountFilteredQuery = (programId, 
 // locale
@@ -173,7 +227,13 @@ _, status, global = "") => {
     `, {
     programId: !global && programId !== "classic" ? programId : null,
     statusFilter,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsMonthQuery = (programId, 
 // locale
@@ -195,7 +255,13 @@ _, global = "") => {
       }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsWeekQuery = (programId, 
 // locale
@@ -217,7 +283,13 @@ _, global = "") => {
       }
     `, {
     programId: !global && programId !== "classic" ? programId : null,
-  }, (res) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) === null || _d === void 0 ? void 0 : _d.toString(); });
+  }, (res) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ({
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewards) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
+      statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.rewards) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
+    });
+  });
 };
 const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
   return debugQuery(gql `
@@ -252,10 +324,13 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
     unit,
     locale,
   }, (res) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
-    return ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyRedeemedCredit) || fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyRedeemedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyRedeemedCredit) || fallback,
+    };
   });
 };
 const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
@@ -291,10 +366,13 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
     unit,
     locale,
   }, (res) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
-    return ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAssignedCredit) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAssignedCredit) || fallback,
+    };
   });
 };
 const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
@@ -330,10 +408,13 @@ const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
     unit,
     locale,
   }, (res) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
-    return ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAvailableValue) || fallback,
+    };
   });
 };
 const parseRewardValueFormat = {
@@ -376,10 +457,13 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
     format: (_a = parseRewardValueFormat[format]) !== null && _a !== void 0 ? _a : "UNIT_FORMATTED",
     locale,
   }, (res) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const arr = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.rewardBalanceDetails;
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
-    return ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || fallback;
+    return {
+      value: ((_d = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _d === void 0 ? void 0 : _d.prettyAvailableValue) || 0,
+      statvalue: ((_e = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _e === void 0 ? void 0 : _e.prettyAvailableValue) || fallback,
+    };
   });
 };
 // functions are of the form (programId: string, ...args: string) => string
@@ -436,10 +520,15 @@ export const queries = {
     label: "Program Goals",
     query: programGoalsQuery,
   },
+  customFields: {
+    label: "Custom Fields",
+    query: customFieldsQuery,
+  },
 };
 // this should be exposed in documentation somehow
 export const StatPaths = [
   { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" },
+  { name: "customFields", route: "/(customFields)/:customField" },
   { name: "referralsCount", route: "/(referralsCount)/:status?" },
   { name: "referralsMonth", route: "/(referralsMonth)" },
   { name: "referralsWeek", route: "/(referralsWeek)" },
@@ -473,13 +562,15 @@ export const StatPaths = [
 ];
 export const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 export function useBigStat(props) {
-  const { statType, flexReverse, alignment, programId = useProgramId(), } = props;
+  var _a;
+  const { statType, flexReverse, alignment } = props;
+  const programId = useProgramId();
   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: { statvalue: "!!!", flexReverse, alignment },
+      props: { value: 0, statvalue: "!!!", flexReverse, alignment },
       label: "BAD PROP TYPE",
     };
   }
@@ -502,7 +593,12 @@ export function useBigStat(props) {
   const stat = (userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt) && queries[queryName].query(programId, locale, ...queryArgs);
   debug("stat:", stat);
   return {
-    props: { statvalue: stat !== null && stat !== void 0 ? stat : LOADING, flexReverse, alignment },
+    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,
+      flexReverse,
+      alignment,
+    },
     label,
   };
 }

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

@@ -7,6 +7,7 @@ export function useDemoBigStat(props) {
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
       props: {
+        value: 0,
         statvalue: "!!!",
         flexReverse: false,
         alignment: "center",

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

@@ -0,0 +1,93 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Brand",
+};
+const SampleComponents = () => (h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
+  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",
+      h("br", null),
+      h("code", null,
+        "--sl-color-primary-",
+        h("em", null, `{n}`))),
+    h("div", { style: { display: "flex", gap: "5px" } },
+      h(ColorSwatch, { depth: 50 }),
+      h(ColorSwatch, { depth: 100 }),
+      h(ColorSwatch, { depth: 200 }),
+      h(ColorSwatch, { depth: 300 }),
+      h(ColorSwatch, { depth: 400 }),
+      h(ColorSwatch, { depth: 500 }),
+      h(ColorSwatch, { depth: 600 }),
+      h(ColorSwatch, { depth: 700 }),
+      h(ColorSwatch, { depth: 800 }),
+      h(ColorSwatch, { depth: 900 }),
+      h(ColorSwatch, { depth: 950 })))));
+export const Examples = () => {
+  return (h("div", null,
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-color": "#FF0000" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#00FF00" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#0000FF" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#000000" },
+      h(SampleComponents, null))));
+};
+export const Nested = () => {
+  return (h("div", null,
+    "Default ",
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-color": "#FF0000" },
+      "Red:",
+      h(SampleComponents, null),
+      h("sqm-brand", { "brand-color": "#00FF00" },
+        "Green:",
+        h(SampleComponents, null),
+        h("sqm-brand", { "brand-color": "#0000FF" },
+          "Blue:",
+          h(SampleComponents, null),
+          h("sqm-brand", { "brand-color": "#000000" },
+            "Black:",
+            h(SampleComponents, null)))))));
+};
+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",
+    } }, 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

@@ -0,0 +1,97 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+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 Brand Container
+ * @slot Controls the brand color and font of Mint Components wrapped by the container.
+ */
+export class BrandComponent {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    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
+           - 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)));
+  }
+  static get is() { return "sqm-brand"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "brandColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand Color",
+            "name": "uiName"
+          }],
+        "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
+    },
+    "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/{stories → components/sqm-divided-layout}/DividedLayout.stories.js

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarView } from "../sqm-navigation-sidebar/sqm-navigation-sidebar-view";
+import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
 export default {
-  title: "Divided Layout",
+  title: "Components/Divided Layout",
 };
 const barProps = {
   data: {

package/dist/collection/{stories → components/sqm-edit-profile}/EditProfileForm.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import EditProfileView from "../components/sqm-edit-profile/sqm-edit-profile-view";
+import EditProfileView from "./sqm-edit-profile-view";
 export default {
-  title: "Edit Profile Form",
+  title: "Components/Edit Profile Form",
 };
 const defaultProps = {
   states: {

package/dist/collection/{stories → components/sqm-edit-profile}/UseEditProfile.stories.js

@@ -1,7 +1,7 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 function setupGraphQL() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;

package/dist/collection/{stories → components/sqm-form-message}/FormMessage.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Form Message",
+  title: "Components/Form Message",
 };
 export const SuccessAlert = () => {
   return (h("sqm-form-message", { type: "success" },

package/dist/collection/{stories → components/sqm-hero}/Hero.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { HeroView } from "../components/sqm-hero/sqm-hero-view";
-import scenario from "../components/sqm-hero/sqm-hero.feature";
+import { HeroView } from "./sqm-hero-view";
+import scenario from "../sqm-hero/sqm-hero.feature";
 export default {
   title: "Hero Layout",
   parameters: {

package/dist/collection/{stories → components/sqm-leaderboard}/Leaderboard.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { LeaderboardView } from "../components/sqm-leaderboard/sqm-leaderboard-view";
+import { LeaderboardView } from "./sqm-leaderboard-view";
 export default {
-  title: "Leaderboard",
+  title: "Components/Leaderboard",
   parameters: {
     tagname: "sqm-leaderboard",
   },

package/dist/collection/{stories → components/sqm-leaderboard}/UseLeaderboard.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
-import { useLeaderboard, } from "../components/sqm-leaderboard/useLeaderboard";
-import { LeaderboardView } from "../components/sqm-leaderboard/sqm-leaderboard-view";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { useLeaderboard, } from "./useLeaderboard";
+import { LeaderboardView } from "./sqm-leaderboard-view";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 export default {

package/dist/collection/{stories → components/sqm-leaderboard-rank}/LeaderboardRank.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { LeaderboardRankView } from "../components/sqm-leaderboard-rank/sqm-leaderboard-rank-view";
+import { LeaderboardRankView } from "./sqm-leaderboard-rank-view";
 export default {
-  title: "Leaderboard Rank",
+  title: "Components/Leaderboard Rank",
 };
 export const First = () => {
   const props = { data: { rank: "1st" } };

package/dist/collection/{stories → components/sqm-name-fields}/NameFields.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { NameFieldsView, } from "../components/sqm-name-fields/sqm-name-fields-view";
-import scenario from "../components/sqm-name-fields/sqm-name-fields.feature";
+import { NameFieldsView, } from "./sqm-name-fields-view";
+import scenario from "../sqm-name-fields/sqm-name-fields.feature";
 export default {
   title: "Name Fields",
   parameters: {

package/dist/collection/{stories → components/sqm-navigation-sidebar}/NavigationSidebar.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 export default {
-  title: "Navigation Sidebar",
+  title: "Components/Navigation Sidebar",
 };
 export const DefaultNavigationSidebar = () => {
   const barProps = {

package/dist/collection/{stories → components/sqm-navigation-sidebar-item}/SidebarItem.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarItemView } from "./sqm-navigation-sidebar-item-view";
 export default {
-  title: "Sidebar Item",
+  title: "Components/Sidebar Item",
 };
 export const InactiveItem = () => {
   const props = {

package/dist/collection/{stories → components/sqm-password-field}/PasswordField.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Portal Password Field",
+  title: "Components/Portal Password Field",
 };
 export const Start = () => {
   return (h("sqm-password-field", { demoData: {

package/dist/collection/{stories → components/sqm-portal-change-password}/ChangePassword.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalChangePasswordView } from "../components/sqm-portal-change-password/sqm-portal-change-password-view";
-import scenario from "../components/sqm-portal-change-password/sqm-portal-change-password.feature";
+import { PortalChangePasswordView } from "./sqm-portal-change-password-view";
+import scenario from "./sqm-portal-change-password.feature";
 export default {
-  title: "Change Password",
+  title: "Components/Change Password",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-portal-email-verification}/PortalEmailVerification.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalEmailVerificationView, } from "../components/sqm-portal-email-verification/sqm-portal-email-verification-view";
-import scenario from "../components/sqm-portal-email-verification/sqm-portal-email-verification.feature";
+import { PortalEmailVerificationView, } from "./sqm-portal-email-verification-view";
+import scenario from "./sqm-portal-email-verification.feature";
 export default {
-  title: "Portal Email Verification",
+  title: "Components/Portal Email Verification",
   parameters: {
     scenario,
   },