@saasquatch/mint-components 1.6.8-0 → 1.6.8-2

package/dist/cjs/{sqm-big-stat_36.cjs.entry.js → sqm-big-stat_37.cjs.entry.js}

@@ -3,24 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-5344b631.js');
-const global = require('./global-3ebda209.js');
-const useCallback = require('./use-callback-05714e23.js');
-const index_module = require('./index.module-30d74cb5.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+const global = require('./global-ea52ea30.js');
+const useCallback = require('./use-callback-86e9ac75.js');
+const index_module = require('./index.module-bd6e817a.js');
+const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
 const JSS = require('./JSS-8503a151.js');
-const reRender = require('./re-render-6963789e.js');
-const useChildElements = require('./useChildElements-161457a6.js');
-require('./luxon-1b6e7276.js');
-const index$1 = require('./index-e4027f09.js');
+const reRender = require('./re-render-1d12dfdd.js');
+const useChildElements = require('./useChildElements-0a6ccd0f.js');
+require('./luxon-53e983a6.js');
 const utils = require('./utils-6847bc06.js');
-require('./sqm-text-span-view-1acdf7e9.js');
-const jsonpointer = require('./jsonpointer-11327262.js');
+require('./sqm-text-span-view-3c734dbb.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const useRegistrationFormState = require('./useRegistrationFormState-5f21a453.js');
-const ShadowViewAddon = require('./ShadowViewAddon-2d3ef919.js');
-require('./sqm-portal-container-view-ec1be9eb.js');
+const useRegistrationFormState = require('./useRegistrationFormState-ed30c0e6.js');
+const ShadowViewAddon = require('./ShadowViewAddon-7a412c0b.js');
+require('./sqm-portal-container-view-6accb54a.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -33,7 +32,7 @@ const BigStat = class {
      */
     this.flexReverse = false;
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -62,7 +61,7 @@ function buildFontsCssUrl(...fonts) {
 const BrandComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -128,7 +127,7 @@ const CardFeed = class {
      * @uiType number
      */
     this.gap = 24;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -236,7 +235,7 @@ const CheckboxField = class {
      * @uiName Optional
      */
     this.checkboxOptional = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -270,7 +269,7 @@ function useCheckboxFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const MessageLinkQuery = index$1.dist.gql `
+const MessageLinkQuery = index_module.dist.gql `
   query ($programId: ID) {
     user: viewer {
       ... on User {
@@ -279,7 +278,7 @@ const MessageLinkQuery = index$1.dist.gql `
     }
   }
 `;
-const WIDGET_ENGAGEMENT_EVENT = index$1.dist.gql `
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
   mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
@@ -344,7 +343,19 @@ const CouponCode = class {
      * @uiName Copy icon
      */
     this.isCopyIcon = true;
-    stencilHooks_module.h(this);
+    /**
+     * Set copy button label
+     *
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Coupon";
+    /**
+     * Set the copy button outside the field
+     *
+     * @uiName Copy button outside
+     */
+    this.buttonOutside = true;
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -363,6 +374,8 @@ function useDemoCouponCode(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
+    buttonOutside: props.buttonOutside,
+    copyButtonLabel: props.copyButtonLabel,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -416,7 +429,7 @@ function DividedLayoutView(props, children) {
   `;
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.LayoutContainer },
+  return (index.h("div", { class: sheet.classes.LayoutContainer, part: "sqm-layout-container" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
@@ -431,7 +444,7 @@ const DividedLayout = class {
      * @uiName Border Style
      */
     this.dividerStyle = "1px solid #EAEAEA";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -465,7 +478,7 @@ const DropdownField = class {
      * @default
      */
     this.dropdownOptional = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -496,7 +509,7 @@ function useDropdownFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_USER = index$1.dist.gql `
+const GET_USER = index_module.dist.gql `
   query {
     viewer {
       ... on User {
@@ -510,7 +523,7 @@ const GET_USER = index$1.dist.gql `
     }
   }
 `;
-const UPSERT_USER = index$1.dist.gql `
+const UPSERT_USER = index_module.dist.gql `
   mutation (
     $id: String!
     $accountId: String!
@@ -655,7 +668,7 @@ const EditProfile = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -827,7 +840,7 @@ function HeroImageView(props, children) {
   :host{
     display: block;
   }`;
-  return (index.h("div", { class: sheet.classes.Container },
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-hero-image-container" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
@@ -835,7 +848,7 @@ function HeroImageView(props, children) {
     props.layout === "columns" && ColumnView()));
   function OverlayView() {
     return (index.h("div", { class: sheet.classes.Background },
-      index.h("div", { class: sheet.classes.Overlay },
+      index.h("div", { class: sheet.classes.Overlay, part: "sqm-hero-image-overlay-container" },
         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
@@ -847,11 +860,11 @@ function HeroImageView(props, children) {
     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 })),
-        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
+          index.h("img", { class: sheet.classes.Image, src: props.imageUrl, part: "sqm-hero-image" })),
+        index.h("div", { class: "text-area", part: "sqm-hero-image-text-area" },
+          props.header && (index.h("div", { class: sheet.classes.Header, part: "sqm-hero-image-header" }, props.header)),
+          props.description && (index.h("div", { class: sheet.classes.Description, part: "sqm-hero-image-description" }, props.description)),
+          props.buttonText && (index.h("sl-button", { exportparts: "base: sqm-hero-image-btn", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
               ? window.open(props.buttonLink)
               : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
   }
@@ -909,7 +922,7 @@ const HeroImage = class {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingImage = "none";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -921,7 +934,7 @@ const SqmHookStoryContainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -959,7 +972,7 @@ const InputField = class {
      * @default
      */
     this.fieldOptional = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -987,7 +1000,7 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const GET_LEADERBOARD = index$1.dist.gql `
+const GET_LEADERBOARD = index_module.dist.gql `
   query (
     $type: String!
     $filter: UserLeaderboardFilterInput
@@ -1009,7 +1022,7 @@ const GET_LEADERBOARD = index$1.dist.gql `
     }
   }
 `;
-const GET_RANK = index$1.dist.gql `
+const GET_RANK = index_module.dist.gql `
   query (
     $type: String!
     $filter: UserLeaderboardFilterInput
@@ -1120,7 +1133,7 @@ const Leaderboard = class {
      */
     this.maxRows = 10;
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
     ShadowViewAddon.withShadowView(this);
   }
   disconnectedCallback() { }
@@ -1247,7 +1260,7 @@ const NameFields = class {
      * @uiName Last Name label
      */
     this.lastNameLabel = "Last Name";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1312,7 +1325,7 @@ const NavigationMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1444,7 +1457,7 @@ const PortalChangePassword = class {
      * @uiName Change Password Button Text
      */
     this.portalChangePasswordButtonText = "Change your password...";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1478,6 +1491,60 @@ function usePortalChangePasswordDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const PortalFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Support Email
+     */
+    this.supportEmail = "support@example.com";
+    /**
+     * @uiName Support Text
+     * @uiWidget textArea
+     */
+    this.supportText = "For program support, contact {email}";
+    /**
+     * @uiName Hide Powered By SaaSquatch
+     */
+    this.hidePoweredBy = false;
+    /**
+     * @uiName Powered By Link
+     */
+    this.poweredByLink = "https://saasquatch.com";
+    /**
+     * @uiName Padding Top
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingTop = "large";
+    /**
+     * @uiName Padding Right
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingRight = "large";
+    /**
+     * @uiName Padding Bottom
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingBottom = "large";
+    /**
+     * @uiName Padding Left
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingLeft = "large";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, utils.getProps(this)));
+  }
+  static get assetsDirs() { return ["../../assets"]; }
+};
+
 function usePortalFrame(footerContent, headerContent) {
   const [, rerender] = index_module.dn();
   return {
@@ -1499,7 +1566,7 @@ const PortalFrame = class {
      * @undocumented
      */
     this.notFullScreen = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1616,7 +1683,7 @@ const PortalLogin = class {
      * @uiWidget textArea
      */
     this.pageLabel = "Sign in to your account";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1840,7 +1907,7 @@ const PortalRegister = class {
      * @uiWidget pageSelect
      */
     this.loginPath = "/login";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1917,20 +1984,20 @@ function ProgramExplainerView(props, children) {
       display: block;
     }
   }`;
-  return (index.h("div", { class: sheet.classes.Container },
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-program-explainer-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)));
+      index.h("div", { class: sheet.classes.Header, part: "sqm-program-explainer-header" }, props.header)),
+    index.h("div", { class: sheet.classes.Grid, part: "sqm-program-explainer-grid-container" }, children)));
 }
 
 const ProgramExplainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1989,19 +2056,19 @@ function ProgramExplainerStepView(props) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("div", { class: sheet.classes.Container },
+  return (index.h("div", { class: sheet.classes.Container, part: "sqm-program-explainer-step-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("div", null, props.imageUrl ? (index.h("img", { class: sheet.classes.Media, src: props.imageUrl, part: "sqm-program-explainer-step-media" })) : (index.h("div", { class: sheet.classes.Media, part: "sqm-program-explainer-step-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))));
+      index.h("div", { class: sheet.classes.Header, part: "sqm-program-explainer-step-header" }, props.header),
+      index.h("div", { class: sheet.classes.Description, part: "sqm-program-explainer-step-description" }, props.description))));
 }
 
 const ProgramExplainerStep = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2044,7 +2111,7 @@ const ProgramMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2055,10 +2122,20 @@ const ProgramMenu = class {
 
 const style$1 = {
   Container: {
-    "& p": { margin: "0" },
-    display: "flex",
+    border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
     background: "var(--sl-color-neutral-0)",
+  },
+  EndContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "0 var(--sl-spacing-large)",
+  },
+  ColumnContainer: {
+    "& p": { margin: "0" },
+    display: "flex",
     "& .left": {
       boxSizing: "border-box",
       width: "50%",
@@ -2077,8 +2154,6 @@ const style$1 = {
         width: "100%",
       },
     },
-    border: "1px solid var(--sl-color-neutral-300)",
-    borderRadius: "var(--sl-border-radius-large)",
     "@media (max-width: 499px)": {
       flexDirection: "column",
       border: "none",
@@ -2093,17 +2168,19 @@ const vanillaStyle = `
     }
   `;
 function ReferralCardView(props) {
-  return (index.h("div", null,
+  return (index.h("div", { part: "sqm-referral-card-container", class: sheet$1.classes.Container },
     index.h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
-    index.h("div", { part: "sqm-base", class: sheet$1.classes.Container },
+    index.h("div", { class: sheet$1.classes.EndContainer }, props.slots.header),
+    index.h("div", { part: "sqm-columns", class: sheet$1.classes.ColumnContainer },
       index.h("div", { class: "left", style: {
           alignSelf: props.verticalAlignment,
         } }, props.slots.left),
       index.h("div", { class: "right", style: {
           alignSelf: props.verticalAlignment,
-        } }, props.slots.right))));
+        } }, props.slots.right)),
+    index.h("div", { class: sheet$1.classes.EndContainer }, props.slots.footer)));
 }
 
 const ReferralCard = class {
@@ -2117,19 +2194,21 @@ const ReferralCard = class {
      * @uiEnumNames ["Top", "Center", "Bottom"]
      */
     this.verticalAlignment = "start";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
     const slots = {
       left: index.h("slot", { name: "left" }),
       right: index.h("slot", { name: "right" }),
+      header: index.h("slot", { name: "header" }),
+      footer: index.h("slot", { name: "footer" }),
     };
     return (index.h(ReferralCardView, Object.assign({}, utils.getProps(this), { slots: slots }), index.h("slot", null)));
   }
 };
 
-const GET_USER_DETAILS = index$1.dist.gql `
+const GET_USER_DETAILS = index_module.dist.gql `
   query getUser($programId: ID) {
     viewer {
       ... on User {
@@ -2167,7 +2246,7 @@ const SqmReferralIframe = class {
      * @uiName Iframe Width
      */
     this.iframeWidth = "100%";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2800,7 +2879,7 @@ var module$1 = {};
 
 const confetti = module$1.exports;
 
-const GET_EXCHANGE_LIST = index$1.dist.gql `
+const GET_EXCHANGE_LIST = index_module.dist.gql `
   query getExchangeList {
     viewer {
       ... on User {
@@ -2843,7 +2922,7 @@ const GET_EXCHANGE_LIST = index$1.dist.gql `
     }
   }
 `;
-const EXCHANGE = index$1.dist.gql `
+const EXCHANGE = index_module.dist.gql `
   mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
     exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
       reward {
@@ -3136,7 +3215,7 @@ const SqmRewardExchangeList = class {
      * @uiName Cost Row Title
      */
     this.costTitle = "Cost to Redeem";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3270,7 +3349,7 @@ const SqmRouter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3317,7 +3396,7 @@ const Scroll = class {
      * @uiEnumNames ["Smooth", "Auto"]
      */
     this.scrollAnimation = "smooth";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3409,7 +3488,7 @@ const ShareButton = class {
      * @default
      */
     this.hidetext = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3432,7 +3511,7 @@ function useDemoShareButton(props) {
 }
 ShareButton.style = sqmShareButtonCss;
 
-const MessageLinkQuery$1 = index$1.dist.gql `
+const MessageLinkQuery$1 = index_module.dist.gql `
   query ($programId: ID) {
     user: viewer {
       ... on User {
@@ -3441,7 +3520,7 @@ const MessageLinkQuery$1 = index$1.dist.gql `
     }
   }
 `;
-const WIDGET_ENGAGEMENT_EVENT$1 = index$1.dist.gql `
+const WIDGET_ENGAGEMENT_EVENT$1 = index_module.dist.gql `
   mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
@@ -3506,7 +3585,19 @@ const ShareCode = class {
      * @uiName Copy icon
      */
     this.isCopyIcon = true;
-    stencilHooks_module.h(this);
+    /**
+     * Set copy button label
+     *
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Code";
+    /**
+     * Set the copy button outside the field
+     *
+     * @uiName Copy button outside
+     */
+    this.buttonOutside = true;
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3525,6 +3616,8 @@ function useDemoShareCode(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
+    buttonOutside: props.buttonOutside,
+    copyButtonLabel: props.copyButtonLabel,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -3563,7 +3656,19 @@ const ShareLink = class {
      * @uiName Copy icon
      */
     this.isCopyIcon = true;
-    stencilHooks_module.h(this);
+    /**
+     * Set copy button label
+     *
+     * @uiName Copy button label
+     */
+    this.copyButtonLabel = "Copy Link";
+    /**
+     * Set the copy button outside the field
+     *
+     * @uiName Copy button outside
+     */
+    this.buttonOutside = true;
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3582,6 +3687,8 @@ function useDemoShareLink(props) {
     tooltiptext: props.tooltiptext,
     isCopyIcon: props.isCopyIcon,
     textAlign: props.textAlign,
+    buttonOutside: props.buttonOutside,
+    copyButtonLabel: props.copyButtonLabel,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -3611,7 +3718,7 @@ const StatContainer = class {
      * @uiEnumNames ["Grid", "Flex"]
      */
     this.display = "grid";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3645,7 +3752,7 @@ const TableRow = class {
   }
 };
 
-const SEND_EVENT = index$1.dist.gql `
+const SEND_EVENT = index_module.dist.gql `
   mutation taskCardEvent($userEventInput: UserEventInput!) {
     logUserEvent(userEventInput: $userEventInput) {
       userId
@@ -3790,7 +3897,7 @@ const TaskCard = class {
      * @default
      */
     this.openNewTab = false;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3830,7 +3937,7 @@ const Timeline = class {
      * @uiEnumNames ["Gift", "Circle"]
      */
     this.icon = "gift";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3921,7 +4028,7 @@ const vanillaStyle$1 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (index.h("div", { class: sheet$2.classes.TimelineReward },
+  return (index.h("div", { class: sheet$2.classes.TimelineReward, part: "sqm-timeline-container" },
     index.h("style", { type: "text/css" },
       styleString$2,
       vanillaStyle$1),
@@ -3944,7 +4051,7 @@ const TimelineReward = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     this.iconState = "gift";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   async setIcon(value) {
     this.iconState = value;
@@ -3960,7 +4067,7 @@ function UserNameView(props) {
   return index.h(index.Host, null, props.loading ? props.loadingText : props.username);
 }
 
-const GET_USER_NAME = index$1.dist.gql `
+const GET_USER_NAME = index_module.dist.gql `
   query getUserName {
     viewer {
       ... on User {
@@ -3998,7 +4105,7 @@ const UserName = class {
      * @uiName Loading Text
      */
     this.loadingText = "...";
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4029,6 +4136,7 @@ exports.sqm_leaderboard = Leaderboard;
 exports.sqm_name_fields = NameFields;
 exports.sqm_navigation_menu = NavigationMenu;
 exports.sqm_portal_change_password = PortalChangePassword;
+exports.sqm_portal_footer = PortalFooter;
 exports.sqm_portal_frame = PortalFrame;
 exports.sqm_portal_login = PortalLogin;
 exports.sqm_portal_register = PortalRegister;