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

package/dist/mint-components/p-fe74b75b.system.entry.js

@@ -0,0 +1 @@
+System.register(["./p-ff17b3a4.system.js","./p-d4ee07e6.system.js"],(function(t){"use strict";var e,i,n,s;return{setters:[function(t){e=t.r;i=t.h;n=t.c},function(t){s=t.m}],execute:function(){var r=t("sqm_header_logo",function(){function t(t){e(this,t);this.nextPage="/";this.height=60;s(this)}t.prototype.disconnectedCallback=function(){};t.prototype.render=function(){return i(n,null,i("a",{href:this.nextPage},i("img",{style:{height:(this===null||this===void 0?void 0:this.height)+"px"},src:this===null||this===void 0?void 0:this.imageUrl})))};return t}())}}}));

package/dist/mint-components/{p-380b25a3.js → p-ff39746d.js}

@@ -1 +1 @@
-import{h as s}from"./p-64c3217a.js";import{A as e,a as r,b as t}from"./p-61ff3ceb.js";import{c as a}from"./p-ab8f86d3.js";import{T as o}from"./p-46416f3e.js";const p=a({Wrapper:e,Column:r,ButtonsContainer:t,Banner:{"&::part(erroralert-base)":{margin:"15px 0px"}},CodeError:{"&::part(erroralert-base)":{"margin-bottom":"15px"}},CodeSuccess:{"&::part(successalert-base)":{"margin-bottom":"15px"}},ContinueButton:{width:"100%"}}),l=p.toString();function i(e){const{states:r,callbacks:t}=e;return r.reset?s("div",{class:`${p.classes.Wrapper} ${p.classes.Column}`},s("style",{type:"text/css"},l),s(o,{type:"h3"},r.content.resetPasswordHeader),s("sqm-form-message",{class:p.classes.CodeSuccess,exportparts:"success-icon"},s("div",{part:"successalert-text"},"Your password has been reset and you are being redirected. If you are not redirected, please click Continue.")),s("div",null,s("sl-button",{class:p.classes.ContinueButton,onClick:t.gotoNextPage,loading:r.loading,exportparts:"base: primarybutton-base",type:"primary"},r.content.continueButtonText))):r.oobCodeValidating?s("div",null):r.oobCodeValid?s("div",{class:p.classes.Wrapper},s("style",{type:"text/css"},"\n:host {\n  display: block;\n}\n:host([hidden]): {\n  display: none;\n}\n",l),s(o,{type:"h2"},r.reset?r.content.passwordResetHeader:r.content.resetPasswordHeader),s("sl-form",{class:p.classes.Column,"onSl-submit":t.submit},e.states.error&&s("sqm-form-message",{type:"error",class:p.classes.Banner,exportparts:"erroralert-icon"},s("div",{part:"erroralert-text"},e.states.error)),!r.reset&&s("sqm-password-field",{fieldLabel:r.content.passwordFieldLabel,demoData:r.passwordDemoData}),!r.reset&&r.confirmPassword&&s("sl-input",{exportparts:"label: input-label",type:"password",name:"/confirmPassword",label:r.content.confirmPasswordFieldLabel,disabled:r.loading,required:!0}),s("div",{class:p.classes.ButtonsContainer},s("sl-button",{class:p.classes.ContinueButton,submit:!0,loading:r.loading,exportparts:"base: primarybutton-base",type:"primary"},r.reset?r.content.continueButtonText:r.content.resetPasswordButtonText)))):s("div",{class:`${p.classes.Wrapper} ${p.classes.Column}`},s("style",{type:"text/css"},l),s("sqm-form-message",{class:p.classes.CodeError,type:"error",exportparts:"erroralert-icon"},s("div",{part:"erroralert-text"},"The password reset code is invalid or has expired, please try again.")),s("div",null,s("sl-button",{class:p.classes.ContinueButton,onClick:t.failed,exportparts:"base: primarybutton-base",type:"primary"},r.content.continueButtonText)))}export{i as P}
+import{h as s}from"./p-64c3217a.js";import{A as e,a as r,b as t}from"./p-61ff3ceb.js";import{c as a}from"./p-85e934c8.js";import{T as o}from"./p-864be7c2.js";const p=a({Wrapper:e,Column:r,ButtonsContainer:t,Banner:{"&::part(erroralert-base)":{margin:"15px 0px"}},CodeError:{"&::part(erroralert-base)":{"margin-bottom":"15px"}},CodeSuccess:{"&::part(successalert-base)":{"margin-bottom":"15px"}},ContinueButton:{width:"100%"}}),l=p.toString();function i(e){const{states:r,callbacks:t}=e;return r.reset?s("div",{class:`${p.classes.Wrapper} ${p.classes.Column}`},s("style",{type:"text/css"},l),s(o,{type:"h3"},r.content.resetPasswordHeader),s("sqm-form-message",{class:p.classes.CodeSuccess,exportparts:"success-icon"},s("div",{part:"successalert-text"},"Your password has been reset and you are being redirected. If you are not redirected, please click Continue.")),s("div",null,s("sl-button",{class:p.classes.ContinueButton,onClick:t.gotoNextPage,loading:r.loading,exportparts:"base: primarybutton-base",type:"primary"},r.content.continueButtonText))):r.oobCodeValidating?s("div",null):r.oobCodeValid?s("div",{class:p.classes.Wrapper},s("style",{type:"text/css"},"\n:host {\n  display: block;\n}\n:host([hidden]): {\n  display: none;\n}\n",l),s(o,{type:"h2"},r.reset?r.content.passwordResetHeader:r.content.resetPasswordHeader),s("sl-form",{class:p.classes.Column,"onSl-submit":t.submit},e.states.error&&s("sqm-form-message",{type:"error",class:p.classes.Banner,exportparts:"erroralert-icon"},s("div",{part:"erroralert-text"},e.states.error)),!r.reset&&s("sqm-password-field",{fieldLabel:r.content.passwordFieldLabel,demoData:r.passwordDemoData}),!r.reset&&r.confirmPassword&&s("sl-input",{exportparts:"label: input-label",type:"password",name:"/confirmPassword",label:r.content.confirmPasswordFieldLabel,disabled:r.loading,required:!0}),s("div",{class:p.classes.ButtonsContainer},s("sl-button",{class:p.classes.ContinueButton,submit:!0,loading:r.loading,exportparts:"base: primarybutton-base",type:"primary"},r.reset?r.content.continueButtonText:r.content.resetPasswordButtonText)))):s("div",{class:`${p.classes.Wrapper} ${p.classes.Column}`},s("style",{type:"text/css"},l),s("sqm-form-message",{class:p.classes.CodeError,type:"error",exportparts:"erroralert-icon"},s("div",{part:"erroralert-text"},"The password reset code is invalid or has expired, please try again.")),s("div",null,s("sl-button",{class:p.classes.ContinueButton,onClick:t.failed,exportparts:"base: primarybutton-base",type:"primary"},r.content.continueButtonText)))}export{i as P}

