@saasquatch/mint-components 1.12.1-14 → 1.12.1-15

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
-require('./global-02e50f09.js');
-const index_module = require('./index.module-df530553.js');
+require('./global-41c0a650.js');
+const index_module = require('./index.module-d8342710.js');
 require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
 const GenericTableView = require('./GenericTableView-80d7642e.js');
-require('./useChildElements-e0d44916.js');
+require('./useChildElements-57e11069.js');
 const luxon = require('./luxon-05098e19.js');
 require('./utils-6847bc06.js');
 require('./sqm-text-span-view-e1cd9bd3.js');
@@ -21,18 +21,17 @@ const emailRegistrationView = require('./email-registration-view-248652bb.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-c9f18d96.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-921704fb.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-a125ec5f.js');
-const sqmCheckboxFieldView = require('./sqm-checkbox-field-view-e0a31f2a.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-292b5bf4.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-5f7886d6.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-56fabc90.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-969c49ed.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-fde54e35.js');
-require('./utilities-cec9dd36.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-7c9c60a6.js');
+require('./utilities-7df0fdad.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-621348a6.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f329ed.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
-const ShadowViewAddon = require('./ShadowViewAddon-63b78308.js');
+const ShadowViewAddon = require('./ShadowViewAddon-9aee7df5.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-e3b03a00.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-41a0b707.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -2541,36 +2540,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.$n.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.$n.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.$n.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.$n.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.$n.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.$n.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.$n.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.$n.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.$n.forward() }, "Forward"),
+    index.h("button", { onClick: () => index_module.jn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.jn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.jn.push("/bar") }, "/bar"),
+    index.h("button", { onClick: () => index_module.jn.push("/baz/bang") }, "/baz/bang"),
+    index.h("button", { onClick: () => index_module.jn.push("/refer") }, "/refer"),
+    index.h("button", { onClick: () => index_module.jn.push("/refer/1") }, "/refer/1"),
+    index.h("button", { onClick: () => index_module.jn.push("/refer/2") }, "/refer/2"),
+    index.h("button", { onClick: () => index_module.jn.back() }, "Back"),
+    index.h("button", { onClick: () => index_module.jn.forward() }, "Forward"),
     index.h("hr", null),
     index.h("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.$n.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.$n.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.$n.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.$n.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.$n.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.$n.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.$n.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.$n.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.$n.forward() }, "Forward"),
+    index.h("button", { onClick: () => index_module.jn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.jn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.jn.push("/bar") }, "/bar"),
+    index.h("button", { onClick: () => index_module.jn.push("/baz/bang") }, "/baz/bang"),
+    index.h("button", { onClick: () => index_module.jn.push("/refer") }, "/refer"),
+    index.h("button", { onClick: () => index_module.jn.push("/refer/1") }, "/refer/1"),
+    index.h("button", { onClick: () => index_module.jn.push("/refer/2") }, "/refer/2"),
+    index.h("button", { onClick: () => index_module.jn.back() }, "Back"),
+    index.h("button", { onClick: () => index_module.jn.forward() }, "Forward"),
     index.h("hr", null),
     index.h("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.$n.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.$n.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.jn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.jn.push("/foo") }, "/foo"),
     index.h("hr", null),
     index.h("div", { style: { display: "flex", justifyContent: "space-around" } },
       index.h("sqm-router", { innerHTML: `<template path="/">
@@ -2584,7 +2583,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = stencilHooks_module.useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    index_module.$n.push(e.target.value);
+    index_module.jn.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -2748,8 +2747,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.Sn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.$n.back }, "Go Back")));
+        index.h("strong", null, (_a = index_module.kn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    index.h("button", { onClick: index_module.jn.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -2773,8 +2772,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.Sn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.$n.back }, "Go Back")));
+        index.h("strong", null, (_a = index_module.kn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    index.h("button", { onClick: index_module.jn.back }, "Go Back")));
 };
 
 const PortalFrame = /*#__PURE__*/Object.freeze({
@@ -4102,16 +4101,16 @@ function DefaultTemplateView(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      index.h("button", { onClick: () => index_module.$n.push("/") }, "Dashboard"),
-      props.leadSubmit && (index.h("button", { onClick: () => index_module.$n.push("/refer") }, "Submit a Referral")),
-      index.h("button", { onClick: () => index_module.$n.push("/activity") }, "Activity"),
-      index.h("button", { onClick: () => index_module.$n.push("/editProfile") }, "Edit Profile"),
-      index.h("button", { onClick: () => index_module.$n.push("/login") }, "Login"),
-      index.h("button", { onClick: () => index_module.$n.push("/register") }, "Register"),
-      index.h("button", { onClick: () => index_module.$n.push("/emailVerification") }, "Email Verification"),
-      index.h("button", { onClick: () => index_module.$n.push("/verifyEmail") }, "Verify Email"),
-      index.h("button", { onClick: () => index_module.$n.push("/forgotPassword") }, "Forgot Password"),
-      index.h("button", { onClick: () => index_module.$n.push("/resetPassword") }, "Reset Password")),
+      index.h("button", { onClick: () => index_module.jn.push("/") }, "Dashboard"),
+      props.leadSubmit && (index.h("button", { onClick: () => index_module.jn.push("/refer") }, "Submit a Referral")),
+      index.h("button", { onClick: () => index_module.jn.push("/activity") }, "Activity"),
+      index.h("button", { onClick: () => index_module.jn.push("/editProfile") }, "Edit Profile"),
+      index.h("button", { onClick: () => index_module.jn.push("/login") }, "Login"),
+      index.h("button", { onClick: () => index_module.jn.push("/register") }, "Register"),
+      index.h("button", { onClick: () => index_module.jn.push("/emailVerification") }, "Email Verification"),
+      index.h("button", { onClick: () => index_module.jn.push("/verifyEmail") }, "Verify Email"),
+      index.h("button", { onClick: () => index_module.jn.push("/forgotPassword") }, "Forgot Password"),
+      index.h("button", { onClick: () => index_module.jn.push("/resetPassword") }, "Reset Password")),
     index.h("br", null),
     index.h("div", { innerHTML: states.previewTemplate })));
 }
@@ -8192,10 +8191,73 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
   Success: Success
 });
 
+// import scenario from "./sqm-marketing-emails-checkbox.feature";
+const ChangeMarketing_stories = {
+  title: "Components/Change Marketing Emails Status",
+};
+const defaultProps$9 = {
+  states: {
+    success: false,
+    loading: false,
+    submitDisabled: false,
+    formState: {
+      marketingEmailOptIn: false,
+      errors: null,
+      error: "",
+    },
+    user: {
+      id: "zach",
+      accountId: "zach",
+      marketingEmailOptIn: false,
+    },
+    text: {
+      emailPreferencesHeader: "Email preferences",
+      marketingCheckboxLabel: "I want to receive marketing emails and promotions for this referral program from impact.com",
+      submitChangeButtonText: "Save",
+      successMessage: "Opt-in preference has been changed.",
+    },
+  },
+  callbacks: {
+    onSubmit: (props) => console.log(props),
+    setChecked: (value) => console.log(value),
+  },
+};
+const Default$a = () => {
+  return index.h("sqm-portal-change-marketing", null);
+};
+const Loading$2 = () => {
+  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: { ...defaultProps$9.states, loading: true } })));
+};
+const Error$3 = () => {
+  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: {
+      ...defaultProps$9.states,
+      formState: {
+        ...defaultProps$9.states.formState,
+        errors: { error: true },
+        error: "An error string",
+      },
+    } })));
+};
+const Success$1 = () => {
+  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: {
+      ...defaultProps$9.states,
+      success: true,
+    } })));
+};
+
+const ChangeMarketing = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ChangeMarketing_stories,
+  Default: Default$a,
+  Loading: Loading$2,
+  Error: Error$3,
+  Success: Success$1
+});
+
 const PortalProfile_stories = {
   title: "Components/Microsite Profile",
 };
-const defaultProps$9 = {
+const defaultProps$a = {
   states: {
     success: false,
     loading: false,
@@ -8411,22 +8473,22 @@ const successProps$4 = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$a = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$9));
+const Default$b = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$a));
 const DefaultNoCountry = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, noCountry));
-const Loading$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$7));
+const Loading$3 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$7));
 const Disabled$1 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, disabledProps));
-const Error$3 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, errorProps$8));
-const Success$1 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, successProps$4));
+const Error$4 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, errorProps$8));
+const Success$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, successProps$4));
 
 const PortalProfile = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalProfile_stories,
-  Default: Default$a,
+  Default: Default$b,
   DefaultNoCountry: DefaultNoCountry,
-  Loading: Loading$2,
+  Loading: Loading$3,
   Disabled: Disabled$1,
-  Error: Error$3,
-  Success: Success$1
+  Error: Error$4,
+  Success: Success$2
 });
 
 const column = "@author:noah\n@owner:noah\nFeature: Referral Table User Column\n\n    Shows the same custom content for each referral\n\n    Background:\n        Given the column in included in the referral table\n\n    @motivating\n    Scenario: The title of the date column is configurable\n        Given the \"column-title\" prop is set to \"My column title\"\n        Then the date column is shown with \"My column title\"\n\n    @motivating\n    Scenario: The same custom content is shown for each referral\n        Given there is at least one referral\n        Then for each referral custom content is shown\n        And the custom content is provided as slot content";
@@ -10381,7 +10443,7 @@ const ProgramMenu = /*#__PURE__*/Object.freeze({
 const PoweredByImg_stories = {
   title: "Powered By",
 };
-const Default$b = () => {
+const Default$c = () => {
   return index.h(ShadowViewAddon.PoweredByImg, null);
 };
 const CustomColor = () => {
@@ -10394,7 +10456,7 @@ const CustomWidthAndHeight = () => {
 const PoweredByImg = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PoweredByImg_stories,
-  Default: Default$b,
+  Default: Default$c,
   CustomColor: CustomColor,
   CustomWidthAndHeight: CustomWidthAndHeight
 });
@@ -10407,7 +10469,7 @@ const PortalFooter_stories = {
     scenario: scenario$f,
   },
 };
-const defaultProps$a = {
+const defaultProps$b = {
   supportEmail: "support@example.com",
   supportText: "For program support, contact {email}",
   hidePoweredBy: false,
@@ -10417,12 +10479,12 @@ const defaultProps$a = {
   paddingBottom: "large",
   paddingLeft: "large",
 };
-const DefaultFooter = () => index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$a));
-const FooterWithTerms = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$a, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
-const FooterWithFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$a, { faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterWithTermsAndFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$a, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterNoPoweredBy = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$a, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
-const FooterNoSupportText = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$a, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
+const DefaultFooter = () => index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b));
+const FooterWithTerms = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
+const FooterWithFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterWithTermsAndFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterNoPoweredBy = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
+const FooterNoSupportText = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
 
 const PortalFooter = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10740,7 +10802,7 @@ const CheckboxField_stories = {
     scenario: scenario$j,
   },
 };
-const defaultProps$b = {
+const defaultProps$c = {
   states: {
     registrationFormState: {
       validationErrors: {},
@@ -10781,32 +10843,32 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$c = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b))));
-const DefaultChecked = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
-    ...defaultProps$b.states,
+const Default$d = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c))));
+const DefaultChecked = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
+    ...defaultProps$c.states,
     checked: true,
   } }))));
-const CustomLabel = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b, { content: {
-    ...defaultProps$b.content,
+const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { content: {
+    ...defaultProps$c.content,
     checkboxLabel: "I Agree",
   } }))));
-const Error$4 = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
-    ...defaultProps$b.states,
+const Error$5 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
+    ...defaultProps$c.states,
     registrationFormState: {
       validationErrors: {
         agree: "Must be checked",
       },
     },
   } }))));
-const CustomError = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$b, { states: {
-    ...defaultProps$b.states,
+const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
+    ...defaultProps$c.states,
     registrationFormState: {
       validationErrors: {
         agree: "Must be checked",
       },
     },
   }, content: {
-    ...defaultProps$b.content,
+    ...defaultProps$c.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
 const TermsAndConditions$2 = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
@@ -10836,17 +10898,17 @@ const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(ShadowV
 const CheckboxField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CheckboxField_stories,
-  Default: Default$c,
+  Default: Default$d,
   DefaultChecked: DefaultChecked,
   CustomLabel: CustomLabel,
-  Error: Error$4,
+  Error: Error$5,
   CustomError: CustomError,
   TermsAndConditions: TermsAndConditions$2,
   TermsAndConditionsCustomLabel: TermsAndConditionsCustomLabel,
   TermsAndConditionsLongCustomLabel: TermsAndConditionsLongCustomLabel
 });
 
-const scenario$k = "@owner:zach\n@author:zach\nFeature: Marketing Emails Checkbox\n\n    A checkbox that is used to opt in for referral program marketing emails.\n\n    Background: A user is on the portal registration page\n        Given a user is viewing the \"/register\"\n        And \"/register\" contains the registration form\n        And the registration form has the following fields\n            | fields                    |\n            | first name                |\n            | last name                 |\n            | email                     |\n            | password                  |\n            | Marketing Emails Checkbox |\n\n    @motivating\n    Scenario: Checkbox is optional by default\n        Given the user is filling out the registration form\n        And the name fields have valid input\n        And the email field has valid input\n        And the password field has valid input\n        And the checkbox is not checked\n        When they try to register\n        Then the form is submitted\n        And there is no error for the checkbox\n\n    Scenario: The form field name is provided by default\n        Given the customer has added a marketing emails checkbox to their registration form\n        Then the field name is automatically set to \"marketingEmailOptIn\"\n        And the name is not configurable";
+const scenario$k = "@owner:zach\n@author:zach\nFeature: Marketing Emails Checkbox\n\n    A checkbox that is used to opt in for marketing emails.\n\n    Background: The microsite registration form contains a marketing emails checkbox\n\n        Scenario: The registration form can be configured to include a marketing emails checkbox\n            Given a user is viewing the \"/register\"\n            And \"/register\" contains the registration form\n            And they have added a marketing emails checkbox to the form in the content editor\n            Then the registration form has the following fields\n                | fields                    |\n                | first name                |\n                | last name                 |\n                | email                     |\n                | password                  |\n                | Marketing Emails Checkbox |\n\n\n        Scenario: The user can opt in to marketing emails\n            Given the user is filling out the registration form\n            And the fields have valid input\n            And the marketing emails checkbox is checked\n            When they try to register\n            Then the form is submitted\n            And there are no errors\n            And the \"marketingEmailOptIn\" value is set to true\n            And the user is opted in to marketing emails\n\n\n        @motivating\n        Scenario: Checkbox is optional by default\n            Given the user is filling out the registration form\n            And the name fields have valid input\n            And the email field has valid input\n            And the password field has valid input\n            And the checkbox is not checked\n            When they try to register\n            Then the form is submitted\n            And there is no error for the checkbox\n\n        Scenario: The form field name is provided by default\n            Given the customer has added a marketing emails checkbox to their registration form\n            Then the field name is automatically set to \"marketingEmailOptIn\"\n            And the name is not configurable";
 
 const MarketingEmailsCheckbox_stories = {
   title: "Components/Marketing Emails Checkbox",
@@ -10854,14 +10916,14 @@ const MarketingEmailsCheckbox_stories = {
     scenario: scenario$k,
   },
 };
-const Default$d = () => {
+const Default$e = () => {
   return index.h("sqm-marketing-emails-checkbox", null);
 };
 
 const MarketingEmailsCheckbox = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': MarketingEmailsCheckbox_stories,
-  Default: Default$d
+  Default: Default$e
 });
 
 const UseCheckboxField_stories = {
@@ -10941,7 +11003,7 @@ const UseCheckboxField = /*#__PURE__*/Object.freeze({
 const DropdownField_stories = {
   title: "Components/Dropdown Field",
 };
-const defaultProps$c = {
+const defaultProps$d = {
   states: {
     registrationFormState: {},
   },
@@ -10956,24 +11018,24 @@ const defaultProps$c = {
     ],
   },
 };
-const Default$e = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$c))));
-const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$c, { content: {
-    ...defaultProps$c.content,
+const Default$f = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d))));
+const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { content: {
+    ...defaultProps$d.content,
     dropdownLabel: "Pick your favorite",
   } }))));
-const Error$5 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$c, { states: {
-    ...defaultProps$c.states,
+const Error$6 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { states: {
+    ...defaultProps$d.states,
     registrationFormState: {
       validationErrors: {
         options: "Must select an option",
       },
     },
   } }))));
-const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$c, { content: {
-    ...defaultProps$c.content,
+const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { content: {
+    ...defaultProps$d.content,
     errorMessage: "An option must be selected to continue",
   }, states: {
-    ...defaultProps$c.states,
+    ...defaultProps$d.states,
     registrationFormState: {
       validationErrors: {
         options: "Must select an option",
@@ -10984,9 +11046,9 @@ const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFie
 const DropdownField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': DropdownField_stories,
-  Default: Default$e,
+  Default: Default$f,
   CustomLabel: CustomLabel$1,
-  Error: Error$5,
+  Error: Error$6,
   CustomError: CustomError$1
 });
 
@@ -11057,7 +11119,7 @@ const InputField_stories = {
     scenario: scenario$l,
   },
 };
-const defaultProps$d = {
+const defaultProps$e = {
   states: {
     registrationFormState: {
       validationErrors: {},
@@ -11094,21 +11156,21 @@ const defaultRegisterProps$1 = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$f = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$d));
-const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$d, { content: { ...defaultProps$d.content, fieldLabel: "My Label" } })));
-const Error$6 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$d, { states: {
-    ...defaultProps$d.states,
+const Default$g = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e));
+const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: { ...defaultProps$e.content, fieldLabel: "My Label" } })));
+const Error$7 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { states: {
+    ...defaultProps$e.states,
     registrationFormState: {
       validationErrors: {
         field: "Cannot be empty",
       },
     },
   } })));
-const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$d, { content: {
-    ...defaultProps$d.content,
+const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
+    ...defaultProps$e.content,
     errorMessage: "A value must be entered to continue",
   }, states: {
-    ...defaultProps$d.states,
+    ...defaultProps$e.states,
     registrationFormState: {
       validationErrors: {
         field: "Cannot be empty",
@@ -11116,27 +11178,27 @@ const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assi
     },
   } })));
 const DateType = () => {
-  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$d, { content: {
-      ...defaultProps$d.content,
+  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
+      ...defaultProps$e.content,
       fieldLabel: "Date",
       fieldType: "date",
     } })));
 };
 const TelType = () => {
-  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$d, { content: {
-      ...defaultProps$d.content,
+  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
+      ...defaultProps$e.content,
       fieldLabel: "Phone Number",
       fieldType: "tel",
     } })));
 };
 const RegistrationField = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
-    formData: index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$d)),
+    formData: index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e)),
   } })));
 const RegistrationFieldCustomLabel = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
-    formData: (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$d, { content: {
-        ...defaultProps$d.content,
+    formData: (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
+        ...defaultProps$e.content,
         fieldLabel: "Data",
       } }))),
   } })));
@@ -11144,9 +11206,9 @@ const RegistrationFieldCustomLabel = () => (index.h(ShadowViewAddon.PortalRegist
 const InputField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': InputField_stories,
-  Default: Default$f,
+  Default: Default$g,
   CustomLabel: CustomLabel$2,
-  Error: Error$6,
+  Error: Error$7,
   CustomError: CustomError$2,
   DateType: DateType,
   TelType: TelType,
@@ -11266,7 +11328,7 @@ const RedemptionError = StoryBase(ShadowViewAddon.redemptionError);
 const QueryError = StoryBase(ShadowViewAddon.queryError);
 const SuccessPromo = StoryBase(ShadowViewAddon.success);
 const SuccessVariableAndStepped = StoryBase(ShadowViewAddon.successVariable);
-const Loading$3 = StoryBase(ShadowViewAddon.loading);
+const Loading$4 = StoryBase(ShadowViewAddon.loading);
 const Empty$2 = StoryBase(ShadowViewAddon.empty);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
@@ -11288,7 +11350,7 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
   QueryError: QueryError,
   SuccessPromo: SuccessPromo,
   SuccessVariableAndStepped: SuccessVariableAndStepped,
-  Loading: Loading$3,
+  Loading: Loading$4,
   Empty: Empty$2
 });
 
@@ -13942,7 +14004,7 @@ const CopyButtonBelow$1 = () => {
     buttonStyle: "button-below",
   })));
 };
-const Error$7 = () => {
+const Error$8 = () => {
   const props = {
     copyString: "https://noah.example.com",
     disabled: true,
@@ -13963,7 +14025,7 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
   CustomTooltipDuration: CustomTooltipDuration,
   CopyButton: CopyButton$1,
   CopyButtonBelow: CopyButtonBelow$1,
-  Error: Error$7
+  Error: Error$8
 });
 
 // import scenario from "./ShareCode.feature";
@@ -13973,7 +14035,7 @@ const EmailRegistration_stories = {
   // scenario,
   },
 };
-const defaultProps$e = {
+const defaultProps$f = {
   states: {
     error: "",
     loading: false,
@@ -13992,59 +14054,59 @@ const defaultProps$e = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$g = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$e));
+const Default$h = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$f));
 const HasFirstNameLastName = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$e,
+  ...defaultProps$f,
   content: {
-    ...defaultProps$e.content,
+    ...defaultProps$f.content,
     includeName: true,
   },
 })));
 const WithSlots = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$e,
+  ...defaultProps$f,
   content: {
-    ...defaultProps$e.content,
+    ...defaultProps$f.content,
     topSlot: index.h("div", null, "Hello this is the top slot"),
     bottomSlot: index.h("div", null, "Hello this is the bottom slot"),
   },
 })));
 const NoBorder$1 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$e,
+  ...defaultProps$f,
   content: {
-    ...defaultProps$e.content,
+    ...defaultProps$f.content,
     hideBorder: true,
   },
 })));
 const BackgroundColor$2 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$e,
+  ...defaultProps$f,
   content: {
-    ...defaultProps$e.content,
+    ...defaultProps$f.content,
     backgroundColor: "aquamarine",
   },
 })));
-const Loading$4 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$e,
+const Loading$5 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
+  ...defaultProps$f,
   states: {
     error: "",
     loading: true,
   },
 })));
-const Error$8 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$e,
+const Error$9 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
+  ...defaultProps$f,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
   },
 })));
 const FraudError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$e,
+  ...defaultProps$f,
   states: {
     error: "FRAUD",
     loading: false,
   },
 })));
 const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$e,
+  ...defaultProps$f,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -14057,13 +14119,13 @@ const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationVi
 const EmailRegistration = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': EmailRegistration_stories,
-  Default: Default$g,
+  Default: Default$h,
   HasFirstNameLastName: HasFirstNameLastName,
   WithSlots: WithSlots,
   NoBorder: NoBorder$1,
   BackgroundColor: BackgroundColor$2,
-  Loading: Loading$4,
-  Error: Error$8,
+  Loading: Loading$5,
+  Error: Error$9,
   FraudError: FraudError,
   EmptyEmailError: EmptyEmailError
 });
@@ -14076,7 +14138,7 @@ const CouponCode_stories = {
     scenario: scenario$B,
   },
 };
-const defaultProps$f = {
+const defaultProps$g = {
   tooltiptext: "Copied to Clipboard",
   copyString: "THANKSJANE125uv125",
   open: false,
@@ -14101,43 +14163,43 @@ const TextAlignRight$2 = () => {
   return index.h("sqm-coupon-code", { textAlign: "right" });
 };
 const CopyButton$2 = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$f, { buttonStyle: "button-outside" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-outside" })));
 };
 const CopyButtonCustomLabel = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$f, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
 };
 const CopyButtonBelow$2 = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$f, { buttonStyle: "button-below" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-below" })));
 };
 const CopyButtonBelowCustomLabel = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$f, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
 };
-const Loading$5 = () => {
-  return index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { loading: true }));
+const Loading$6 = () => {
+  return index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { loading: true }));
 };
 const CopyButtonLoading = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { buttonStyle: "button-outside", loading: true })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { buttonStyle: "button-outside", loading: true })));
 };
 const CopyButtonBelowLoading = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { buttonStyle: "button-below", loading: true })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { buttonStyle: "button-below", loading: true })));
 };
 const ErrorGeneric = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
 };
 const ErrorPending = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "info", error: true, errorText: "Your code will be available on April 24, 2023. Mark your calendar and come back then to redeem your reward!" })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "info", error: true, errorText: "Your code will be available on April 24, 2023. Mark your calendar and come back then to redeem your reward!" })));
 };
 const ErrorFullfillment = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
 };
 const ErrorCancelled = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "warning", error: true, errorText: "This code has been cancelled. Please reach out to the Support team for help resolving this issue." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "This code has been cancelled. Please reach out to the Support team for help resolving this issue." })));
 };
 const ErrorExpired = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "warning", error: true, errorText: "Looks like this code has expired. Please reach out to the Support team for help resolving this issue." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "Looks like this code has expired. Please reach out to the Support team for help resolving this issue." })));
 };
 const ErrorRedeemed = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$f, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
 };
 
 const CouponCode$1 = /*#__PURE__*/Object.freeze({
@@ -14152,7 +14214,7 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
   CopyButtonCustomLabel: CopyButtonCustomLabel,
   CopyButtonBelow: CopyButtonBelow$2,
   CopyButtonBelowCustomLabel: CopyButtonBelowCustomLabel,
-  Loading: Loading$5,
+  Loading: Loading$6,
   CopyButtonLoading: CopyButtonLoading,
   CopyButtonBelowLoading: CopyButtonBelowLoading,
   ErrorGeneric: ErrorGeneric,
@@ -14171,21 +14233,21 @@ const LogoutCurrentUser_stories = {
     scenario: scenario$C,
   },
 };
-const defaultProps$g = {
+const defaultProps$h = {
   filledInEmailText: "Currently showing referral data for noah.clarke@saasquatch.com",
   onSwitchClick: () => console.log("clicked"),
   switchUserText: "not you?",
   loading: false,
   emailErrorText: "Error fetching email",
 };
-const Default$h = () => {
-  return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$g));
+const Default$i = () => {
+  return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$h));
 };
 
 const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LogoutCurrentUser_stories,
-  Default: Default$h
+  Default: Default$i
 });
 
 const scenario$D = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\t@ui\n\tScenario: Links can be opened in the same tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in the same tab\n\t\tAnd if the component is in an iFrame then the link is opened in the parent window not the iFrame\n\n\t@ui\n\tScenario: Links can be opened in a new tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in a new tab\n\t\tAnd if the component is in an iFrame then the link is still opened in a new tab\n\n\n\t@ui\n\tScenario: Props control the link and button text\n\t\tGiven the \"link\" prop is set to \"https://www.example.com\"\n\t\tAnd the \"buttonText\" prop is set to \"Click me!\"\n\t\tThen a button is shown with the text \"Click me!\"\n\t\tAnd when clicked the button opens https://www.example.com\n\n\t@ui\n\tScenario Outline: The button type can be set\n\t\tGiven the button type is set to <value>\n\t\tThen a <buttonType> is shown\n\t\tExamples:\n\t\t\t| value   | buttonType |\n\t\t\t| <null>  | primary    |\n\t\t\t| default | default    |\n\t\t\t| primary | primary    |\n\t\t\t| success | success    |\n\t\t\t| neutral | neutral    |\n\t\t\t| warning | warning    |\n\t\t\t| danger  | danger     |";
@@ -14196,22 +14258,22 @@ const LinkButton_stories = {
     scenario: scenario$D,
   },
 };
-const defaultProps$h = {
+const defaultProps$i = {
   link: "https://example.com",
   openInNewTab: false,
   buttonText: "Button Text",
 };
-const Default$i = () => {
-  return index.h("sqm-link-button", Object.assign({}, defaultProps$h));
+const Default$j = () => {
+  return index.h("sqm-link-button", Object.assign({}, defaultProps$i));
 };
 const OpenInNewTab = () => {
-  return (index.h("sqm-link-button", Object.assign({}, { ...defaultProps$h, openInNewTab: true })));
+  return (index.h("sqm-link-button", Object.assign({}, { ...defaultProps$i, openInNewTab: true })));
 };
 
 const LinkButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LinkButton_stories,
-  Default: Default$i,
+  Default: Default$j,
   OpenInNewTab: OpenInNewTab
 });
 
@@ -14221,7 +14283,7 @@ const CloseButton_stories = {
   // scenario,
   },
 };
-const defaultProps$i = {};
+const defaultProps$j = {};
 const containerStyles = {
   position: "relative",
   width: "500px",
@@ -14229,22 +14291,22 @@ const containerStyles = {
   border: "1px solid black",
   padding: "25px",
 };
-const Default$j = () => {
-  return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$i));
+const Default$k = () => {
+  return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j));
 };
 const InAContainer = () => {
   return (index.h("div", { style: containerStyles },
-    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$i))));
+    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j))));
 };
 const CustomColor$1 = () => {
   return (index.h("div", { style: containerStyles },
-    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$i, color: "blue" }))));
+    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$j, color: "blue" }))));
 };
 
 const CloseButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CloseButton_stories,
-  Default: Default$j,
+  Default: Default$k,
   InAContainer: InAContainer,
   CustomColor: CustomColor$1
 });
@@ -14434,17 +14496,17 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
 const RadioCard_stories = {
   title: "Components/Radio Card",
 };
-const defaultProps$j = {
+const defaultProps$k = {
   selected: false,
   title: "Card Title",
   description: "Description text goes here",
   icon: "apple",
 };
 const DefaultView$1 = () => {
-  return index.h(RadioCardView, Object.assign({}, defaultProps$j));
+  return index.h(RadioCardView, Object.assign({}, defaultProps$k));
 };
 const Selected = () => {
-  return index.h(RadioCardView, Object.assign({}, defaultProps$j, { selected: true }));
+  return index.h(RadioCardView, Object.assign({}, defaultProps$k, { selected: true }));
 };
 
 const RadioCard = /*#__PURE__*/Object.freeze({
@@ -14457,13 +14519,13 @@ const RadioCard = /*#__PURE__*/Object.freeze({
 const ProgressBar_stories = {
   title: "Components/Progress Bar",
 };
-const defaultProps$k = {
+const defaultProps$l = {
   progress: 2,
   goal: 4,
   steps: true,
 };
 const TaxAndPayoutsProgressBar = () => {
-  return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$k, { stageCount: 4, currentStage: 2 }));
+  return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$l, { stageCount: 4, currentStage: 2 }));
 };
 
 const ProgressBar$1 = /*#__PURE__*/Object.freeze({
@@ -14475,14 +14537,14 @@ const ProgressBar$1 = /*#__PURE__*/Object.freeze({
 const PayoutDetailsCard_stories = {
   title: "Components/Payout Details Card",
 };
-const Loading$6 = () => {
+const Loading$7 = () => {
   return (index.h("sqm-payout-details-card", { demoData: {
       states: {
         loading: true,
       },
     } }));
 };
-const Error$9 = () => {
+const Error$a = () => {
   return (index.h("sqm-payout-details-card", { demoData: {
       states: {
         error: true,
@@ -14522,8 +14584,8 @@ const PaypalPayout = () => {
 const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutDetailsCard_stories,
-  Loading: Loading$6,
-  Error: Error$9,
+  Loading: Loading$7,
+  Error: Error$a,
   NextPayout: NextPayout,
   PayoutToday: PayoutToday,
   ThresholdPayout: ThresholdPayout,
@@ -15145,7 +15207,7 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$k = `
+const Default$l = `
  // No CSS
 `;
 const Orangey = `
@@ -15179,7 +15241,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$k,
+  Default: Default$l,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -17858,6 +17920,7 @@ const stories = [
   PayoutDetailsCard,
   BankingInfoForm,
   NewPortalRegistrationForm,
+  ChangeMarketing,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {