@saasquatch/mint-components 1.6.8-9 → 1.6.9

package/dist/esm/{ShadowViewAddon-8acfeb00.js → ShadowViewAddon-86f7b900.js}

@@ -1,15 +1,15 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
-import { i as useState, b as browser, k as useMemo } from './stencil-hooks.module-b48b45ec.js';
-import { i as intl } from './global-170c4499.js';
-import { d as dist, O, W, f as fn, F as Fe, _ as _$1, p as getEnvironmentSDK, x } from './index.module-0ba0774e.js';
+import { j as useState, b as browser, u as useMemo, f as useEffect } from './stencil-hooks.module-14b87f98.js';
+import { i as intl } from './global-9992475a.js';
+import { d as dist, O, L, b as mn, I as Ie, T, g as getEnvironmentSDK, W, f as useCallback } from './index.module-bbce47bd.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { u as useChildElements } from './useChildElements-fd458906.js';
-import { l as luxon } from './luxon-1e38d7f1.js';
+import { u as useChildElements } from './useChildElements-ae207f6d.js';
+import { l as luxon } from './luxon-f01e85fe.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
-import { T as TextSpanView } from './sqm-text-span-view-2f7d6d14.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-83b417f0.js';
+import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-ab89c6cc.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -147,11 +147,11 @@ function LeaderboardView(props) {
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-leaderboard-container" },
+  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
-    h("table", { part: "sqm-leaderboard-table" },
+    h("table", { part: "sqm-table" },
       h("tr", null,
         styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
         h("th", { class: "User" }, styles.usersheading),
@@ -189,8 +189,8 @@ function LeaderboardView(props) {
 const style$2 = {
   HostBlock: HostBlock,
   inputStyle: {
-    "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
-    "&::part(input)": { textOverflow: "ellipsis" },
+    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
+    "&::part(base)": { cursor: "pointer", overflow: "visible" },
     width: "100%",
   },
   inputErrorStyle: {
@@ -200,47 +200,64 @@ const style$2 = {
   },
   containerStyle: {
     display: "flex",
-    gap: "8px",
+    alignItems: "center",
+    gap: "var(--sl-spacing-x-small)",
+    width: "100%",
   },
   errorTextStyle: {
     margin: "0",
-    color: "red",
-  },
-  helptextStyle: {
-    display: "flex",
-    flexDirection: "column",
-    marginTop: "8px",
+    color: "var(--sl-color-danger-500)",
   },
 };
-const textAlignStyle = `
+const vanillaStyle$1 = `
   :host{
-    display: block;
+    display: block;   
+    width: 100%;
   }
+`;
+const textAlignStyle = {
+  right: `
+sl-input::part(input){
+  text-align: right;
+}`,
+  center: `  
+sl-input::part(input){
+  text-align: center;
+}`,
+  left: ``,
+};
+const disabledStyles = `
   sl-input::part(input){
-    text-align: center;
+    cursor: default;
   }
 `;
 const sheet$2 = createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
 function CopyTextView(props) {
-  const { buttonStyle = "icon", errorText = "An error occurred" } = props;
-  const copyButton = buttonStyle === "icon" ? null : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: buttonStyle === "button outside" ? "medium" : "small", disabled: props.disabled, slot: "suffix", type: "primary" }, props.copyButtonLabel || "Copy"));
+  const { buttonStyle = "icon" } = props;
+  const error = !props.loading && props.error;
+  const inputText = error ? props.inputPlaceholderText : props.copyString;
+  const disabled = error || props.loading || props.disabled;
+  const tooltipPlacement = props.buttonStyle === "button-below"
+    ? "bottom"
+    : props.buttonStyle === "button-outside"
+      ? "top"
+      : "top-end";
+  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString$2,
-      props.textAlign === "center" && textAlignStyle),
-    h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
-      h("div", { class: sheet$2.classes.containerStyle, style: {
-          flexDirection: `${buttonStyle === "button below" ? "column" : "row"}`,
-          width: "100%",
-        } },
-        h("sl-input", { class: `${sheet$2.classes.inputStyle} ${props.error ? sheet$2.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: props.copyString, readonly: true, style: {} },
-          buttonStyle === "icon" ? (h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })) : (buttonStyle === "button inside" && copyButton),
-          h("div", { slot: "help-text", class: sheet$2.classes.helptextStyle },
-            (buttonStyle === "button outside" ||
-              buttonStyle === "button below") &&
-              copyButton,
-            props.error && (h("p", { class: sheet$2.classes.errorTextStyle }, errorText))))))));
+      vanillaStyle$1,
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    h("div", { class: sheet$2.classes.containerStyle, style: {
+        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
+      } },
+      h("sl-input", { class: `${sheet$2.classes.inputStyle} ${error ? sheet$2.classes.inputErrorStyle : ""}`, exportparts: "label: input-label", value: props.loading ? "Loading..." : inputText, readonly: true, disabled: disabled },
+        buttonStyle === "icon" && copyButton,
+        error && (h("p", { slot: "help-text", class: sheet$2.classes.errorTextStyle }, props.errorText))),
+      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
+        copyButton)));
 }
 
 function BigStatView(props) {
@@ -316,13 +333,13 @@ const sheet$3 = createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PortalFrameView(props, children) {
   const { data, notFullScreen } = props;
-  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame, part: "sqm-portal-frame-container" },
+  return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString$3),
-    h("div", { class: sheet$3.classes.HeaderWrapper, part: "sqm-portal-frame-header" },
+    h("div", { class: sheet$3.classes.HeaderWrapper, part: "sqm-header" },
       data.header,
       h("slot", { name: "sqm-navigation-menu" })),
     children,
-    h("div", { class: sheet$3.classes.FooterWrapper, part: "sqm-portal-frame-footer" }, data.footer)));
+    h("div", { class: sheet$3.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
 }
 
 const EditProfileView = (props) => {
@@ -331,8 +348,8 @@ const EditProfileView = (props) => {
   const { text } = states;
   const { errors } = states.formState;
   if (states.showEdit) {
-    return (h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-edit-profile-container" },
-      h("h2", { part: "sqm-edit-profile-header", style: {
+    return (h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
+      h("h2", { part: "sqm-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           margin: "0px",
           textAlign: "center",
@@ -360,9 +377,9 @@ const EditProfileView = (props) => {
               callbacks.onSubmit(e);
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext)))));
   }
-  return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-edit-profile-container" },
+  return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     h("div", { class: "FormSection" },
-      h("h2", { part: "sqm-edit-profile-header", style: {
+      h("h2", { part: "sqm-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           marginBottom: "0px",
           textAlign: "center",
@@ -396,10 +413,10 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 function useShareLink(props) {
   var _a, _b;
   const { programId = O() } = props;
-  const user = W();
-  const engagementMedium = _$1();
-  const { data } = fn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = Fe(WIDGET_ENGAGEMENT_EVENT);
+  const user = L();
+  const engagementMedium = T();
+  const { data } = mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = Ie(WIDGET_ENGAGEMENT_EVENT);
   const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -485,14 +502,14 @@ function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : O();
-  const user = W();
+  const user = L();
   const variables = {
-    engagementMedium: _$1(),
+    engagementMedium: T(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = fn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = mn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
   const environment = getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -810,7 +827,7 @@ function pathToRegexp(path, keys, options) {
 const debug = browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = fn(query, variables);
+  const res = mn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -1371,8 +1388,8 @@ function useBigStat(props) {
   const { statType, flexReverse, alignment, programId = O(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements();
-  const locale = x();
-  const userIdent = W();
+  const locale = W();
+  const userIdent = L();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -1492,11 +1509,11 @@ function StatContainerView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.StatFrame, part: "sqm-stat-container-frame" },
-    h("div", { class: sheet.classes.StatContainer, part: "sqm-stat-container" },
+  return (h("div", { class: sheet.classes.StatFrame, part: "sqm-base" },
+    h("div", { class: sheet.classes.StatContainer, part: "sqm-inner-container" },
       h("style", { type: "text/css" }, styleString),
       children),
-    h("div", { class: sheet.classes.BorderFix, part: "sqm-stat-container-border" })));
+    h("div", { class: sheet.classes.BorderFix, part: "sqm-border" })));
 }
 
 function PortalChangePasswordView(props) {
@@ -1582,7 +1599,7 @@ const style$4 = {
   },
   ButtonsContainer: AuthButtonsContainer,
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 :host {
   display: block;
 }
@@ -1594,9 +1611,9 @@ const sheet$4 = createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
 function PortalLoginView(props) {
   const { states, callbacks, content } = props;
-  return (h("div", { class: sheet$4.classes.Wrapper, part: "sqm-portal-login-container" },
+  return (h("div", { class: sheet$4.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$1,
+      vanillaStyle$2,
       styleString$4),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit },
@@ -1622,7 +1639,7 @@ const style$5 = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -1645,9 +1662,9 @@ function PortalRegisterView(props) {
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (h("div", { class: sheet$5.classes.Wrapper, part: "sqm-portal-register-container" },
+  return (h("div", { class: sheet$5.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$2,
+      vanillaStyle$3,
       styleString$5),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet$5.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
@@ -1656,23 +1673,23 @@ function PortalRegisterView(props) {
       content.formData,
       !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
-            return "Cannot be empty";
+            return content.requiredFieldErrorMessage;
           }
           // this matches shoelace validation, but could be better
           if (!value.includes("@")) {
-            return "Must be a valid email address";
+            return content.invalidEmailErrorMessage;
           }
         } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
         class: sheet$5.classes.ErrorStyle,
         helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-          "Cannot be empty",
+          content.requiredFieldErrorMessage,
       }
         : [])))),
       !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
       content.passwordField,
       !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
         class: sheet$5.classes.ErrorStyle,
-        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || "Cannot be empty",
+        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || content.requiredFieldErrorMessage,
       }
         : [])))),
       content.terms,
@@ -1729,7 +1746,7 @@ function Details(props) {
     h("span", { class: sheet$6.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { exportparts: "base: task-card-chevron-icon", name: "chevron-down" })),
+        h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
       h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }
 
@@ -2365,7 +2382,7 @@ function TaskCardView(props) {
           .toLocaleString(luxon.DateTime.DATETIME_MED),
       }))),
     !states.loading && taskEnded && (h("div", { class: sheet$8.classes.Ended },
-      h("span", { class: "icon", part: "test" },
+      h("span", { class: "icon" },
         h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
       intl.formatMessage({
         id: "endedMessage",
@@ -2375,7 +2392,7 @@ function TaskCardView(props) {
           .setLocale(luxonLocale(states.locale))
           .toLocaleString(luxon.DateTime.DATETIME_MED),
       }))),
-    h("div", { part: "sqm-card-container-inner", style: {
+    h("div", { part: "sqm-style-container", style: {
         borderRadius: taskUnavailable &&
           "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
       }, class: taskUnavailable
@@ -2429,7 +2446,7 @@ function TaskCardView(props) {
                 .setLocale(luxonLocale(states.locale))
                 .toLocaleString(luxon.DateTime.DATETIME_MED),
             })))),
-          h("sl-button", { exportparts: "base: task-card-button", id: "sl-button", class: taskUnavailable
+          h("sl-button", { exportparts: "base: button", id: "sl-button", class: taskUnavailable
               ? "action neutral"
               : taskComplete
                 ? "action disabled"
@@ -2449,7 +2466,7 @@ function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {
         h("rect", { width: "14", height: "16", fill: "white", transform: "translate(59.5 1)" })))));
 }
 
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
   :host{
     margin: 0 auto;
     width: 100%;
@@ -2497,9 +2514,9 @@ function PortalFooterView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container, part: "sqm-footer-container" },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$3,
+      vanillaStyle$4,
       styleString),
     h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2514,6 +2531,148 @@ function PortalFooterView(props) {
       h(PoweredByImg, null)))));
 }
 
+// import { IntlMessageFormat } from 'intl-messageformat';
+function isMobile(breakPoint) {
+  const [width, setWidth] = useState(window.innerWidth);
+  const handleWindowResize = useCallback(() => setWidth(window.innerWidth), []);
+  useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+  return width > breakPoint ? false : true;
+}
+function isValidColor(teststr) {
+  return CSS.supports(`(color: ${teststr})`);
+}
+
+const paddingList = [
+  "var(--sl-spacing-xxx-small)",
+  "var(--sl-spacing-xx-small)",
+  "var(--sl-spacing-x-small)",
+  "var(--sl-spacing-small)",
+  "var(--sl-spacing-medium)",
+  "var(--sl-spacing-large)",
+  "var(--sl-spacing-x-large)",
+  "var(--sl-spacing-xx-large)",
+  "var(--sl-spacing-xxx-large)",
+  "var(--sl-spacing-xxxx-large)",
+];
+const parseBackground = (provided_bg) => {
+  if (provided_bg) {
+    if (isValidColor(provided_bg)) {
+      return provided_bg;
+    }
+    else {
+      return `url(${provided_bg})`;
+    }
+  }
+  else {
+    return "";
+  }
+};
+function HeroView(props) {
+  const { states, content } = props;
+  const getVertivalPadding = (size, half) => {
+    const sizes = {
+      small: 7,
+      medium: 8,
+      large: 9,
+    };
+    var index = sizes[size];
+    if (isMobile(767)) {
+      index = index - 2;
+    }
+    else if (isMobile(1023)) {
+      index = index - 1;
+    }
+    return half ? paddingList[index - 2] : paddingList[index];
+  };
+  const getHorizontalPadding = (size) => {
+    if (size == "small") {
+      return "1%";
+    }
+    else if (size == "medium") {
+      return "3%";
+    }
+    else {
+      return "5%";
+    }
+  };
+  // Dependent on props, not feasiable to move out
+  const style = {
+    TwoColumnContainer: {
+      display: "flex",
+      "@media screen and (max-width: 1023px)": {
+        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
+        justfiyContent: "center",
+      },
+    },
+    ColumnPadding: {
+      paddingTop: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingBottom: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingLeft: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+      paddingRight: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+    },
+    ColumnWrapper: {
+      "&:first-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      },
+      "&:last-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
+      },
+      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
+      minHeight: `${states.minHeight}px`,
+      display: "block",
+    },
+    SingleColumnContainer: {
+      background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      minHeight: `${states.minHeight}px`,
+    },
+    Container: {
+      width: "100%",
+      maxWidth: "var(--sqm-max-width)",
+      margin: "0 auto",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{    
+    height: 100%;
+    display: contents;
+  }
+  sqm-hero{    
+    height: 100%;
+    display: contents;
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+  
+`;
+  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
+      h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+}
+
 function ReferralIframeView(props) {
   const { states, data } = props;
   const { content } = states;
@@ -2550,7 +2709,7 @@ const style$9 = {
     },
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2570,7 +2729,7 @@ function NameFieldsView(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$9.classes.FieldsContainer },
     h("style", { type: "text/css" },
-      vanillaStyle$4,
+      vanillaStyle$5,
       styleString$9),
     h("sl-input", Object.assign({ exportparts: "label: input-label", 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,
@@ -2613,7 +2772,7 @@ const style$a = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$5 = `
+const vanillaStyle$6 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2635,9 +2794,9 @@ 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$a.classes.FieldContainer, part: "sqm-checkbox-container" },
+  return (h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$5,
+      vanillaStyle$6,
       styleString$a),
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
@@ -2675,7 +2834,7 @@ const style$b = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
+const vanillaStyle$7 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2693,9 +2852,9 @@ 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$b.classes.FieldContainer, part: "sqm-dropdown-field-container" },
+  return (h("div", { class: sheet$b.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$6,
+      vanillaStyle$7,
       styleString$b),
     h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { 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[content.dropdownName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.dropdownName],
@@ -2716,7 +2875,7 @@ const style$c = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$8 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2730,9 +2889,9 @@ 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$c.classes.FieldContainer, part: "sqm-input-field-container" },
+  return (h("div", { class: sheet$c.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$7,
+      vanillaStyle$8,
       styleString$c),
     h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { 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[content.fieldName]) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
@@ -3430,7 +3589,7 @@ function RewardExchangeView(props) {
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (h("div", { class: sheet$d.classes.Container, part: "sqm-reward-exchange-list-container" },
+  return (h("div", { class: sheet$d.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString$d),
     h("div", null,
       stageMap(),
@@ -3847,6 +4006,33 @@ function CardFeedView(props, children) {
     h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
 }
 
+const style$e = {
+  HostBlock: HostBlock,
+  couponCodeLabel: {
+    margin: "var(--sl-spacing-x-small) 0",
+    color: "var(--sl-color-gray-500)",
+    fontSize: "var(--sl-font-size-small)",
+  },
+};
+const vanillaStyle$9 = `
+  :host{
+    display: block;   
+    width: 100%;
+  }
+`;
+const sheet$e = createStyleSheet(style$e);
+const styleString$e = sheet$e.toString();
+function CouponCodeView(props) {
+  const error = !props.loading && props.error;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString$e,
+      vanillaStyle$9),
+    h("p", { class: sheet$e.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+    error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
+      h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
+}
+
 function t(t,n,r){return Math.min(Math.max(t,r),n)}class n extends Error{constructor(t){super(`Failed to parse color: "${t}"`);}}function r(r){if("string"!=typeof r)throw new n(r);if("transparent"===r.trim().toLowerCase())return [0,0,0,0];let e=r.trim();e=u.test(r)?function(t){const r=t.toLowerCase().trim(),e=o[function(t){let n=5381,r=t.length;for(;r;)n=33*n^t.charCodeAt(--r);return (n>>>0)%2341}(r)];if(!e)throw new n(t);return `#${e}`}(r):r;const f=s.exec(e);if(f){const t=Array.from(f).slice(1);return [...t.slice(0,3).map(t=>parseInt(_(t,2),16)),parseInt(_(t[3]||"f",2),16)/255]}const p=i.exec(e);if(p){const t=Array.from(p).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,16)),parseInt(t[3]||"ff",16)/255]}const z=a.exec(e);if(z){const t=Array.from(z).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,10)),parseFloat(t[3]||"1")]}const h=c.exec(e);if(h){const[e,o,_,s]=Array.from(h).slice(1).map(parseFloat);if(t(0,100,o)!==o)throw new n(r);if(t(0,100,_)!==_)throw new n(r);return [...l(e,o,_),s||1]}throw new n(r)}const e=t=>parseInt(t.replace(/_/g,""),36),o="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((t,n)=>{const r=e(n.substring(0,3)),o=e(n.substring(3)).toString(16);let _="";for(let t=0;t<6-o.length;t++)_+="0";return t[r]=`${_}${o}`,t},{}),_=(t,n)=>Array.from(Array(n)).map(()=>t).join(""),s=new RegExp(`^#${_("([a-f0-9])",3)}([a-f0-9])?$`,"i"),i=new RegExp(`^#${_("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),a=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${_(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),c=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,u=/^[a-z]+$/i,f=t=>Math.round(255*t),l=(t,n,r)=>{let e=r/100;if(0===n)return [e,e,e].map(f);const o=(t%360+360)%360/60,_=(1-Math.abs(2*e-1))*(n/100),s=_*(1-Math.abs(o%2-1));let i=0,a=0,c=0;o>=0&&o<1?(i=_,a=s):o>=1&&o<2?(i=s,a=_):o>=2&&o<3?(a=_,c=s):o>=3&&o<4?(a=s,c=_):o>=4&&o<5?(i=s,c=_):o>=5&&o<6&&(i=_,c=s);const u=e-_/2;return [i+u,a+u,c+u].map(f)};function p(t){const[n,e,o,_]=r(t).map((t,n)=>3===n?t:t/255),s=Math.max(n,e,o),i=Math.min(n,e,o),a=(s+i)/2;if(s===i)return [0,0,a,_];const c=s-i;return [60*(n===s?(e-o)/c+(e<o?6:0):e===s?(o-n)/c+2:(n-e)/c+4),a>.5?c/(2-s-i):c/(s+i),a,_]}function z(n,r,e,o){return `hsla(${(n%360).toFixed()}, ${t(0,100,100*r).toFixed()}%, ${t(0,100,100*e).toFixed()}%, ${parseFloat(t(0,1,o).toFixed(3))})`}
 
 const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
@@ -3932,4 +4118,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { successVariable as A, BigStatView as B, CopyTextView as C, DropdownFieldView as D, EditProfileView as E, loading as F, empty as G, rewardExchange as H, InputFieldView as I, CardFeedView as J, autoColorScaleCss as K, LeaderboardView as L, ShadowViewAddon as M, NameFieldsView as N, useBigStat as O, PortalFrameView as P, withShadowView as Q, ReferralIframeView as R, ShareButtonView as S, TaskCardView as T, demoRewardExchange as U, pathToRegexp as V, useShareButton as a, useDemoBigStat as b, StatContainerView as c, PortalChangePasswordView as d, PortalLoginView as e, PortalRegisterView as f, ProgressBarView as g, PoweredByImg as h, PortalFooterView as i, CheckboxFieldView as j, RewardExchangeView as k, rewardExchangeLongText as l, rewardExchangeSelected as m, chooseAmountFixed as n, chooseAmountFixedNoDescription as o, chooseAmountVariable as p, chooseAmountVariableNoDescription as q, rewardExchangeCustomErrorMsg as r, chooseAmountVariableDisabled as s, chooseAmountVariableUnavailable as t, useShareLink as u, confirmFixed as v, confirmVariable as w, redemptionError as x, queryError as y, success as z };
+export { successVariable as A, BigStatView as B, CopyTextView as C, DropdownFieldView as D, EditProfileView as E, loading as F, empty as G, HeroView as H, InputFieldView as I, rewardExchange as J, CardFeedView as K, LeaderboardView as L, CouponCodeView 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, pathToRegexp as X, useShareButton as a, useDemoBigStat as b, StatContainerView as c, PortalChangePasswordView as d, PortalLoginView as e, PortalRegisterView as f, ProgressBarView as g, PoweredByImg as h, PortalFooterView as i, CheckboxFieldView as j, RewardExchangeView as k, rewardExchangeLongText as l, rewardExchangeSelected as m, chooseAmountFixed as n, chooseAmountFixedNoDescription as o, chooseAmountVariable as p, chooseAmountVariableNoDescription as q, rewardExchangeCustomErrorMsg as r, chooseAmountVariableDisabled as s, chooseAmountVariableUnavailable as t, useShareLink as u, confirmFixed as v, confirmVariable as w, redemptionError as x, queryError as y, success as z };