@saasquatch/mint-components 1.5.0-72 → 1.5.0-76

package/dist/esm/sqm-stencilbook.entry.js

@@ -1,10 +1,9 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
 import { a as commonjsGlobal, i as useMemo, k as useState, u as useEffect, c as createCommonjsModule, m as h$1 } from './stencil-hooks.module-2f159754.js';
-import './global-58010a55.js';
+import './global-c2179248.js';
 import './use-callback-d8ef4b5d.js';
 import { p as pn, h as hn, Y, d as dist, K as Ke, A as A$1 } from './index.module-ec3dcc82.js';
 import './extends-c31f1eff.js';
-import './insertcss-bcaf3818.js';
 import './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
@@ -20,15 +19,15 @@ import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-da91f5f3.j
 import { N as NameFieldsView } from './sqm-name-fields-view-69b1583f.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-816558e3.js';
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-a6f7f96c.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-2c8bfca8.js';
-import { a as PoweredByImg$1, P as PortalFooterView } from './sqm-portal-footer-view-a6c21fb9.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8acdcd89.js';
+import { a as PoweredByImg$1, P as PortalFooterView } from './sqm-portal-footer-view-9995ad03.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-fa088f83.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-f74db584.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-6a4ab589.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-71c84f2e.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-73e14282.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-cbf1cfdc.js';
 import { S as StatContainerView } from './sqm-stat-container-view-8a565c5a.js';
