@saasquatch/mint-components 1.15.0-15 → 1.15.0-151

package/dist/collection/components/sqm-tabs/sqm-tabs.js

@@ -19,8 +19,8 @@ export class Tabs {
   disconnectedCallback() { }
   render() {
     const { content } = useTabs();
-    const { placement } = getProps(this);
-    return (h(TabsView, { placement: placement, content: content },
+    const { placement, textColor } = getProps(this);
+    return (h(TabsView, { placement: placement, content: content, textColor: textColor },
       h("slot", null)));
   }
   static get is() { return "sqm-tabs"; }
@@ -54,6 +54,32 @@ export class Tabs {
       },
       "attribute": "placement",
       "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Tab text color"
+      },
+      "attribute": "text-color",
+      "reflect": false
     }
   }; }
 }

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

@@ -2,6 +2,12 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export const style = {
   Description: {
+    "& .icon": {
+      color: "var(--sqm-text)",
+      "&:hover": {
+        color: "var(--sqm-accent-color-icon)",
+      },
+    },
     "& input[type=checkbox]": {
       display: "none",
     },
@@ -48,6 +54,6 @@ export function Details(props) {
     h("span", { class: sheet.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
+        h("sl-icon", { class: "icon", exportparts: "base: chevron-icon", name: "chevron-down" })),
       h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }

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

@@ -48,7 +48,8 @@ const style = {
       width: "100%",
       height: "4px",
       borderRadius: "4px",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
+      background: "red",
     },
     "& .progress": {
       display: "block",
@@ -61,7 +62,7 @@ const style = {
       width: "12px",
       height: "12px",
       display: "flex",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
       borderRadius: "50%",
       position: "relative",
       left: "47%",

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

@@ -9,29 +9,28 @@ import * as SVGs from "./SVGs";
 export function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
-  console.log("text color from the view ", content.textColor);
   const style = {
     TaskCard: {
       display: "inline-block",
       width: "100%",
       "& .main": {
         position: "relative",
-        boxSizing: "border-sizing",
-        background: content.backgroundColor || "var(--sl-color-neutral-0)",
-        border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-        borderRadius: "var(--sl-border-radius-large)",
-        boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
+        boxSizing: "border-box",
+        background: content.backgroundColor || "var(--sqm-portal-background)",
+        border: `var(--sqm-border-thickness) solid ${content.borderColor || "var(--sqm-border-color)"}`,
+        borderRadius: "var(--sqm-border-radius-normal)",
+        boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.4)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
         color: content.textColor || "var(--sqm-text)",
       },
       "& .main.complete": {
-        background: content.backgroundColor || "var(--sl-color-primary-50)",
-        borderColor: content.borderColor || "var(--sl-color-primary-500)",
+        opacity: "0.8",
+        borderColor: "var(--sqm-accent-color-border)",
       },
       "& .main.expired": {
         color: content.textColor || "var(--sqm-text)",
-        background: content.backgroundColor || "var(--sl-color-neutral-50)",
+        opacity: "0.8",
       },
       "& .title": {
         fontSize: "var(--sl-font-size-medium)",
@@ -50,9 +49,9 @@ export function TaskCardView(props) {
     NotStarted: {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
-      color: content.textColor || "var(--sl-color-primary-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      color: content.textColor || "var(--sqm-primary-color)",
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-primary-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
@@ -67,11 +66,11 @@ export function TaskCardView(props) {
     Ended: {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
-      color: content.textColor || "var(--sl-color-warning-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      color: content.textColor || "var(--sqm-warning-color-text)",
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
-      background: content.backgroundColor || "var(--sl-color-warning-50)",
+      background: content.backgroundColor || "var(--sqm-warning-color-background)",
       fontWeight: "var(--sl-font-weight-semibold)",
       lineHeight: "var(--sl-line-height-dense)",
       "& .icon": {
@@ -88,7 +87,7 @@ export function TaskCardView(props) {
         top: "5%",
         alignSelf: "center",
         lineHeight: "0",
-        color: content.textColor || "var(--sqm-text)",
+        color: "var(--sqm-accent-color-icon)",
         fontSize: "var(--sl-font-size-large)",
         marginRight: "var(--sl-spacing-x-small)",
       },
@@ -109,7 +108,7 @@ export function TaskCardView(props) {
         marginRight: "var(--sl-spacing-xx-small)",
       },
       "& .end": {
-        color: content.textColor || "var(--sl-color-warning-500)",
+        color: content.textColor || "var(--sqm-warning-color-text)",
         fontWeight: "var(--sl-font-weight-semibold)",
         marginBottom: "var(--sl-spacing-xx-small)",
       },
@@ -119,7 +118,7 @@ export function TaskCardView(props) {
     },
     Footer: {
       "&[data-subdue] .success": {
-        color: content.textColor || "var(--sl-color-primary-300)",
+        color: content.textColor || "var(--sqm-accent-color-text)",
       },
       "&[data-subdue] .neutral": {
         color: content.textColor || "var(--sqm-text)",
@@ -150,7 +149,7 @@ export function TaskCardView(props) {
     },
   };
   const sheet = createStyleSheet(style);
-  const contenttring = sheet.toString();
+  const contentString = sheet.toString();
   const dateStart = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[0]);
   const dateEnd = content.rewardDuration &&
@@ -185,7 +184,7 @@ export function TaskCardView(props) {
   `;
   return (h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
-      contenttring,
+      contentString,
       vanillaStyle),
     !states.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
       h("span", { class: "icon" },
@@ -211,7 +210,7 @@ export function TaskCardView(props) {
       }))),
     h("div", { part: "sqm-style-container", style: {
         borderRadius: taskUnavailable &&
-          "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
+          "0 0 var(--sqm-border-radius-normal) var(--sqm-border-radius-normal)",
       }, class: taskUnavailable
         ? "main expired"
         : taskComplete
@@ -233,7 +232,7 @@ export function TaskCardView(props) {
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
         states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
         h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
@@ -263,9 +262,7 @@ export function TaskCardView(props) {
                 .setLocale(luxonLocale(states.locale))
                 .toLocaleString(DateTime.DATETIME_MED),
             })))),
-          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonStyle === "primary"
-              ? "primary"
-              : "secondary"}button-base`, id: "sl-button", type: content.buttonStyle === "primary" ? "primary" : "default", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonType || "primary"}button-base`, type: "primary", id: "sl-button", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
               opacity: taskComplete || taskUnavailable ? "0.45" : "1",
             } }, content.buttonText)))))))));
 }

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

@@ -11,10 +11,6 @@ import { useTaskCard } from "./useTaskCard";
  * @uiName Task Card
  * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
  * @validParents ["sqm-card-feed"]
- * @exampleGroup Rewards
- * @example One Time Task Card - <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}"></sqm-task-card>
- * @example Repeatable Task Card - <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" repeatable="" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
- * @example Event Sending Task Card - <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
  */
 export class TaskCard {
   constructor() {
@@ -131,7 +127,7 @@ export class TaskCard {
      * @uiEnumNames ["Primary", "Secondary"]
      * @uiGroup Style
      */
-    this.buttonStyle = "primary";
+    this.buttonType = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -143,7 +139,6 @@ export class TaskCard {
     const { states, callbacks } = isDemo()
       ? useTaskCardDemo(this)
       : useTaskCard(this);
-    console.log("button style from controller", this.buttonStyle);
     return (h(TaskCardView, { callbacks: callbacks, states: {
         loading,
         loadingEvent: states.loadingEvent,
@@ -846,7 +841,7 @@ export class TaskCard {
       "attribute": "border-radius",
       "reflect": false
     },
-    "buttonStyle": {
+    "buttonType": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -875,7 +870,7 @@ export class TaskCard {
           }],
         "text": ""
       },
-      "attribute": "button-style",
+      "attribute": "button-type",
       "reflect": false,
       "defaultValue": "\"primary\""
     },
@@ -920,6 +915,7 @@ export class TaskCard {
 }
 function useTaskCardDemo(props) {
   return deepmerge({
+    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),

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

@@ -42,7 +42,7 @@ export function useTaskCard(props) {
       textColor: props.textColor,
       borderColor: props.borderColor,
       borderRadius: props.borderRadius,
-      buttonStyle: props.buttonStyle,
+      buttonType: props.buttonType,
     },
   };
   return {

package/dist/collection/components/sqm-text/sqm-text.js

@@ -2,7 +2,7 @@ import { Component, h, Prop, State } from "@stencil/core";
 import { withHooks } from "@saasquatch/stencil-hooks";
 /**
  * @uiName Text
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section", "sqm-titled-section"]
  * @slots [{"name":"", "title":"Text"}]
  * @slotEditor richText
  * @canvasRenderer always-replace

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -1,46 +1,48 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  p: {
-    "font-size": "var(--sl-font-size-small)",
-    "font-weight": "400",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-  subtext: {
-    "font-size": "var(--sl-font-size-x-small)",
-    "font-weight": "400",
-    color: "var(--sqm-text-subdued)",
-    margin: "0",
-  },
-  h1: {
-    "font-size": "var(--sl-font-size-xx-large)",
-    "font-weight": "600",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-  h2: {
-    "font-size": "var(--sl-font-size-x-large)",
-    "font-weight": "600",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-  h3: {
-    "font-size": "var(--sl-font-size-large)",
-    "font-weight": "600",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-  h4: {
-    "font-size": "13px",
-    "font-weight": "600",
-    color: "var(--sq-text)",
-    margin: "0",
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
+export function TextSpanView(props, children) {
+  const { type, fontSize, textColor } = props;
+  const style = {
+    p: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-small)",
+      "font-weight": "400",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    subtext: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-x-small)",
+      "font-weight": "400",
+      color: textColor || "var(--sqm-text-subdued)",
+      margin: "0",
+    },
+    h1: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-xx-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h2: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-x-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h3: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h4: {
+      "font-size": fontSize ? `${fontSize}px` : "13px",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
     :host {
       word-wrap: break-word;
     }
@@ -48,8 +50,7 @@ const vanillaStyle = `
       display: inline;
     }
   `;
-export function TextSpanView(props, children) {
-  return (h("span", { class: sheet.classes[props.type], part: "sqm-base" },
+  return (h("span", { class: sheet.classes[type], part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-text-span/sqm-text-span.js

@@ -6,7 +6,7 @@ import { TextSpanView } from "./sqm-text-span-view";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
  * @canvasRenderer always-replace
  */
-export class Text {
+export class TextSpan {
   constructor() {
     this.ignored = true;
     withHooks(this);
@@ -14,7 +14,7 @@ export class Text {
   disconnectedCallback() { }
   componentWillLoad() { }
   render() {
-    return h(TextSpanView, { type: this.type }, this.text);
+    return (h(TextSpanView, { type: this.type, fontSize: this.fontSize, textColor: this.textColor }, this.text));
   }
   static get is() { return "sqm-text-span"; }
   static get properties() { return {
@@ -66,6 +66,55 @@ export class Text {
       },
       "attribute": "type",
       "reflect": false
+    },
+    "fontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Font Size",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": "Font size in pixels"
+      },
+      "attribute": "font-size",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/sqm-timeline/sqm-timeline-entry-view.js

@@ -24,7 +24,7 @@ export function TimelineEntryView(props) {
         display: "none",
         color: "transparent",
         userSelect: "none",
-        background: props.lineColor || "var(--sl-color-primary-500)",
+        background: props.lineColor || "var(--sqm-accent-color-icon)",
         width: "4px",
         borderRadius: "4px",
         margin: "-2px",
@@ -39,7 +39,7 @@ export function TimelineEntryView(props) {
         position: "relative",
         top: "4px",
         zIndex: "1",
-        color: props.lineColor || "var(--sl-color-primary-500)",
+        color: props.lineColor || "var(--sqm-accent-color-icon)",
         marginRight: "var(--sl-spacing-large)",
       },
       "& .reward": {

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -4,8 +4,8 @@ import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
  * @uiName Titled Section
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"]
- * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card"]
+ * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span", "sqm-user-name"]
  * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
  * @exampleGroup Layout
  * @example Titled Section - <sqm-titled-section text-align="center" label-margin="small" padding="none"><div slot="label"><h2>Section Label</h2></div><div slot="content"><p>Add your section content here!</p></div></sqm-titled-section>

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -26,6 +26,9 @@ const style = {
   },
   CodeInput: {
     maxWidth: "40px",
+    "&::part(base)": {
+      borderRadius: "4px !important",
+    },
     "&::part(input)": {
       margin: "0",
       padding: "0 var(--sl-input-spacing-small)",
@@ -35,6 +38,9 @@ const style = {
   CodeInputError: {
     ...ErrorStyles,
     maxWidth: "40px",
+    "&::part(base)": {
+      borderRadius: "4px !important",
+    },
     "&::part(input)": {
       margin: "0",
       padding: "0 var(--sl-input-spacing-small)",
@@ -42,7 +48,7 @@ const style = {
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-text)",
     fontSize: "var(--sl-font-size-small)",
     margin: "0",
   },
@@ -85,7 +91,11 @@ export function WidgetCodeVerificationView(props) {
     id: "resendCodeText",
     defaultMessage: text.resendCodeText,
   }, {
-    resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+    resendCodeLink: (h("a", { href: "", style: {
+        textDecoration: "underline",
+        color: "inherit",
+        cursor: "pointer",
+      }, onClick: (e) => {
         e.preventDefault();
         callbacks.resendEmail();
       } }, text.resendCodeLabel)),

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js

@@ -3,9 +3,9 @@ import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
+import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
 import { useWidgetCodeVerification } from "./useCodeVerification";
-import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 export class WidgetCodeVerification {
   constructor() {
     /**
@@ -283,10 +283,10 @@ function useDemoWidgetCodeVerification(props) {
   const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   return deepmerge({
     states: {
+      initialiseLoading: false,
       loading: false,
       email: "test@example.com",
       emailResent,
-      resendError: false,
       verifyFailed: false,
     },
     refs: {