@saasquatch/mint-components 1.5.0-41 → 1.5.0-45

package/dist/cjs/{sqm-brand_21.cjs.entry.js → sqm-brand_24.cjs.entry.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-2292373a.js');
+const global = require('./global-e375afa1.js');
 const useCallback = require('./use-callback-e754042f.js');
 const index_module = require('./index.module-10eb2374.js');
 require('./extends-08099afd.js');
@@ -13,15 +13,15 @@ require('./insertcss-04580cfa.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
-const index$1 = require('./index-f2e54c49.js');
+const index$1 = require('./index-d9b12889.js');
 const useChildElements = require('./useChildElements-d8e872a4.js');
 require('./luxon-59ca7d19.js');
+const utils = require('./utils-01dbfd4a.js');
 require('./sqm-text-span-view-f101dedf.js');
-const useDemoBigStat = require('./useDemoBigStat-f3c67fd6.js');
-const utils = require('./utils-95e5317c.js');
+const useDemoBigStat = require('./useDemoBigStat-2b1d822c.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-d8cc826b.js');
 const sqmShareLinkView = require('./sqm-share-link-view-8e984365.js');
-const AutoColor = require('./AutoColor-6b6b9977.js');
+const AutoColor = require('./AutoColor-f85faee8.js');
 require('./sqm-portal-section-view-3b6c990e.js');
 
 /**
@@ -408,6 +408,172 @@ const SqmHookStoryContainer = class {
   }
 };
 
+function MediaView(props) {
+  const overlay = Boolean((props.header || props.description || props.buttonText) &&
+    props.layout === "overlay");
+  const style = {
+    Container: {
+      position: "relative",
+      "&:before": {
+        content: overlay ? '""' : "",
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        background: props.overlayColor || "var(--sl-color-primary-900)",
+        opacity: props.overlayOpacity || "0.75",
+      },
+    },
+    Image: {
+      display: "block",
+      maxWidth: "100%",
+      maxHeight: "100%",
+      minHeight: props.minHeight || "300px",
+      objectFit: "cover",
+    },
+    Overlay: {
+      position: "absolute",
+      width: "90%",
+      top: "50%",
+      left: "50%",
+      textAlign: "center",
+      transform: "translate(-50%, -50%)",
+      color: props.textColor || "var(--sl-color-neutral-0)",
+      lineHeight: "var(--sl-line-height-dense)",
+    },
+    Column: {
+      display: "flex",
+      background: props.backgroundColor || "",
+      flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
+      lineHeight: "var(--sl-line-height-dense)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      "& .image-area": {
+        width: "50%",
+        "@media (max-width: 499px)": {
+          width: "100%",
+        },
+      },
+      "& .text-area": {
+        width: "50%",
+        padding: "calc(2*var(--sl-spacing-xx-large))",
+        alignSelf: "center",
+        "@media (max-width: 499px)": {
+          width: "90%",
+          textAlign: "center",
+          padding: "var(--sl-spacing-xx-large)",
+        },
+      },
+      "@media (max-width: 499px)": {
+        flexDirection: props.imageMobilePos === "bottom" ? "column-reverse" : "column",
+      },
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-xxx-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      "@media (max-width: 499px)": {
+        fontSize: "var(--sl-font-size-xx-large)",
+      },
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-x-large)",
+      margin: "var(--sl-spacing-small) 0",
+      "@media (max-width: 499px)": {
+        fontSize: "var(--sl-font-size-large)",
+      },
+    },
+    Button: {
+      marginTop: "var(--sl-spacing-medium)",
+      "&::part(base)": {
+        padding: "0 var(--sl-spacing-x-large)",
+      },
+      "@media (max-width: 499px)": {
+        width: "100%",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{
+    display: block;
+  }`;
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    props.layout === "overlay" && OverlayView(),
+    props.layout === "columns" && ColumnView()));
+  function OverlayView() {
+    return (index.h("div", null,
+      props.imageUrl && (index.h("img", { class: sheet.classes.Image, src: props.imageUrl })),
+      index.h("div", { class: sheet.classes.Overlay },
+        props.header && (index.h("div", { class: sheet.classes.Header }, props.header)),
+        props.description && (index.h("div", { class: sheet.classes.Description }, props.description)),
+        props.buttonText && (index.h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+            ? window.open(props.buttonLink)
+            : window.open(props.buttonLink, "_parent") }, props.buttonText)))));
+  }
+  function ColumnView() {
+    return (index.h("div", null,
+      index.h("div", { class: sheet.classes.Column },
+        index.h("div", { class: "image-area" },
+          index.h("img", { class: sheet.classes.Image, src: props.imageUrl, style: { minHeight: "100%" } })),
+        index.h("div", { class: "text-area" },
+          props.header && (index.h("div", { class: sheet.classes.Header }, props.header)),
+          props.description && (index.h("div", { class: sheet.classes.Description }, props.description)),
+          props.buttonText && (index.h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+              ? window.open(props.buttonLink)
+              : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
+  }
+}
+
+const Media = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Overlay Color
+     */
+    this.overlayColor = "var(--sl-color-primary-900)";
+    /**
+     * @uiName Overlay Opacity
+     */
+    this.overlayOpacity = "0.75";
+    /**
+     * @uiName Minimum Image Height
+     */
+    this.minHeight = "300px";
+    /**
+     * @uiName Image Link
+     * @uiType string
+     * @uiEnum ["overlay", "columns" ]
+     * @uiEnumNames ["Overlay", "Two-column"]
+     */
+    this.layout = "overlay";
+    /**
+     * @uiName Image Position
+     * @uiType string
+     * @uiEnum ["left", "right" ]
+     * @uiEnumNames ["Left", "Right"]
+     */
+    this.imagePos = "left";
+    /**
+     * @uiName Image Mobile Position
+     * @uiType string
+     * @uiEnum ["top", "bottom" ]
+     * @uiEnumNames ["Top", "Bottom"]
+     */
+    this.imageMobilePos = "top";
+    /**
+     * @uiName CTA Button Link Open in New Tab
+     */
+    this.buttonNewTab = false;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return index.h(MediaView, Object.assign({}, utils.getProps(this)));
+  }
+};
+
 function NavigationMenuView(props) {
   const { states } = props;
   const { styles } = states;
@@ -4884,6 +5050,132 @@ function useRegisterDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "",
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginBottom: "var(--sl-spacing-large)",
+      textAlign: "center",
+    },
+    Grid: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "var(--sl-spacing-large)",
+      "@media (max-width: 499px)": {
+        flexDirection: "column",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
+  }`;
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("div", { class: sheet.classes.Header },
+      index.h("div", { class: sheet.classes.Header }, props.header)),
+    index.h("div", { class: sheet.classes.Grid }, children)));
+}
+
+const ProgramExplainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(ProgramExplainerView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+  }
+};
+
+function ProgramExplainerStepView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      padding: "var(--sl-spacing-x-large)",
+      lineHeight: "var(--sl-line-height-dense)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      "@media (max-width: 499px)": {
+        flexDirection: "row",
+        width: "auto",
+        paddingBottom: "var(--sl-spacing-large)",
+      },
+    },
+    Text: {
+      "@media (max-width: 499px)": {
+        marginLeft: "var(--sl-spacing-large)",
+      },
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      marginTop: "var(--sl-spacing-x-large)",
+      "@media (max-width: 499px)": {
+        margin: "0",
+      },
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-small)",
+      "@media (max-width: 499px)": {
+        marginTop: "var(--sl-spacing-x-small)",
+      },
+    },
+    Media: {
+      width: "64px",
+      height: "64px",
+      borderRadius: "100%",
+      objectFit: "cover",
+      userSelect: "none",
+      background: "#FFF",
+      color: "var(--sl-color-primary-300)",
+      fontSize: "26px",
+      textAlign: "center",
+      lineHeight: "72px",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", null, props.imageUrl ? (index.h("img", { class: sheet.classes.Media, src: props.imageUrl })) : (index.h("div", { class: sheet.classes.Media },
+      index.h("sl-icon", { name: props.icon })))),
+    index.h("div", { class: sheet.classes.Text },
+      index.h("div", { class: sheet.classes.Header }, props.header),
+      index.h("div", { class: sheet.classes.Description }, props.description))));
+}
+
+const ProgramExplainerStep = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return index.h(ProgramExplainerStepView, Object.assign({}, utils.getProps(this)));
+  }
+};
+
 const debug = stencilHooks_module.browser('sq:useProgramMenu');
 const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
 function useProgramMenu(props) {
@@ -6199,6 +6491,7 @@ const SEND_EVENT = index_module.dist.gql `
 `;
 function useTaskCard(props) {
   const user = index_module.ie();
+  const locale = index_module.An();
   const [sendUserEvent, { data, loading: loadingEvent }] = index_module.qe(SEND_EVENT);
   const { refresh } = index_module.He();
   stencilHooks_module.useEffect(() => {
@@ -6225,7 +6518,7 @@ function useTaskCard(props) {
     props.eventKey ? sendEvent(props.eventKey) : openLink();
   }
   return {
-    states: { loadingEvent },
+    states: { loadingEvent, locale },
     callbacks: { sendEvent, onClick },
   };
 }
@@ -6328,10 +6621,6 @@ const TaskCard = class {
      * @uiOptions {"version": 1.1}
      */
     this.statType = "/programGoals/count/Referral-Started%2Freferrals";
-    /**
-     * @uiName Locale
-     */
-    this.locale = "en";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -6343,12 +6632,17 @@ const TaskCard = class {
     const { states, callbacks } = index_module.jn()
       ? useTaskCardDemo(this)
       : useTaskCard(this);
-    return (index.h(AutoColor.TaskCardView, { callbacks: callbacks, states: { loading, loadingEvent: states.loadingEvent, progress: value }, content: { ...utils.getProps(this) } }));
+    return (index.h(AutoColor.TaskCardView, { callbacks: callbacks, states: {
+        loading,
+        loadingEvent: states.loadingEvent,
+        progress: value,
+        locale: states.locale,
+      }, content: { ...utils.getProps(this) } }));
   }
 };
 function useTaskCardDemo(props) {
   return cjs.cjs({
-    states: { loadingEvent: false },
+    states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
       onClick: () => console.log("clicked"),
@@ -6523,12 +6817,15 @@ exports.sqm_card_feed = CardFeed;
 exports.sqm_divided_layout = DividedLayout;
 exports.sqm_edit_profile = EditProfile;
 exports.sqm_hook_story_container = SqmHookStoryContainer;
+exports.sqm_media = Media;
 exports.sqm_navigation_menu = NavigationMenu;
 exports.sqm_portal_change_password = PortalChangePassword;
 exports.sqm_portal_container = PortalContainer;
 exports.sqm_portal_frame = PortalFrame;
 exports.sqm_portal_login = PortalLogin;
 exports.sqm_portal_register = PortalRegister;
+exports.sqm_program_explainer = ProgramExplainer;
+exports.sqm_program_explainer_step = ProgramExplainerStep;
 exports.sqm_program_menu = ProgramMenu;
 exports.sqm_referral_iframe = SqmReferralIframe;
 exports.sqm_reward_exchange_list = SqmRewardExchangeList;

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

@@ -7,8 +7,8 @@ const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
 require('./extends-08099afd.js');
 require('./JSS-c65a40f1.js');
+const utils = require('./utils-01dbfd4a.js');
 const sqmHeroView = require('./sqm-hero-view-a13795c0.js');
-const utils = require('./utils-95e5317c.js');
 
 const Hero = class {
   constructor(hostRef) {

package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const global = require('./global-2292373a.js');
+const global = require('./global-e375afa1.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-10eb2374.js');
 require('./extends-08099afd.js');
 require('./insertcss-04580cfa.js');
 const cjs = require('./cjs-1066ec21.js');
-const index = require('./index-f2e54c49.js');
+const index = require('./index-d9b12889.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
 
 const GET_RANK = index.gql `