-import { S as ShareButtonView, a as ShareLinkView, L as LeaderboardView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as PortalChangePasswordView, d as PortalLoginView, e as PortalRegisterView, T as TaskCardView, f as ProgressBarView, R as ReferralIframeView, g as RewardExchangeView, C as CardFeedView, h as autoColorScaleCss, i as ShadowViewAddon } from './ShadowViewAddon-98630948.js';
+import { S as ShareButtonView, a as ShareLinkView, L as LeaderboardView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as PortalChangePasswordView, d as PortalLoginView, e as PortalRegisterView, T as TaskCardView, f as ProgressBarView, R as ReferralIframeView, g as RewardExchangeView, C as CardFeedView, h as autoColorScaleCss, i as ShadowViewAddon } from './ShadowViewAddon-9ee208b0.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-88a80af9.js';
 
 /**
@@ -10586,6 +10585,9 @@ const rewardsData$1 = {
     data: null,
   },
 };
+const RewardsCellCreditSingle = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
+};
 const RewardsCellCreditFull = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "19 Points available" }));
 };
@@ -10598,26 +10600,32 @@ const partial = {
 const RewardsCellCreditPartial = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "10 Points available" }));
 };
+const RewardsCellCreditCancelled = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...cancelled }, redeemedText: "0 Points redeemed" }));
+};
+const RewardsCellCreditExpired = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial, ...expired }, redeemedText: "9 Points redeemed" }));
+};
 const empty = {
   prettyAvailableValue: "0 Points",
+  prettyAvailableNumber: "0",
   prettyRedeemedCredit: "19 Points",
   prettyRedeemedNumber: "19",
   dateRedeemed: 1640038417468,
 };
-const RewardsCellCreditEmpty = () => {
+const RewardsCellCreditRedeemed = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "0 Points available" }));
 };
 const singleRedeemed = {
-  prettyValue: "1 Points",
+  prettyValue: "1 Point",
   prettyValueNumber: "1",
-  prettyAvailableNumber: "1",
-  prettyAvailableValue: "0 Points",
-  prettyRedeemedCredit: "1 Points",
-  prettyRedeemedNumber: "1",
-  dateRedeemed: 1640038417468,
 };
-const RewardsCellSingleRedeemed = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
+const longName = {
+  prettyValue: "19 Points with a really really super duper longest name ever in the world wide web",
+  prettyValueNumber: "19",
+};
+const RewardsCellCreditLong = () => {
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...longName }, availableText: "19 Points with a really really super duper longest name ever in the world wide web available" }));
 };
 const RewardsCellNonCredit = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: {
@@ -10626,9 +10634,16 @@ const RewardsCellNonCredit = () => {
       prettyValue: "SaaSquatch Giftcard",
     } }));
 };
-const SourceCellText = () => {
+const SourceCellManual = () => {
   return (h("sqm-rewards-table-source-cell", { reward: rewardsData$1, rewardSourceText: "Manual" }));
 };
+const SourceCellProgram = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: {
+      ...rewardsData$1,
+      rewardSource: "AUTOMATED",
+      program: { name: "Klip Loyalty" },
+    }, rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" }));
+};
 const exchange = {
   exchangedRewardRedemptionTransaction: {
     id: "61c100117a82a376d88041196",
@@ -10691,13 +10706,6 @@ const SourceCellReferral = () => {
 const SourceCellReferred = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referred(johnDoe) }, referralText: "Referred by" }));
 };
-const SourceCellProgram = () => {
-  return (h("sqm-rewards-table-source-cell", { reward: {
-      ...rewardsData$1,
-      rewardSource: "AUTOMATED",
-      program: { name: "Stencil Loyalty Program" },
-    }, rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programId}} other {}}" }));
-};
 const SourceCellAnonymousUser = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
 };
@@ -10769,16 +10777,19 @@ const EmptyCell$2 = () => {
 const RewardsTableCell = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardsTableCell_stories,
+  RewardsCellCreditSingle: RewardsCellCreditSingle,
   RewardsCellCreditFull: RewardsCellCreditFull,
   RewardsCellCreditPartial: RewardsCellCreditPartial,
-  RewardsCellCreditEmpty: RewardsCellCreditEmpty,
-  RewardsCellSingleRedeemed: RewardsCellSingleRedeemed,
+  RewardsCellCreditCancelled: RewardsCellCreditCancelled,
+  RewardsCellCreditExpired: RewardsCellCreditExpired,
+  RewardsCellCreditRedeemed: RewardsCellCreditRedeemed,
+  RewardsCellCreditLong: RewardsCellCreditLong,
   RewardsCellNonCredit: RewardsCellNonCredit,
-  SourceCellText: SourceCellText,
+  SourceCellManual: SourceCellManual,
+  SourceCellProgram: SourceCellProgram,
   SourceCellExchange: SourceCellExchange,
   SourceCellReferral: SourceCellReferral,
   SourceCellReferred: SourceCellReferred,
-  SourceCellProgram: SourceCellProgram,
   SourceCellAnonymousUser: SourceCellAnonymousUser,
   SourceCellDeletedUser: SourceCellDeletedUser,
   StatusCellAvailable: StatusCellAvailable,
@@ -10822,6 +10833,60 @@ const emptyElement$1 = (h("div", { slot: "empty", style: { display: "contents" }
           h("sqm-text", { slot: "label" },
             h("h3", null, "View your referral details")),
           h("sqm-text", { slot: "content" }, "Track the status of your referrals and rewards earned by referring friends")))))));
+const rewardsTablePropsEmpty = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "empty",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "Next",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [],
+    emptyElement: emptyElement$1,
+  },
+};
+const rewardsTablePropsLoading = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "loading",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "Next",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [],
+    loadingElement: loadingElement$1,
+  },
+};
 const rewardsTableProps = {
   states: {
     hasPrev: false,
@@ -10833,7 +10898,7 @@ const rewardsTableProps = {
     textOverrides: {
       showLabels: true,
       prevLabel: "Prev",
-      moreLabel: "View More",
+      moreLabel: "Next",
     },
     hiddenColumns: "",
     mdBreakpoint: 899,
@@ -10852,17 +10917,49 @@ const rewardsTableProps = {
         h(SourceCellReferral, null),
         h(DateCell$1, null),
       ],
+      [
+        h(RewardsCellCreditCancelled, null),
+        h(StatusCellCancelled, null),
+        h(SourceCellDeletedUser, null),
+        h(DateCell$1, null),
+      ],
+      [
+        h(RewardsCellCreditRedeemed, null),
+        h(StatusCellRedeemed, null),
+        h(SourceCellManual, null),
+        h(DateCell$1, null),
+      ],
+      [
+        h(RewardsCellCreditPartial, null),
+        h(StatusCellAvailableExpiry, null),
+        h(SourceCellReferred, null),
+        h(DateCell$1, null),
+      ],
+      [
+        h(RewardsCellCreditLong, null),
+        h(StatusCellAvailableExpiry, null),
+        h(SourceCellReferred, null),
+        h(DateCell$1, null),
+      ],
     ],
   },
 };
-const RewardsTable = () => {
+const RewardsTableFull = () => {
   return h(GenericTableView, Object.assign({}, rewardsTableProps));
+};
+const RewardsTableEmpty = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTablePropsEmpty));
+};
+const RewardsTableLoading = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTablePropsLoading));
 };
 
-const RewardsTable$1 = /*#__PURE__*/Object.freeze({
+const RewardsTable = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardsTable_stories,
-  RewardsTable: RewardsTable
+  RewardsTableFull: RewardsTableFull,
+  RewardsTableEmpty: RewardsTableEmpty,
+  RewardsTableLoading: RewardsTableLoading
 });
 
 const UseReferralTable_stories = {
@@ -10969,40 +11066,52 @@ const HeroImage_stories = {
   title: "Components/Hero Image",
 };
 const OverlayHeader = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 const OverlayDescription = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 const OverlayButton = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+const OverlayPadding = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxx-small" }));
 };
 const OverlayLong = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 const OverlayLeft = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 const OverlayCenter = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 const OverlayRight = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
