@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

package/dist/cjs/{sqm-portal-forgot-password-view-1704d285.js → sqm-portal-forgot-password-view-433deb9a.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 const mixins = require('./mixins-7b7c59fe.js');
-const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
+const sqmTextSpanView = require('./sqm-text-span-view-96f53c04.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,
@@ -22,8 +22,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalForgotPasswordView(props) {
   const { states, callbacks, content } = props;

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

@@ -5,19 +5,19 @@ 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-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
-require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-1704d285.js');
+require('./sqm-text-span-view-96f53c04.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-433deb9a.js');
 
-function usePortalForgotPassword() {
+function usePortalForgotPassword(props) {
   var _a, _b, _c, _d;
   const [success, setSuccess] = _extends.useState(false);
   const [error, setError] = _extends.useState("");
-  const [request, { loading, data, errors }] = index_module.ze();
+  const [request, { loading, data, errors }] = index_module.on();
   const urlParams = new URLSearchParams(window.location.search);
   const nextPage = urlParams.get("nextPage");
   const submit = async (event) => {
@@ -27,7 +27,8 @@ function usePortalForgotPassword() {
       jsonpointer.jsonpointer.set(formData, key, value);
     });
     const urlParams = nextPage ? { nextPage } : null;
-    const variables = { email: formData.email, urlParams };
+    const redirectPath = props.redirectPath;
+    const variables = { email: formData.email, urlParams, redirectPath };
     await request(variables);
   };
   _extends.useEffect(() => {
@@ -46,6 +47,7 @@ function usePortalForgotPassword() {
       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,
@@ -57,6 +59,12 @@ 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
      */
@@ -65,15 +73,19 @@ 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()
+    const { states, callbacks } = index_module.k()
       ? usePortalForgotPasswordDemo(this)
-      : usePortalForgotPassword();
+      : usePortalForgotPassword(this);
     const content = {
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.rn.push("/login") }, "Sign In"))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.pn.push(states.loginPath) }, "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,11 +5,11 @@ 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-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 
 function usePortalLogout({ nextPage }) {
-  index_module.L(undefined);
-  index_module.rn.push({ pathname: nextPage, search: "" });
+  index_module.Y(undefined);
+  index_module.pn.push({ pathname: nextPage, search: "" });
 }
 
 const PortalLogout = class {
@@ -24,7 +24,7 @@ const PortalLogout = class {
   }
   disconnectedCallback() { }
   render() {
-    index_module.j() ? useLogoutDemo() : usePortalLogout(this);
+    index_module.k() ? useLogoutDemo() : usePortalLogout(this);
   }
 };
 function useLogoutDemo({}) { }

package/dist/cjs/{sqm-portal-profile-view-14b41436.js → sqm-portal-profile-view-4759161f.js}

@@ -1,10 +1,35 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-6223fe8f.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');
+const global = require('./global-0dfbf15e.js');
+const JSS = require('./JSS-95c698c1.js');
+const sqmTextSpanView = require('./sqm-text-span-view-96f53c04.js');
+
+function PortalContainerView(props, children) {
+  const style = {
+    Container: {
+      display: "grid",
+      "grid-template-columns": props.direction === "row"
+        ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
+        : "100%",
+      "grid-gap": `var(--sl-spacing-${props.gap})`,
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+      maxWidth: props.maxWidth ? props.maxWidth : "",
+    },
+  };
+  const vanillaStyle = `
+  :host{
+    width: 100%;
+    display: block;
+  }`;
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}
 
 function PortalProfileView(props) {
   var _a, _b, _c, _d, _e;
@@ -28,14 +53,13 @@ function PortalProfileView(props) {
       },
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   const country = ((_a = states.user) === null || _a === void 0 ? void 0 : _a.countryCode) ? global.intl.formatDisplayName((_b = states.user) === null || _b === void 0 ? void 0 : _b.countryCode, {
     type: "region",
   })
     : "";
-  return (index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, {
+  return (index.h(PortalContainerView, Object.assign({}, {
     direction: "row",
     padding: "xxx-large",
     gap: "xxx-large",
@@ -49,7 +73,7 @@ function PortalProfileView(props) {
         index.h("div", { part: "successalert-text" }, "Your profile has been successfully updated."))),
       error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, error))),
-      index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, {
+      index.h(PortalContainerView, Object.assign({}, {
         direction: "row",
         padding: "none",
         gap: "32px",
@@ -70,4 +94,5 @@ function PortalProfileView(props) {
         }, submit: true }, text.submitChangeButtonText))));
 }
 
+exports.PortalContainerView = PortalContainerView;
 exports.PortalProfileView = PortalProfileView;

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

@@ -4,15 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-require('./global-6223fe8f.js');
+require('./global-0dfbf15e.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-7dd4b981.js');
-require('./jss-preset-default.esm-6304d24f.js');
+const index_module = require('./index.module-548bf279.js');
+require('./JSS-95c698c1.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-14b41436.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-4759161f.js');
+require('./sqm-text-span-view-96f53c04.js');
 
 const GET_USER = index_module.dist.gql `
   query {
@@ -58,12 +57,12 @@ const defaultFormState = {
   error: "",
 };
 function usePortalProfile(props) {
-  const userIdent = index_module.T();
+  const userIdent = index_module.ne();
   const [success, setSuccess] = _extends.useState(false);
   const [userData, setUserData] = _extends.useState(undefined);
   const [formState, setFormState] = _extends.useState(defaultFormState);
-  const userDataResponse = index_module.en(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = index_module.be(UPSERT_USER);
+  const userDataResponse = index_module.mn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = index_module.De(UPSERT_USER);
   _extends.useEffect(() => {
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
       return;
@@ -201,7 +200,7 @@ const PortalProfile = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = index_module.j()
+    const props = index_module.k()
       ? usePortalProfileDemo(utils.getProps(this))
       : usePortalProfile(utils.getProps(this));
     return index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, props));

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

@@ -5,25 +5,25 @@ 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-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 
 function usePortalProtectedRoute({ requireEmailVerification, redirectTo, redirectToUnverified, }) {
   var _a;
-  const userIdent = index_module.T();
+  const userIdent = index_module.ne();
   const authenticated = !!(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt);
   const emailVerified = (_a = userIdent === null || userIdent === void 0 ? void 0 : userIdent.managedIdentity) === null || _a === void 0 ? void 0 : _a.emailVerified;
-  const { pathname, search } = index_module.an();
+  const { pathname, search } = index_module.hn();
   const nextPageParam = new URLSearchParams();
   nextPageParam.append("nextPage", `${pathname}${search}`);
   _extends.useEffect(() => {
     if (!authenticated) {
-      return index_module.rn.push({
+      return index_module.pn.push({
         pathname: redirectTo,
         search: "?" + nextPageParam.toString(),
       });
     }
     if (requireEmailVerification && !emailVerified) {
-      return index_module.rn.push({
+      return index_module.pn.push({
         pathname: redirectToUnverified || redirectTo,
         search: "?" + nextPageParam.toString(),
       });
@@ -52,7 +52,7 @@ const PortalProtectedRoute = class {
   }
   disconnectedCallback() { }
   render() {
-    const hasUser = index_module.j()
+    const hasUser = index_module.k()
       ? usePortalProtectedRouteDemo()
       : usePortalProtectedRoute(this);
     return (index.h(index.Host, { style: { display: hasUser ? "contents" : "none" } }, index.h("slot", null)));

package/dist/cjs/{sqm-portal-reset-password-view-4d78fd6d.js → sqm-portal-reset-password-view-3d591372.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 const mixins = require('./mixins-7b7c59fe.js');
-const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
+const sqmTextSpanView = require('./sqm-text-span-view-96f53c04.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,
@@ -36,8 +36,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalResetPasswordView(props) {
   const { states, callbacks } = props;

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

@@ -5,20 +5,20 @@ 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-7dd4b981.js');
+const index_module = require('./index.module-548bf279.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-require('./jss-preset-default.esm-6304d24f.js');
+require('./JSS-95c698c1.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
-require('./sqm-text-span-view-b5ae787b.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-4d78fd6d.js');
+require('./sqm-text-span-view-96f53c04.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-3d591372.js');
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f;
   const [reset, setReset] = _extends.useState(false);
   const [error, setError] = _extends.useState("");
-  const [verifyPasswordResetCode, verifyPasswordResetCodeState] = index_module.Re();
-  const [resetPassword, resetPasswordState] = index_module.$e();
+  const [verifyPasswordResetCode, verifyPasswordResetCodeState] = index_module.Je();
+  const [resetPassword, resetPasswordState] = index_module.Le();
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   urlParams.delete("oobCode");
@@ -38,14 +38,14 @@ function usePortalResetPassword(props) {
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    index_module.rn.push({
+    index_module.pn.push({
       pathname: nextPageOverride || props.nextPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
   const failed = () => {
-    index_module.rn.push({
-      pathname: "/",
+    index_module.pn.push({
+      pathname: props.failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -93,9 +93,17 @@ 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
      */
@@ -132,7 +140,7 @@ const PortalResetPassword = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = index_module.j()
+    const { states, callbacks } = index_module.k()
       ? usePortalResetPasswordDemo(this)
       : usePortalResetPassword(this);
     return index.h(sqmPortalResetPasswordView.PortalResetPasswordView, { states: states, callbacks: callbacks });

package/dist/cjs/{sqm-portal-section-view-3b008930.js → sqm-portal-section-view-2b445aa0.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 
 function PortalSectionView(props) {
   const style = {
@@ -11,13 +11,10 @@ function PortalSectionView(props) {
         : `var(--sl-spacing-${props.labelMargin})`,
     },
     SectionContainer: {
-      padding: props.padding === "none"
-        ? "0"
-        : `var(--sl-spacing-${props.padding})`,
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
     },
   };
-  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
   return (index.h("div", { class: sheet.classes.SectionContainer },
     index.h("style", { type: "text/css" }, styleString),

package/dist/cjs/{sqm-portal-verify-email-view-b595e302.js → sqm-portal-verify-email-view-0de55d6d.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+const JSS = require('./JSS-95c698c1.js');
 const mixins = require('./mixins-7b7c59fe.js');
-const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
+const sqmTextSpanView = require('./sqm-text-span-view-96f53c04.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,
@@ -20,8 +20,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
-const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;

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

@@ -5,33 +5,33 @@ 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-7dd4b981.js');
-require('./jss-preset-default.esm-6304d24f.js');
+const index_module = require('./index.module-548bf279.js');
+require('./JSS-95c698c1.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');
+require('./sqm-text-span-view-96f53c04.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-0de55d6d.js');
 
-function usePortalVerifyEmail({ nextPage }) {
+function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = _extends.useState(false);
   const [disableContinue, setDisableContinue] = _extends.useState(true);
-  const userIdent = index_module.T();
-  const [request, { loading, data, errors }] = index_module.Le();
+  const userIdent = index_module.ne();
+  const [request, { loading, data, errors }] = index_module.tn();
   const [error, setError] = _extends.useState("");
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   const nextPageOverride = urlParams.get("nextPage");
   urlParams.delete("oobCode");
   const failed = () => {
-    return index_module.rn.push({
-      pathname: "/",
+    return index_module.pn.push({
+      pathname: failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    return index_module.rn.push({
+    return index_module.pn.push({
       pathname: nextPageOverride || nextPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
@@ -96,14 +96,22 @@ 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() { }
   render() {
-    const { states, data, callbacks } = index_module.j()
+    const { states, data, callbacks } = index_module.k()
       ? usePortalVerifyEmailDemo(this)
       : usePortalVerifyEmail(this);
     return (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, { states: states, data: data, callbacks: callbacks }));

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

@@ -0,0 +1,67 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-95c698c1.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: 499px)": {
+        flexDirection: "row",
+        width: "auto",
+        paddingBottom: "var(--sl-spacing-large)",
+      },
+    },
+    Text: {
+      "@media (max-width: 499px)": {
+        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: 499px)": {
+        margin: "0",
+      },
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-small)",
+      "@media (max-width: 499px)": {
+        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",
+    },
+  };
+  const sheet = 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

@@ -4,9 +4,9 @@ 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');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-98958ab1.js');
+const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-5d1847c4.js');
 
 const ProgramExplainerStep = class {
   constructor(hostRef) {

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

@@ -0,0 +1,59 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-95c698c1.js');
+
+function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "row",
+      "@media (max-width: 499px)": {
+        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)",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::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

@@ -4,9 +4,9 @@ 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');
+require('./JSS-95c698c1.js');
 const utils = require('./utils-95e5317c.js');
-const sqmProgramExplainerView = require('./sqm-program-explainer-view-ba7ed24a.js');
+const sqmProgramExplainerView = require('./sqm-program-explainer-view-de0888f4.js');
 
 const ProgramExplainer = class {
   constructor(hostRef) {

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-7dd4b981.js');
-const reRender = require('./re-render-6111d4bd.js');
+require('./index.module-548bf279.js');
+const reRender = require('./re-render-c019e16e.js');
 
 const ReferralTableGenericColumn = class {
   constructor(hostRef) {