@@ -69,10 +69,7 @@ const LeaderboardRank = class {
   }
 };
 function useLeaderboardRankDemo(props) {
-  const intl = global.createIntl({
-    locale: "en",
-  });
-  const rank = intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
+  const rank = global.intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
     rank: 1,
   }) || "1st";
   return cjs.cjs({

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

@@ -8,7 +8,7 @@ require('./use-callback-e754042f.js');
 const index_module = require('./index.module-10eb2374.js');
 require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
-const useLeaderboard = require('./useLeaderboard-370ac19e.js');
+const useLeaderboard = require('./useLeaderboard-b1d34428.js');
 
 function LoadingSkeleton() {
   return (index.h("div", { style: { width: "100%" } },
@@ -37,6 +37,10 @@ const Leaderboard = class {
      * @uiName Empty State Text
      */
     this.emptyStateText = "No Users Yet";
+    /**
+     * @uiName Title displayed for users without names
+     */
+    this.anonymousUser = "Anonymous";
     this.ignored = true;
     stencilHooks_module.h$1(this);
     useLeaderboard.withShadowView(this);
@@ -52,6 +56,8 @@ const Leaderboard = class {
       statsheading: this.statsheading,
       rankType: this.rankType,
       leaderboardType: this.leaderboardType,
+      anonymousUser: this.anonymousUser,
+      emptyStateText: this.emptyStateText,
       interval: this.interval,
       showUser: this.showUser,
       showRank: this.showRank,

package/dist/cjs/sqm-navigation-sidebar-item.cjs.entry.js

@@ -10,7 +10,7 @@ require('./extends-08099afd.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 require('./JSS-c65a40f1.js');
-const utils = require('./utils-95e5317c.js');
+const utils = require('./utils-01dbfd4a.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6db6d810.js');
 
 function useNavigationSidebarItem(props) {

package/dist/cjs/sqm-popup-container.cjs.entry.js

@@ -7,7 +7,7 @@ const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-10eb2374.js');
 require('./extends-08099afd.js');
-const utils = require('./utils-95e5317c.js');
+const utils = require('./utils-01dbfd4a.js');
 
 const PopupContainerView = (props) => {
   const { states, callbacks } = props;

package/dist/cjs/{sqm-portal-email-verification-view-27ef0568.js → sqm-portal-email-verification-view-30176b23.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-2292373a.js');
+const global = require('./global-e375afa1.js');
 const mixins = require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
 const sqmTextSpanView = require('./sqm-text-span-view-f101dedf.js');

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-2292373a.js');
+require('./global-e375afa1.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-10eb2374.js');
 require('./extends-08099afd.js');
@@ -13,7 +13,7 @@ const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 require('./JSS-c65a40f1.js');
 require('./sqm-text-span-view-f101dedf.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-27ef0568.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-30176b23.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;

package/dist/cjs/{sqm-portal-footer-view-bf0fa7f3.js → sqm-portal-footer-view-90522bba.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-2292373a.js');
+const global = require('./global-e375afa1.js');
 const JSS = require('./JSS-c65a40f1.js');
 
 function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {

package/dist/cjs/sqm-portal-footer.cjs.entry.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-2292373a.js');
+require('./global-e375afa1.js');
 require('./use-callback-e754042f.js');
 require('./index.module-10eb2374.js');
 require('./extends-08099afd.js');
 require('./insertcss-04580cfa.js');
 require('./JSS-c65a40f1.js');
-const utils = require('./utils-95e5317c.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-bf0fa7f3.js');
+const utils = require('./utils-01dbfd4a.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-90522bba.js');
 
 const PortalFooter = class {
   constructor(hostRef) {

package/dist/cjs/{sqm-portal-profile-view-b4be1551.js → sqm-portal-profile-view-a5557f9f.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-2292373a.js');
+const global = require('./global-e375afa1.js');
 const JSS = require('./JSS-c65a40f1.js');
 const sqmTextSpanView = require('./sqm-text-span-view-f101dedf.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-d8cc826b.js');

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-2292373a.js');
+require('./global-e375afa1.js');
 require('./use-callback-e754042f.js');
 const index_module = require('./index.module-10eb2374.js');
 require('./extends-08099afd.js');
 require('./insertcss-04580cfa.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-c65a40f1.js');
+const utils = require('./utils-01dbfd4a.js');
 require('./sqm-text-span-view-f101dedf.js');
-const utils = require('./utils-95e5317c.js');
 require('./sqm-portal-container-view-d8cc826b.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-b4be1551.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-a5557f9f.js');
 
 const GET_USER = index_module.dist.gql `
   query {