-const OverlayCustom = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay" }));
+const OverlayCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+const OverlayCustomOpacity = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.3", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 const Columns = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+const ColumnsPadding = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "xxxx-large", "padding-text": "large" }));
+};
+const ColumnsLong = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 const ColumnsReverse = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 const ColumnsCustomPercentage = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/2evfTx7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "25%", "max-height": "150px", "max-width": "100%", paddingImage: "large", paddingText: "large" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/MVgOJn7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "33%", "padding-image": "large", "padding-text": "large", "background-color": "" }));
 };
-const ColumnsCustom = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
+const ColumnsCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 
 const HeroImage = /*#__PURE__*/Object.freeze({
@@ -11011,15 +11120,19 @@ const HeroImage = /*#__PURE__*/Object.freeze({
   OverlayHeader: OverlayHeader,
   OverlayDescription: OverlayDescription,
   OverlayButton: OverlayButton,
+  OverlayPadding: OverlayPadding,
   OverlayLong: OverlayLong,
   OverlayLeft: OverlayLeft,
   OverlayCenter: OverlayCenter,
   OverlayRight: OverlayRight,
-  OverlayCustom: OverlayCustom,
+  OverlayCustomColors: OverlayCustomColors,
+  OverlayCustomOpacity: OverlayCustomOpacity,
   Columns: Columns,
+  ColumnsPadding: ColumnsPadding,
+  ColumnsLong: ColumnsLong,
   ColumnsReverse: ColumnsReverse,
   ColumnsCustomPercentage: ColumnsCustomPercentage,
-  ColumnsCustom: ColumnsCustom
+  ColumnsCustomColors: ColumnsCustomColors
 });
 
 const ReferralCard_stories = {
@@ -11196,35 +11309,39 @@ const Image_stories = {
 const Image = () => {
   return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png" });
 };
-const ImageAlignLeft = () => {
-  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "left" });
+const ImageAlignmentLeft = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "left" }));
 };
-const ImageAlignCenter = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "center" }));
+const ImageAlignmentCenter = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "center" }));
 };
-const ImageAlignRight = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "right" }));
+const ImageAlignmentRight = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "right" }));
 };
 const ImageMarginLeft = () => {
-  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", left: "100px" });
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", left: "100px", alignment: "center" }));
 };
 const ImageMarginRight = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", right: "100px" }));
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", right: "100px", alignment: "center" }));
 };
 const ImageBackground = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick" }));
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick", alignment: "center" }));
+};
+const ImageSizeConstrained = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/oIiVdMM.jpg", minHeight: "192px", maxWidth: "192px" }));
 };
 
 const Image$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Image_stories,
   Image: Image,
