@saasquatch/mint-components 1.6.8-9 → 1.6.9

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018
+Copyright (c) 2023 ReferralSaaSquatch.com, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/cjs/{ShadowViewAddon-b706b992.js → ShadowViewAddon-f670c663.js}

@@ -2,16 +2,16 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
-const global = require('./global-48c25606.js');
-const index_module = require('./index.module-f6afc139.js');
+const global = require('./global-40232313.js');
+const index_module = require('./index.module-4314dfb1.js');
 const cjs = require('./cjs-1066ec21.js');
 const mixins = require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
-const useChildElements = require('./useChildElements-a8f7f5ca.js');
+const useChildElements = require('./useChildElements-749f9c9c.js');
 const luxon = require('./luxon-53e983a6.js');
 const utils = require('./utils-6847bc06.js');
-const sqmTextSpanView = require('./sqm-text-span-view-3c734dbb.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-6accb54a.js');
+const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-5fb2ad49.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -149,11 +149,11 @@ function LeaderboardView(props) {
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (index.h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-leaderboard-container" },
+  return (index.h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
-    index.h("table", { part: "sqm-leaderboard-table" },
+    index.h("table", { part: "sqm-table" },
       index.h("tr", null,
         styles.showRank && index.h("th", { class: "Rank" }, styles.rankheading),
         index.h("th", { class: "User" }, styles.usersheading),
@@ -191,8 +191,8 @@ function LeaderboardView(props) {
 const style$2 = {
   HostBlock: mixins.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: {
@@ -202,47 +202,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 = JSS.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 : (index.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 = (index.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" ? (index.h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (index.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 (index.h("div", null,
     index.h("style", { type: "text/css" },
       styleString$2,
-      props.textAlign === "center" && textAlignStyle),
-    index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
-      index.h("div", { class: sheet$2.classes.containerStyle, style: {
-          flexDirection: `${buttonStyle === "button below" ? "column" : "row"}`,
-          width: "100%",
-        } },
-        index.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" ? (index.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),
-          index.h("div", { slot: "help-text", class: sheet$2.classes.helptextStyle },
-            (buttonStyle === "button outside" ||
-              buttonStyle === "button below") &&
-              copyButton,
-            props.error && (index.h("p", { class: sheet$2.classes.errorTextStyle }, errorText))))))));
+      vanillaStyle$1,
+      textAlignStyle[props.textAlign],
+      disabled && disabledStyles),
+    index.h("div", { class: sheet$2.classes.containerStyle, style: {
+        flexDirection: `${buttonStyle === "button-below" ? "column" : "row"}`,
+      } },
+      index.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 && (index.h("p", { slot: "help-text", class: sheet$2.classes.errorTextStyle }, props.errorText))),
+      (buttonStyle === "button-outside" || buttonStyle === "button-below") &&
+        copyButton)));
 }
 
 function BigStatView(props) {
@@ -318,13 +335,13 @@ const sheet$3 = JSS.createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PortalFrameView(props, children) {
   const { data, notFullScreen } = props;
-  return (index.h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame, part: "sqm-portal-frame-container" },
+  return (index.h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet$3.classes.Frame, part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$3),
-    index.h("div", { class: sheet$3.classes.HeaderWrapper, part: "sqm-portal-frame-header" },
+    index.h("div", { class: sheet$3.classes.HeaderWrapper, part: "sqm-header" },
       data.header,
       index.h("slot", { name: "sqm-navigation-menu" })),
     children,
-    index.h("div", { class: sheet$3.classes.FooterWrapper, part: "sqm-portal-frame-footer" }, data.footer)));
+    index.h("div", { class: sheet$3.classes.FooterWrapper, part: "sqm-footer" }, data.footer)));
 }
 
 const EditProfileView = (props) => {
@@ -333,8 +350,8 @@ const EditProfileView = (props) => {
   const { text } = states;
   const { errors } = states.formState;
   if (states.showEdit) {
-    return (index.h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-edit-profile-container" },
-      index.h("h2", { part: "sqm-edit-profile-header", style: {
+    return (index.h("div", { class: `CardWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
+      index.h("h2", { part: "sqm-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           margin: "0px",
           textAlign: "center",
@@ -362,9 +379,9 @@ const EditProfileView = (props) => {
               callbacks.onSubmit(e);
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext)))));
   }
-  return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-edit-profile-container" },
+  return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     index.h("div", { class: "FormSection" },
-      index.h("h2", { part: "sqm-edit-profile-header", style: {
+      index.h("h2", { part: "sqm-header", style: {
           fontSize: "var(--sl-font-size-x-large)",
           marginBottom: "0px",
           textAlign: "center",
@@ -398,10 +415,10 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
 function useShareLink(props) {
   var _a, _b;
   const { programId = index_module.O() } = props;
-  const user = index_module.W();
-  const engagementMedium = index_module._();
-  const { data } = index_module.fn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = index_module.Fe(WIDGET_ENGAGEMENT_EVENT);
+  const user = index_module.L();
+  const engagementMedium = index_module.T();
+  const { data } = index_module.mn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.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
   "...";
@@ -487,14 +504,14 @@ function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : index_module.O();
-  const user = index_module.W();
+  const user = index_module.L();
   const variables = {
-    engagementMedium: index_module._(),
+    engagementMedium: index_module.T(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = index_module.fn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = index_module.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 = index_module.getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -812,7 +829,7 @@ function pathToRegexp(path, keys, options) {
 const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.fn(query, variables);
+  const res = index_module.mn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -1373,8 +1390,8 @@ function useBigStat(props) {
   const { statType, flexReverse, alignment, programId = index_module.O(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements.useChildElements();
-  const locale = index_module.x();
-  const userIdent = index_module.W();
+  const locale = index_module.W();
+  const userIdent = index_module.L();
   const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
@@ -1494,11 +1511,11 @@ function StatContainerView(props, children) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.StatFrame, part: "sqm-stat-container-frame" },
-    index.h("div", { class: sheet.classes.StatContainer, part: "sqm-stat-container" },
+  return (index.h("div", { class: sheet.classes.StatFrame, part: "sqm-base" },
+    index.h("div", { class: sheet.classes.StatContainer, part: "sqm-inner-container" },
       index.h("style", { type: "text/css" }, styleString),
       children),
-    index.h("div", { class: sheet.classes.BorderFix, part: "sqm-stat-container-border" })));
+    index.h("div", { class: sheet.classes.BorderFix, part: "sqm-border" })));
 }
 
 function PortalChangePasswordView(props) {
@@ -1584,7 +1601,7 @@ const style$4 = {
   },
   ButtonsContainer: mixins.AuthButtonsContainer,
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 :host {
   display: block;
 }
@@ -1596,9 +1613,9 @@ const sheet$4 = JSS.createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
 function PortalLoginView(props) {
   const { states, callbacks, content } = props;
-  return (index.h("div", { class: sheet$4.classes.Wrapper, part: "sqm-portal-login-container" },
+  return (index.h("div", { class: sheet$4.classes.Wrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$1,
+      vanillaStyle$2,
       styleString$4),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
     index.h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit },
@@ -1624,7 +1641,7 @@ const style$5 = {
   ButtonsContainer: mixins.AuthButtonsContainer,
   ErrorStyle: mixins.ErrorStyles,
 };
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -1647,9 +1664,9 @@ function PortalRegisterView(props) {
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (index.h("div", { class: sheet$5.classes.Wrapper, part: "sqm-portal-register-container" },
+  return (index.h("div", { class: sheet$5.classes.Wrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$2,
+      vanillaStyle$3,
       styleString$5),
     index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
     index.h("sl-form", { class: sheet$5.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
@@ -1658,23 +1675,23 @@ function PortalRegisterView(props) {
       content.formData,
       !states.hideInputs && (index.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 && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
       content.passwordField,
       !states.hideInputs && states.confirmPassword && (index.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,
@@ -1731,7 +1748,7 @@ function Details(props) {
     index.h("span", { class: sheet$6.classes.Description },
       index.h("input", { type: "checkbox", id: "details-" + rid }),
       index.h("label", { class: "details", htmlFor: "details-" + rid },
-        index.h("sl-icon", { exportparts: "base: task-card-chevron-icon", name: "chevron-down" })),
+        index.h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
       index.h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }
 
@@ -2367,7 +2384,7 @@ function TaskCardView(props) {
           .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
       }))),
     !states.loading && taskEnded && (index.h("div", { class: sheet$8.classes.Ended },
-      index.h("span", { class: "icon", part: "test" },
+      index.h("span", { class: "icon" },
         index.h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
       global.intl.formatMessage({
         id: "endedMessage",
@@ -2377,7 +2394,7 @@ function TaskCardView(props) {
           .setLocale(utils.luxonLocale(states.locale))
           .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
       }))),
-    index.h("div", { part: "sqm-card-container-inner", style: {
+    index.h("div", { part: "sqm-style-container", style: {
         borderRadius: taskUnavailable &&
           "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
       }, class: taskUnavailable
@@ -2431,7 +2448,7 @@ function TaskCardView(props) {
                 .setLocale(utils.luxonLocale(states.locale))
                 .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
             })))),
-          index.h("sl-button", { exportparts: "base: task-card-button", id: "sl-button", class: taskUnavailable
+          index.h("sl-button", { exportparts: "base: button", id: "sl-button", class: taskUnavailable
               ? "action neutral"
               : taskComplete
                 ? "action disabled"
@@ -2451,7 +2468,7 @@ function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {
         index.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%;
@@ -2499,9 +2516,9 @@ function PortalFooterView(props) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.Container, part: "sqm-footer-container" },
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$3,
+      vanillaStyle$4,
       styleString),
     index.h("div", { class: sheet.classes.RowContainer },
       props.faqLink && (index.h("a", { target: "_blank", href: props.faqLink }, props.faqText)),
@@ -2516,6 +2533,148 @@ function PortalFooterView(props) {
       index.h(PoweredByImg, null)))));
 }
 
+// import { IntlMessageFormat } from 'intl-messageformat';
+function isMobile(breakPoint) {
+  const [width, setWidth] = stencilHooks_module.useState(window.innerWidth);
+  const handleWindowResize = index_module.useCallback(() => setWidth(window.innerWidth), []);
+  stencilHooks_module.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 = JSS.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 (index.h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (index.h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
+      index.h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      index.h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (index.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;
@@ -2552,7 +2711,7 @@ const style$9 = {
     },
   },
 };
-const vanillaStyle$4 = `
+const vanillaStyle$5 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2572,7 +2731,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 (index.h("div", { class: sheet$9.classes.FieldsContainer },
     index.h("style", { type: "text/css" },
-      vanillaStyle$4,
+      vanillaStyle$5,
       styleString$9),
     index.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,
@@ -2615,7 +2774,7 @@ const style$a = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$5 = `
+const vanillaStyle$6 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2637,9 +2796,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 (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-checkbox-container" },
+  return (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$5,
+      vanillaStyle$6,
       styleString$a),
     index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
@@ -2677,7 +2836,7 @@ const style$b = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$6 = `
+const vanillaStyle$7 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2695,9 +2854,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 (index.h("div", { class: sheet$b.classes.FieldContainer, part: "sqm-dropdown-field-container" },
+  return (index.h("div", { class: sheet$b.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$6,
+      vanillaStyle$7,
       styleString$b),
     index.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],
@@ -2718,7 +2877,7 @@ const style$c = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$8 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -2732,9 +2891,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 (index.h("div", { class: sheet$c.classes.FieldContainer, part: "sqm-input-field-container" },
+  return (index.h("div", { class: sheet$c.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$7,
+      vanillaStyle$8,
       styleString$c),
     index.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],
@@ -3432,7 +3591,7 @@ function RewardExchangeView(props) {
   }
   if (states.noExchangeOptions)
     return states.content.text.empty;
-  return (index.h("div", { class: sheet$d.classes.Container, part: "sqm-reward-exchange-list-container" },
+  return (index.h("div", { class: sheet$d.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$d),
     index.h("div", null,
       stageMap(),
@@ -3849,6 +4008,33 @@ function CardFeedView(props, children) {
     index.h("div", { class: sheet.classes.Container, part: "sqm-base" }, children)));
 }
 
+const style$e = {
+  HostBlock: mixins.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 = JSS.createStyleSheet(style$e);
+const styleString$e = sheet$e.toString();
+function CouponCodeView(props) {
+  const error = !props.loading && props.error;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString$e,
+      vanillaStyle$9),
+    index.h("p", { class: sheet$e.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+    error ? (index.h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
+      index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.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];
@@ -3938,8 +4124,10 @@ exports.BigStatView = BigStatView;
 exports.CardFeedView = CardFeedView;
 exports.CheckboxFieldView = CheckboxFieldView;
 exports.CopyTextView = CopyTextView;
+exports.CouponCodeView = CouponCodeView;
 exports.DropdownFieldView = DropdownFieldView;
 exports.EditProfileView = EditProfileView;
+exports.HeroView = HeroView;
 exports.InputFieldView = InputFieldView;
 exports.LeaderboardView = LeaderboardView;
 exports.NameFieldsView = NameFieldsView;