@saasquatch/mint-components 1.6.2-2 → 1.6.2-22

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-93c78ac7.js');
+const reRender = require('./re-render-afeabe91.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-ffe1aa35.js');
-require('./extends-08099afd.js');
-const useChildElements = require('./useChildElements-a7a7b921.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-93c78ac7.js');
+const reRender = require('./re-render-afeabe91.js');
+const useChildElements = require('./useChildElements-c0cc8f5d.js');
 const utils = require('./utils-6847bc06.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-2c7d94b5.js → sqm-text-span-view-b318af73.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const JSS = require('./JSS-97fd087e.js');
+const JSS = require('./JSS-8503a151.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-97fd087e.js');
-const sqmTextSpanView = require('./sqm-text-span-view-2c7d94b5.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./JSS-8503a151.js');
+const sqmTextSpanView = require('./sqm-text-span-view-b318af73.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-c0cc8f5d.js

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

package/dist/cjs/{useReferralTable-7e18f12e.js → useReferralTable-db1b33db.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-ffe1aa35.js');
-const reRender = require('./re-render-8fee17a9.js');
-const useChildElements = require('./useChildElements-a7a7b921.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const index_module = require('./index.module-93c78ac7.js');
+const reRender = require('./re-render-afeabe91.js');
+const useChildElements = require('./useChildElements-c0cc8f5d.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.M();
+  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.wn(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.qn(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,
   }, {
@@ -281,7 +281,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
     },
     data: {
       textOverrides: {
-        showLabels: props.showLabels,
+        showLabels: !props.hideLabels,
         prevLabel: props.prevLabel,
         moreLabel: props.moreLabel,
       },

package/dist/cjs/useRegistrationFormState-bee054d6.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+const index_module = require('./index.module-93c78ac7.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

@@ -3,6 +3,7 @@
     "./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/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",
@@ -14,6 +15,7 @@
     "./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-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",
@@ -43,9 +45,6 @@
     "./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",
@@ -66,7 +65,6 @@
     "./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-note-column.js",
-    "./components/sqm-rewards-table/columns/sqm-rewards-table-plop-target.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",

package/dist/collection/components/{sqm-rewards-table/columns/sqm-rewards-table-plop-target.js → raisins-plop-target/raisins-plop-target.js}

@@ -1,13 +1,8 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method } from "@stencil/core";
 /**
  * @undocumented
  */
-export class RewardTablePlopTarget {
-  constructor() {
-    withHooks(this);
-  }
-  disconnectedCallback() { }
+export class RaisinsPlopTarget {
   async renderCell() {
     return h("span", null);
   }

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

@@ -6,7 +6,7 @@ export default {
 export const Default = () => {
   const props = {
     text: { titleText: "Marketing Banner" },
-    imgUrl: "../../assets/saasquatch-logo.png",
+    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));
@@ -14,7 +14,7 @@ export const Default = () => {
 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: "../../assets/saasquatch-logo.png",
+    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));

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

@@ -101,7 +101,7 @@ function useAssetCardDemo(props) {
     text: {
       titleText: "Marketing Banner",
     },
-    imgUrl: "../../assets/saasquatch-logo.png",
+    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-brand/sqm-brand.js

@@ -17,7 +17,13 @@ export class BrandComponent {
   render() {
     var _a, _b;
     const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "#FFF";
-    const css = autoColorScaleCss(brandColor);
+    let css;
+    try {
+      css = autoColorScaleCss(brandColor);
+    }
+    catch {
+      css = autoColorScaleCss("#FFF");
+    }
     const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "Nunito Sans").trim() || undefined;
     useEffect(() => {
       if (!sanitizedFont) {

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

@@ -6,7 +6,7 @@ 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 {
   constructor() {

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, _d, _e, _f, _g;
   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,10 @@ 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) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.checkboxName],
+    }
+      : {}), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
         class: sheet.classes.ErrorStyle,
       }

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

@@ -7,13 +7,17 @@ import { getMissingProps, getProps } from "../../utils/utils";
 import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
 import { useCheckboxField } from "./useCheckboxField";
 /**
- * @uiName Checkbox Field
+ * @uiName Form Checkbox Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Checkbox Field - <sqm-checkbox-field checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
  */
 export class CheckboxField {
   constructor() {
     this.ignored = true;
     /**
      * @uiName Checkbox Label
+     * @uiWidget textArea
      */
     this.checkboxLabel = "By signing up you agree to the {labelLink}";
     /**
@@ -32,7 +36,6 @@ export class CheckboxField {
     this.errorMessage = "Must be checked";
     /**
      * @uiName Optional
-     * @default
      */
     this.checkboxOptional = false;
     withHooks(this);
@@ -72,6 +75,9 @@ export class CheckboxField {
         "tags": [{
             "text": "Checkbox Name Attribute",
             "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
           }],
         "text": ""
       },
@@ -92,6 +98,9 @@ export class CheckboxField {
         "tags": [{
             "text": "Checkbox Label",
             "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -176,9 +185,6 @@ export class CheckboxField {
         "tags": [{
             "text": "Optional",
             "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
           }],
         "text": ""
       },
@@ -191,7 +197,7 @@ export class CheckboxField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CheckboxFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -224,7 +230,7 @@ export class CheckboxField {
 function useCheckboxFieldDemo(props) {
   return deepmerge({
     states: {
-      validationErrors: [],
+      registrationFormState: {},
       checked: false,
     },
     callbacks: {

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

@@ -1,12 +1,12 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
 import { useState } from "@saasquatch/universal-hooks";
-import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function useCheckboxField() {
-  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   const [checked, setChecked] = useState(false);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
       checked,
     },
     callbacks: {

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -7,6 +7,7 @@ import { getProps } from "../../utils/utils";
  * Spacing is left up to the child
  *
  * @uiName Divided Layout
+ * @slots [{"name":"", "title":"Layout Content"}]
  */
 export class DividedLayout {
   constructor() {

package/dist/collection/components/sqm-dropdown-field/DropdownField.stories.js

@@ -6,7 +6,7 @@ export default {
 };
 const defaultProps = {
   states: {
-    validationErrors: {},
+    registrationFormState: {},
   },
   content: {
     dropdownName: "options",
@@ -26,13 +26,20 @@ export const CustomLabel = createHookStory(() => (h(DropdownFieldView, Object.as
   } }))));
 export const Error = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { states: {
     ...defaultProps.states,
-    validationErrors: {
-      options: "Must select an option",
+    registrationFormState: {
+      validationErrors: {
+        options: "Must select an option",
+      },
     },
   } }))));
-export const CustomError = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, errorMessage: "An option must be selected to continue", }, states: {
+export const CustomError = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    errorMessage: "An option must be selected to continue",
+  }, states: {
     ...defaultProps.states,
-    validationErrors: {
-      options: "Must select an option",
+    registrationFormState: {
+      validationErrors: {
+        options: "Must select an option",
+      },
     },
   } }))));

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

@@ -33,13 +33,17 @@ jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
 const styleString = sheet.toString();
 export function DropdownFieldView(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = 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,
       styleString),
-    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { 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) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.dropdownName]) ? {
+      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
+    }
+      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
       class: sheet.classes.ErrorStyle,
     }
       : [])), content.selectOptions),

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -7,7 +7,11 @@ import { getMissingProps, getProps } from "../../utils/utils";
 import { DropdownFieldView, } from "./sqm-dropdown-field-view";
 import { useDropdownField } from "./useDropdownField";
 /**
- * @uiName Dropdown Field
+ * @uiName Form Dropdown Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @slots [{"name":"", "title":"Drop Down Option"}]
+ * @exampleGroup Microsite Components
+ * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>
  */
 export class DropdownField {
   constructor() {
@@ -64,6 +68,9 @@ export class DropdownField {
         "tags": [{
             "text": "Dropdown Name Attribute",
             "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "required"
           }],
         "text": ""
       },
@@ -141,7 +148,7 @@ export class DropdownField {
       "mutable": false,
       "complexType": {
         "original": "DemoData<DropdownFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
+        "resolved": "{ states?: { registrationFormState?: RegistrationFormState; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -174,7 +181,7 @@ export class DropdownField {
 function useDropdownFieldDemo(props) {
   return deepmerge({
     states: {
-      validationErrors: [],
+      registrationFormState: {},
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-dropdown-field/useDropdownField.js

@@ -1,10 +1,10 @@
 import { useDomContext } from "@saasquatch/stencil-hooks";
-import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+import { REGISTRATION_FORM_STATE_CONTEXT, } from "../sqm-portal-registration-form/useRegistrationFormState";
 export function useDropdownField() {
-  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  const registrationFormState = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
-      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      registrationFormState,
     },
   };
 }

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile.js

@@ -6,7 +6,7 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
- * @uiName Edit Profile
+ * @uiName Microsite Edit Profile
  */
 export class EditProfile {
   constructor() {

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -2,6 +2,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 /**
  * @uiName Form Message
+ * @slots [{"name":"","title":"Message Content"}]
  */
 export class FormMessage {
   constructor() {

package/dist/collection/components/sqm-graphql-client-provider/sqm-graphql-client-provider.js

@@ -5,6 +5,7 @@ import { useGraphQLClientProvider } from "./useGraphQLProvider";
 /**
  * @uiName GraphQL Client Provider
  * @canvasRenderer always-replace
+ * @slots [{"name":"","title":"Provider Content"}]
  */
 export class GraphQLClientProvider {
   constructor() {