-  ImageAlignLeft: ImageAlignLeft,
-  ImageAlignCenter: ImageAlignCenter,
-  ImageAlignRight: ImageAlignRight,
+  ImageAlignmentLeft: ImageAlignmentLeft,
+  ImageAlignmentCenter: ImageAlignmentCenter,
+  ImageAlignmentRight: ImageAlignmentRight,
   ImageMarginLeft: ImageMarginLeft,
   ImageMarginRight: ImageMarginRight,
-  ImageBackground: ImageBackground
+  ImageBackground: ImageBackground,
+  ImageSizeConstrained: ImageSizeConstrained
 });
 
 const TitledSection_stories = {
@@ -11469,6 +11586,73 @@ const TitledSection = /*#__PURE__*/Object.freeze({
   LabelMargin: LabelMargin
 });
 
+const Scroll_stories = {
+  title: "Components/Scroll",
+};
+const ScrollTag = () => {
+  return (h("div", { style: { position: "relative", height: "2000px" } },
+    h("sqm-scroll", { "scroll-tag-name": "sqm-text" }),
+    h("div", { style: { position: "absolute", bottom: "0" } },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards"),
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+const ScrollId = () => {
+  return (h("div", { style: { position: "relative", height: "2000px" } },
+    h("sqm-scroll", { "scroll-id": "my-id" }),
+    h("div", { style: { position: "absolute", bottom: "0" } },
+      h("sqm-text", { slot: "label", id: "my-id" },
+        h("h3", null, "Earn more rewards"),
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+const ScrollTabGroup = () => {
+  return (h("div", { style: { position: "relative", height: "2000px" } },
+    h("sqm-scroll", { "scroll-tag-name": "sl-tab-group" }),
+    h("div", { style: { position: "absolute", bottom: "0" } },
+      h("sqm-text", { slot: "label", id: "my-id" },
+        h("sl-tab-group", null,
+          h("sl-tab", { slot: "nav", panel: "referralLeaderboard" },
+            "Leaderboard",
+            " "),
+          h("sl-tab", { slot: "nav", panel: "referralHistory" },
+            "Referral history",
+            " "),
+          h("sl-tab", { slot: "nav", panel: "rewardHistory" },
+            "Reward history",
+            " "),
+          h("sl-tab", { slot: "nav", panel: "rewardExchange" },
+            "Redeem",
+            " "),
+          h("sl-tab-panel", { name: "referralHistory" },
+            h("sqm-referral-table", { "per-page": "4" },
+              h("sqm-referral-table-user-column", { "column-title": "User" }),
+              h("sqm-referral-table-status-column", { "column-title": "Referral status" }),
+              h("sqm-referral-table-rewards-column", null),
+              h("sqm-referral-table-date-column", { "column-title": "Date referred", "date-shown": "dateReferralStarted" }))),
+          h("sl-tab-panel", { name: "referralLeaderboard" },
+            h("sqm-titled-section", { padding: "medium", "label-margin": "small" },
+              h("sqm-text", { slot: "content" },
+                h("p", null, "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"))),
+            h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true" })),
+          h("sl-tab-panel", { name: "rewardHistory" },
+            h("sqb-program-section", { "program-id": "" },
+              h("sqm-rewards-table", { "per-page": "4" },
+                h("sqm-rewards-table-reward-column", null),
+                h("sqm-rewards-table-source-column", null),
+                h("sqm-rewards-table-status-column", null),
+                h("sqm-rewards-table-date-column", null)))),
+          h("sl-tab-panel", { name: "rewardExchange" },
+            h("sqm-reward-exchange-list", { id: "hello" })))))));
+};
+
+const Scroll = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Scroll_stories,
+  ScrollTag: ScrollTag,
+  ScrollId: ScrollId,
+  ScrollTabGroup: ScrollTabGroup
+});
+
 /**
  *
  * Themes
@@ -14160,13 +14344,14 @@ const stories = [
   CardFeed,
   PortalContainer,
   RewardsTableCell,
-  RewardsTable$1,
+  RewardsTable,
   UseReferralTable,
   HeroImage,
   ReferralCard,
   Timeline,
   Image$1,
   TitledSection,
+  Scroll,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/esm/sqm-tab.entry.js

@@ -1,15 +1,50 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { m as h } from './stencil-hooks.module-2f159754.js';
+import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
+import { k as useState, u as useEffect, m as h$1 } from './stencil-hooks.module-2f159754.js';
+import './extends-c31f1eff.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
+import { g as getProps } from './utils-1d345130.js';
+
+const style = {
+  OpenStyle: {
+    "sl-button::part(base)": {
+      background: "orange",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const TabView = ({ open }, children) => {
+  console.log("OPEN IS ", open);
+  return (h(Host, null,
+    h("style", { type: "text/css" }, styleString),
+    h("div", { style: { display: open ? "block" : "none" } }, children)));
+};
+
+function useTab() {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    return setOpen(!open);
+  }, []);
+  return {
+    state: {
+      open,
+    },
+    callbacks: {
+      setOpen,
+    },
+  };
+}
 
 const Tab = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.ignored = true;
-    h(this);
+    h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    return (h$1(Host, { style: { display: "block" } }, h$1("sl-tab", null, h$1("slot", null))));
+    const { header, open } = getProps(this);
+    const { callbacks, state } = useTab();
+    return (h(TabView, { open: open }, h("slot", null)));
   }
 };
 

package/dist/esm/sqm-tabs.entry.js

@@ -0,0 +1,50 @@
+import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
+import { m as h$1 } from './stencil-hooks.module-2f159754.js';
+import './use-callback-d8ef4b5d.js';
+import './index.module-ec3dcc82.js';
+import './extends-c31f1eff.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
+import { u as useChildElements } from './useChildElements-0146a8bd.js';
+
+const style = {};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const TabsView = ({ callbacks, content }, children) => {
+  return (h(Host, null,
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: `code-container` },
+      h("div", { class: "sq-tabs" }, content.tabs.map((tab, i) => {
+        const openClass = tab.open ? "sq-open" : "";
+        return (h("div", { class: `sq-tab ${openClass} ` },
+          h("button", { role: "tab", class: `sq-tab-button`, onClick: () => callbacks.openTab(i) }, tab.header)));
+      })),
+      h("slot", null)),
+    children));
+};
+
+function useTabs() {
+  const tabs = useChildElements();
+  console.log({ tabs });
+  function openTab(tabIndex) {
+    const currentTabs = tabs.map((tab) => {
+      tab.open = false;
+      return tab;
+    });
+    currentTabs[tabIndex].open = true;
+  }
+  return { callbacks: { openTab }, content: { tabs } };
+}
+
+const Tabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { content, callbacks } = useTabs();
+    return (h(TabsView, { callbacks: callbacks, content: content }, h("slot", null)));
+  }
+};
+
+export { Tabs as sqm_tabs };

package/dist/esm/useChildElements-0146a8bd.js

@@ -0,0 +1,19 @@
+import { k as useState, u as useEffect } from './stencil-hooks.module-2f159754.js';
+import { P } from './index.module-ec3dcc82.js';
+
+function useChildElements() {
+  const host = P();
+  const initialState = host.children.length ? Array.from(host.children) : [];
+  const [childElements, setChildElements] = useState(initialState);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const children = Array.from(host.children);
+      setChildElements([...children]);
+    });
+    observer.observe(host, { childList: true });
+    return () => observer.disconnect();
+  }, [host]);
+  return childElements;
+}
+
+export { useChildElements as u };

package/dist/esm/{useReferralTable-bccb9ac0.js → useReferralTable-596519fc.js}

@@ -1,7 +1,8 @@
 import { h } from './index-17b4da69.js';
 import { e as useReducer, u as useEffect } from './stencil-hooks.module-2f159754.js';
 import { d as dist, n as ne, M, R, b as mn, w as wn } from './index.module-ec3dcc82.js';
-import { u as useRerenderListener, a as useChildElements } from './useChildElements-c11d6189.js';
+import { u as useRerenderListener } from './re-render-43311710.js';
+import { u as useChildElements } from './useChildElements-0146a8bd.js';
 
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = dist.gql `