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

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

@@ -7,6 +7,7 @@ import { CouponCodeView } from "./sqm-coupon-code-view";
 import { useCouponCode } from "./useCouponCode";
 /**
  * @uiName Coupon Code
+ * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section", "sqb-program-section", "sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
  * @example Coupon Code - <sqm-coupon-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-coupon-code>
@@ -30,6 +31,7 @@ export class CouponCode {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -43,6 +45,7 @@ export class CouponCode {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -104,6 +107,15 @@ export class CouponCode {
      * @uiGroup Coupon code error
      */
     this.couponCodePlaceholder = "...";
+    /**
+     * The type of the button (primary or secondary) that will be used to copy the link.
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -205,6 +217,9 @@ export class CouponCode {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -256,6 +271,9 @@ export class CouponCode {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement."
       },
@@ -470,12 +488,158 @@ export class CouponCode {
       "reflect": false,
       "defaultValue": "\"...\""
     },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Border color of share link container (default is set to 1px solid transparent)"
+      },
+      "attribute": "border-color",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the text and copy icon"
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The border radius on the share link container (in pixels)"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "buttonType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\"",
+        "resolved": "\"primary\" | \"secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"primary\", \"secondary\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\"]",
+            "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Background color of share link container"
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<CouponCodeViewProps>",
-        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -514,6 +678,11 @@ function useDemoCouponCode(props) {
     error: false,
     couponCodePlaceholder: props.couponCodePlaceholder,
     couponCodeLabel: props.couponCodeLabel,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility

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

@@ -3,14 +3,23 @@ import { createStyleSheet } from "../../styling/JSS";
 export function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
-      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-right": props.borderless
+          ? "none"
+          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+      };
     }
     else {
-      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-bottom": props.borderless
+          ? "none"
+          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+      };
     }
   };
   const style = {
     LayoutContainer: {
+      background: props.backgroundColor,
       display: "contents",
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
@@ -26,11 +35,10 @@ export function DividedLayoutView(props, children) {
     flex: 1;
     box-sizing: border-box;
     flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
+    background-color: var(--sqm-portal-background);
+    color: var(--sqm-text);
     overflow-x: clip;
-    ${props.direction === "column"
-    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
+    ${props.direction === "column" ? "width: 100%; max-width: 100%" : ""}
     ${props.contentAreaWidth !== null
     ? `max-width: ${props.contentAreaWidth} !important;`
     : ""}

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

@@ -7,15 +7,24 @@ import { getProps } from "../../utils/utils";
  * Spacing is left up to the child
  *
  * @uiName Divided Layout
+ * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section","sqb-program-section","sqb-conditional-section"]
+ * @exampleGroup Layout
  * @slots [{"name":"", "title":"Layout Content"}]
  */
 export class DividedLayout {
   constructor() {
     /**
+     * @undocumented
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border style
      */
     this.dividerStyle = "1px solid #EAEAEA";
+    /**
+     * Background color of the divider
+     * @uiName Divider Background Color
+     * @uiWidget color
+     */
+    this.backgroundColor = "#FFFFFF";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -90,14 +99,64 @@ export class DividedLayout {
       "optional": false,
       "docs": {
         "tags": [{
+            "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.",
+            "name": "undocumented"
+          }, {
             "text": "Border style",
             "name": "uiName"
           }],
-        "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color."
+        "text": ""
       },
       "attribute": "divider-style",
       "reflect": false,
       "defaultValue": "\"1px solid #EAEAEA\""
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Divider Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Background color of the divider"
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"#FFFFFF\""
+    },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Divider Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Color of the divider (defaults to default text color if none is set)"
+      },
+      "attribute": "border-color",
+      "reflect": false
     }
   }; }
 }

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

