@saasquatch/mint-components 1.3.1-6 → 1.3.2-2

package/dist/cjs/sqm-task-card-view-57066e67.js

@@ -0,0 +1,476 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const mixins = require('./mixins-7b7c59fe.js');
+
+const checkmark_circle = () => {
+  return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" },
+    index.h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M1.636 9a7.364 7.364 0 1114.728 0A7.364 7.364 0 011.636 9zM9 0a9 9 0 100 18A9 9 0 009 0zm5.192 6.266a.982.982 0 00-1.548-1.208l-4.787 6.137-2.58-2.58a.982.982 0 00-1.39 1.388l3.367 3.366a.982.982 0 001.468-.09l5.47-7.013z", "clip-rule": "evenodd" })));
+};
+const arrow_left_right = () => {
+  return (index.h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
+};
+const gift = () => {
+  return (index.h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
+};
+
+// @ts-expect-error -- unused
+function TaskCardView(props, children) {
+  const { points = 0, cardTitle = "Title Text", description = "Description Text", showProgressBar = false, progress = 0, goal = 1, repeatable = false, expire = false, dateExpire = "", buttonText = "Button Text", buttonLink = "www.example.com", } = props;
+  const checkmark_circle$1 = checkmark_circle();
+  const arrow_left_right$1 = arrow_left_right();
+  const style = {
+    HostBlock: mixins.HostBlock,
+    TaskCard: {
+      "& .main > div": {
+        margin: "var(--sl-spacing-medium)",
+      },
+      "& .main": {
+        position: "relative",
+        boxSizing: "border-box",
+        minWidth: "347px",
+        background: "var(--sl-color-white)",
+        border: "1px solid var(--sl-color-gray-300)",
+        borderRadius: "var(--sl-border-radius-medium)",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+      },
+      "& .main.complete": {
+        background: "var(--sl-color-primary-50)",
+        borderColor: "var(--sl-color-primary-700)",
+      },
+    },
+    Header: {
+      display: "flex",
+      "& .icon": {
+        alignSelf: "center",
+        lineHeight: "0",
+        color: "var(--sl-color-primary-700)",
+        fontSize: "var(--sl-font-size-large)",
+        marginRight: "var(--sl-spacing-x-small)",
+      },
+      "& .value": {
+        alignSelf: "center",
+        color: "var(--sl-color-black)",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        lineHeight: "100%",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .text": {
+        alignSelf: "end",
+        color: "var(--sl-color-gray-600)",
+        fontSize: "var(--sl-font-size-x-small)",
+        lineHeight: "var(--sl-font-size-medium)",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+    },
+    Title: {
+      color: "var(--sl-color-black)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+    Footer: {
+      display: "flex",
+      "& span": {
+        verticalAlign: "text-bottom",
+      },
+      "& .icon": {
+        verticalAlign: "bottom",
+        fontSize: "var(--sl-font-size-xx-small)",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .text": {
+        marginTop: "auto",
+        fontSize: "var(--sl-font-size-x-small)",
+        color: "var(--sl-color-gray-600)",
+      },
+      "& .action": {
+        marginTop: "auto",
+        marginLeft: "auto",
+      },
+      "& sl-button.action::part(base) ": {
+        color: "var(--sl-color-white)",
+        background: "var(--sl-color-primary-500)",
+        border: "1px solid var(--sl-color-primary-500)",
+        borderRadius: "var(--sl-border-radius-medium)",
+      },
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  // if showProgressBar is false: progress >= goal
+  // if true
+  const showComplete = progress >= goal;
+  const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
+  return (index.h("div", { class: sheet.classes.TaskCard },
+    index.h("div", { class: showComplete ? "main complete" : "main" },
+      index.h("style", { type: "text/css" }, styleString),
+      index.h("div", { class: sheet.classes.Header },
+        showComplete && (index.h("span", { class: "icon" }, checkmark_circle$1)),
+        index.h("span", { class: "value" }, points),
+        index.h("span", { class: "text" }, "SAASQUATCH POINTS")),
+      index.h("div", { class: sheet.classes.Title }, cardTitle),
+      showProgressBar && index.h(ProgressBar, Object.assign({}, props)),
+      index.h(Details, { description: description }),
+      index.h("div", { class: sheet.classes.Footer },
+        index.h("span", { class: "text" },
+          repeatable && (index.h("div", null,
+            index.h("span", { class: "icon" }, arrow_left_right$1),
+            index.h("span", null,
+              "Completed ",
+              repetitions,
+              " times"),
+            index.h("br", null),
+            index.h("span", null,
+              "Earned ",
+              points * repetitions,
+              " SaaSquatch Points"))),
+          expire && (index.h("span", null,
+            index.h("br", null),
+            "Ends ",
+            " ",
+            dateExpire))),
+        index.h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete }, showComplete ? "Complete" : buttonText)))));
+}
+function Details(props) {
+  const style = {
+    HostBlock: mixins.HostBlock,
+    Description: {
+      "& input[type=checkbox]": {
+        display: "none",
+      },
+      "& input:checked ~ .details": {
+        transform: "rotate(-180deg)",
+      },
+      "& .details": {
+        position: "absolute",
+        top: "var(--sl-spacing-medium)",
+        right: "var(--sl-spacing-medium)",
+        color: "var(--sl-color-gray-700)",
+        fontSize: "var(--sl-font-size-large)",
+        "& :hover": {
+          color: "var(--sl-color-primary-700)",
+        },
+        transformOrigin: "50% 37%",
+        transition: "transform var(--sl-transition-medium) ease",
+      },
+      "& input:checked ~ .summary": {
+        transition: "max-height var(--sl-transition-medium) ease",
+        maxHeight: "300px",
+      },
+      "& .summary": {
+        display: "block",
+        overflow: "hidden",
+        color: "var(--sl-color-gray-700)",
+        fontSize: "var(--sl-font-size-x-small)",
+        maxHeight: "0px",
+        transition: "max-height var(--sl-transition-fast) ease-out",
+      },
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const rid = Math.random().toString(36).slice(2);
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("span", { class: sheet.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" }, props.description))));
+}
+function ProgressBar(props) {
+  const { goal, progress, steps, unit = "", repeatable } = props;
+  const gift1 = gift();
+  const gift2 = gift();
+  const gift3 = gift();
+  // if progress and goal are not provided, there cannot be a progress bar
+  // if (!showProgressBar) return;
+  const items = [];
+  var columns = "";
+  var repetitions = Math.floor(progress / goal);
+  if (repeatable) {
+    if (steps) {
+      addStepsRepeatable();
+    }
+    else {
+      addLinearRepeatable();
+    }
+  }
+  // non repetable
+  else {
+    if (steps) {
+      addSteps();
+    }
+    else {
+      addLinear();
+    }
+  }
+  const style = {
+    HostBlock: mixins.HostBlock,
+    ProgressBar: {
+      "& .progress-bar": {
+        height: "20px",
+        marginTop: "var(--sl-spacing-large)",
+        marginRight: "var(--sl-spacing-x-small)",
+        marginBottom: "var(--sl-spacing-large)",
+        fontSize: "var(--sl-font-size-x-small)",
+        display: "grid",
+        gridTemplateColumns: columns,
+        lineHeight: "45px",
+        userSelect: "none",
+      },
+      "& .progress-bar.repeatable-steps": {
+        marginLeft: "var(--sl-spacing-x-small)",
+      },
+      "& .filled:after": {
+        content: '""',
+        display: "flex",
+        width: "100%",
+        height: "4px",
+        borderRadius: "4px",
+        backgroundColor: "var(--sl-color-primary-500)",
+      },
+      "& .progress": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .progress::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        display: "flex",
+        backgroundColor: "var(--sl-color-primary-500)",
+        borderRadius: "50%",
+        position: "relative",
+        left: "47%",
+        top: "-85%",
+      },
+      "& .progress.bg:after": {
+        width: "0",
+        height: "0",
+        border: "none",
+      },
+      "& .empty": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .empty::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        border: "2px solid #E0E0E0",
+        margin: "-2px",
+        display: "flex",
+        backgroundColor: "white",
+        borderRadius: "50%",
+        position: "relative",
+        left: "47%",
+        top: "-85%",
+      },
+      "& .empty.bg:after": {
+        width: "0",
+        height: "0",
+        border: "none",
+      },
+      "& .remain:after": {
+        content: '""',
+        display: "flex",
+        width: "100%",
+        height: "4px",
+        borderRadius: "4px",
+        backgroundColor: "#E0E0E0",
+      },
+      "& .end.bw": {
+        filter: "grayscale(100%)",
+      },
+      "& .end.start": {
+        transform: "scale(80%)",
+        top: "-20px",
+      },
+      "& .end": {
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+        position: "relative",
+        top: "-18px",
+        filter: goal <= progress ? "" : "grayscale(100%)",
+        zIndex: "1",
+      },
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.ProgressBar },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
+  function addLinear() {
+    columns =
+      Math.min(Math.max(progress / goal, 0), 1) +
+        "fr 0fr " +
+        Math.min(Math.max(1 - progress / goal, 0), 1) +
+        "fr 0fr";
+    items.push(index.h("div", { class: "filled" }));
+    items.push(index.h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
+    items.push(index.h("div", { class: "remain" }));
+    items.push(index.h("div", { class: "end" }, gift1));
+  }
+  function addSteps() {
+    let step_math = steps / goal;
+    for (let i = 1; i < goal; i += steps) {
+      columns += step_math + "fr 0fr ";
+      if (i > progress) {
+        items.push(index.h("div", { class: "remain" }));
+        items.push(index.h("div", { class: "empty" }, unit + i));
+      }
+      else {
+        items.push(index.h("div", { class: "filled" }));
+        items.push(index.h("div", { class: "progress" }, unit + i));
+      }
+    }
+    columns += step_math + "fr 0fr ";
+    // reward success
+    if (goal <= progress) {
+      columns += "0fr ";
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: "progress bg" }, unit + goal));
+      items.push(index.h("div", { class: "end" }, gift1));
+    }
+    // reward fail
+    else {
+      columns += "0fr ";
+      items.push(index.h("div", { class: "remain" }));
+      items.push(index.h("div", { class: "empty bg" }, unit + goal));
+      items.push(index.h("div", { class: "end" }, gift1));
+    }
+  }
+  function addLinearRepeatable() {
+    let position = progress % goal;
+    let remainder = (position / goal) * 0.5;
+    let repetitions = Math.floor(progress / goal);
+    // 0 repetition
+    if (repetitions == 0) {
+      columns = remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr 0.5fr 0fr";
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
+      items.push(index.h("div", { class: "remain" }));
+      items.push(index.h("div", { class: "end" }, gift1));
+      items.push(index.h("div", { class: "remain" }));
+      items.push(index.h("div", { class: "end bw" }, gift2));
+    }
+    // single repetition
+    else if (repetitions == 1) {
+      columns =
+        "0.5fr 0fr " + remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr";
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: "end" }, gift1));
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
+      items.push(index.h("div", { class: "remain" }));
+      items.push(index.h("div", { class: "end bw" }, gift2));
+    }
+    // multiple repetitions
+    else {
+      columns =
+        "0fr 0.5fr 0fr " + remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr";
+      items.push(index.h("div", { class: "end start" }, gift1));
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: "end" }, gift2));
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: progress == goal * repetitions ? "progress bg" : "progress" }, unit + progress));
+      items.push(index.h("div", { class: "remain" }));
+      items.push(index.h("div", { class: "end bw" }, gift3));
+    }
+  }
+  function addStepsRepeatable() {
+    let repetitions = Math.floor(progress / goal);
+    // no or single repetition
+    if (repetitions < 2) {
+      let step_math = steps / goal;
+      for (let i = 1; i < goal * 2 + 1; i += steps) {
+        columns += step_math + "fr 0fr ";
+        if (i > progress) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(index.h("div", { class: "remain" }));
+            items.push(index.h("div", { class: "empty bg" }, unit + goal));
+            items.push(index.h("div", { class: "end bw" }, gift1));
+          }
+          else if (i == goal * 2) {
+            columns += "0fr 0fr";
+            items.push(index.h("div", { class: "remain" }));
+            items.push(index.h("div", { class: "empty bg" }, unit + (goal * 2)));
+            items.push(index.h("div", { class: "end bw" }, gift2));
+          }
+          else {
+            items.push(index.h("div", { class: "remain" }));
+            items.push(index.h("div", { class: "empty" }, unit + i));
+          }
+        }
+        else if (i == goal) {
+          columns += "0fr ";
+          items.push(index.h("div", { class: "filled" }));
+          items.push(index.h("div", { class: "progress bg" }, unit + i));
+          items.push(index.h("div", { class: "end" }, gift3));
+        }
+        else {
+          items.push(index.h("div", { class: "filled" }));
+          items.push(index.h("div", { class: "progress" }, unit + i));
+        }
+      }
+    }
+    // case repetition many
+    else {
+      let position = (progress % goal) + goal;
+      let step_math = steps / goal;
+      columns += "0fr 0fr ";
+      items.push(index.h("div", { class: "progress bg" }, unit + goal * (repetitions - 1)));
+      items.push(index.h("div", { class: "end start" }, gift1));
+      for (let i = 1; i < goal * 2 + 1; i += steps) {
+        columns += step_math + "fr 0fr ";
+        if (i <= goal) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(index.h("div", { class: "filled" }));
+            items.push(index.h("div", { class: "progress bg" }, unit + (i + goal * (repetitions - 1))));
+            items.push(index.h("div", { class: "end" }, gift2));
+          }
+          else {
+            items.push(index.h("div", { class: "filled" }));
+            items.push(index.h("div", { class: "progress" }, unit + (i + goal * (repetitions - 1))));
+          }
+        }
+        else if (i > position) {
+          if (i == goal * 2) {
+            columns += "0fr 0fr";
+            items.push(index.h("div", { class: "remain" }));
+            items.push(index.h("div", { class: "empty bg" }, unit + (i + goal * (repetitions - 1))));
+            items.push(index.h("div", { class: "end bw" }, gift3));
+          }
+          else {
+            items.push(index.h("div", { class: "remain" }));
+            items.push(index.h("div", { class: "empty" }, unit + (i + goal * (repetitions - 1))));
+          }
+        }
+        else {
+          items.push(index.h("div", { class: "filled" }));
+          items.push(index.h("div", { class: "progress" }, unit + (i + goal * (repetitions - 1))));
+        }
+      }
+    }
+  }
+}
+
+exports.TaskCardView = TaskCardView;

