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

package/dist/esm/{sqm-portal-forgot-password-view-e3a6a716.js → sqm-portal-forgot-password-view-33bfea96.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 import { A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer } from './mixins-10353a39.js';
-import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
+import { T as TextSpanView } from './sqm-text-span-view-b5233612.js';
 
 const style = {
   Wrapper: AuthWrapper,
@@ -20,8 +20,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalForgotPasswordView(props) {
   const { states, callbacks, content } = props;

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

@@ -1,19 +1,19 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { z as ze, j, r as rn } from './index.module-90d2c3ad.js';
+import { k as useState, e as useEffect, m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { o as on, k, p as pn } from './index.module-6d78e252.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
-import './jss-preset-default.esm-71fae192.js';
+import './JSS-fadfaeff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import './sqm-text-span-view-1781df94.js';
-import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-e3a6a716.js';
+import './sqm-text-span-view-b5233612.js';
+import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-33bfea96.js';
 
-function usePortalForgotPassword() {
+function usePortalForgotPassword(props) {
   var _a, _b, _c, _d;
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
-  const [request, { loading, data, errors }] = ze();
+  const [request, { loading, data, errors }] = on();
   const urlParams = new URLSearchParams(window.location.search);
   const nextPage = urlParams.get("nextPage");
   const submit = async (event) => {
@@ -23,7 +23,8 @@ function usePortalForgotPassword() {
       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);
   };
   useEffect(() => {
@@ -42,6 +43,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,
@@ -53,6 +55,12 @@ const PortalForgotPassword = class {
   constructor(hostRef) {
     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
      */
@@ -61,15 +69,19 @@ const PortalForgotPassword = class {
      * @uiName Password reset button text
      */
     this.submitLabel = "Request Password Reset";
+    /**
+     * @uiName Routing path to login page
+     */
+    this.loginPath = "/login";
     h(this);
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = j()
+    const { states, callbacks } = k()
       ? usePortalForgotPasswordDemo(this)
-      : usePortalForgotPassword();
+      : usePortalForgotPassword(this);
     const content = {
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => rn.push("/login") }, "Sign In"))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => pn.push(states.loginPath) }, "Sign In"))),
       messageSlot: (h$1("slot", { name: "messageSlot" }, "Enter your email below to receive a password reset link.")),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,

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

@@ -1,11 +1,11 @@
 import { r as registerInstance } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { L, r as rn, j } from './index.module-90d2c3ad.js';
+import { m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { Y, p as pn, k } from './index.module-6d78e252.js';
 
 function usePortalLogout({ nextPage }) {
-  L(undefined);
-  rn.push({ pathname: nextPage, search: "" });
+  Y(undefined);
+  pn.push({ pathname: nextPage, search: "" });
 }
 
 const PortalLogout = class {
@@ -20,7 +20,7 @@ const PortalLogout = class {
   }
   disconnectedCallback() { }
   render() {
-    j() ? useLogoutDemo() : usePortalLogout(this);
+    k() ? useLogoutDemo() : usePortalLogout(this);
   }
 };
 function useLogoutDemo({}) { }

package/dist/esm/{sqm-portal-profile-view-b67467b4.js → sqm-portal-profile-view-c810c36a.js}

@@ -1,8 +1,33 @@
 import { h } from './index-17b4da69.js';
-import { i as intl } from './global-90da933f.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
-import { P as PortalContainerView } from './sqm-portal-container-view-73757ca5.js';
-import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
+import { i as intl } from './global-9b000c0b.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
+import { T as TextSpanView } from './sqm-text-span-view-b5233612.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 = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}
 
 function PortalProfileView(props) {
   var _a, _b, _c, _d, _e;
@@ -26,8 +51,7 @@ function PortalProfileView(props) {
       },
     },
   };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const country = ((_a = states.user) === null || _a === void 0 ? void 0 : _a.countryCode) ? intl.formatDisplayName((_b = states.user) === null || _b === void 0 ? void 0 : _b.countryCode, {
     type: "region",
@@ -68,4 +92,4 @@ function PortalProfileView(props) {
         }, submit: true }, text.submitChangeButtonText))));
 }
 
-export { PortalProfileView as P };
+export { PortalContainerView as P, PortalProfileView as a };

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

@@ -1,14 +1,13 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './global-90da933f.js';
-import './use-callback-b38a1523.js';
-import { d as dist, T, e as en, b as be, j } from './index.module-90d2c3ad.js';
-import './jss-preset-default.esm-71fae192.js';
+import { k as useState, e as useEffect, m as h } from './extends-33266e9b.js';
+import './global-9b000c0b.js';
+import './use-callback-52b52f6a.js';
+import { d as dist, n as ne, a as mn, D as De, k } from './index.module-6d78e252.js';
+import './JSS-fadfaeff.js';
 import { g as getProps } from './utils-454405f5.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import './sqm-portal-container-view-73757ca5.js';
-import './sqm-text-span-view-1781df94.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-b67467b4.js';
+import { a as PortalProfileView } from './sqm-portal-profile-view-c810c36a.js';
+import './sqm-text-span-view-b5233612.js';
 
 const GET_USER = dist.gql `
   query {
@@ -54,12 +53,12 @@ const defaultFormState = {
   error: "",
 };
 function usePortalProfile(props) {
-  const userIdent = T();
+  const userIdent = ne();
   const [success, setSuccess] = useState(false);
   const [userData, setUserData] = useState(undefined);
   const [formState, setFormState] = useState(defaultFormState);
-  const userDataResponse = en(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = be(UPSERT_USER);
+  const userDataResponse = mn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = De(UPSERT_USER);
   useEffect(() => {
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
       return;
@@ -197,7 +196,7 @@ const PortalProfile = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = j()
+    const props = k()
       ? usePortalProfileDemo(getProps(this))
       : usePortalProfile(getProps(this));
     return h$1(PortalProfileView, Object.assign({}, props));

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

@@ -1,25 +1,25 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { T, c as an, r as rn, j } from './index.module-90d2c3ad.js';
+import { e as useEffect, m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { n as ne, h as hn, p as pn, k } from './index.module-6d78e252.js';
 
 function usePortalProtectedRoute({ requireEmailVerification, redirectTo, redirectToUnverified, }) {
   var _a;
-  const userIdent = T();
+  const userIdent = 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 } = an();
+  const { pathname, search } = hn();
   const nextPageParam = new URLSearchParams();
   nextPageParam.append("nextPage", `${pathname}${search}`);
   useEffect(() => {
     if (!authenticated) {
-      return rn.push({
+      return pn.push({
         pathname: redirectTo,
         search: "?" + nextPageParam.toString(),
       });
     }
     if (requireEmailVerification && !emailVerified) {
-      return rn.push({
+      return pn.push({
         pathname: redirectToUnverified || redirectTo,
         search: "?" + nextPageParam.toString(),
       });
@@ -48,7 +48,7 @@ const PortalProtectedRoute = class {
   }
   disconnectedCallback() { }
   render() {
-    const hasUser = j()
+    const hasUser = k()
       ? usePortalProtectedRouteDemo()
       : usePortalProtectedRoute(this);
     return (h$1(Host, { style: { display: hasUser ? "contents" : "none" } }, h$1("slot", null)));

package/dist/esm/{sqm-portal-reset-password-view-a4e50da2.js → sqm-portal-reset-password-view-820768dc.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 import { A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer } from './mixins-10353a39.js';
-import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
+import { T as TextSpanView } from './sqm-text-span-view-b5233612.js';
 
 const style = {
   Wrapper: AuthWrapper,
@@ -34,8 +34,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalResetPasswordView(props) {
   const { states, callbacks } = props;

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

@@ -1,20 +1,20 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { i as Re, $ as $e, r as rn, j } from './index.module-90d2c3ad.js';
+import { k as useState, e as useEffect, m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { J as Je, L as Le, p as pn, k } from './index.module-6d78e252.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
-import './jss-preset-default.esm-71fae192.js';
+import './JSS-fadfaeff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import './sqm-text-span-view-1781df94.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-a4e50da2.js';
+import './sqm-text-span-view-b5233612.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-820768dc.js';
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f;
   const [reset, setReset] = useState(false);
   const [error, setError] = useState("");
-  const [verifyPasswordResetCode, verifyPasswordResetCodeState] = Re();
-  const [resetPassword, resetPasswordState] = $e();
+  const [verifyPasswordResetCode, verifyPasswordResetCodeState] = Je();
+  const [resetPassword, resetPasswordState] = Le();
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   urlParams.delete("oobCode");
@@ -34,14 +34,14 @@ function usePortalResetPassword(props) {
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    rn.push({
+    pn.push({
       pathname: nextPageOverride || props.nextPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
   const failed = () => {
-    rn.push({
-      pathname: "/",
+    pn.push({
+      pathname: props.failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
@@ -89,9 +89,17 @@ const PortalResetPassword = class {
     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
      */
@@ -128,7 +136,7 @@ const PortalResetPassword = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states, callbacks } = j()
+    const { states, callbacks } = k()
       ? usePortalResetPasswordDemo(this)
       : usePortalResetPassword(this);
     return h$1(PortalResetPasswordView, { states: states, callbacks: callbacks });

package/dist/esm/{sqm-portal-section-view-f0876545.js → sqm-portal-section-view-8c96f5f7.js}

@@ -1,5 +1,5 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 
 function PortalSectionView(props) {
   const style = {
@@ -9,13 +9,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})`,
     },
   };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.SectionContainer },
     h("style", { type: "text/css" }, styleString),

