@saasquatch/mint-components 1.6.8-0 → 1.6.8-2

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-5344b631.js');
-require('./use-callback-05714e23.js');
-require('./index.module-30d74cb5.js');
-const reRender = require('./re-render-6963789e.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+require('./use-callback-86e9ac75.js');
+require('./index.module-bd6e817a.js');
+const reRender = require('./re-render-1d12dfdd.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);
@@ -15,7 +15,7 @@ const TabView = ({}, children) => {
 const Tab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-5344b631.js');
-require('./use-callback-05714e23.js');
-const index_module = require('./index.module-30d74cb5.js');
-const reRender = require('./re-render-6963789e.js');
-const useChildElements = require('./useChildElements-161457a6.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+require('./use-callback-86e9ac75.js');
+const index_module = require('./index.module-bd6e817a.js');
+const reRender = require('./re-render-1d12dfdd.js');
+const useChildElements = require('./useChildElements-0a6ccd0f.js');
 const utils = require('./utils-6847bc06.js');
 
 const TabsView = ({ content, placement, }) => {
@@ -88,7 +88,7 @@ function useTabs() {
 const Tabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/{sqm-text-span-view-1acdf7e9.js → sqm-text-span-view-3c734dbb.js}

@@ -52,7 +52,7 @@ const vanillaStyle = `
     }
   `;
 function TextSpanView(props, children) {
-  return (index.h("span", { class: sheet.classes[props.type] },
+  return (index.h("span", { class: sheet.classes[props.type], part: "sqm-text-span" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-5344b631.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-1acdf7e9.js');
+const sqmTextSpanView = require('./sqm-text-span-view-3c734dbb.js');
 
 const Text = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   componentWillLoad() { }

package/dist/cjs/sqm-user-identifier-view-69b42b84.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  Container: {},
+};
+const vanillaStyle = `
+:host{
+  display: inline;   
+}
+`;
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function UserIdentifierView(props) {
+  const { userIdentificationText, switchUserLink, switchUserText } = props;
+  return (index.h("span", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    userIdentificationText,
+    " (",
+    index.h("a", { href: switchUserLink }, switchUserText),
+    ")"));
+}
+
+exports.UserIdentifierView = UserIdentifierView;

package/dist/cjs/sqm-user-identifier.cjs.entry.js

@@ -3,53 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const JSS = require('./JSS-8503a151.js');
+require('./JSS-8503a151.js');
 const utils = require('./utils-6847bc06.js');
-
-function ImageView(props) {
-  // Dependent on props, not feasiable to move out
-  const style = {
-    Container: {
-      display: "flex",
-      width: "100%",
-      justifyContent: props.alignment || "center",
-      background: props.backgroundColor || "",
-    },
-    Image: {
-      minHeight: props.minHeight || "100%",
-      width: "100%",
-      maxWidth: "max-content",
-      objectFit: "cover",
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
-    :host{
-      display: block;   
-    }
-  `;
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    index.h("div", { class: sheet.classes.Container },
-      index.h("img", { src: props.imageUrl, class: sheet.classes.Image }))));
-}
+const sqmUserIdentifierView = require('./sqm-user-identifier-view-69b42b84.js');
 
 const Image = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
-     * @uiName Position Alignment
-     * @uiType string
-     * @uiEnum ["left", "center", "right"]
-     * @uiEnumNames ["Left", "Center", "Right"]
+     * @required
+     * @uiName User Identification Text
+     */
+    this.userIdentificationText = "{email}";
+    /**
+     * @required
+     * @uiName Switch User Text
      */
-    this.alignment = "center";
+    this.switchUserText = "not you?";
   }
   render() {
-    return index.h(ImageView, Object.assign({}, utils.getProps(this)));
+    return index.h(sqmUserIdentifierView.UserIdentifierView, Object.assign({}, utils.getProps(this)));
   }
 };
 

package/dist/cjs/{stencil-hooks.module-5344b631.js → stencil-hooks.module-e4bf7f2d.js}

@@ -1114,14 +1114,17 @@ function c$1(){return (c$1=Object.assign||function(e){for(var t=1;t<arguments.le
 function s$2(){return index.getRenderingRef()}function l$1(){var e=s$2();return index.getElement(e)}function d$2(e,t){void 0===t&&(t={});var n=l$1();return h$1(n,e,t)}function m$2(e,t){var n=l$1();return y$1(n,e,t)}var p$1=browser("stencil-hook");function h$2(t){var r,u=index.getElement(t),c=(r=!1,new State(function(){p$1("Queue update on element",u),r||(r=!0,Promise.resolve().then(function(){p$1("Forced update on element",u),r=!1,index.forceUpdate(u);}));},u)),a=t.disconnectedCallback;if(!a)throw new Error("Stencil hooks requires `disconnectedCallback` to be defined (even if it's empty). This is because of how the Stencil compiler works internally");t.disconnectedCallback=function(){c.teardown(),v(a);};var i=t.connectedCallback;t.connectedCallback=function(){c.update(),v(i);};var f=t.render.bind(t);t.render=function(){var e=c.run(f);return c.runEffects(),e};}function v(e){"function"==typeof e&&e();}
 
 exports.browser = browser;
+exports.c = c;
 exports.commonjsGlobal = commonjsGlobal;
 exports.createCommonjsModule = createCommonjsModule;
 exports.d = d$2;
 exports.getAugmentedNamespace = getAugmentedNamespace;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
-exports.h = h$2;
+exports.h = h$1;
+exports.h$1 = h$2;
 exports.l = l$1;
 exports.m = m$2;
+exports.s = s$1;
 exports.useEffect = useEffect;
 exports.useMemo = useMemo;
 exports.useReducer = useReducer;

package/dist/cjs/{use-callback-05714e23.js → use-callback-86e9ac75.js}

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

package/dist/cjs/{useChildElements-161457a6.js → useChildElements-0a6ccd0f.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-5344b631.js');
-const index_module = require('./index.module-30d74cb5.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+const index_module = require('./index.module-bd6e817a.js');
 
 function useChildElements() {
   const host = index_module.R();

package/dist/cjs/usePasswordlessRegistration-9105faa4.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+const index_module = require('./index.module-bd6e817a.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
+
+function usePasswordlessRegistration() {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const cookie = new URLSearchParams(window.location.search);
+  const cookies = cookie === null || cookie === void 0 ? void 0 : cookie.get("_saasquatch");
+  console.log({ cookie });
+  const [request, { loading, errors, data }] = index_module.sn();
+  const [error, setError] = stencilHooks_module.useState("");
+  const submit = async (event) => {
+    var _a;
+    setError("");
+    let formData = event.detail.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.jsonpointer.set(formData, key, value);
+    });
+    const variables = {
+      firstName: formData.firstName,
+      lastName: formData.lastName,
+      email: formData.email,
+      ...(cookies ? { cookies } : {}),
+    };
+    const result = await request(variables);
+    if (result instanceof Error) {
+      if ((result === null || result === void 0 ? void 0 : result.message) || ((_a = result === null || result === void 0 ? void 0 : result["response"]) === null || _a === void 0 ? void 0 : _a["error"]))
+        setError("Network request failed.");
+      return;
+    }
+  };
+  const errorMessage = ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
+    error;
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+    },
+    callbacks: {
+      submit,
+    },
+  };
+}
+
+exports.usePasswordlessRegistration = usePasswordlessRegistration;

package/dist/cjs/{useReferralTable-e933351b.js → useReferralTable-259fc04d.js}

@@ -1,12 +1,11 @@
 'use strict';
 
-const index$1 = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-5344b631.js');
-const index_module = require('./index.module-30d74cb5.js');
-const reRender = require('./re-render-6963789e.js');
-const useChildElements = require('./useChildElements-161457a6.js');
-const luxon = require('./luxon-1b6e7276.js');
-const index = require('./index-e4027f09.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+const index_module = require('./index.module-bd6e817a.js');
+const reRender = require('./re-render-1d12dfdd.js');
+const useChildElements = require('./useChildElements-0a6ccd0f.js');
+const luxon = require('./luxon-53e983a6.js');
 
 const mockRewardData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());
@@ -157,7 +156,7 @@ const getMockData = () => {
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
-const GET_REFERRER_DATA = index.dist.gql `
+const GET_REFERRER_DATA = index_module.dist.gql `
   query getReferrals(
     $programId: ID
     $rewardFilter: RewardFilterInput
@@ -222,7 +221,7 @@ const GET_REFERRER_DATA = index.dist.gql `
     }
   }
 `;
-const GET_REFERRAL_DATA = index.dist.gql `
+const GET_REFERRAL_DATA = index_module.dist.gql `
   query getReferrals(
     $limit: Int!
     $offset: Int!
@@ -408,12 +407,12 @@ function useReferralTable(props, emptyElement, loadingElement) {
     // show the referrer row before any other rows
     let referrerRow;
     if (showReferrerRow && states.currentPage === 0) {
-      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale, index$1.h)));
+      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale, index.h)));
       referrerRow = await Promise.all(referrerPromise);
     }
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, locale, index$1.h)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, locale, index.h)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -501,7 +500,7 @@ async function tryMethod(c, callback) {
       debug("label promise failed", e);
     }
     debug("label promise failed", e);
-    return index$1.h("span", null);
+    return index.h("span", null);
   }
   try {
     return await renderPromise;
@@ -511,8 +510,8 @@ async function tryMethod(c, callback) {
     // This should not happen so we fail fast
     debug("Error rendering label", e);
     const userError = generateUserError(e);
-    return (index$1.h("details", null,
-      index$1.h("summary", null, "Error"),
+    return (index.h("details", null,
+      index.h("summary", null, "Error"),
       userError));
   }
 }

package/dist/cjs/{useRegistrationFormState-5f21a453.js → useRegistrationFormState-ed30c0e6.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-5344b631.js');
-const index_module = require('./index.module-30d74cb5.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+const index_module = require('./index.module-bd6e817a.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {

package/dist/collection/collection-manifest.json

@@ -24,6 +24,7 @@
     "./components/sqm-input-field/sqm-input-field.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
+    "./components/sqm-link-button/sqm-link-button.js",
     "./components/sqm-name-fields/sqm-name-fields.js",
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
@@ -59,6 +60,7 @@
     "./components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-status-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-user-column.js",
+    "./components/sqm-referred-registration/sqm-referred-registration.js",
     "./components/sqm-rewards-table/sqm-rewards-table.js",
     "./components/sqm-rewards-table/cells/sqm-rewards-table-customer-note-cell.js",
     "./components/sqm-rewards-table/cells/sqm-rewards-table-date-cell.js",

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

@@ -35,10 +35,10 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export const AssetCardView = (props) => {
   const { text: { titleText }, imgUrl, } = props;
-  return (h("div", { class: sheet.classes.CardContainer },
+  return (h("div", { class: sheet.classes.CardContainer, part: "sqm-asset-card-container" },
     h("style", { type: "text/css" }, styleString),
     h("div", { class: sheet.classes.TextContainer },
-      h("p", { class: sheet.classes.Title }, titleText),
+      h("p", { class: sheet.classes.Title, part: "sqm-asset-card-title" }, titleText),
       h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", class: `bi bi-download ${sheet.classes.Icon}`, viewBox: "0 0 16 16" },
         h("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
         h("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" }))),

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

@@ -47,7 +47,7 @@ export function CheckboxFieldView(props) {
   var _a, _b, _c;
   const { states, content, callbacks } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-checkbox-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -1,10 +1,17 @@
 import { h } from "@stencil/core";
+import { CopyTextView } from "../views/copy-text-view";
 export default {
   title: "Components/Coupon Code",
   parameters: {
   // scenario,
   },
 };
+const defaultProps = {
+  tooltiptext: "Copied to Clipboard",
+  copyString: "test",
+  open: false,
+  copyButtonLabel: "Copy Coupon",
+};
 export const CouponCode = () => {
   return h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard" });
 };
@@ -17,6 +24,9 @@ export const TextAlignCenter = () => {
 export const CopyButton = () => {
   return h("sqm-coupon-code", { isCopyIcon: false });
 };
+export const CopyButtonInside = () => {
+  return (h(CopyTextView, Object.assign({}, defaultProps, { buttonOutside: false, isCopyIcon: false })));
+};
 export const CustomTooltipDuration = () => {
   return (h("sqm-coupon-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
 };

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

@@ -36,6 +36,18 @@ export class CouponCode {
      * @uiName Copy icon
      */
     this.isCopyIcon = true;
+    /**
+     * Set copy button label
+     *
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Coupon";
+    /**
+     * Set the copy button outside the field
+     *
+     * @uiName Copy button outside
+     */
+    this.buttonOutside = true;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -156,12 +168,54 @@ export class CouponCode {
       "reflect": false,
       "defaultValue": "true"
     },
+    "copyButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Copy button label",
+            "name": "uiName"
+          }],
+        "text": "Set copy button label"
+      },
+      "attribute": "copy-button-label",
+      "reflect": false,
+      "defaultValue": "\"Copy Coupon\""
+    },
+    "buttonOutside": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Copy button outside",
+            "name": "uiName"
+          }],
+        "text": "Set the copy button outside the field"
+      },
+      "attribute": "is-button-outside",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ copyString?: string; open?: boolean; disabled?: boolean; tooltiptext?: string; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; onClick?: () => void; }",
+        "resolved": "{ copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; buttonOutside?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -196,6 +250,8 @@ function useDemoCouponCode(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
+    buttonOutside: props.buttonOutside,
+    copyButtonLabel: props.copyButtonLabel,
     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

@@ -42,7 +42,7 @@ export function DividedLayoutView(props, children) {
   `;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.LayoutContainer },
+  return (h("div", { class: sheet.classes.LayoutContainer, part: "sqm-layout-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -36,7 +36,7 @@ export function DropdownFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-dropdown-field-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -5,8 +5,8 @@ const EditProfileView = (props) => {
   const { text } = states;
   const { errors } = states.formState;
   if (states.showEdit) {
-    return (h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}` },
-      h("h2", { style: {
+    return (h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-edit-profile-container" },
+      h("h2", { part: "sqm-edit-profile-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           margin: "0px",
           textAlign: "center",
@@ -34,9 +34,9 @@ const EditProfileView = (props) => {
               callbacks.onSubmit(e);
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext)))));
   }
-  return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}` },
+  return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-edit-profile-container" },
     h("div", { class: "FormSection" },
-      h("h2", { style: {
+      h("h2", { part: "sqm-edit-profile-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           marginBottom: "0px",
           textAlign: "center",

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText } = props;
-  return (h("sqm-portal-container", { padding: "large", gap: "medium" },
+  return (h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-empty-container" },
     h("sqm-image", { "image-url": emptyStateImage }),
     h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },

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

@@ -21,7 +21,7 @@ export class HeroImage {
   disconnectedCallback() { }
   render() {
     return (h(Host, null,
-      h("a", { href: this.nextPage },
+      h("a", { href: this.nextPage, part: "sqm-header-logo-link" },
         h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
   }
   static get is() { return "sqm-header-logo"; }

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

@@ -119,11 +119,11 @@ export function HeroView(props) {
   
 `;
   // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-hero-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-hero-two-col-container" },
+      h("div", { part: "sqm-hero-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      h("div", { part: "sqm-hero-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { part: "sqm-hero-primary-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }

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

@@ -107,7 +107,7 @@ export function HeroImageView(props, children) {
   :host{
     display: block;
   }`;
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-hero-image-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
@@ -115,7 +115,7 @@ export function HeroImageView(props, children) {
     props.layout === "columns" && ColumnView()));
   function OverlayView() {
     return (h("div", { class: sheet.classes.Background },
-      h("div", { class: sheet.classes.Overlay },
+      h("div", { class: sheet.classes.Overlay, part: "sqm-hero-image-overlay-container" },
         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
@@ -127,11 +127,11 @@ export function HeroImageView(props, children) {
     return (h("div", null,
       h("div", { class: sheet.classes.Column },
         h("div", { class: "image-area" },
-          h("img", { class: sheet.classes.Image, src: props.imageUrl })),
-        h("div", { class: "text-area" },
-          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
+          h("img", { class: sheet.classes.Image, src: props.imageUrl, part: "sqm-hero-image" })),
+        h("div", { class: "text-area", part: "sqm-hero-image-text-area" },
+          props.header && (h("div", { class: sheet.classes.Header, part: "sqm-hero-image-header" }, props.header)),
+          props.description && (h("div", { class: sheet.classes.Description, part: "sqm-hero-image-description" }, props.description)),
+          props.buttonText && (h("sl-button", { exportparts: "base: sqm-hero-image-btn", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
               ? window.open(props.buttonLink)
               : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
   }

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

@@ -27,6 +27,6 @@ export function ImageView(props) {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", { class: sheet.classes.Container },
+    h("div", { class: sheet.classes.Container, part: "sqm-image-container" },
       h("img", { part: "sqm-image", src: props.imageUrl, class: sheet.classes.Image }))));
 }

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

@@ -23,7 +23,7 @@ export function InputFieldView(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { states, content } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
+  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-input-field-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),