package/dist/cjs/sqm-task-card.cjs.entry.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const _extends = require('./extends-0302d27d.js');
+require('./jss-preset-default.esm-6304d24f.js');
+const utils = require('./utils-95e5317c.js');
+require('./mixins-7b7c59fe.js');
+const sqmTaskCardView = require('./sqm-task-card-view-57066e67.js');
+
+const TaskCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Reward Points
+     */
+    this.points = 0;
+    /**
+     * @uiName Title Text
+     */
+    this.cardTitle = "Title Text";
+    /**
+     * @uiName Description Text
+     */
+    this.description = "Description Text";
+    /**
+     * @uiName Set Repeatable
+     */
+    this.repeatable = false;
+    /**
+     * @uiName Show Progress Bar
+     */
+    this.showProgressBar = false;
+    /**
+     * @uiName Progress Bar Progress
+     */
+    this.progress = 0;
+    /**
+     * @uiName Progress Bar Goal
+     */
+    this.goal = 1;
+    /**
+     * @uiName Show Expiry
+     */
+    this.expire = false;
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return index.h(sqmTaskCardView.TaskCardView, Object.assign({}, utils.getProps(this)));
+  }
+};
+
+exports.sqm_task_card = TaskCard;

package/dist/cjs/tslib.es6-0e81fab1.js

