@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

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

@@ -3,6 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./use-callback-5d15897d.js');
+require('./index.module-d3a28293.js');
+const reRender = require('./re-render-7b0c34bb.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);
@@ -11,8 +15,11 @@ const TabView = ({}, children) => {
 const Tab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
   }
+  disconnectedCallback() { }
   render() {
+    reRender.useRequestRerender([this.header]);
     return (index.h(TabView, null, index.h("slot", null)));
   }
 };

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-1c799b1f.js');
-require('./extends-08099afd.js');
-const useChildElements = require('./useChildElements-dc4c3132.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
+const reRender = require('./re-render-7b0c34bb.js');
+const useChildElements = require('./useChildElements-24fbca82.js');
 const utils = require('./utils-8ef4fe4a.js');
 
 const TabsView = ({ content, placement, }) => {
@@ -43,7 +43,8 @@ const TabsView = ({ content, placement, }) => {
 const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements.useChildElements();
-  const host = index_module.P();
+  const host = index_module.R();
+  const tick = reRender.useRerenderListener();
   const tabs = stencilHooks_module.useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")
     .map((tab, i) => {
@@ -60,7 +61,7 @@ function useTabs() {
     // set id as targets for scroll component
     tab.setAttribute("id", "tab-" + i);
     return tab;
-  }), [rawTabs]);
+  }), [rawTabs, tick]);
   stencilHooks_module.useEffect(() => {
     const listener = (e) => {
       var _a;

package/dist/cjs/{sqm-text-span-view-ab4ad6ef.js → sqm-text-span-view-b0c90c27.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const JSS = require('./JSS-a75f3a9a.js');
+const JSS = require('./JSS-c73206b7.js');
 
 const style = {
   p: {

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./extends-08099afd.js');
-require('./JSS-a75f3a9a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-ab4ad6ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./JSS-c73206b7.js');
+const sqmTextSpanView = require('./sqm-text-span-view-b0c90c27.js');
 
 const Text = class {
   constructor(hostRef) {

package/dist/cjs/{stencil-hooks.module-87a1f4f7.js → stencil-hooks.module-6fe43579.js}

@@ -1124,6 +1124,7 @@ exports.h = h$1;
 exports.h$1 = h$2;
 exports.l = l$1;
 exports.m = m$2;
+exports.s = s$1;
 exports.useEffect = useEffect;
 exports.useMemo = useMemo;
 exports.useReducer = useReducer;

package/dist/cjs/{use-callback-e754042f.js → use-callback-5d15897d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
 
 const useCallback = (fn, inputs) => stencilHooks_module.useMemo(() => fn, inputs);
 

package/dist/cjs/{useChildElements-dc4c3132.js → useChildElements-24fbca82.js}

@@ -1,22 +1,24 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-1c799b1f.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const index_module = require('./index.module-d3a28293.js');
 
 function useChildElements() {
-  const host = index_module.P();
+  const host = index_module.R();
   const initialState = host.children.length
     ? Array.from(host.children)
     : [];
   const [childElements, setChildElements] = stencilHooks_module.useState(initialState);
   let observer;
-  stencilHooks_module.useEffect(() => {
+  // Create observer once
+  stencilHooks_module.useMemo(() => {
     observer = new MutationObserver(() => {
       const children = Array.from(host.children);
       setChildElements([...children]);
     });
   }, []);
-  stencilHooks_module.useEffect(() => {
+  // Listen to host and observe / disconnect
+  stencilHooks_module.useMemo(() => {
     if (!observer)
       return;
     observer.observe(host, { childList: true });

package/dist/cjs/{useReferralTable-f52c7f8e.js → useReferralTable-8f7a049c.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-1c799b1f.js');
-const reRender = require('./re-render-c02c16c0.js');
-const useChildElements = require('./useChildElements-dc4c3132.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const index_module = require('./index.module-d3a28293.js');
+const reRender = require('./re-render-7b0c34bb.js');
+const useChildElements = require('./useChildElements-24fbca82.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -178,8 +178,8 @@ const GET_REFERRAL_DATA = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c;
-  const user = index_module.ae();
-  const programIdContext = index_module.A();
+  const user = index_module.N();
+  const programIdContext = index_module.O();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -201,15 +201,15 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.O();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.pn(GET_REFERRER_DATA, {
+  const locale = index_module.x();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.dn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { envelope: referralData, states, callbacks, } = index_module.In(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.vn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {

package/dist/cjs/useRegistrationFormState-3f88db90.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const index_module = require('./index.module-d3a28293.js');
+
+const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
+function useRegistrationFormState(formState) {
+  const host = index_module.R();
+  const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  return { registrationFormState, setRegistrationFormState };
+}
+
+exports.REGISTRATION_FORM_STATE_CONTEXT = REGISTRATION_FORM_STATE_CONTEXT;
+exports.useRegistrationFormState = useRegistrationFormState;

package/dist/collection/collection-manifest.json

@@ -15,6 +15,8 @@
     "./components/sqm-empty/sqm-empty.js",
     "./components/sqm-form-message/sqm-form-message.js",
     "./components/sqm-graphql-client-provider/sqm-graphql-client-provider.js",
+    "./components/sqm-hamburger-menu/sqm-hamburger-menu.js",
+    "./components/sqm-header-logo/sqm-header-logo.js",
     "./components/sqm-hero/sqm-hero.js",
     "./components/sqm-hero-image/sqm-hero-image.js",
     "./components/sqm-hook-story-container/sqm-hook-story-container.js",
@@ -38,14 +40,12 @@
     "./components/sqm-portal-profile/sqm-portal-profile.js",
     "./components/sqm-portal-protected-route/sqm-portal-protected-route.js",
     "./components/sqm-portal-register/sqm-portal-register.js",
+    "./components/sqm-portal-registration-form/sqm-portal-registration-form.js",
     "./components/sqm-portal-reset-password/sqm-portal-reset-password.js",
     "./components/sqm-portal-verify-email/sqm-portal-verify-email.js",
     "./components/sqm-program-explainer/sqm-program-explainer.js",
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
-    "./components/sqm-qa/sqm-qa.js",
-    "./components/sqm-qa-referral-card/sqm-referral-card.js",
-    "./components/sqm-qa-tabs/sqm-tabs.js",
     "./components/sqm-referral-card/sqm-referral-card.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function BigStatView(props) {
-  const { statvalue, statColor, statFontSize, flexReverse, alignment, statDescriptionColor, statDescriptionFontSize, } = props;
+  const { statvalue, flexReverse, alignment } = props;
   // Dependent on props, not feasiable to move out
   const style = {
     Container: {
@@ -16,20 +16,15 @@ export function BigStatView(props) {
           : "center"}`,
     },
     Stat: {
-      fontSize: statFontSize ? statFontSize : "var(--sl-font-size-x-large)",
-      textAlign: alignment,
-      color: statColor,
+      "font-size": "var(--sl-font-size-x-large)",
+      "text-align": alignment,
     },
     Description: {
-      fontSize: statDescriptionFontSize
-        ? statDescriptionFontSize
-        : "var(--sl-font-size-small)",
-      fontWeight: "var(--sl-font-weight-normal)",
-      color: statDescriptionColor
-        ? statDescriptionColor
-        : "var(--sl-color-gray-600)",
-      textTransform: "uppercase",
-      textAlign: alignment,
+      "font-size": "var(--sl-font-size-small)",
+      "font-weight": "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-gray-600)",
+      "text-transform": "uppercase",
+      "text-align": alignment,
     },
   };
   const sheet = createStyleSheet(style);

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

@@ -23,30 +23,6 @@ export class BigStat {
      * @default
      */
     this.flexReverse = false;
-    /**
-     * @uiName Stat Color
-     * @uiWidget color
-     */
-    this.statColor = "var(--sl-color-gray-800)";
-    /**
-     * @uiName Stat Description Color
-     * @uiWidget color
-     */
-    this.statDescriptionColor = "var(--sl-color-gray-600)";
-    /**
-     * @uiName Stat Font Size
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-     */
-    this.statFontSize = "x-large";
-    /**
-     * @uiName Stat Description Font Size
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-     */
-    this.statDescriptionFontSize = "small";
     this.ignored = true;
     withHooks(this);
   }
@@ -54,7 +30,6 @@ export class BigStat {
   render() {
     var _a;
     const { props, label } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    console.log(props);
     const host = useHost();
     const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
     const labelSlot = h("slot", { name: "label" }, hasLabel ? h("slot", null) : label);
@@ -145,124 +120,6 @@ export class BigStat {
       "attribute": "alignment",
       "reflect": false
     },
-    "statColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Stat Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "stat-color",
-      "reflect": false,
-      "defaultValue": "\"var(--sl-color-gray-800)\""
-    },
-    "statDescriptionColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Stat Description Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "stat-description-color",
-      "reflect": false,
-      "defaultValue": "\"var(--sl-color-gray-600)\""
-    },
-    "statFontSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "FontSize",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
-        "references": {
-          "FontSize": {
-            "location": "import",
-            "path": "../../global/mixins"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Stat Font Size",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "stat-font-size",
-      "reflect": false,
-      "defaultValue": "\"x-large\""
-    },
-    "statDescriptionFontSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "FontSize",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
-        "references": {
-          "FontSize": {
-            "location": "import",
-            "path": "../../global/mixins"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Stat Description Font Size",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "stat-description-font-size",
-      "reflect": false,
-      "defaultValue": "\"small\""
-    },
     "programId": {
       "type": "string",
       "mutable": false,
@@ -291,7 +148,7 @@ export class BigStat {
       "mutable": false,
       "complexType": {
         "original": "DemoData<BigStatViewProps>",
-        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; statColor?: string; statDescriptionColor?: string; statFontSize?: FontSize; statDescriptionFontSize?: FontSize; }",
+        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -565,7 +565,7 @@ export const StatPaths = [
 export const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 export function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, statColor, programId = useProgramId(), } = props;
+  const { statType, flexReverse, alignment, programId = useProgramId(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements();
   const locale = useLocale();
@@ -578,7 +578,6 @@ export function useBigStat(props) {
         statvalue: "!!!",
         flexReverse,
         alignment,
-        statColor,
         loading: false,
       },
       label: "BAD PROP TYPE",
@@ -609,7 +608,6 @@ export function useBigStat(props) {
       loading: stat === null || stat === void 0 ? void 0 : stat.loading,
       flexReverse,
       alignment,
-      statColor,
     },
     label,
   };

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

@@ -15,10 +15,6 @@ export function useDemoBigStat(props) {
         loading: false,
         flexReverse: false,
         alignment: "center",
-        statColor: "var(--sl-color-gray-800)",
-        statDescriptionColor: "var(--sl-color-gray-600)",
-        statFontSize: "x-large",
-        statDescriptionFontSize: "small",
       },
       label: "BAD PROP TYPE",
     };
@@ -30,12 +26,8 @@ export function useDemoBigStat(props) {
     props: deepmerge({
       statvalue: "12345",
       value: 0,
-      flexReverse: props.flexReverse,
-      alignment: props.alignment,
-      statColor: props.statColor,
-      statDescriptionColor: props.statDescriptionColor,
-      statFontSize: props.statFontSize,
-      statDescriptionFontSize: props.statDescriptionFontSize,
+      flexReverse: false,
+      alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),
     label: label !== null && label !== void 0 ? label : "Demo Label",
   };

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

@@ -16,8 +16,16 @@ export class BrandComponent {
   disconnectedCallback() { }
   render() {
     var _a, _b;
-    const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "#FFF";
-    const css = autoColorScaleCss(brandColor);
+    function getCss(brandColor) {
+      if (brandColor) {
+        try {
+          return autoColorScaleCss(brandColor);
+        }
+        catch { }
+      }
+      return undefined;
+    }
+    const css = (_a = getCss(this.brandColor)) !== null && _a !== void 0 ? _a : "";
     const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "Nunito Sans").trim() || undefined;
     useEffect(() => {
       if (!sanitizedFont) {
@@ -48,13 +56,9 @@ export class BrandComponent {
             --sl-tooltip-font-family: "${font}", arial;
             font-family:  "${font}", arial;
 			
-            ${this.brandColor && css}
-            ${this.fontColor && `color: ${this.fontColor};`}
+            ${css}
+
             --sl-focus-ring-color-primary: var(--sl-color-primary-100);
-            --sl-color-gray-200: ${this.fontColor};
-            --sl-color-gray-400: ${this.fontColor};
-            --sl-color-gray-600: ${this.fontColor};
-            --sl-color-gray-800: ${this.fontColor};
             --sl-input-border-color-focus: var(--sl-color-primary-500);
             --sl-color-primary-hue: var(--sl-color-primary-500);
           }`),
@@ -89,29 +93,6 @@ export class BrandComponent {
       "attribute": "brand-color",
       "reflect": false
     },
-    "fontColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Font Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "font-color",
-      "reflect": false
-    },
     "brandFont": {
       "type": "string",
       "mutable": false,
@@ -130,7 +111,7 @@ export class BrandComponent {
             "text": "\"Nunito Sans\"",
             "name": "default"
           }],
-        "text": "The brand font that you want to use"
+        "text": "A font from the Google Fonts library used throughout the widget. This value is case sensitive."
       },
       "attribute": "brand-font",
       "reflect": false

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

@@ -6,24 +6,9 @@ import { CardFeedView } from "./sqm-card-feed-view";
  * @uiName Card Feed
  * @slots [{"name":"","title":"Cards"}]
  * @exampleGroup Rewards
- * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 100 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 150 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
+ * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
  */
 export class CardFeed {
-  // /**
-  //  * @uiName Card Background Color
-  //  * @uiType color
-  //  */
-  // @Prop() cardBackgroundColor?: string;
-  // /**
-  //  * @uiName Card Text Color
-  //  * @uiType color
-  //  */
-  // @Prop() cardTextColor?: string;
-  // /**
-  //  * @uiName Card Border Color
-  //  * @uiType color
-  //  */
-  // @Prop() cardBorderColor?: string;
   constructor() {
     this.ignored = true;
     /**

package/dist/collection/components/sqm-checkbox-field/CheckboxField.stories.js

@@ -11,7 +11,9 @@ export default {
 };
 const defaultProps = {
   states: {
-    validationErrors: {},
+    registrationFormState: {
+      validationErrors: {},
+    },
     checked: false,
   },
   content: {
@@ -27,6 +29,7 @@ const defaultProps = {
 };
 const defaultRegisterProps = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: false,
     confirmPassword: true,
@@ -53,14 +56,18 @@ export const CustomLabel = createHookStory(() => (h(CheckboxFieldView, Object.as
   } }))));
 export const Error = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
     ...defaultProps.states,
-    validationErrors: {
-      agree: "Must be checked",
+    registrationFormState: {
+      validationErrors: {
+        agree: "Must be checked",
+      },
     },
   } }))));
 export const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
     ...defaultProps.states,
-    validationErrors: {
-      agree: "Must be checked",
+    registrationFormState: {
+      validationErrors: {
+        agree: "Must be checked",
+      },
     },
   }, content: {
     ...defaultProps.content,

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js

@@ -44,8 +44,9 @@ jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
 const styleString = sheet.toString();
 export function CheckboxFieldView(props) {
+  var _a, _b, _c;
   const { states, content, callbacks } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet.classes.FieldContainer },
     h("style", { type: "text/css" },
       vanillaStyle,
@@ -53,7 +54,7 @@ export function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
         class: sheet.classes.ErrorStyle,
       }