@saasquatch/mint-components 1.5.0-63 → 1.5.0-64

package/dist/cjs/{AutoColor-86984176.js → AutoColor-b11cfa86.js}

@@ -7,7 +7,6 @@ const index_module = require('./index.module-54724339.js');
 const mixins = require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
 const luxon = require('./luxon-59ca7d19.js');
-const utils = require('./utils-01dbfd4a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-f101dedf.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-185b4bd0.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-7ce92f61.js');
@@ -588,17 +587,7 @@ const style$4 = {
   },
 };
 const sheet$4 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
-function Details(props) {
-  const rid = Math.random().toString(36).slice(2);
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" }, styleString$4),
-    index.h("span", { class: sheet$4.classes.Description },
-      index.h("input", { type: "checkbox", id: "details-" + rid }),
-      index.h("label", { class: "details", htmlFor: "details-" + rid },
-        index.h("sl-icon", { name: "chevron-down" })),
-      index.h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
-}
+const styleString$4 = sheet$4.toString();
 
 const Gift = () => {
   return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1177,9 +1166,9 @@ function TaskCardView(props) {
   console.log("TASK CARD PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
   console.log({ props });
   const { callbacks, states, content } = props;
-  const dateStart = content.showExpiry &&
+  const dateStart = content.rewardDuration &&
     luxon.luxon.DateTime.fromISO(content.rewardDuration.split("/")[0]);
-  const dateEnd = content.showExpiry &&
+  const dateEnd = content.rewardDuration &&
     luxon.luxon.DateTime.fromISO(content.rewardDuration.split("/")[1]);
   const dateToday = luxon.luxon.DateTime.now();
   if (content.displayDuration) {
@@ -1194,105 +1183,16 @@ function TaskCardView(props) {
   const checkmark_circle$1 = checkmark_circle();
   const checkmark_filled$1 = checkmark_filled();
   const arrow_left_right$1 = arrow_left_right();
-  const showComplete = states.progress >= content.goal;
-  const repetitions = content.showProgressBar
-    ? Math.floor(states.progress / content.goal)
-    : states.progress;
-  const taskComplete = (showComplete && content.repeatable === false) ||
-    (content.finite && states.progress >= content.finite * content.goal);
-  const taskEnded = content.showExpiry && dateEnd <= dateToday;
-  const taskNotStarted = content.showExpiry && dateToday <= dateStart;
+  const taskEnded = dateToday > dateEnd;
+  const taskNotStarted = dateToday < dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
-  const vanillaStyle = `
-	:host{
-		display: block;
-		margin-bottom: var(--sl-spacing-large);
-	}
-  `;
-  return (index.h("div", { class: sheet$6.classes.TaskCard },
-    index.h("style", { type: "text/css" },
-      styleString$6,
-      vanillaStyle),
-    !states.loading && taskNotStarted && (index.h("div", { class: sheet$6.classes.NotStarted },
-      index.h("span", { class: "icon" },
-        index.h("sl-icon", { name: "info-circle-fill" })),
-      global.intl.formatMessage({
-        id: "startsOnMessage",
-        defaultMessage: content.startsOnMessage,
-      }, {
-        startDate: dateStart
-          .setLocale(utils.luxonLocale(states.locale))
-          .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
-      }))),
-    !states.loading && taskEnded && (index.h("div", { class: sheet$6.classes.Ended },
-      index.h("span", { class: "icon" },
-        index.h("sl-icon", { name: "exclamation-triangle-fill" })),
-      global.intl.formatMessage({
-        id: "endedMessage",
-        defaultMessage: content.endedMessage,
-      }, {
-        endDate: dateEnd
-          .setLocale(utils.luxonLocale(states.locale))
-          .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
-      }))),
-    index.h("div", { style: {
-        borderRadius: taskUnavailable &&
-          "0 0 var(--sl-border-radius-medium) var(--sl-border-radius-medium)",
-      }, class: taskUnavailable
-        ? "main expired"
-        : taskComplete
-          ? "main complete"
-          : "main" },
-      index.h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
-        index.h("div", { class: sheet$6.classes.Header }, states.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
-          showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
-          index.h("span", { class: "value" }, content.rewardAmount),
-          index.h("span", { class: "text" }, content.rewardUnit)))),
-        states.loading ? (index.h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (index.h("div", { class: "title", style: {
-            marginBottom: !content.description
-              ? content.steps
-                ? "var(--sl-spacing-x-large)"
-                : content.showProgressBar
-                  ? "var(--sl-spacing-xx-large)"
-                  : ""
-              : "",
-          } }, content.cardTitle)),
-        states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && index.h(Details, Object.assign({}, props))),
-        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { complete: taskComplete, expired: taskUnavailable })))),
-        index.h("div", { class: sheet$6.classes.Footer }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
-          index.h("span", { class: "text" },
-            content.repeatable && (index.h("div", null,
-              index.h("span", { class: repetitions > 0
-                  ? taskUnavailable
-                    ? "icon neutral"
-                    : "icon success"
-                  : "icon" }, arrow_left_right$1),
-              index.h("span", { class: repetitions > 0
-                  ? taskUnavailable
-                    ? "neutral"
-                    : "success"
-                  : "" }, global.intl.formatMessage({
-                id: "completedMessage",
-                defaultMessage: content.completedText,
-              }, {
-                finite: content.finite,
-                count: content.finite
-                  ? Math.min(repetitions, content.finite)
-                  : repetitions,
-              })))),
-            content.showExpiry && !taskUnavailable && (index.h("span", { class: "datetime" }, global.intl.formatMessage({
-              id: "expiryMessage",
-              defaultMessage: content.expiryMessage,
-            }, {
-              endDate: dateEnd
-                .setLocale(utils.luxonLocale(states.locale))
-                .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
-            })))),
-          index.h("sl-button", { class: taskUnavailable
-              ? "action neutral"
-              : taskComplete
-                ? "action disabled"
-                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable }, content.buttonText))))))));
+  console.log("dateToday: " + dateToday);
+  console.log("dateEnd: " + dateEnd);
+  console.log("dateStart: " + dateStart);
+  console.log("taskEnded: " + taskEnded);
+  console.log("taskNotStarted: " + taskNotStarted);
+  console.log("taskUnavailable: " + taskUnavailable);
+  return index.h("div", null, "hello world!");
 }
 
 function ReferralIframeView(props) {

package/dist/cjs/sqm-big-stat.cjs.entry.js

@@ -10,7 +10,7 @@ require('./extends-08099afd.js');
 require('./cjs-1066ec21.js');
 require('./JSS-c65a40f1.js');
 const sqmBigStatView = require('./sqm-big-stat-view-e5dc0877.js');
-const useDemoBigStat = require('./useDemoBigStat-42fa7a69.js');
+const useDemoBigStat = require('./useDemoBigStat-426e3319.js');
 
 const BigStat = class {
   constructor(hostRef) {

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

@@ -17,9 +17,9 @@ const useChildElements = require('./useChildElements-4bc9b219.js');
 require('./luxon-59ca7d19.js');
 const utils = require('./utils-01dbfd4a.js');
 require('./sqm-text-span-view-f101dedf.js');
-const useDemoBigStat = require('./useDemoBigStat-42fa7a69.js');
+const useDemoBigStat = require('./useDemoBigStat-426e3319.js');
 require('./sqm-portal-container-view-185b4bd0.js');
-const AutoColor = require('./AutoColor-86984176.js');
+const AutoColor = require('./AutoColor-b11cfa86.js');
 require('./sqm-portal-section-view-7ce92f61.js');
 
 /**
@@ -440,7 +440,7 @@ function HeroImageView(props, children) {
       color: props.textColor || "var(--sl-color-neutral-900)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
-        padding: `var(--sl-spacing-${props.paddingImage})`,
+        padding: "var(--sl-spacing-" + props.paddingImage + ")",
         boxSizing: "border-box",
         margin: props.maxHeight ? "auto" : "",
         "@media (max-width: 599px)": {
@@ -451,7 +451,7 @@ function HeroImageView(props, children) {
         width: props.imagePercentage
           ? 100 - props.imagePercentage + "%"
           : "50%",
-        padding: `var(--sl-spacing-${props.paddingText})`,
+        padding: "var(--sl-spacing-" + props.paddingText + ")",
         alignSelf: "center",
         boxSizing: "border-box",
         "@media (max-width: 599px)": {
@@ -493,6 +493,7 @@ function HeroImageView(props, children) {
   :host{
     display: block;
   }`;
+  console.log(props);
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" },
       vanillaStyle,
@@ -6826,9 +6827,9 @@ const TaskCard = class {
   }
 };
 function useTaskCardDemo(props) {
-  console.log("Task Card Props", props);
+  console.log("Task Card Props", props.demoData);
   return cjs.cjs({
-    states: { loadingEvent: false, progress: 0, locale: "en" },
+    states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
       onClick: () => console.log("clicked"),

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

@@ -14,11 +14,10 @@ require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
 const GenericTableView = require('./GenericTableView-c8f8f3fe.js');
 const luxon = require('./luxon-59ca7d19.js');
-require('./utils-01dbfd4a.js');
 require('./sqm-text-span-view-f101dedf.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-d9ac6a95.js');
 const sqmBigStatView = require('./sqm-big-stat-view-e5dc0877.js');
-const useDemoBigStat = require('./useDemoBigStat-42fa7a69.js');
+const useDemoBigStat = require('./useDemoBigStat-426e3319.js');
 const sqmHeroView = require('./sqm-hero-view-a13795c0.js');
 const useLeaderboard = require('./useLeaderboard-9e950912.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
@@ -33,7 +32,7 @@ const sqmPortalProfileView = require('./sqm-portal-profile-view-04eaaac9.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1fdc957e.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4c78e231.js');
 const sqmStatContainerView = require('./sqm-stat-container-view-5b2db929.js');
-const AutoColor = require('./AutoColor-86984176.js');
+const AutoColor = require('./AutoColor-b11cfa86.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-7ce92f61.js');
 
 /**
@@ -10860,9 +10859,7 @@ const ColumnsReverse = () => {
   return (index.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" }));
 };
 const ColumnsCustomPercentage = () => {
-  return (index.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%", 
-    //   minHeight="125px"
-    maxHeight: "150px", maxWidth: "100%", paddingImage: "large", paddingText: "large" }));
+  return (index.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" }));
 };
 const ColumnsCustom = () => {
   return (index.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" }));

package/dist/cjs/{useDemoBigStat-42fa7a69.js → useDemoBigStat-426e3319.js}

@@ -929,6 +929,7 @@ function useDemoBigStat(props) {
   return {
     props: cjs.cjs({
       statvalue: "12345",
+      value: 0,
       flexReverse: false,
       alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),

package/dist/collection/components/sqm-big-stat/useDemoBigStat.js

@@ -22,6 +22,7 @@ export function useDemoBigStat(props) {
   return {
     props: deepmerge({
       statvalue: "12345",
+      value: 0,
       flexReverse: false,
       alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),

package/dist/collection/components/sqm-hero-image/HeroImage.stories.js

@@ -33,9 +33,7 @@ export 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" }));
 };
 export 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%", 
-    //   minHeight="125px"
-    maxHeight: "150px", maxWidth: "100%", paddingImage: "large", paddingText: "large" }));
+  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" }));
 };
 export 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" }));

package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js

@@ -46,7 +46,7 @@ export function HeroImageView(props, children) {
       color: props.textColor || "var(--sl-color-neutral-900)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
-        padding: `var(--sl-spacing-${props.paddingImage})`,
+        padding: "var(--sl-spacing-" + props.paddingImage + ")",
         boxSizing: "border-box",
         margin: props.maxHeight ? "auto" : "",
         "@media (max-width: 599px)": {
@@ -57,7 +57,7 @@ export function HeroImageView(props, children) {
         width: props.imagePercentage
           ? 100 - props.imagePercentage + "%"
           : "50%",
-        padding: `var(--sl-spacing-${props.paddingText})`,
+        padding: "var(--sl-spacing-" + props.paddingText + ")",
         alignSelf: "center",
         boxSizing: "border-box",
         "@media (max-width: 599px)": {
@@ -99,6 +99,7 @@ export function HeroImageView(props, children) {
   :host{
     display: block;
   }`;
+  console.log(props);
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" },
       vanillaStyle,

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -163,9 +163,9 @@ export function TaskCardView(props) {
   console.log("TASK CARD PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
   console.log({ props });
   const { callbacks, states, content } = props;
-  const dateStart = content.showExpiry &&
+  const dateStart = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[0]);
-  const dateEnd = content.showExpiry &&
+  const dateEnd = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[1]);
   const dateToday = DateTime.now();
   if (content.displayDuration) {
@@ -186,9 +186,17 @@ export function TaskCardView(props) {
     : states.progress;
   const taskComplete = (showComplete && content.repeatable === false) ||
     (content.finite && states.progress >= content.finite * content.goal);
-  const taskEnded = content.showExpiry && dateEnd <= dateToday;
-  const taskNotStarted = content.showExpiry && dateToday <= dateStart;
+  const taskEnded = dateToday > dateEnd;
+  const taskNotStarted = dateToday < dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
+  console.log("dateToday: " + dateToday);
+  console.log("dateEnd: " + dateEnd);
+  console.log("dateStart: " + dateStart);
+  console.log("taskEnded: " + taskEnded);
+  console.log("taskNotStarted: " + taskNotStarted);
+  console.log("taskUnavailable: " + taskUnavailable);
+  if (1 == 1)
+    return h("div", null, "hello world!");
   const vanillaStyle = `
 	:host{
 		display: block;

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -667,9 +667,9 @@ export class TaskCard {
   }; }
 }
 function useTaskCardDemo(props) {
-  console.log("Task Card Props", props);
+  console.log("Task Card Props", props.demoData);
   return deepmerge({
-    states: { loadingEvent: false, progress: 0, locale: "en" },
+    states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
       onClick: () => console.log("clicked"),

package/dist/esm/{AutoColor-8f7bfd93.js → AutoColor-237cc98b.js}

@@ -5,7 +5,6 @@ import { d as dist, M, n as ne, x, b as mn, D as De, f as D } from './index.modu
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 import { l as luxon } from './luxon-5fa22651.js';
-import { l as luxonLocale } from './utils-1d345130.js';
 import { T as TextSpanView } from './sqm-text-span-view-7e61c95c.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-cf79ed90.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-6649c4c6.js';
@@ -586,17 +585,7 @@ const style$4 = {
   },
 };
 const sheet$4 = createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
-function Details(props) {
-  const rid = Math.random().toString(36).slice(2);
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString$4),
-    h("span", { class: sheet$4.classes.Description },
-      h("input", { type: "checkbox", id: "details-" + rid }),
-      h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { name: "chevron-down" })),
-      h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
-}
+const styleString$4 = sheet$4.toString();
 
 const Gift = () => {
   return (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1175,9 +1164,9 @@ function TaskCardView(props) {
   console.log("TASK CARD PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
   console.log({ props });
   const { callbacks, states, content } = props;
-  const dateStart = content.showExpiry &&
+  const dateStart = content.rewardDuration &&
     luxon.DateTime.fromISO(content.rewardDuration.split("/")[0]);
-  const dateEnd = content.showExpiry &&
+  const dateEnd = content.rewardDuration &&
     luxon.DateTime.fromISO(content.rewardDuration.split("/")[1]);
   const dateToday = luxon.DateTime.now();
   if (content.displayDuration) {
@@ -1192,105 +1181,16 @@ function TaskCardView(props) {
   const checkmark_circle$1 = checkmark_circle();
   const checkmark_filled$1 = checkmark_filled();
   const arrow_left_right$1 = arrow_left_right();
-  const showComplete = states.progress >= content.goal;
-  const repetitions = content.showProgressBar
-    ? Math.floor(states.progress / content.goal)
-    : states.progress;
-  const taskComplete = (showComplete && content.repeatable === false) ||
-    (content.finite && states.progress >= content.finite * content.goal);
-  const taskEnded = content.showExpiry && dateEnd <= dateToday;
-  const taskNotStarted = content.showExpiry && dateToday <= dateStart;
+  const taskEnded = dateToday > dateEnd;
+  const taskNotStarted = dateToday < dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
-  const vanillaStyle = `
-	:host{
-		display: block;
-		margin-bottom: var(--sl-spacing-large);
-	}
-  `;
-  return (h("div", { class: sheet$6.classes.TaskCard },
-    h("style", { type: "text/css" },
-      styleString$6,
-      vanillaStyle),
-    !states.loading && taskNotStarted && (h("div", { class: sheet$6.classes.NotStarted },
-      h("span", { class: "icon" },
-        h("sl-icon", { name: "info-circle-fill" })),
-      intl.formatMessage({
-        id: "startsOnMessage",
-        defaultMessage: content.startsOnMessage,
-      }, {
-        startDate: dateStart
-          .setLocale(luxonLocale(states.locale))
-          .toLocaleString(luxon.DateTime.DATETIME_MED),
-      }))),
-    !states.loading && taskEnded && (h("div", { class: sheet$6.classes.Ended },
-      h("span", { class: "icon" },
-        h("sl-icon", { name: "exclamation-triangle-fill" })),
-      intl.formatMessage({
-        id: "endedMessage",
-        defaultMessage: content.endedMessage,
-      }, {
-        endDate: dateEnd
-          .setLocale(luxonLocale(states.locale))
-          .toLocaleString(luxon.DateTime.DATETIME_MED),
-      }))),
-    h("div", { style: {
-        borderRadius: taskUnavailable &&
-          "0 0 var(--sl-border-radius-medium) var(--sl-border-radius-medium)",
-      }, class: taskUnavailable
-        ? "main expired"
-        : taskComplete
-          ? "main complete"
-          : "main" },
-      h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
-        h("div", { class: sheet$6.classes.Header }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
-          showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
-          h("span", { class: "value" }, content.rewardAmount),
-          h("span", { class: "text" }, content.rewardUnit)))),
-        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", style: {
-            marginBottom: !content.description
-              ? content.steps
-                ? "var(--sl-spacing-x-large)"
-                : content.showProgressBar
-                  ? "var(--sl-spacing-xx-large)"
-                  : ""
-              : "",
-          } }, content.cardTitle)),
-        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && h(Details, Object.assign({}, props))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet$6.classes.Footer }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
-          h("span", { class: "text" },
-            content.repeatable && (h("div", null,
-              h("span", { class: repetitions > 0
-                  ? taskUnavailable
-                    ? "icon neutral"
-                    : "icon success"
-                  : "icon" }, arrow_left_right$1),
-              h("span", { class: repetitions > 0
-                  ? taskUnavailable
-                    ? "neutral"
-                    : "success"
-                  : "" }, intl.formatMessage({
-                id: "completedMessage",
-                defaultMessage: content.completedText,
-              }, {
-                finite: content.finite,
-                count: content.finite
-                  ? Math.min(repetitions, content.finite)
-                  : repetitions,
-              })))),
-            content.showExpiry && !taskUnavailable && (h("span", { class: "datetime" }, intl.formatMessage({
-              id: "expiryMessage",
-              defaultMessage: content.expiryMessage,
-            }, {
-              endDate: dateEnd
-                .setLocale(luxonLocale(states.locale))
-                .toLocaleString(luxon.DateTime.DATETIME_MED),
-            })))),
-          h("sl-button", { class: taskUnavailable
-              ? "action neutral"
-              : taskComplete
-                ? "action disabled"
-                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable }, content.buttonText))))))));
+  console.log("dateToday: " + dateToday);
+  console.log("dateEnd: " + dateEnd);
+  console.log("dateStart: " + dateStart);
+  console.log("taskEnded: " + taskEnded);
+  console.log("taskNotStarted: " + taskNotStarted);
+  console.log("taskUnavailable: " + taskUnavailable);
+  return h("div", null, "hello world!");
 }
 
 function ReferralIframeView(props) {

package/dist/esm/sqm-big-stat.entry.js

@@ -6,7 +6,7 @@ import './extends-c31f1eff.js';
 import './cjs-bdfb4486.js';
 import './JSS-96eeab98.js';
 import { B as BigStatView } from './sqm-big-stat-view-309f7c1f.js';
-import { u as useDemoBigStat, a as useBigStat } from './useDemoBigStat-e2295035.js';
+import { u as useDemoBigStat, a as useBigStat } from './useDemoBigStat-022e116d.js';
 
 const BigStat = class {
   constructor(hostRef) {

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

@@ -13,9 +13,9 @@ import { a as useChildElements, b as useRequestRerender } from './useChildElemen
 import './luxon-5fa22651.js';
 import { g as getProps, a as getMissingProps } from './utils-1d345130.js';
 import './sqm-text-span-view-7e61c95c.js';
-import { p as pathToRegexp, u as useDemoBigStat, a as useBigStat } from './useDemoBigStat-e2295035.js';
+import { p as pathToRegexp, u as useDemoBigStat, a as useBigStat } from './useDemoBigStat-022e116d.js';
 import './sqm-portal-container-view-cf79ed90.js';
-import { h as autoColorScaleCss, C as CardFeedView, E as EditProfileView, c as PortalChangePasswordView, P as PortalFrameView, d as PortalLoginView, e as PortalRegisterView, R as ReferralIframeView, g as RewardExchangeView, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, T as TaskCardView } from './AutoColor-8f7bfd93.js';
+import { h as autoColorScaleCss, C as CardFeedView, E as EditProfileView, c as PortalChangePasswordView, P as PortalFrameView, d as PortalLoginView, e as PortalRegisterView, R as ReferralIframeView, g as RewardExchangeView, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, T as TaskCardView } from './AutoColor-237cc98b.js';
 import './sqm-portal-section-view-6649c4c6.js';
 
 /**
@@ -436,7 +436,7 @@ function HeroImageView(props, children) {
       color: props.textColor || "var(--sl-color-neutral-900)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
-        padding: `var(--sl-spacing-${props.paddingImage})`,
+        padding: "var(--sl-spacing-" + props.paddingImage + ")",
         boxSizing: "border-box",
         margin: props.maxHeight ? "auto" : "",
         "@media (max-width: 599px)": {
@@ -447,7 +447,7 @@ function HeroImageView(props, children) {
         width: props.imagePercentage
           ? 100 - props.imagePercentage + "%"
           : "50%",
-        padding: `var(--sl-spacing-${props.paddingText})`,
+        padding: "var(--sl-spacing-" + props.paddingText + ")",
         alignSelf: "center",
         boxSizing: "border-box",
         "@media (max-width: 599px)": {
@@ -489,6 +489,7 @@ function HeroImageView(props, children) {
   :host{
     display: block;
   }`;
+  console.log(props);
   return (h$1("div", { class: sheet.classes.Container },
     h$1("style", { type: "text/css" },
       vanillaStyle,
@@ -6822,9 +6823,9 @@ const TaskCard = class {
   }
 };
 function useTaskCardDemo(props) {
-  console.log("Task Card Props", props);
+  console.log("Task Card Props", props.demoData);
   return cjs({
-    states: { loadingEvent: false, progress: 0, locale: "en" },
+    states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
       onClick: () => console.log("clicked"),

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

@@ -10,11 +10,10 @@ import './mixins-10353a39.js';
 import { c as createStyleSheet } from './JSS-96eeab98.js';
 import { G as GenericTableView } from './GenericTableView-24f2dcb2.js';
 import { l as luxon } from './luxon-5fa22651.js';
-import './utils-1d345130.js';
 import './sqm-text-span-view-7e61c95c.js';
 import { A as AssetCardView } from './sqm-asset-card-view-f9ca5345.js';
 import { B as BigStatView } from './sqm-big-stat-view-309f7c1f.js';
-import { a as useBigStat, u as useDemoBigStat } from './useDemoBigStat-e2295035.js';
+import { a as useBigStat, u as useDemoBigStat } from './useDemoBigStat-022e116d.js';
 import { H as HeroView } from './sqm-hero-view-190bc812.js';
 import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './useLeaderboard-b670847e.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-da91f5f3.js';
@@ -29,7 +28,7 @@ import { P as PortalProfileView } from './sqm-portal-profile-view-827776f5.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, 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 } from './AutoColor-8f7bfd93.js';
+import { S as ShareButtonView, a as ShareLinkView, 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 } from './AutoColor-237cc98b.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-6649c4c6.js';
 
 /**
@@ -10856,9 +10855,7 @@ 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" }));
 };
 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%", 
-    //   minHeight="125px"
-    maxHeight: "150px", maxWidth: "100%", paddingImage: "large", paddingText: "large" }));
+  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" }));
 };
 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" }));

package/dist/esm/{useDemoBigStat-e2295035.js → useDemoBigStat-022e116d.js}

@@ -927,6 +927,7 @@ function useDemoBigStat(props) {
   return {
     props: cjs({
       statvalue: "12345",
+      value: 0,
       flexReverse: false,
       alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),