@@ -0,0 +1,56 @@
+'use strict';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+exports.__assign = function() {
+    exports.__assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return exports.__assign.apply(this, arguments);
+};
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || from);
+}
+
+exports.__extends = __extends;
+exports.__spreadArray = __spreadArray;

package/dist/cjs/useChildElements-428ca5b8.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const _extends = require('./extends-0302d27d.js');
+const index_module = require('./index.module-6a7bda18.js');
+
+function useChildElements() {
+  const host = index_module.P();
+  const initialState = host.children.length ? Array.from(host.children) : [];
+  const [childElements, setChildElements] = _extends.useState(initialState);
+  _extends.useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const children = Array.from(host.children);
+      setChildElements([...children]);
+    });
+    observer.observe(host, { childList: true });
+    return () => observer.disconnect();
+  }, [host]);
+  return childElements;
+}
+
+exports.useChildElements = useChildElements;

package/dist/cjs/{useDemoBigStat-e99cc8a2.js → useDemoBigStat-17e61803.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const index_module = require('./index.module-e9dac160.js');
+const index_module = require('./index.module-6a7bda18.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 
@@ -805,7 +805,8 @@ const StatPaths = [
 ];
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
-  const { statType, flexReverse, alignment, programId = index_module.M(), } = props;
+  const { statType, flexReverse, alignment } = props;
+  const programId = index_module.M();
   const locale = index_module.R();
   const userIdent = index_module.T();
   const re = _extends.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
+    "./components/sqm-reward-exchange-list/sqm-reward-exchange-list.js",
     "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
     "./components/sqm-divided-layout/sqm-divided-layout.js",
@@ -32,8 +33,6 @@
     "./components/sqm-portal-verify-email/sqm-portal-verify-email.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
-    "./components/sqm-referral-table/sqm-table-cell.js",
-    "./components/sqm-referral-table/sqm-table-row.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js",
@@ -44,6 +43,7 @@
     "./components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-status-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-user-column.js",
+    "./components/sqm-rewards-table/sqm-rewards-table.js",
     "./components/sqm-route/sqm-route.js",
     "./components/sqm-router/sqm-router.js",
     "./components/sqm-share-button/sqm-share-button.js",
@@ -51,10 +51,13 @@
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
+    "./components/sqm-task-card/sqm-task-card.js",
     "./components/sqm-text/sqm-text.js",
     "./components/sqm-text-span/sqm-text-span.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
-    "./components/sqm-user-name/sqm-user-name.js"
+    "./components/sqm-user-name/sqm-user-name.js",
+    "./tables/sqm-table-cell.js",
+    "./tables/sqm-table-row.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/{stories → components/sqm-asset-card}/AssetCard.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { AssetCardView } from "../components/sqm-asset-card/sqm-asset-card-view";
+import { AssetCardView } from "./sqm-asset-card-view";
 export default {
-  title: "Asset Card",
+  title: "Components/Asset Card",
 };
 export const Default = () => {
   const props = {