package/dist/esm/{sqm-portal-verify-email-view-6f18bac2.js → sqm-portal-verify-email-view-919d6d85.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-10353a39.js';
-import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
+import { T as TextSpanView } from './sqm-text-span-view-b5233612.js';
 
 const style = {
   Wrapper: AuthWrapper,
@@ -18,8 +18,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;

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

@@ -1,33 +1,33 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as useState, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { T, l as Le, r as rn, j } from './index.module-90d2c3ad.js';
-import './jss-preset-default.esm-71fae192.js';
+import { k as useState, e as useEffect, m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import { n as ne, t as tn, p as pn, k } from './index.module-6d78e252.js';
+import './JSS-fadfaeff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import './sqm-text-span-view-1781df94.js';
-import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6f18bac2.js';
+import './sqm-text-span-view-b5233612.js';
+import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-919d6d85.js';
 
-function usePortalVerifyEmail({ nextPage }) {
+function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = useState(false);
   const [disableContinue, setDisableContinue] = useState(true);
-  const userIdent = T();
-  const [request, { loading, data, errors }] = Le();
+  const userIdent = ne();
+  const [request, { loading, data, errors }] = tn();
   const [error, setError] = useState("");
   const urlParams = new URLSearchParams(window.location.search);
   const oobCode = urlParams.get("oobCode");
   const nextPageOverride = urlParams.get("nextPage");
   urlParams.delete("oobCode");
   const failed = () => {
-    return rn.push({
-      pathname: "/",
+    return pn.push({
+      pathname: failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };
   const gotoNextPage = () => {
     urlParams.delete("nextPage");
-    return rn.push({
+    return pn.push({
       pathname: nextPageOverride || nextPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
@@ -92,14 +92,22 @@ const PortalVerifyEmail = class {
     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 = "/";
     h(this);
   }
   disconnectedCallback() { }
   render() {
-    const { states, data, callbacks } = j()
+    const { states, data, callbacks } = k()
       ? usePortalVerifyEmailDemo(this)
       : usePortalVerifyEmail(this);
     return (h$1(PortalVerifyEmailView, { states: states, data: data, callbacks: callbacks }));

package/dist/esm/sqm-program-explainer-step-view-a37de159.js

@@ -0,0 +1,65 @@
+import { h } from './index-17b4da69.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.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 = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", null,
+      h("div", { class: sheet.classes.Icon },
+        h("sl-icon", { name: props.icon }))),
+    h("div", { class: sheet.classes.Text },
+      h("div", { class: sheet.classes.Title }, props.cardTitle),
+      h("div", { class: sheet.classes.Description }, props.description))));
+}
+
+export { ProgramExplainerStepView as P };

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './jss-preset-default.esm-71fae192.js';
+import { m as h } from './extends-33266e9b.js';
+import './JSS-fadfaeff.js';
 import { g as getProps } from './utils-454405f5.js';
-import { P as ProgramExplainerStepView } from './sqm-program-explainer-step-view-64fc0c37.js';
+import { P as ProgramExplainerStepView } from './sqm-program-explainer-step-view-a37de159.js';
 
 const ProgramExplainerStep = class {
   constructor(hostRef) {

package/dist/esm/sqm-program-explainer-view-cbf71bea.js

@@ -0,0 +1,57 @@
+import { h } from './index-17b4da69.js';
+import { c as createStyleSheet } from './JSS-fadfaeff.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 = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
+  }`;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Header },
+      h("div", { class: sheet.classes.Title }, props.header)),
+    h("div", { class: sheet.classes.Container }, children),
+    h("div", { class: sheet.classes.Card },
+      h("div", { class: sheet.classes.Title }, props.cardTitle),
+      h("div", { class: sheet.classes.Description }, props.cardDescription))));
+}
+
+export { ProgramExplainerView as P };

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './jss-preset-default.esm-71fae192.js';
+import { m as h } from './extends-33266e9b.js';
+import './JSS-fadfaeff.js';
 import { g as getProps } from './utils-454405f5.js';
-import { P as ProgramExplainerView } from './sqm-program-explainer-view-68f0d242.js';
+import { P as ProgramExplainerView } from './sqm-program-explainer-view-cbf71bea.js';
 
 const ProgramExplainer = class {
   constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1, g as getElement, c as Host } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import './index.module-90d2c3ad.js';
-import { a as useRequestRerender } from './re-render-e06f2f7f.js';
+import { m as h } from './extends-33266e9b.js';
+import './use-callback-52b52f6a.js';
+import './index.module-6d78e252.js';
+import { a as useRequestRerender } from './re-render-7c205aa2.js';
 
 const ReferralTableGenericColumn = class {
   constructor(hostRef) {