@@ -32,7 +32,7 @@ const EditProfileView = (props) => {
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
           h("sl-button", { onClick: () => {
               callbacks.setShowEdit(false);
-            }, exportparts: "base: defaultbutton-base" }, text.canceltext)))));
+            }, exportparts: "base: secondarybutton-base" }, text.canceltext)))));
   }
   return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     h("div", { class: "FormSection" },

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

@@ -8,7 +8,7 @@ export function EmptyStateView(props) {
       h("sqm-text", { slot: "label" },
         h("p", { part: "header-text" }, emptyStateHeader)),
       h("sqm-text", { slot: "content" },
-        h("p", { part: "description-text", innerHTML: "", style: { color: "var(--sl-color-gray-500)" } }, intl.formatMessage({
+        h("p", { part: "description-text" }, intl.formatMessage({
           id: "emptyStateText",
           defaultMessage: emptyStateText,
         }, {

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

@@ -23,7 +23,7 @@ export const FullStackSuccess = () => {
     h("div", { class: "AlertContent" },
       h("div", { part: "successalert-text" }, "Title"),
       h("div", { part: "successalert-subtext" }, "Body text."),
-      h("sl-button", { type: "default", exportparts: "base: defaultbutton-base", onClick: () => {
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => {
           console.log("click");
         } }, "Primary Action"),
       h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {

package/dist/collection/components/sqm-header-logo/sqm-header-logo.js

@@ -2,6 +2,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Prop } from "@stencil/core";
 /**
  * @uiName Header Logo
+ * @validParents ["sqm-portal-frame","div","sqm-brand"]
  */
 export class HeroImage {
   constructor() {

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

@@ -4,6 +4,7 @@ import { HeroView } from "./sqm-hero-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Hero Layout
+ * @validParents ["sqm-portal-container","sqm-brand","div"]
  * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
  * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" min-height="0" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
  * @exampleGroup Layout

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

@@ -38,7 +38,7 @@ export function HeroImageView(props, children) {
         props.paddingImage +
         "))",
       textAlign: "center",
-      color: props.textColor || "var(--sl-color-neutral-0)",
+      color: props.textColor || "var(--sqm-text)",
       lineHeight: "var(--sl-line-height-dense)",
       "@media (max-width: 599px)": {
         padding: "var(--sl-spacing-" + props.paddingText + ")",
@@ -49,7 +49,7 @@ export function HeroImageView(props, children) {
       background: props.backgroundColor || "",
       flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
@@ -119,7 +119,7 @@ export function HeroImageView(props, children) {
       h("div", { class: sheet.classes.Overlay, part: "sqm-overlay" },
         props.header && (h("div", { class: sheet.classes.Header }, props.header)),
         props.description && (h("div", { class: sheet.classes.Description }, props.description)),
-        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));

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

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { HeroImageView } from "./sqm-hero-image-view";
 /**
  * @uiName Hero Image
+ * @validParents ["sqm-portal-container","sqm-brand", "div"]
  * @exampleGroup Common Components
  * @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>
@@ -12,6 +13,7 @@ export class HeroImage {
   constructor() {
     /**
      * @uiName Overlay opacity
+     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -19,11 +21,13 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      * @uiEnumNames ["Overlay", "Two-column"]
+     * @uiGroup Style
      */
     this.layout = "overlay";
     /**
      * @uiName Image percentage
      * @uiType number
+     * @uiGroup Style
      */
     this.imagePercentage = 50;
     /**
@@ -31,6 +35,7 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -38,6 +43,7 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
+     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -50,6 +56,7 @@ export class HeroImage {
      * @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"]
+     * @uiGroup Style
      */
     this.paddingText = "xxxx-large";
     /**
@@ -57,8 +64,18 @@ export class HeroImage {
      * @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"]
+     * @uiGroup Style
      */
     this.paddingImage = "none";
+    /**
+     * The type of the button (primary or secondary) that will be used to copy the link.
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -115,6 +132,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -135,6 +155,9 @@ export class HeroImage {
         "tags": [{
             "text": "Overlay opacity",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -162,6 +185,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -188,6 +214,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -217,6 +246,9 @@ export class HeroImage {
           }, {
             "text": "[\"Overlay\", \"Two-column\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -241,6 +273,9 @@ export class HeroImage {
           }, {
             "text": "number",
             "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -271,6 +306,9 @@ export class HeroImage {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -301,6 +339,9 @@ export class HeroImage {
           }, {
             "text": "[\"Top\", \"Bottom\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -443,6 +484,9 @@ export class HeroImage {
           }, {
             "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -478,12 +522,48 @@ export class HeroImage {
           }, {
             "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
       "attribute": "padding-image",
       "reflect": false,
       "defaultValue": "\"none\""
+    },
+    "buttonType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\"",
+        "resolved": "\"primary\" | \"secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"primary\", \"secondary\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\"]",
+            "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"primary\""
     }
   }; }
 }

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>