package/dist/types/components/sqm-big-stat/sqm-big-stat-view.d.ts

@@ -1,5 +1,4 @@
 import { VNode } from "../../stencil-public-runtime";
-import { FontSize } from "../../global/mixins";
 export interface BigStatViewProps {
   value: number;
   statvalue: string;
@@ -7,9 +6,5 @@ export interface BigStatViewProps {
   flexReverse?: boolean;
   alignment?: "left" | "right" | "center";
   labelSlot?: VNode;
-  statColor?: string;
-  statDescriptionColor?: string;
-  statFontSize?: FontSize;
-  statDescriptionFontSize?: FontSize;
 }
 export declare function BigStatView(props: BigStatViewProps): any;

package/dist/types/components/sqm-big-stat/sqm-big-stat.d.ts

@@ -1,6 +1,5 @@
 import { BigStatViewProps } from "./sqm-big-stat-view";
 import { DemoData } from "../../global/demo";
-import { FontSize } from "../../global/mixins";
 /**
  *
  * @uiName User Stat
@@ -37,30 +36,6 @@ export declare class BigStat {
    * @uiEnumNames ["Left", "Right", "Center"]
    */
   alignment?: "left" | "right" | "center";
-  /**
-   * @uiName Stat Color
-   * @uiWidget color
-   */
-  statColor?: string;
-  /**
-   * @uiName Stat Description Color
-   * @uiWidget color
-   */
-  statDescriptionColor?: string;
-  /**
-   * @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"]
-   */
-  statFontSize?: FontSize;
-  /**
-   * @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"]
-   */
-  statDescriptionFontSize?: FontSize;
   /**
    * The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified.
    *

package/dist/types/components/sqm-brand/sqm-brand.d.ts

@@ -14,12 +14,7 @@ export declare class BrandComponent {
    */
   brandColor: string;
   /**
-   * @uiName Font Color
-   * @uiWidget color
-   */
-  fontColor?: string;
-  /**
-   * The brand font that you want to use
+   * A font from the Google Fonts library used throughout the widget. This value is case sensitive.
    *
    * @uiName Brand Font
    * @default "Nunito Sans"

package/dist/types/components/sqm-card-feed/sqm-card-feed.d.ts

@@ -2,7 +2,7 @@
  * @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 declare class CardFeed {
   ignored: boolean;

package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field-view.d.ts

@@ -1,7 +1,7 @@
-import { ValidationErrors } from "../sqm-portal-register/useValidationState";
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 export interface CheckboxFieldViewProps {
   states: {
-    validationErrors?: ValidationErrors;
+    registrationFormState?: RegistrationFormState;
     checked: boolean;
   };
   content: {

package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field.d.ts

@@ -1,16 +1,22 @@
 import { DemoData } from "../../global/demo";
 import { CheckboxFieldViewProps } from "./sqm-checkbox-field-view";
 /**
- * @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 declare class CheckboxField {
   ignored: boolean;
   /**
+   * This name is used as the key for this form field on submission. The name must be unique within this specific form.
    * @uiName Checkbox Name Attribute
+   * @required
    */
   checkboxName: string;
   /**
    * @uiName Checkbox Label
+   * @uiWidget textArea
    */
   checkboxLabel: string;
   /**
@@ -29,7 +35,6 @@ export declare class CheckboxField {
   errorMessage: string;
   /**
    * @uiName Optional
-   * @default
    */
   checkboxOptional?: boolean;
   /**

package/dist/types/components/sqm-checkbox-field/useCheckboxField.d.ts

@@ -1,6 +1,8 @@
-export declare function useCheckboxField(): {
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
+import { CheckboxField } from "./sqm-checkbox-field";
+export declare function useCheckboxField(props: CheckboxField): {
   states: {
-    validationErrors: import("../sqm-portal-register/useValidationState").ValidationErrors;
+    registrationFormState: RegistrationFormState;
     checked: boolean;
   };
   callbacks: {

package/dist/types/components/sqm-divided-layout/sqm-divided-layout-view.d.ts

@@ -2,6 +2,7 @@ import { VNode } from "../../stencil-public-runtime";
 interface DividedLayoutViewProps {
   direction: "row" | "column";
   dividerStyle: string;
+  overflow: "initial" | "scroll" | "auto" | "hidden";
 }
 export declare function DividedLayoutView(props: DividedLayoutViewProps, children: VNode): any;
 export {};

package/dist/types/components/sqm-divided-layout/sqm-divided-layout.d.ts

@@ -3,6 +3,7 @@
  * Spacing is left up to the child
  *
  * @uiName Divided Layout
+ * @slots [{"name":"", "title":"Layout Content"}]
  */
 export declare class DividedLayout {
   /**
@@ -13,7 +14,14 @@ export declare class DividedLayout {
    */
   direction: "row" | "column";
   /**
-   * Uses Shorthand CSS border syntax
+   * @uiName Overflow
+   * @uiType string
+   * @uiEnum ["initial", "scroll", "auto", "hidden"]
+   * @uiEnumNames ["Initial", "Scroll", "Auto", "Hidden"]
+   */
+  overflow: "initial" | "scroll" | "auto" | "hidden";
+  /**
+   * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
    * @uiName Border Style
    */
   dividerStyle: string;

package/dist/types/components/sqm-dropdown-field/sqm-dropdown-field-view.d.ts

@@ -1,8 +1,8 @@
 import { VNode } from "../../stencil-public-runtime";
-import { ValidationErrors } from "../sqm-portal-register/useValidationState";
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 export interface DropdownFieldViewProps {
   states: {
-    validationErrors?: ValidationErrors;
+    registrationFormState?: RegistrationFormState;
   };
   content: {
     dropdownName: string;

package/dist/types/components/sqm-dropdown-field/sqm-dropdown-field.d.ts

@@ -1,12 +1,18 @@
 import { DemoData } from "../../global/demo";
 import { DropdownFieldViewProps } from "./sqm-dropdown-field-view";
 /**
- * @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 declare class DropdownField {
   ignored: boolean;
   /**
+   * This name is used as the key for this form field on submission. The name must be unique within this specific form.
    * @uiName Dropdown Name Attribute
+   * @required
    */
   dropdownName: string;
   /**

package/dist/types/components/sqm-dropdown-field/useDropdownField.d.ts

@@ -1,5 +1,6 @@
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 export declare function useDropdownField(): {
   states: {
-    validationErrors: import("../sqm-portal-register/useValidationState").ValidationErrors;
+    registrationFormState: RegistrationFormState;
   };
 };

package/dist/types/components/sqm-edit-profile/sqm-edit-profile.d.ts

@@ -1,7 +1,7 @@
 import { EditProfileViewProps } from "./sqm-edit-profile-view";
 import { DemoData } from "../../global/demo";
 /**
- * @uiName Edit Profile
+ * @uiName Microsite Edit Profile
  */
 export declare class EditProfile {
   ignored: boolean;

package/dist/types/components/sqm-form-message/sqm-form-message.d.ts

@@ -1,5 +1,6 @@
 /**
  * @uiName Form Message
+ * @slots [{"name":"","title":"Message Content"}]
  */
 export declare class FormMessage {
   ignored: boolean;

package/dist/types/components/sqm-graphql-client-provider/sqm-graphql-client-provider.d.ts

@@ -1,6 +1,7 @@
 /**
  * @uiName GraphQL Client Provider
  * @canvasRenderer always-replace
+ * @slots [{"name":"","title":"Provider Content"}]
  */
 export declare class GraphQLClientProvider {
   ignored: boolean;

package/dist/types/components/sqm-hamburger-menu/HamburgerMenu.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const Default: () => any;

package/dist/types/components/sqm-hamburger-menu/sqm-hamburger-menu-view.d.ts

@@ -0,0 +1,6 @@
+import { VNode } from "../../stencil-public-runtime";
+declare type HamburgerMenuViewProps = {
+  position?: string;
+};
+export declare function HamburgerMenuView(props: HamburgerMenuViewProps, children: VNode): any;
+export {};

package/dist/types/components/sqm-hamburger-menu/sqm-hamburger-menu.d.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * @uiName Hamburger menu
+ * @slot the navigation items shown in menu
+ */
+export declare class HamburgerMenu {
+  ignored: boolean;
+  position?: string;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/sqm-header-logo/sqm-header-logo.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @uiName Header Logo
+ */
+export declare class HeroImage {
+  /**
+   * @uiWidget ImageUpload
+   * @format url
+   * @uiName Logo Image
+   */
+  imageUrl: string;
+  /**
+   * Page participants are navigated to after clicking the header logo.
+   *
+   * @uiName Redirect Path
+   * @uiWidget pageSelect
+   */
+  nextPage: string;
+  /**
+   * @uiName Logo Height
+   */
+  height: number;
+  constructor();
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/sqm-hero/sqm-hero.d.ts

@@ -1,13 +1,14 @@
 /**
- * The hero container
- *
  * @uiName Hero Layout
+ * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
  */
 export declare class Hero {
   /**
    * Number of columns in the layout
    *
    * @uiName Columns
+   * @uiEnum [1, 2]
+   * @uiEnumNames ["One", "Two"]
    */
   columns: 1 | 2;
   /**

package/dist/types/components/sqm-hero-image/sqm-hero-image-view.d.ts

@@ -17,6 +17,5 @@ export interface HeroImageViewProps {
   paddingImage?: Spacing;
   imagePos: "left" | "center" | "right";
   imageMobilePos: "top" | "bottom";
-  borderRadius?: number;
 }
 export declare function HeroImageView(props: HeroImageViewProps, children: VNode): any;

package/dist/types/components/sqm-hero-image/sqm-hero-image.d.ts

@@ -2,8 +2,8 @@ import { Spacing } from "../../global/mixins";
 /**
  * @uiName Hero Image
  * @exampleGroup Common Components
- * @example Two Column Layout - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
- * @example Overlay - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
+ * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
+ * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
  */
 export declare class HeroImage {
   /**
@@ -96,11 +96,6 @@ export declare class HeroImage {
    * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
    */
   paddingImage: Spacing;
-  /**
-   * Configure border radius with pixel amount.
-   * @uiName Border Radius
-   */
-  borderRadius?: number;
   constructor();
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/sqm-image/sqm-image-view.d.ts

@@ -4,7 +4,6 @@ export interface ImageViewProps {
   right?: string;
   alignment?: "left" | "center" | "right";
   backgroundColor?: string;
-  borderRadius?: number;
   minHeight?: string;
 }
 export declare function ImageView(props: ImageViewProps): any;

package/dist/types/components/sqm-image/sqm-image.d.ts

@@ -21,7 +21,7 @@ export declare class Image {
   /**
    * @uiName Background Color
    * @uiWidget color
-   * @format
+   * @format color
    */
   backgroundColor: string;
   /**
@@ -29,10 +29,5 @@ export declare class Image {
    * @uiName Minimum Height
    */
   minHeight?: string;
-  /**
-   * Configure border radius with pixel amount.
-   * @uiName Border Radius
-   */
-  borderRadius?: number;
   render(): any;
 }

package/dist/types/components/sqm-input-field/sqm-input-field-view.d.ts

@@ -1,7 +1,7 @@
-import { ValidationErrors } from "../sqm-portal-register/useValidationState";
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 export interface InputFieldViewProps {
   states: {
-    validationErrors?: ValidationErrors;
+    registrationFormState?: RegistrationFormState;
   };
   content: {
     fieldName: string;

package/dist/types/components/sqm-input-field/sqm-input-field.d.ts

@@ -1,14 +1,18 @@
 import { DemoData } from "../../global/demo";
 import { InputFieldViewProps } from "./sqm-input-field-view";
 /**
- * @uiName Input Field
+ * @uiName Form Input Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
  */
 export declare class InputField {
   ignored: boolean;
   /**
-   * Used as the key of the inputs value in form data.
+   * This name is used as the key for this form field on submission. The name must be unique within this specific form.
    *
    * @uiName Input Name Attribute
+   * @required
    */
   fieldName: string;
   /**

package/dist/types/components/sqm-input-field/useInputField.d.ts

@@ -1,5 +1,6 @@
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 export declare function useInputField(): {
   states: {
-    validationErrors: import("../sqm-portal-register/useValidationState").ValidationErrors;
+    registrationFormState: RegistrationFormState;
   };
 };

package/dist/types/components/sqm-name-fields/sqm-name-fields-view.d.ts

@@ -1,7 +1,7 @@
-import { ValidationErrors } from "../sqm-portal-register/useValidationState";
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 export interface NameFieldsViewProps {
   states: {
-    validationErrors?: ValidationErrors;
+    registrationFormState?: RegistrationFormState;
     content: {
       firstNameLabel: string;
       lastNameLabel: string;

package/dist/types/components/sqm-name-fields/sqm-name-fields.d.ts

@@ -1,7 +1,10 @@
 import { DemoData } from "../../global/demo";
 import { NameFieldsViewProps } from "./sqm-name-fields-view";
 /**
- * @uiName Name Fields
+ * @uiName Form Name Fields
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Name Fields - <sqm-name-fields first-name-label="First Name" last-name-label="Last Name"></sqm-name-fields>
  */
 export declare class NameFields {
   ignored: boolean;

package/dist/types/components/sqm-name-fields/useNameFields.d.ts

@@ -1,7 +1,8 @@
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 import { NameFields } from "./sqm-name-fields";
 export declare function useNameFields(props: NameFields): {
   states: {
-    validationErrors: import("../sqm-portal-register/useValidationState").ValidationErrors;
+    registrationFormState: RegistrationFormState;
     content: {
       lastNameLabel: string;
       firstNameLabel: string;

package/dist/types/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.d.ts

@@ -1,4 +1,5 @@
 import { VNode } from "../../stencil-public-runtime";
 export interface NavigationSidebarViewProps {
+  mobileItemsSlot: any;
 }
-export declare function NavigationSidebarView(props: NavigationSidebarViewProps, children: VNode): any;
+export declare function NavigationSidebarView(props: NavigationSidebarViewProps, children: VNode): any[];

package/dist/types/components/sqm-navigation-sidebar/sqm-navigation-sidebar.d.ts

@@ -1,11 +1,11 @@
 /**
- * A container for navigation menu items
- *
- * @uiName Navigation Sidebar
+ * @uiName Microsite Sidebar
+ * @slots [{"name":"", "title":"Sidebar Content"}]
  */
 export declare class NavigationSidebar {
   ignored: boolean;
   constructor();
   disconnectedCallback(): void;
+  renderNavigationItem(child: Element): Promise<any>;
   render(): any;
 }

package/dist/types/components/sqm-navigation-sidebar/useNavigationSidebar.d.ts

@@ -0,0 +1,4 @@
+import { VNode } from "../../stencil-public-runtime";
+export declare function useNavigationSidebar(renderNavigationItem: (child: Element) => Promise<VNode[]>): {
+  mobileChildren: any[];
+};

package/dist/types/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.d.ts

@@ -1,11 +1,15 @@
 import { DemoData } from "../../global/demo";
 import { NavigationSidebarItemViewProps } from "./sqm-navigation-sidebar-item-view";
 /**
- * @uiName Navigation Link
+ * @uiName Microsite Sidebar Item
+ * @validParents ["sqm-navigation-sidebar"]
+ * @exampleGroup Microsite Components
+ * @example Sidebar Item - <sqm-navigation-sidebar-item label="Sidebar Item" icon="house"></sqm-navigation-sidebar-item>
  */
 export declare class NavigationSidebarItem {
   /**
    * @uiName Navigation Path
+   * @uiWidget pageSelect
    */
   path: string;
   /**

package/dist/types/components/sqm-password-field/sqm-password-field-view.d.ts

@@ -1,9 +1,10 @@
 import { VNode } from "../../stencil-public-runtime";
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 export interface PortalPasswordFieldViewProps {
   states: {
     enableValidation: boolean;
     dynamicValidation: VNode | string;
-    validationErrors: Record<string, string>;
+    registrationFormState: RegistrationFormState;
     content: {
       fieldLabel: string;
     };

package/dist/types/components/sqm-password-field/sqm-password-field.d.ts

@@ -1,15 +1,19 @@
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 export interface PasswordFieldViewDemoProps {
   initValue: string;
   states: {
     enableValidation: boolean;
-    validationErrors: Record<string, string>;
+    registrationFormState: RegistrationFormState;
     content: {
       fieldLabel: string;
     };
   };
 }
 /**
- * @uiName Portal Password Field
+ * @uiName Form Password Field
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @exampleGroup Microsite Components
+ * @example Form Password Field - <sqm-password-field field-label="Password"></sqm-password-field>
  */
 export declare class PortalPasswordField {
   ignored: boolean;
@@ -20,10 +24,10 @@ export declare class PortalPasswordField {
    */
   fieldLabel: string;
   /**
-   * Enable live password validation
-   * @uiName Enable Validation
+   * Disable live password validation
+   * @uiName Disable Validation
    */
-  enableValidation: boolean;
+  disableValidation: boolean;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-portal-change-password/sqm-portal-change-password.d.ts

@@ -1,7 +1,7 @@
 import { PortalChangePasswordViewProps } from "./sqm-portal-change-password-view";
 import { DemoData } from "../../global/demo";
 /**
- * @uiName Portal Profile
+ * @uiName Microsite Password Change
  */
 export declare class PortalChangePassword {
   ignored: boolean;
@@ -10,25 +10,25 @@ export declare class PortalChangePassword {
    */
   modalChangePasswordHeader: string;
   /**
-   * Modal cancel button text
+   * Found in modal
    *
    * @uiName Cancel Button Text
    */
   cancelText: string;
   /**
-   * Modal change password button text
+   * Found in modal
    *
    * @uiName Change Password Button Text
    */
   changePasswordButtonText: string;
   /**
-   * Password input field label
+   * Found in modal
    *
-   * @uiName Password Label
+   * @uiName New Password Field Label
    */
   passwordFieldLabel: string;
   /**
-   * Password confirmation input field label
+   * Found in modal
    *
    * @uiName Confirm Password Label
    */
@@ -36,7 +36,8 @@ export declare class PortalChangePassword {
   /**
    * Successful password change message
    *
-   * @uiName Successful Message
+   * @uiName Successful Password Change Message
+   * @uiWidget textArea
    */
   successMessage: string;
   /**