@saasquatch/mint-components 1.15.0-2 → 1.15.0-4

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

@@ -3,6 +3,7 @@ import { getProps } from "../../utils/utils";
 import { ImageView } from "./sqm-image-view";
 /**
  * @uiName Image
+ * @validParents ["sqm-brand","div","sqm-portal-container","sqm-divided-layout","sqm-titled-section", "sqb-program-section", "sqb-conditional-section"]
  * @exampleGroup Common Components
  * @example Image - <sqm-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.png" alignment="center"></sqm-image>
  */

package/dist/collection/components/sqm-instant-access-registration/sqm-instant-access-registration.js

@@ -6,6 +6,7 @@ import { EmailRegistrationView, } from "../views/email-registration-view";
 import { useInstantAccessRegistration } from "./useInstantAccessRegistration";
 /**
  * @uiName Instant Access Registration
+ * @validParents ["sqm-portal-container","div","sqm-hero","template", "sqb-program-section", "sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
  * @example Instant Access Registration - <sqm-instant-access-registration></sqm-instant-access-registration>

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -24,14 +24,14 @@ const style = {
     "& .ellipses": {
       textAlign: "left",
       padding: "0",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text)",
       paddingLeft: "25%",
     },
     "& .highlight": {
       background: "var(--sl-color-primary-50)",
     },
     "& td, th": {
-      color: "var(--sl-color-gray-800)",
+      color: "var(--sqm-text)",
       padding: "var(--sl-spacing-medium)",
     },
     "& .User": {

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

@@ -7,6 +7,7 @@ import { LeaderboardView } from "./sqm-leaderboard-view";
 import { useLeaderboard } from "./useLeaderboard";
 /**
  * @uiName Leaderboard
+ * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @requiredFeatures ["LEADERBOARDS"]
  * @exampleGroup Leaderboard

package/dist/collection/components/sqm-navigation-menu/sqm-navigation-menu.js

@@ -7,6 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Navigation Menu
+ * @validParents ["sqm-portal-container","div","sqm-brand","sqm-divided-layout"]
  */
 export class NavigationMenu {
   constructor() {

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -5,6 +5,8 @@ import { Component, h, State } from "@stencil/core";
 import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
 /**
  * @uiName Microsite Sidebar
+ * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"]
+ * @validChildren ["sqm-navigation-sidebar-item"]
  * @slots [{"name":"", "title":"Sidebar Content"}]
  */
 export class NavigationSidebar {

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password.js

@@ -7,6 +7,7 @@ import deepmerge from "deepmerge";
 import { useState } from "@saasquatch/universal-hooks";
 /**
  * @uiName Microsite Password Change
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand"]
  */
 export class PortalChangePassword {
   constructor() {

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer.js

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { PortalFooterView } from "./sqm-portal-footer-view";
 /**
  * @uiName Footer
+ * @validParents ["div","sqm-brand","sqm-portal-container"]
  */
 export class PortalFooter {
   constructor() {

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js

@@ -7,6 +7,7 @@ import { usePortalLogin } from "./usePortalLogin";
 import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Microsite Login
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "template"]
  */
 export class PortalLogin {
   constructor() {

package/dist/collection/components/sqm-portal-logout/sqm-portal-logout.js

@@ -4,6 +4,7 @@ import { Component, Prop, State } from "@stencil/core";
 import { usePortalLogout } from "./usePortalLogout";
 /**
  * @uiName Microsite Logout
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  * @compatibility Built for instant access
  */
 export class PortalLogout {

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

@@ -7,6 +7,7 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
 /**
  * @uiName Microsite Participant Profile
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  */
 export class PortalProfile {
   constructor() {

package/dist/collection/components/sqm-portal-protected-route/sqm-portal-protected-route.js

@@ -4,6 +4,7 @@ import { h, Component, Prop, State, Host } from "@stencil/core";
 import { usePortalProtectedRoute } from "./usePortalProtectedRoute";
 /**
  * @uiName Microsite Protected Route
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template", "sqb-program-section", "sqb-conditional-section"]
  * @slots [{"name":"","title":"Route Content"}]
  */
 export class PortalProtectedRoute {

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer-view.js

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 export function ProgramExplainerView(props, children) {
   const style = {
     Container: {
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "",
     },
     Header: {

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js

@@ -4,6 +4,8 @@ import { getProps } from "../../utils/utils";
 import { ProgramExplainerView } from "./sqm-program-explainer-view";
 /**
  * @uiName Program Explainer
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-program-explainer-step"]
  * @exampleGroup Common Components
  * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
  * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -8,7 +8,7 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
@@ -22,6 +22,7 @@ export function ProgramExplainerStepView(props) {
       },
     },
     Header: {
+      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-bold)",
       marginTop: "var(--sl-spacing-x-large)",
@@ -30,6 +31,7 @@ export function ProgramExplainerStepView(props) {
       },
     },
     Description: {
+      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-medium)",
       marginTop: "var(--sl-spacing-small)",
       "@media (max-width: 499px)": {

package/dist/collection/components/sqm-program-menu/sqm-program-menu.js

@@ -4,6 +4,7 @@ import { useProgramMenu } from "./useProgramMenu";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Microsite Program Menu
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  * @slots [{"name":"","title":"Menu Content"}]
  * @canvasRenderer always-replace
  */

package/dist/collection/components/sqm-qr-code/sqm-qr-code.js

@@ -7,6 +7,7 @@ import { QrCodeView } from "./sqm-qr-code-view";
 import { useQRCode } from "./useQRCode";
 /**
  * @uiName QR Code
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "sqb-program-section", "sqb-conditional-section"]
  * @exampleGroup Sharing
  * @example QR Code - <sqm-qr-code></sqm-qr-code>
  */

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

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
-    color: "var(--sl-color-neutral-900)",
+    color: "var(--sqm-text)",
     background: "var(--sl-color-neutral-0)",
     display: "flex",
     flexDirection: "column",

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

@@ -5,10 +5,12 @@ import { ReferralCardView } from "./sqm-referral-card-view";
 import { useChildElements } from "../../tables/useChildElements";
 /**
  * @uiName Referral Card
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-pagination","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span"]
  * @exampleGroup Referrals
  * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"},{"name":"header", "title":"Header Content"},{"name":"footer", "title":"Footer Content"}]
  * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
- */
+ * */
 export class ReferralCard {
   constructor() {
     this.ignored = true;

package/dist/collection/components/sqm-referral-code/sqm-referral-code.js

@@ -7,6 +7,7 @@ import { CopyTextView } from "../views/copy-text-view";
 import { useReferralCode } from "./useReferralCode";
 /**
  * @uiName Referral Code
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span"]
  * @exampleGroup Sharing
  * @example Referral Code - <sqm-referral-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" show-notification-text="true"></sqm-referral-code>
  */

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes-view.js

@@ -30,7 +30,7 @@ const style = {
     flexDirection: "column",
   },
   TitleText: {
-    color: "var(--sl-color-neutral-700)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-large)",
     margin: "0",
   },

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -7,6 +7,7 @@ import { ReferralCodesView, } from "./sqm-referral-codes-view";
 import { useReferralCodes } from "./useReferralCodes";
 /**
  * @uiName Promo Codes
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Promo Codes Content"}]
  * @exampleGroup Sharing
  * @example Promo Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes" show-notification-text="true"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="fbmessenger">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -10,6 +10,8 @@ import mockReferralData from "./mockReferralData";
 import { tryMethod, useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
  * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -6,6 +6,7 @@ import { useInstantAccessRegistration } from "../sqm-instant-access-registration
 import { EmailRegistrationView, } from "../views/email-registration-view";
 /**
  * @uiName Instant Access Friend Registration
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
  * @example Instant Access Friend Registration - <sqm-referred-registration></sqm-referred-registration>

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -8,6 +8,8 @@ import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
 /**
  * @uiName Reward Exchange
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-empty"]
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @exampleGroup Rewards
  * @example Reward Exchange - <sqm-reward-exchange-list not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" choose-reward-title="Rewards" choose-amount-title="Select" confirmation-title="Confirm" reward-title="Choose a reward" cancel-text="Cancel" back-text="Back" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltip-text="Copied" done-text="Done" select-text="Select amount to receive" query-error="Unable to load reward exchange list. Please try again" redemption-error="An error occured trying to redeem this reward. Please try again" not-enough-error="Not enough {sourceUnit} to redeem for this reward" reward-redeemed-text="Reward redeemed" promo-code="Promo Code" skeleton-card-num=8 reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available" slot="empty"></sqm-empty></sqm-reward-exchange-list>

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -10,6 +10,7 @@ import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Reward Table
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
  * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>

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

@@ -1,6 +1,7 @@
 import { h, Component, State, Prop, Host } from "@stencil/core";
 /**
  * @uiName Route
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"]
  * @slots [{"name":"","title":"Content"}]
  */
 export class SqmRoute {

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

@@ -3,6 +3,8 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { useRouter } from "./useRouter";
 /**
  * @uiName Router
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab", "sqb-program-section", "sqb-conditional-section"]
+ * @validChildren ["sqm-route"]
  * @slots [{"name":"","title":"Routes"}]
  */
 export class SqmRouter {

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

@@ -4,6 +4,7 @@ import { useScroll } from "./useScroll";
 import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Scroll Button
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText
  */

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -7,6 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Button
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText
  * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]

package/dist/collection/components/sqm-share-code/sqm-share-code.js

@@ -7,6 +7,7 @@ import { CopyTextView } from "../views/copy-text-view";
 import { useShareCode } from "./useShareCode";
 /**
  * @uiName Share Code
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Sharing
  * @example Share Code - <sqm-share-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-code>
  */

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

@@ -4,7 +4,7 @@ import { StatContainerView } from "./sqm-stat-container-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Stat Container
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero", "sqb-program-section", "sqb-conditional-section"]
  * @validChildren ["sqm-big-stat"]
  * @slots [{"name":"", "title":"Stats"}]
  * @exampleGroup Statistics

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

@@ -5,6 +5,8 @@ import { TabsView } from "./sqm-tabs-view";
 import { useTabs } from "./useTabs";
 /**
  * @uiName Tab Group
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-tab"]
  * @slots [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}]
  * @exampleGroup Layout
  * @canvasRenderer always-replace

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

@@ -19,19 +19,19 @@ const style = {
       boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
       fontSize: "var(--sl-font-size-small)",
       lineHeight: "var(--sl-line-height-dense)",
-      color: "var(--sl-color-neutral-600)",
+      color: "var(--sqm-text)",
     },
     "& .main.complete": {
       background: "var(--sl-color-primary-50)",
       borderColor: "var(--sl-color-primary-500)",
     },
     "& .main.expired": {
-      color: "var(--sl-color-neutral-600)",
+      color: "var(--sqm-text)",
       background: "var(--sl-color-neutral-50)",
     },
     "& .title": {
       fontSize: "var(--sl-font-size-medium)",
-      color: "var(--sl-color-neutral-950)",
+      color: "var(--sqm-text)",
     },
     "& .container": {
       margin: "var(--sl-spacing-medium)",
@@ -92,7 +92,7 @@ const style = {
       alignSelf: "center",
       fontSize: "var(--sl-font-size-x-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-950)",
+      color: "var(--sqm-text)",
       lineHeight: "100%",
       marginRight: "var(--sl-spacing-xx-small)",
     },
@@ -100,7 +100,7 @@ const style = {
       alignSelf: "end",
       textTransform: "uppercase",
       fontSize: "var(--sl-font-size-x-small)",
-      color: "var(--sl-color-neutral-950)",
+      color: "var(--sqm-text)",
       lineHeight: "var(--sl-font-size-medium)",
       marginRight: "var(--sl-spacing-xx-small)",
     },
@@ -118,7 +118,7 @@ const style = {
       color: "var(--sl-color-primary-300)",
     },
     "&[data-subdue] .neutral": {
-      color: "var(--sl-color-neutral-300)",
+      color: "var(--sqm-text)",
     },
     display: "flex",
     "& .icon": {
@@ -130,7 +130,7 @@ const style = {
       marginTop: "auto",
       verticalAlign: "text-bottom",
       fontSize: "var(--sl-font-size-x-small)",
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text)",
     },
     "& .success": {
       color: "var(--sl-color-primary-500)",
@@ -140,19 +140,19 @@ const style = {
       marginTop: "auto",
       marginLeft: "auto",
       "&::part(base)": {
-        color: "var(--sl-color-neutral-0)",
+        color: "var(--sqm-text)",
       },
       "&.disabled::part(base)": {
         border: "1px solid var(--sl-color-primary-400)",
         background: "var(--sl-color-primary-400)",
       },
       "&.neutral::part(base)": {
-        border: "1px solid var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-400)",
+        border: "1px solid var(--sqm-text)",
+        background: "var(--sqm-text)",
       },
     },
     "& .neutral": {
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text)",
     },
     "& .datetime": {
       display: "block",

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

@@ -3,52 +3,54 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 const vanillaStyle = `
   sqm-text {
     display: block;
+    color: var(--sqm-text);
   }
 
   sqm-text h1 {
     font-size: var(--sl-font-size-xxx-large);
     font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text h2 {
     font-size: var(--sl-font-size-xx-large);
     font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text h3 {
     font-size: var(--sl-font-size-x-large);
     font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text h4 {
     font-size: var(--sl-font-size-large);
     font-weight: var(--sl-font-weight-bold);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text p {
     font-size: var(--sl-font-size-medium);
     font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text sub {
     font-size: var(--sl-font-size-small);
     font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
+    color: var(--sqm-text);
     margin: 0;
   }
 `;
 /**
  * @uiName Text
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Text"}]
  * @slotEditor richText
  * @canvasRenderer always-replace

package/dist/collection/components/sqm-text-span/sqm-text-span.js

@@ -3,6 +3,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { TextSpanView } from "./sqm-text-span-view";
 /**
  * @uiName Text Span
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
  * @canvasRenderer always-replace
  */
 export class Text {

package/dist/collection/components/sqm-timeline/sqm-timeline-entry-view.js

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 import { Circle, Gift } from "./SVGs";
 const style = {
   TimelineReward: {
-    color: "var(--sl-color-neutral-900)",
+    color: "var(--sqm-text)",
     lineHeight: "var(--sl-line-height-dense)",
     "& .container": {
       display: "flex",

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

@@ -3,10 +3,12 @@ import { Component, h, Prop, State } from "@stencil/core";
 import { useChildElements } from "../../tables/useChildElements";
 /**
  * @uiName Program Timeline
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-timeline-entry"]
  * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
  * @exampleGroup Common Components
  * @example Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
-*/
+ */
 export class Timeline {
   constructor() {
     this.ignored = true;

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -4,6 +4,8 @@ import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
  * @uiName Titled Section
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"]
+ * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span"]
  * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
  * @exampleGroup Layout
  * @example Titled Section - <sqm-titled-section text-align="center" label-margin="small" padding="none"><div slot="label"><h2>Section Label</h2></div><div slot="content"><p>Add your section content here!</p></div></sqm-titled-section>

package/dist/collection/global/styles.js

@@ -584,6 +584,8 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
+  --sqm-text: var(--sl-color-neutral-800);
+  --sqm-text-subdued: var(--sl-color-neutral-500);
 }
 
 body {
@@ -591,7 +593,7 @@ body {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
-  color: var(--sl-color-gray-800);
+  color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
   background-color: var(--sqm-portal-background);
@@ -623,7 +625,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -634,7 +635,7 @@ h2, .Title {
 .Subtitle {
   text-align: center;
   margin-bottom: 0px;
-  color: var(--sl-color-gray-500);
+  color: var(--sqm-text-subdued);
 }
 .SupportText{
   margin-top: var(--sl-spacing-small);