@saasquatch/mint-components 1.15.0-99 → 1.16.0-0

package/dist/cjs/{usePayoutStatus-3b34dab1.js → usePayoutStatus-c84a7d98.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 const TAX_FORM_UPDATED_EVENT_KEY = "sqm:tax-form-updated";
 
@@ -986,20 +986,23 @@ const GET_USER_STATUS = index_module.dist.gql `
   }
 `;
 function getStatus(data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   if (!((_d = (_c = data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.connected) || !account)
     return "INFORMATION_REQUIRED";
   if (((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("NEW_PAYEE_REVIEW"))) {
     return "DONE";
   }
-  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REQUIRED"))
+  const currentTaxDocument = (_h = (_g = data.user.impactConnection) === null || _g === void 0 ? void 0 : _g.publisher) === null || _h === void 0 ? void 0 : _h.currentTaxDocument;
+  if (((_j = account.holdReasons) === null || _j === void 0 ? void 0 : _j.includes("NO_W9_DOCUMENT")) && !currentTaxDocument)
+    return "OVER_W9_THRESHOLD";
+  if ((_k = account.holdReasons) === null || _k === void 0 ? void 0 : _k.includes("IDV_CHECK_REQUIRED"))
     return "VERIFICATION:REQUIRED";
-  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_REQUIRED_INTERNAL"))
+  if ((_l = account.holdReasons) === null || _l === void 0 ? void 0 : _l.includes("IDV_CHECK_REQUIRED_INTERNAL"))
     return "VERIFICATION:INTERNAL";
-  if ((_j = account.holdReasons) === null || _j === void 0 ? void 0 : _j.includes("IDV_CHECK_REVIEW_INTERNAL"))
+  if ((_m = account.holdReasons) === null || _m === void 0 ? void 0 : _m.includes("IDV_CHECK_REVIEW_INTERNAL"))
     return "VERIFICATION:REVIEW";
-  if ((_k = account.holdReasons) === null || _k === void 0 ? void 0 : _k.includes("IDV_CHECK_FAILED_INTERNAL"))
+  if ((_o = account.holdReasons) === null || _o === void 0 ? void 0 : _o.includes("IDV_CHECK_FAILED_INTERNAL"))
     return "VERIFICATION:FAILED";
   if (account.hold)
     return "HOLD";
@@ -1009,14 +1012,14 @@ function usePayoutStatus(props) {
   const { type } = index_module.getEnvironmentSDK();
   const { loading, data, errors, refetch } = index_module.wn(GET_USER_STATUS, {});
   const { render, loading: veriffLoading, errors: veriffErrors, } = useVeriffApp();
-  const [status, setStatus] = domContextHooks_module.useState(undefined);
-  domContextHooks_module.useEffect(() => {
+  const [status, setStatus] = stencilHooks_module.useState(undefined);
+  stencilHooks_module.useEffect(() => {
     if (!data)
       return;
     const s = getStatus(data);
     setStatus(s);
   }, [data]);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     const cb = () => refetch();
     window.addEventListener(TAX_FORM_UPDATED_EVENT_KEY, cb);
     window.addEventListener(VERIFF_COMPLETE_EVENT_KEY, cb);

package/dist/cjs/{usePortalLogin-6aa864ef.js → usePortalLogin-63d896d1.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const utils = require('./utils-7cbd60cc.js');
+const utils = require('./utils-6847bc06.js');
 
 function usePortalLogin(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
   const [request, { loading, errors, data }] = index_module.je();
   const [loginWithGoogle, { loading: gLoading, errors: gErrors }] = index_module.hn();
-  const [error, setError] = domContextHooks_module.useState("");
+  const [error, setError] = stencilHooks_module.useState("");
   const urlParams = new URLSearchParams(index_module.jn.location.search);
   const nextPageOverride = urlParams.get("nextPage");
   const googleSubmit = async (e) => {

package/dist/cjs/{usePortalRegistrationForm-75b647fe.js → usePortalRegistrationForm-f25d89e7.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
+const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 
 const RegistrationFormQuery = index_module.dist.gql `
@@ -21,13 +21,13 @@ const RegistrationFormQuery = index_module.dist.gql `
 `;
 function usePortalRegistrationForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  const formRef = domContextHooks_module.useRef(null);
+  const formRef = stencilHooks_module.useRef(null);
   const locale = index_module.L();
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
   const [request, { loading, errors, data, formError }] = index_module.Oe();
   const queryResponse = index_module.wn(RegistrationFormQuery, { key: props.formKey });
   const formLoading = loading || queryResponse.loading;
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     var _a, _b, _c;
     const initialData = (_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData.initialData;
     const disabled = ((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false;
@@ -41,7 +41,7 @@ function usePortalRegistrationForm(props) {
     };
     setRegistrationFormState(formState);
   }, [(_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData]);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     if (!formRef.current)
       return;
     const form = formRef.current;

package/dist/cjs/{useReferralCodes-11cdf43b.js → useReferralCodes-82e8797b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 const GET_REFERRAL_CODES = index_module.dist.gql `
   query getCodes(
@@ -99,7 +99,7 @@ function useReferralCodes(props) {
       whatsapp: { messageLink: "" },
     },
   });
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     if ((_a = referralData === null || referralData === void 0 ? void 0 : referralData.data) === null || _a === void 0 ? void 0 : _a.length) {
       const data = referralData.data[0];

package/dist/cjs/{useReferralTable-90d4d6e9.js → useReferralTable-7c3f9600.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
-const reRender = require('./re-render-d516138a.js');
-const useChildElements = require('./useChildElements-966c9041.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
+const reRender = require('./re-render-b324deab.js');
+const useChildElements = require('./useChildElements-1b35d945.js');
 
-const debug = domContextHooks_module.browser("sq:useReferralTable");
+const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = index_module.dist.gql `
   query getReferrals(
@@ -259,7 +259,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
     userId_eq: user === null || user === void 0 ? void 0 : user.id,
     accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,
   };
-  const [content, setContent] = domContextHooks_module.useReducer((state, next) => ({
+  const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
   }), {
@@ -286,11 +286,11 @@ function useReferralTable(props, emptyElement, loadingElement) {
     rewardFilter,
     locale,
   }, (props.showReferrer && referrerLoading && !referrerResponse) || !(user === null || user === void 0 ? void 0 : user.jwt));
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     if (states.currentPage === 0 && showReferrerRow)
       callbacks.setLimit(props.perPage - 1);
   }, [showReferrerRow]);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     if (props.showReferrer && showReferrerRow) {
       callbacks.setLimit(props.perPage - 1);
       callbacks.setCurrentPage(0);
@@ -327,7 +327,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
     // Set the content to render and finish loading components
     setContent({ columns, loading: false, page: states.currentPage });
   }
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     setContent({ loading: true });
     referralData && getComponentData(components);
   }, [referralData, components, tick]);

package/dist/cjs/{useRegistrationFormState-bbee6e7b.js → useRegistrationFormState-7b820f0c.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 const REGISTRATION_FORM_STATE_CONTEXT_INTERNAL = "sq:registration-form-state-internal";
 function useRegistrationForm() {
-  const parent = domContextHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT_INTERNAL);
-  const parentValue = domContextHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT);
+  const parent = stencilHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT_INTERNAL);
+  const parentValue = stencilHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT);
   if (!parent)
     return [undefined, undefined];
   return [parentValue, parent[1]];
 }
 function useRegistrationFormState(formState) {
   const host = index_module._();
-  const [registrationFormState, setRegistrationFormState] = domContextHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
-  domContextHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT_INTERNAL, [
+  const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT_INTERNAL, [
     registrationFormState,
     setRegistrationFormState,
   ]);

package/dist/cjs/{useVerificationEmail-9dd3997a.js → useVerificationEmail-95a82767.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 const UserLookupQuery = index_module.dist.gql `
   query userLookup {
@@ -59,8 +59,8 @@ const SubmitImpactCodeMutation = index_module.dist.gql `
 // ! is done before calling any mutations
 function useVerificationEmail() {
   const userIdentity = index_module.J();
-  const [verificationEmail, setVerificationEmail] = domContextHooks_module.useState(null);
-  const [hasEmails, setHasEmails] = domContextHooks_module.useState({
+  const [verificationEmail, setVerificationEmail] = stencilHooks_module.useState(null);
+  const [hasEmails, setHasEmails] = stencilHooks_module.useState({
     participant: false,
     impact: false,
   });
@@ -75,7 +75,7 @@ function useVerificationEmail() {
   const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = index_module.$e(SubmitImpactCodeMutation);
   const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
   const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
-  const [initialized, setInitialized] = domContextHooks_module.useState(false);
+  const [initialized, setInitialized] = stencilHooks_module.useState(false);
   const initialise = async () => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     try {
@@ -152,7 +152,7 @@ function useVerificationEmail() {
       return result;
     }
   };
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     if (!initialized)
       initialise();
   }, []);

package/dist/cjs/{utilities-9a0c5e91.js → utilities-78f5e169.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {
-  const [width, setWidth] = domContextHooks_module.useState(window.innerWidth);
+  const [width, setWidth] = stencilHooks_module.useState(window.innerWidth);
   const handleWindowResize = index_module.useCallback(() => setWidth(window.innerWidth), []);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     window.addEventListener("resize", handleWindowResize);
     return () => window.removeEventListener("resize", handleWindowResize);
   }, []);

package/dist/cjs/{utils-7cbd60cc.js → utils-6847bc06.js}

@@ -39,12 +39,7 @@ function sanitizeUrlPath(path) {
   cleanUrl.hash = url.hash;
   return cleanUrl;
 }
-function capitalizeFirstLetter(word) {
-  return word[0].toUpperCase() + word.slice(1);
-}
-console.log(capitalizeFirstLetter("warning"));
 
-exports.capitalizeFirstLetter = capitalizeFirstLetter;
 exports.getMissingProps = getMissingProps;
 exports.getProps = getProps;
 exports.luxonLocale = luxonLocale;

package/dist/collection/collection-manifest.json

@@ -12,6 +12,7 @@
     "./components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.js",
     "./components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.js",
     "./components/raisins-plop-target/raisins-plop-target.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",
@@ -41,6 +42,10 @@
     "./components/sqm-invoice-table/columns/sqm-invoice-table-data-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-date-column.js",
     "./components/sqm-invoice-table/columns/sqm-invoice-table-download-column.js",
+    "./components/sqm-lead-form/sqm-lead-checkbox-field.js",
+    "./components/sqm-lead-form/sqm-lead-dropdown-field.js",
+    "./components/sqm-lead-form/sqm-lead-form.js",
+    "./components/sqm-lead-form/sqm-lead-input-field.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
     "./components/sqm-link-button/sqm-link-button.js",
@@ -104,7 +109,6 @@
     "./components/sqm-share-code/sqm-share-code.js",
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
-    "./components/sqm-stencilbook/BrandSelector.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
     "./components/sqm-tab/sqm-tab.js",
     "./components/sqm-table-cell/sqm-table-cell.js",

package/dist/collection/components/sqm-asset-card/AssetCard.stories.js

@@ -0,0 +1,29 @@
+import { h } from "@stencil/core";
+import { AssetCardView } from "./sqm-asset-card-view";
+export default {
+  title: "Components/Asset Card",
+};
+export const Default = () => {
+  const props = {
+    text: { titleText: "Marketing Banner" },
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
+    callbacks: {},
+  };
+  return h(AssetCardView, Object.assign({}, props));
+};
+export const CardWithLongText = () => {
+  const props = {
+    text: { titleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt dolores? Dolore temporibus autem officia blanditiis minus in voluptatem molestiae!" },
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
+    callbacks: {},
+  };
+  return h(AssetCardView, Object.assign({}, props));
+};
+export const CardWithNoImg = () => {
+  const props = {
+    text: { titleText: "Marketing Banner" },
+    imgUrl: "",
+    callbacks: {},
+  };
+  return h(AssetCardView, Object.assign({}, props));
+};

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

@@ -0,0 +1,46 @@
+import { getAssetPath, h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  CardContainer: {
+    "box-sizing": "border-box",
+    width: "100%",
+    "max-width": "260px",
+    border: "1px solid #EAEAEA",
+    padding: "0px 16px 16px 16px",
+    "border-radius": "8px",
+  },
+  TextContainer: {
+    display: "flex",
+    "justify-content": "space-between",
+    "align-items": "center",
+  },
+  Title: {
+    "font-weight": 600,
+    color: "var(--sl-color-gray-800)",
+    "max-width": "85%",
+    "overflow-wrap": "break-word",
+  },
+  CardImg: {
+    width: "100%",
+    height: "228px",
+    "border-radius": "4px",
+  },
+  Icon: {
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export const AssetCardView = (props) => {
+  const { text: { titleText }, imgUrl, } = props;
+  return (h("div", { class: sheet.classes.CardContainer, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.TextContainer },
+      h("p", { class: sheet.classes.Title, part: "sqm-title" }, titleText),
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", class: `bi bi-download ${sheet.classes.Icon}`, viewBox: "0 0 16 16" },
+        h("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
+        h("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" }))),
+    h("img", { src: getAssetPath(imgUrl), class: sheet.classes.CardImg })));
+};

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

@@ -0,0 +1,107 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, Prop, h, State } from "@stencil/core";
+import { AssetCardView } from "./sqm-asset-card-view";
+import { useAssetCard } from "./useAssetCard";
+import deepmerge from "deepmerge";
+/**
+ * @uiName Asset Card
+ */
+export class AssetCard {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = isDemo() ? useAssetCardDemo(this) : useAssetCard(this);
+    return h(AssetCardView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-asset-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get assetsDirs() { return ["../../assets"]; }
+  static get properties() { return {
+    "titleText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Banner title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title-text",
+      "reflect": false
+    },
+    "imgUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Banner image",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "img-url",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<AssetCardViewProps>",
+        "resolved": "{ imgUrl?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "AssetCardViewProps": {
+            "location": "import",
+            "path": "./sqm-asset-card-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useAssetCardDemo(props) {
+  return deepmerge({
+    text: {
+      titleText: "Marketing Banner",
+    },
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
+    callbacks: {},
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

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

@@ -0,0 +1,9 @@
+export const useAssetCard = (_props) => {
+  return {
+    text: {
+      titleText: "Marketing Banner",
+    },
+    imgUrl: null,
+    callbacks: {},
+  };
+};

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

@@ -74,10 +74,6 @@ export const InvalidStatValue = () => {
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
-export const CustomStyles = () => {
-  return (h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
-    h("p", null, "Giftcards Earned")));
-};
 export const MultipleStats = () => {
   return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
     h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
@@ -90,12 +86,3 @@ export const MultipleStats = () => {
       h("sqm-text", null,
         h("p", null, "Points Balance")))));
 };
-export const MultipleStatsWithCustomBranding = () => {
-  return (h("sqm-stat-container", { space: "xxx-large", display: "grid", alignment: "center", "hide-border": "true" },
-    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
-      h("p", null, "Giftcards Earned")),
-    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
-      h("p", null, "Referrals")),
-    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
-      h("p", null, "Points balance"))));
-};

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

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function BigStatView(props) {
-  const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
-  // Dependent on props, not feasible to move out
+  const { statvalue, flexReverse, alignment } = props;
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       display: "flex",
-      // height: "inherit",
-      // "justify-content": "space-between",
+      height: "inherit",
+      "justify-content": "space-between",
       "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
       "align-items": `${alignment === "left"
         ? "flex-start"
@@ -16,22 +16,15 @@ export function BigStatView(props) {
           : "center"}`,
     },
     Stat: {
-      "font-size": statFontSize
-        ? `${statFontSize}px`
-        : "var(--sl-font-size-xx-large)",
+      "font-size": "var(--sl-font-size-x-large)",
       "text-align": alignment,
-      color: statTextColor || "var(--sqm-text)",
-      lineHeight: "35px",
-      fontWeight: statFontWeight || "var(--sl-font-weight-normal)",
     },
     Description: {
-      "font-size": descriptionFontSize
-        ? `${descriptionFontSize}px`
-        : "var(--sl-font-size-small)",
+      "font-size": "var(--sl-font-size-small)",
       "font-weight": "var(--sl-font-weight-normal)",
-      color: descriptionTextColor || "var(--sqm-text)",
+      color: "var(--sl-color-gray-600)",
+      "text-transform": "uppercase",
       "text-align": alignment,
-      lineHeight: "20px",
     },
   };
   const sheet = createStyleSheet(style);