@saasquatch/mint-components 1.13.2 → 1.13.3

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js

@@ -46,8 +46,8 @@ export class PortalEmailVerification {
      */
     this.verificationResentMessage = "Your verification email has been resent successfully";
     /**
-     * @uiName Network error message
      * Displayed when your verification email fails to send due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while verifying your password. Please refresh the page.";
     withHooks(this);
@@ -236,10 +236,10 @@ export class PortalEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Network error message\nDisplayed when your verification email fails to send due to a network error. The participant can try refreshing the page.",
+            "text": "Network error message",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed when your verification email fails to send due to a network error. The participant can try refreshing the page."
       },
       "attribute": "network-error-message",
       "reflect": false,

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

@@ -40,8 +40,8 @@ export class PortalForgotPassword {
      */
     this.loginText = "Sign In";
     /**
-     * @uiName Network error message
      * Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while loading this page. Please refresh the page.";
     /**
@@ -215,10 +215,10 @@ export class PortalForgotPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Network error message\nDisplayed when the forgot password action fails due to a network error. The participant can try refreshing the page.",
+            "text": "Network error message",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page."
       },
       "attribute": "network-error-message",
       "reflect": false,

package/dist/collection/components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.js

@@ -778,7 +778,7 @@ export class PortalGoogleRegistrationForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegistrationFormViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; emailOptIn?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -808,7 +808,7 @@ export class PortalGoogleRegistrationForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegistrationFormViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; emailOptIn?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -56,8 +56,8 @@ export class PortalLogin {
      */
     this.pageLabel = "Sign in to your account";
     /**
-     * @uiName Network error message
      * Displayed when the login fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while logging you in. Please refresh the page and try again.";
     /**
@@ -310,10 +310,10 @@ export class PortalLogin {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Network error message\nDisplayed when the login fails due to a network error. The participant can try refreshing the page.",
+            "text": "Network error message",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed when the login fails due to a network error. The participant can try refreshing the page."
       },
       "attribute": "network-error-message",
       "reflect": false,

package/dist/collection/components/sqm-portal-registration-form/PortalRegistrationForm.stories.js

@@ -96,6 +96,10 @@ export const FieldsHidden = () => {
     } }));
 };
 export const SlottedInputs = () => (h(PortalRegistrationFormView, Object.assign({}, slottedProps)));
+export const RegisterWithMarketingEmailsCheckbox = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    emailOptIn: (h("sqm-checkbox-field", { checkboxLabel: "I would like to receive marketing and promotional emails for this referral program" })),
+  } })));
 export const TermsAndConditions = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {
     ...defaultProps.content,
     terms: (h("p", null,

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js

@@ -75,6 +75,7 @@ export function PortalRegistrationFormView(props) {
         helpText: ((_u = (_t = states.registrationFormState) === null || _t === void 0 ? void 0 : _t.validationErrors) === null || _u === void 0 ? void 0 : _u.confirmPassword) || content.requiredFieldErrorMessage,
       }
         : [])))),
+      content.emailOptIn,
       content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, disabled: (_v = states.registrationFormState) === null || _v === void 0 ? void 0 : _v.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js

@@ -6,7 +6,7 @@ import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view
 import { usePortalRegistrationForm } from "./usePortalRegistrationForm";
 /**
  * @uiName Microsite Registration
- * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
+ * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"},{"name":"emailOptIn","title":"Email Opt-in Fields"}]
  */
 export class PortalRegistrationForm {
   constructor() {
@@ -141,6 +141,7 @@ export class PortalRegistrationForm {
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, this.loginLabel))),
       terms: h("slot", { name: "terms" }),
+      emailOptIn: h("slot", { name: "emailOptIn" }),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -698,7 +699,7 @@ export class PortalRegistrationForm {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegistrationFormViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; emailOptIn?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -95,8 +95,8 @@ export class PortalResetPassword {
      */
     this.resetSuccessText = "Your password has been reset and you are being redirected. If you are not redirected, please click Continue.";
     /**
-     * @uiName Network error message
      * Displayed when the password reset fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while resetting your password. Please refresh the page and try again.";
     withHooks(this);
@@ -510,10 +510,10 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Network error message\nDisplayed when the password reset fails due to a network error. The participant can try refreshing the page.",
+            "text": "Network error message",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed when the password reset fails due to a network error. The participant can try refreshing the page."
       },
       "attribute": "network-error-message",
       "reflect": false,

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email.js

@@ -45,8 +45,8 @@ export class PortalVerifyEmail {
      */
     this.continueText = "Continue";
     /**
-     * @uiName Network error message
      * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
     withHooks(this);
@@ -214,10 +214,10 @@ export class PortalVerifyEmail {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Network error message\nDisplayed when the email verification fails due to a network error. The participant can try refreshing the page.",
+            "text": "Network error message",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Displayed when the email verification fails due to a network error. The participant can try refreshing the page."
       },
       "attribute": "network-error-message",
       "reflect": false,

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

@@ -26,6 +26,7 @@ import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories
 import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
 import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
 import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
+import * as NewPortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
 import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
 import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
 import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
@@ -33,6 +34,7 @@ import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail
 import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
 import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
 import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
 import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
 import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
 import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
@@ -48,6 +50,7 @@ import * as Hero from "../sqm-hero/Hero.stories";
 import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
 import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
+import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
 import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
 import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
 import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
@@ -149,6 +152,7 @@ const stories = [
   ReferralIframe,
   NameFields,
   CheckboxField,
+  MarketingEmailsCheckbox,
   DropdownField,
   InputField,
   RewardExchangeList,
@@ -184,6 +188,8 @@ const stories = [
   TaxFormSlots,
   PayoutDetailsCard,
   BankingInfoForm,
+  NewPortalRegistrationForm,
+  ChangeMarketing,
   BaseRegistrationForm,
   PortalRegistrationForm,
   PortalGoogleRegistrationFormStories,

package/dist/esm/{ShadowViewAddon-fd07e6e1.js → ShadowViewAddon-23a6afab.js}

@@ -1660,6 +1660,109 @@ function PortalRegisterView(props) {
 }
 
 const style$4 = {
+  ErrorStyle: {
+    "&::part(control)": {
+      background: "var(--sl-color-danger-10)",
+      borderColor: "var(--sl-color-danger-500)",
+      outline: "var(--sl-color-danger-500)",
+    },
+    "&:host": {
+      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
+    },
+  },
+  ErrorMessageStyle: {
+    margin: 0,
+    marginTop: "5px",
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-input-help-text-font-size-medium)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+  },
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle$2 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+jss.setup(create());
+const sheet$4 = jss.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
+function CheckboxFieldView(props) {
+  var _b, _c;
+  const { states, content, callbacks } = props;
+  return (h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle$2,
+      styleString$4),
+    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
+        e.target.value = e.target.checked;
+        callbacks.setChecked(e.target.value);
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), intl.formatMessage({
+      id: content.checkboxName + "-message",
+      defaultMessage: content.checkboxLabel,
+    }, {
+      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
+    }))));
+}
+
+function ChangeMarktingView(props) {
+  const { states, callbacks } = props;
+  const { text, formState } = states;
+  const { error } = formState;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-x-small)",
+      padding: "0 var(--sl-spacing-xxx-large) var(--sl-spacing-xxx-large)",
+    },
+    SubmitButton: { marginBottom: "var(--sl-spacing-medium)" },
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+    Success: {
+      "&::part(successalert-base)": {
+        "margin-bottom": "15px",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    h(TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
+    h("sl-form", { "onSl-submit": callbacks.onSubmit },
+      h(CheckboxFieldView, { states: {
+          checked: states.formState.marketingEmailOptIn,
+        }, content: {
+          checkboxLabel: text.marketingCheckboxLabel,
+          checkboxName: "marketingEmailOptIn",
+        }, callbacks: {
+          setChecked: callbacks.setChecked,
+        } }),
+      h("sl-button", { class: sheet.classes.SubmitButton, type: "primary", submit: true, loading: states.loading, disabled: states.submitDisabled }, text.submitChangeButtonText),
+      error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, error))),
+      states.success && (h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
+        h("div", { part: "successalert-text" }, states.text.successMessage))))));
+}
+
+const style$5 = {
   Description: {
     "& input[type=checkbox]": {
       display: "none",
@@ -1698,13 +1801,13 @@ const style$4 = {
     },
   },
 };
-const sheet$4 = createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 function Details(props) {
   const rid = Math.random().toString(36).slice(2);
   return (h("div", { style: { opacity: props.opacity } },
-    h("style", { type: "text/css" }, styleString$4),
-    h("span", { class: sheet$4.classes.Description },
+    h("style", { type: "text/css" }, styleString$5),
+    h("span", { class: sheet$5.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
         h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
@@ -1726,7 +1829,7 @@ const GreyGift = () => {
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#828282" })));
 };
 
-const style$5 = {
+const style$6 = {
   ProgressBar: {
     "& .progress-bar": {
       height: "0",
@@ -1838,14 +1941,14 @@ const style$5 = {
     },
   },
 };
-const sheet$5 = createStyleSheet(style$5, { classNamePrefix: "sqm-prog-bar" });
-const styleString$5 = sheet$5.toString();
+const sheet$6 = createStyleSheet(style$6, { classNamePrefix: "sqm-prog-bar" });
+const styleString$6 = sheet$6.toString();
 function ProgressBarView(props) {
   const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, finite = 0, opacity = "1", } = props;
   let aggregate = buildProgressBar(repeatable, steps, props);
   const { columns, items } = aggregate;
-  return (h("div", { class: sheet$5.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
-    h("style", { type: "text/css" }, styleString$5),
+  return (h("div", { class: sheet$6.classes.ProgressBar, "data-expired": expired, "data-complete": complete, "data-steps": steps, "data-done": goal <= progress, style: { opacity: opacity } },
+    h("style", { type: "text/css" }, styleString$6),
     h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
         (Boolean(finite) && progress > 2 * goal)
         ? "progress-bar repeatable-steps"
@@ -2136,7 +2239,7 @@ const arrow_left_right = () => {
     h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
 };
 
-const style$6 = {
+const style$7 = {
   TaskCard: {
     display: "inline-block",
     width: "100%",
@@ -2290,8 +2393,8 @@ const style$6 = {
     },
   },
 };
-const sheet$6 = createStyleSheet(style$6);
-const styleString$6 = sheet$6.toString();
+const sheet$7 = createStyleSheet(style$7);
+const styleString$7 = sheet$7.toString();
 function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
@@ -2327,11 +2430,11 @@ function TaskCardView(props) {
 	}
 
   `;
-  return (h("div", { class: sheet$6.classes.TaskCard, part: "sqm-base" },
+  return (h("div", { class: sheet$7.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
-      styleString$6,
+      styleString$7,
       vanillaStyle),
-    !states.loading && taskNotStarted && (h("div", { class: sheet$6.classes.NotStarted },
+    !states.loading && taskNotStarted && (h("div", { class: sheet$7.classes.NotStarted },
       h("span", { class: "icon" },
         h("sl-icon", { name: "info-circle-fill" })),
       intl.formatMessage({
@@ -2342,7 +2445,7 @@ function TaskCardView(props) {
           .setLocale(luxonLocale(states.locale))
           .toLocaleString(luxon.DateTime.DATETIME_MED),
       }))),
-    !states.loading && taskEnded && (h("div", { class: sheet$6.classes.Ended },
+    !states.loading && taskEnded && (h("div", { class: sheet$7.classes.Ended },
       h("span", { class: "icon" },
         h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
       intl.formatMessage({
@@ -2362,7 +2465,7 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        h("div", { class: sheet$6.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet$7.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
           h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
@@ -2378,7 +2481,7 @@ function TaskCardView(props) {
           } }, content.cardTitle)),
         states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
         content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet$6.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        h("div", { class: sheet$7.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0
@@ -2449,7 +2552,7 @@ function PoweredByImg({ color = "#A6A6A6", width = 120, height = 16, }) {
     h("path", { d: "M1661.53 157.54H1589.77C1590.42 169.37 1593.54 178.535 1599.13 185.035C1604.85 191.535 1612.65 194.785 1622.53 194.785C1628.51 194.785 1633.97 193.485 1638.91 190.885C1643.98 188.285 1647.95 184.645 1650.81 179.965L1657.24 186.4C1653.34 192.12 1648.4 196.475 1642.42 199.465C1636.57 202.455 1629.94 203.95 1622.53 203.95C1609.01 203.95 1598.35 199.465 1590.55 190.495C1582.88 181.525 1579.05 169.175 1579.05 153.445C1579.05 137.585 1582.82 125.17 1590.36 116.2C1597.9 107.1 1608.23 102.55 1621.36 102.55C1633.84 102.55 1643.66 106.84 1650.81 115.42C1657.96 124 1661.53 135.895 1661.53 151.105V157.54ZM1651.39 147.4C1651.39 136.48 1648.66 127.77 1643.2 121.27C1637.74 114.77 1630.46 111.52 1621.36 111.52C1611.74 111.52 1604.2 114.77 1598.74 121.27C1593.28 127.77 1590.29 137.065 1589.77 149.155H1651.39V147.4Z", fill: color })));
 }
 
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
   :host{
     margin: 0 auto;
     width: 100%;
@@ -2505,7 +2608,7 @@ function PortalFooterView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$2,
+      vanillaStyle$3,
       styleString),
     h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2677,7 +2780,7 @@ function ReferralIframeView(props) {
     h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }
 
-const style$7 = {
+const style$8 = {
   ErrorStyle: ErrorStyles,
   FieldsContainer: {
     "& sl-input": {
@@ -2685,7 +2788,7 @@ const style$7 = {
     },
   },
 };
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2697,21 +2800,21 @@ sl-input::part(label){
   font-weight: var(--sl-font-weight-semibold);
 }
 `;
-const sheet$7 = createStyleSheet(style$7);
-const styleString$7 = sheet$7.toString();
+const sheet$8 = createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 function NameFieldsView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
   const { states } = 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$7.classes.FieldsContainer },
+  return (h("div", { class: sheet$8.classes.FieldsContainer },
     h("style", { type: "text/css" },
-      vanillaStyle$3,
-      styleString$7),
+      vanillaStyle$4,
+      styleString$8),
     h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
-      class: sheet$7.classes.ErrorStyle,
+      class: sheet$8.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
@@ -2719,81 +2822,12 @@ function NameFieldsView(props) {
       value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
-      class: sheet$7.classes.ErrorStyle,
+      class: sheet$8.classes.ErrorStyle,
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
     }
       : [])))));
 }
 
-const style$8 = {
-  ErrorStyle: {
-    "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
-      borderColor: "var(--sl-color-danger-500)",
-      outline: "var(--sl-color-danger-500)",
-    },
-    "&:host": {
-      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
-    },
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    marginTop: "5px",
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-    fontFamily: "var(--sl-font-sans)",
-    fontWeight: "var(--sl-font-weight-normal)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle$4 = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
-`;
-jss.setup(create());
-const sheet$8 = jss.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
-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$8.classes.FieldContainer, part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle$4,
-      styleString$8),
-    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
-        e.target.value = e.target.checked;
-        callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
-      ? {
-        class: sheet$8.classes.ErrorStyle,
-      }
-      : [])),
-      intl.formatMessage({
-        id: content.checkboxName + "-message",
-        defaultMessage: content.checkboxLabel,
-      }, {
-        labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-      }),
-      !states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$8.classes.ErrorMessageStyle }, intl.formatMessage({
-        id: `errorMessage-${content.checkboxName}`,
-        defaultMessage: content.errorMessage,
-      }))))));
-}
-
 const style$9 = {
   ErrorStyle: {
     "--sl-input-border-color": "var(--sl-color-danger-500)",
@@ -4094,4 +4128,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { empty as A, BigStatView as B, CheckboxFieldView as C, DropdownFieldView as D, EditProfileView as E, rewardExchange as F, CardFeedView as G, HeroView as H, InputFieldView as I, CouponCodeView as J, ProgressBar as K, LeaderboardView as L, autoColorScaleCss as M, NameFieldsView as N, ShadowViewAddon as O, PortalFrameView as P, useBigStat as Q, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, withShadowView as U, demoRewardExchange as V, useShareButton as a, useDemoBigStat as b, StatContainerView as c, PortalChangePasswordView as d, PortalRegisterView as e, ProgressBarView as f, PoweredByImg as g, PortalFooterView as h, RewardExchangeView as i, rewardExchangeLongText as j, rewardExchangeSelected as k, chooseAmountFixed as l, chooseAmountFixedNoDescription as m, chooseAmountVariable as n, chooseAmountVariableNoDescription as o, chooseAmountVariableDisabled as p, chooseAmountVariableUnavailable as q, rewardExchangeCustomErrorMsg as r, confirmFixed as s, confirmVariable as t, useShareLink as u, redemptionError as v, queryError as w, success as x, successVariable as y, loading as z };
+export { loading as A, BigStatView as B, ChangeMarktingView as C, DropdownFieldView as D, EditProfileView as E, empty as F, rewardExchange as G, HeroView as H, InputFieldView as I, CardFeedView as J, CouponCodeView as K, LeaderboardView as L, ProgressBar as M, NameFieldsView as N, autoColorScaleCss as O, PortalFrameView as P, ShadowViewAddon as Q, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, useBigStat as U, withShadowView as V, demoRewardExchange as W, useShareButton as a, useDemoBigStat as b, StatContainerView as c, PortalChangePasswordView as d, PortalRegisterView as e, ProgressBarView as f, PoweredByImg as g, PortalFooterView as h, CheckboxFieldView as i, RewardExchangeView as j, rewardExchangeLongText as k, rewardExchangeSelected as l, chooseAmountFixed as m, chooseAmountFixedNoDescription as n, chooseAmountVariable as o, chooseAmountVariableNoDescription as p, chooseAmountVariableDisabled as q, rewardExchangeCustomErrorMsg as r, chooseAmountVariableUnavailable as s, confirmFixed as t, useShareLink as u, confirmVariable as v, redemptionError as w, queryError as x, success as y, successVariable as z };