@saasquatch/mint-components 1.4.0 → 1.5.0-11

package/dist/cjs/sqm-card-feed-view-42f1c900.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+
+function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: "var(--sl-spacing-" + props.gap + ")",
+      columnWidth: props.width + "px",
+      "& > div": {
+        display: "inline-block",
+        marginBottom: "var(--sl-spacing-" + props.gap + ")",
+      },
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+  ::slotted(*){
+    display: inline-block;
+	margin-bottom: var(--sl-spacing-` +
+    props.gap +
+    `),
+  }
+  `;
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    children));
+}
+
+exports.CardFeedView = CardFeedView;

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

@@ -0,0 +1,33 @@
+'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');
+const sqmCardFeedView = require('./sqm-card-feed-view-42f1c900.js');
+
+const CardFeed = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Card Width
+     */
+    this.width = 347;
+    /**
+     * @uiName Horizontal Gap
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.gap = "xx-large";
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(sqmCardFeedView.CardFeedView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+  }
+};
+
+exports.sqm_card_feed = CardFeed;

package/dist/cjs/sqm-graphql-client-provider.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 
 async function useGraphQLClientProvider({ domain }) {
   const token = index_module.ee();

package/dist/cjs/{sqm-leaderboard-rank-view-48245b30.js → sqm-leaderboard-rank-view-510f16d3.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-0c01d88f.js');
-const index_module = require('./index.module-2925fe3b.js');
+const global = require('./global-89f66e76.js');
+const index_module = require('./index.module-c0bf9df0.js');
 
 var docCache = new Map();
 var fragmentSourceMap = new Map();

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const global = require('./global-0c01d88f.js');
+const global = require('./global-89f66e76.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 const cjs = require('./cjs-1066ec21.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-48245b30.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-510f16d3.js');
 
 const GET_RANK = sqmLeaderboardRankView.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 const cjs = require('./cjs-1066ec21.js');
-const ShadowViewAddon = require('./ShadowViewAddon-e9bacad0.js');
+const ShadowViewAddon = require('./ShadowViewAddon-475e00d3.js');
 
 const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}table{width:100%}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-x-small) var(--sl-spacing-small)}.User{width:100%}.Score{width:auto;white-space:nowrap}";
 

package/dist/cjs/sqm-name-fields.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');

package/dist/cjs/{sqm-navigation-sidebar-item-view-1bad646a.js → sqm-navigation-sidebar-item-view-a2bdcf05.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const mixins = require('./mixins-7b7c59fe.js');
 

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-1bad646a.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-a2bdcf05.js');
 
 function useNavigationSidebarItem(props) {
   const currentPage = index_module.vn();

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 const utils = require('./utils-95e5317c.js');
 
 const PopupContainerView = (props) => {

package/dist/cjs/{sqm-portal-email-verification-view-68b16f27.js → sqm-portal-email-verification-view-5093ac20.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-0c01d88f.js');
+const global = require('./global-89f66e76.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const mixins = require('./mixins-7b7c59fe.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');

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

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-0c01d88f.js');
+require('./global-89f66e76.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-68b16f27.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-5093ac20.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e;
@@ -27,8 +27,7 @@ function usePortalEmailVerification(props) {
       return;
     setError("");
     const urlParams = nextPage ? { nextPage } : null;
-    const redirectPath = props.redirectPath;
-    const variables = { email, urlParams, redirectPath };
+    const variables = { email, urlParams };
     await request(variables);
   };
   _extends.useEffect(() => {
@@ -64,12 +63,6 @@ const PortalEmailVerification = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    /**
-     * The page that users are redirected to from the verification email.
-     *
-     * @uiName Email redirection base path
-     */
-    this.redirectPath = "/verifyEmail";
     /**
      * @uiName Email verification header text
      */

package/dist/cjs/{sqm-portal-footer-view-edeeebab.js → sqm-portal-footer-view-03408484.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-0c01d88f.js');
+const global = require('./global-89f66e76.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 
 function PoweredByImg({ color = "#A6A6A6", width = 190, height = 29, }) {

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-0c01d88f.js');
+require('./global-89f66e76.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-2925fe3b.js');
+require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-edeeebab.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-03408484.js');
 
 const PortalFooter = class {
   constructor(hostRef) {

package/dist/cjs/sqm-portal-forgot-password.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -13,7 +13,7 @@ require('./mixins-7b7c59fe.js');
 require('./sqm-text-span-view-b5ae787b.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-1704d285.js');
 
-function usePortalForgotPassword(props) {
+function usePortalForgotPassword() {
   var _a, _b, _c, _d;
   const [success, setSuccess] = _extends.useState(false);
   const [error, setError] = _extends.useState("");
@@ -27,8 +27,7 @@ function usePortalForgotPassword(props) {
       jsonpointer.jsonpointer.set(formData, key, value);
     });
     const urlParams = nextPage ? { nextPage } : null;
-    const redirectPath = props.redirectPath;
-    const variables = { email: formData.email, urlParams, redirectPath };
+    const variables = { email: formData.email, urlParams };
     await request(variables);
   };
   _extends.useEffect(() => {
@@ -47,7 +46,6 @@ function usePortalForgotPassword(props) {
       loading,
       error: ((_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.message) || error,
       success,
-      loginPath: props.loginPath,
     },
     callbacks: {
       submit,
@@ -59,12 +57,6 @@ const PortalForgotPassword = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    /**
-     * The page that users are redirected to from the password reset email.
-     *
-     * @uiName Email redirection base path
-     */
-    this.redirectPath = "/resetPassword";
     /**
      * @uiName Email label
      */
@@ -73,19 +65,15 @@ const PortalForgotPassword = class {
      * @uiName Password reset button text
      */
     this.submitLabel = "Request Password Reset";
-    /**
-     * @uiName Routing path to login page
-     */
-    this.loginPath = "/login";
     _extends.h$1(this);
   }
   disconnectedCallback() { }
   render() {
     const { states, callbacks } = index_module.j()
       ? usePortalForgotPasswordDemo(this)
-      : usePortalForgotPassword(this);
+      : usePortalForgotPassword();
     const content = {
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.mn.push(states.loginPath) }, "Sign In"))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.mn.push("/login") }, "Sign In"))),
       messageSlot: (index.h("slot", { name: "messageSlot" }, "Enter your email below to receive a password reset link.")),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 
 function usePortalLogout({ nextPage }) {
   index_module.Y(undefined);

package/dist/cjs/{sqm-portal-profile-view-2b48529e.js → sqm-portal-profile-view-fa2db439.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-0c01d88f.js');
+const global = require('./global-89f66e76.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-d144735a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');

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

@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-0c01d88f.js');
+require('./global-89f66e76.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./sqm-portal-container-view-d144735a.js');
 require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-2b48529e.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-fa2db439.js');
 
 const GET_USER = index_module.dist.gql `
   query {

package/dist/cjs/sqm-portal-protected-route.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 
 function usePortalProtectedRoute({ requireEmailVerification, redirectTo, redirectToUnverified, }) {
   var _a;

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -45,7 +45,7 @@ function usePortalResetPassword(props) {
   };
   const failed = () => {
     index_module.mn.push({
-      pathname: props.failedPage,
+      pathname: "/",
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -93,17 +93,9 @@ const PortalResetPassword = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * The page that users are redirected to when the password reset succeeds.
-     *
      * @uiName Next page path
      */
     this.nextPage = "/";
-    /**
-     * The page that users are redirected to if the reset fails due to outdated password reset attempt.
-     *
-     * @uiName Failed page redirection path
-     */
-    this.failedPage = "/";
     /**
      * @uiName Show confirm password
      */

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

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-2925fe3b.js');
+const index_module = require('./index.module-c0bf9df0.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 require('./sqm-text-span-view-b5ae787b.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-b595e302.js');
 
-function usePortalVerifyEmail({ nextPage, failedPage }) {
+function usePortalVerifyEmail({ nextPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = _extends.useState(false);
   const [disableContinue, setDisableContinue] = _extends.useState(true);
@@ -25,7 +25,7 @@ function usePortalVerifyEmail({ nextPage, failedPage }) {
   urlParams.delete("oobCode");
   const failed = () => {
     return index_module.mn.push({
-      pathname: failedPage,
+      pathname: "/",
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -96,17 +96,9 @@ const PortalVerifyEmail = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * The page that users are redirected to when the verification succeeds.
-     *
      * @uiName Next page path
      */
     this.nextPage = "/";
-    /**
-     * The page that users are redirected to if verification fails due to outdated verification attempt.
-     *
-     * @uiName Failed page redirection path
-     */
-    this.failedPage = "/";
     _extends.h$1(this);
   }
   disconnectedCallback() { }

package/dist/cjs/sqm-program-explainer-step-view-54424840.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+
+function ProgramExplainerStepView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      color: props.color,
+      background: props.background,
+      padding: "var(--sl-spacing-large)",
+      paddingBottom: "var(--sl-spacing-xxx-large)",
+      "@media (max-width: 768px)": {
+        flexDirection: "row",
+        width: "auto",
+        paddingBottom: "var(--sl-spacing-large)",
+      },
+    },
+    Text: {
+      "@media (max-width: 768px)": {
+        marginLeft: "var(--sl-spacing-large)",
+      },
+    },
+    Title: {
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-large)",
+      "@media (max-width: 768px)": {
+        margin: "0",
+      },
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-small)",
+      "@media (max-width: 768px)": {
+        marginTop: "var(--sl-spacing-x-small)",
+      },
+    },
+    Icon: {
+      width: "64px",
+      height: "64px",
+      borderRadius: "100%",
+      background: "#F4F5F7",
+      color: "var(--sl-color-primary-400)",
+      fontSize: "26px",
+      textAlign: "center",
+      lineHeight: "72px",
+    },
+  };
+  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.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", null,
+      index.h("div", { class: sheet.classes.Icon },
+        index.h("sl-icon", { name: props.icon }))),
+    index.h("div", { class: sheet.classes.Text },
+      index.h("div", { class: sheet.classes.Title }, props.cardTitle),
+      index.h("div", { class: sheet.classes.Description }, props.description))));
+}
+
+exports.ProgramExplainerStepView = ProgramExplainerStepView;

package/dist/cjs/sqm-program-explainer-step.cjs.entry.js

@@ -0,0 +1,22 @@
+'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');
+const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-54424840.js');
+
+const ProgramExplainerStep = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return index.h(sqmProgramExplainerStepView.ProgramExplainerStepView, Object.assign({}, utils.getProps(this)));
+  }
+};
+
+exports.sqm_program_explainer_step = ProgramExplainerStep;

package/dist/cjs/sqm-program-explainer-view-db516613.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+
+function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "row",
+      "@media (max-width: 768px)": {
+        flexDirection: "column",
+      },
+    },
+    Header: {
+      padding: "var(--sl-spacing-large)",
+      color: props.headerColor,
+      background: props.headerBackground,
+    },
+    Card: {
+      padding: "var(--sl-spacing-large)",
+      color: props.cardColor,
+      background: props.cardBackground,
+    },
+    Title: {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-x-small)",
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 768px) {
+    ::slotted(*){
+      display: block;
+    }
+  }`;
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    index.h("div", { class: sheet.classes.Header },
+      index.h("div", { class: sheet.classes.Title }, props.header)),
+    index.h("div", { class: sheet.classes.Container }, children),
+    index.h("div", { class: sheet.classes.Card },
+      index.h("div", { class: sheet.classes.Title }, props.cardTitle),
+      index.h("div", { class: sheet.classes.Description }, props.cardDescription))));
+}
+
+exports.ProgramExplainerView = ProgramExplainerView;

package/dist/cjs/sqm-program-explainer.cjs.entry.js

@@ -0,0 +1,23 @@
+'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');
+const sqmProgramExplainerView = require('./sqm-program-explainer-view-db516613.js');
+
+const ProgramExplainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(sqmProgramExplainerView.ProgramExplainerView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+  }
+};
+
+exports.sqm_program_explainer = ProgramExplainer;

package/dist/cjs/sqm-referral-table-column.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-2925fe3b.js');
-const reRender = require('./re-render-b1ad512d.js');
+require('./index.module-c0bf9df0.js');
+const reRender = require('./re-render-124b56ee.js');
 
 const ReferralTableGenericColumn = class {
   constructor(hostRef) {

package/dist/cjs/sqm-referral-table-date-column.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-require('./index.module-2925fe3b.js');
-const reRender = require('./re-render-b1ad512d.js');
+require('./index.module-c0bf9df0.js');
+const reRender = require('./re-render-124b56ee.js');
 
 const ReferralTableDateColumn = class {
   constructor(hostRef) {