@saasquatch/mint-components 1.15.0-25 → 1.15.0-27

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password.js

@@ -48,6 +48,21 @@ export class PortalForgotPassword {
      * @uiName Email verification sent text
      */
     this.successAlertText = "If an account with that email exists, a password reset email will be sent.";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #ffffff)";
+    /**
+     * @uiName Border radius
+     * @uiWidget number
+     */
+    this.borderRadius = "var(--sqm-border-radius-normal)";
+    /**
+     * @uiName Border style
+     * @uiWidget textArea
+     */
+    this.border = "1px solid var(--sqm-border-color, var(--sqm-text), #eaeaea)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -62,8 +77,14 @@ export class PortalForgotPassword {
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,
       successAlertText: this.successAlertText,
+      loginText: this.loginText,
     };
-    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
+    const styles = {
+      backgroundColor: this.backgroundColor,
+      borderRadius: this.borderRadius,
+      border: this.border,
+    };
+    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content, styles: styles }));
   }
   static get is() { return "sqm-portal-forgot-password"; }
   static get encapsulation() { return "shadow"; }
@@ -245,12 +266,84 @@ export class PortalForgotPassword {
       "reflect": false,
       "defaultValue": "\"If an account with that email exists, a password reset email will be sent.\""
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #ffffff)\""
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "border-radius",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-border-radius-normal)\""
+    },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border style",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"1px solid var(--sqm-border-color, var(--sqm-text), #eaeaea)\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalForgotPasswordViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; }; styles?: { backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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/global/mixins.js

@@ -66,11 +66,9 @@ export const Wrapper = {
   width: "100%",
   "max-width": "var(--sqm-content-max-width)",
   height: "auto",
-  "background-color": "var(--sqm-content-background)",
+  // "background-color": "var(--sqm-content-background)",
   display: "flex",
   padding: "var(--sl-spacing-xxx-large)",
-  border: "1px solid #eaeaea",
-  "border-radius": "8px",
 };
 export const AuthWrapper = {
   margin: "auto",

package/dist/collection/global/styles.js

@@ -613,13 +613,14 @@ html {
   --sqm-secondary-button-radius: 30px;
   
   --sqm-border-radius-normal: 18px;
+  --sqm-border-color: white;
 
 
   --sqm-input-background: #121212;
   --sqm-input-border: 1px solid #7c7c7c;
   --sqm-input-border-radius: 30px;
   --sqm-input-color: white;
-  --sqm-input-focus-border: 1px solid #1ed760;
+  --sqm-input-focus-border: 1px solid white;
   --sqm-input-label-color: white;
   --sqm-border-width: 1px;
   --sqm-input-label-font-size: white;
@@ -815,6 +816,16 @@ sl-details::part(summary) {
   background-color: var(--sqm-secondary-button-background-hover);
 }
 
+*::part(tertiarybutton-base){
+  color: var(--sqm-text, var(--sl-color-neutral-800));
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(tertiarybutton-base):hover{
+  color: #1ed760;
+}
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
@@ -832,11 +843,11 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 1px);
 }
 
-*::part(input-label):focus,
-*::part(select-label):focus,
-*::part(textarea-label):focus {
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textare::part(textarea-label):focus {
+  border-color: none;
   border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
-  background: pink !important;
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{

package/dist/collection/global/styles.ts

@@ -614,13 +614,14 @@ html {
   --sqm-secondary-button-radius: 30px;
   
   --sqm-border-radius-normal: 18px;
+  --sqm-border-color: white;
 
 
   --sqm-input-background: #121212;
   --sqm-input-border: 1px solid #7c7c7c;
   --sqm-input-border-radius: 30px;
   --sqm-input-color: white;
-  --sqm-input-focus-border: 1px solid #1ed760;
+  --sqm-input-focus-border: 1px solid white;
   --sqm-input-label-color: white;
   --sqm-border-width: 1px;
   --sqm-input-label-font-size: white;
@@ -816,6 +817,16 @@ sl-details::part(summary) {
   background-color: var(--sqm-secondary-button-background-hover);
 }
 
+*::part(tertiarybutton-base){
+  color: var(--sqm-text, var(--sl-color-neutral-800));
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(tertiarybutton-base):hover{
+  color: #1ed760;
+}
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
@@ -833,11 +844,11 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 1px);
 }
 
-*::part(input-label):focus,
-*::part(select-label):focus,
-*::part(textarea-label):focus {
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textare::part(textarea-label):focus {
+  border-color: none;
   border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
-  background: pink !important;
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{

package/dist/esm/{GenericTableView-e7addb2b.js → GenericTableView-7d3de181.js}

@@ -1,6 +1,6 @@
 import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { g as gap } from './mixins-83f90fa1.js';
+import { g as gap } from './mixins-faf102f9.js';
 
 function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;

package/dist/esm/{ShadowViewAddon-3d4a0614.js → ShadowViewAddon-c43fbfe3.js}

@@ -1,16 +1,16 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
 import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-3e59ae75.js';
+import { i as intl } from './global-20b3681d.js';
 import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-8f75921a.js';
-import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { C as CopyTextView } from './copy-text-view-0ac6e1d1.js';
+import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-faf102f9.js';
+import { C as CopyTextView } from './copy-text-view-d3bb9d84.js';
 import { u as useChildElements } from './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
-import { T as TextSpanView } from './sqm-text-span-view-c577cc60.js';
+import { T as TextSpanView } from './sqm-text-span-view-cd3902e5.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { a as isValidColor, b as isMobile } from './utilities-5b0ca040.js';
 import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-1683ae32.js';

package/dist/esm/{copy-text-view-0ac6e1d1.js → copy-text-view-d3bb9d84.js}

@@ -1,6 +1,6 @@
 import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { H as HostBlock } from './mixins-83f90fa1.js';
+import { H as HostBlock } from './mixins-faf102f9.js';
 
 const vanillaStyle = `
   :host{

package/dist/esm/{email-registration-view-a7818cf2.js → email-registration-view-52a3c033.js}

@@ -1,6 +1,6 @@
 import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { A as AuthWrapper, g as gap, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
+import { A as AuthWrapper, g as gap, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-faf102f9.js';
 
 const style = {
   Wrapper: {

package/dist/esm/{global-3e59ae75.js → global-20b3681d.js}

@@ -26517,13 +26517,14 @@ html {
   --sqm-secondary-button-radius: 30px;
   
   --sqm-border-radius-normal: 18px;
+  --sqm-border-color: white;
 
 
   --sqm-input-background: #121212;
   --sqm-input-border: 1px solid #7c7c7c;
   --sqm-input-border-radius: 30px;
   --sqm-input-color: white;
-  --sqm-input-focus-border: 1px solid #1ed760;
+  --sqm-input-focus-border: 1px solid white;
   --sqm-input-label-color: white;
   --sqm-border-width: 1px;
   --sqm-input-label-font-size: white;
@@ -26719,6 +26720,16 @@ sl-details::part(summary) {
   background-color: var(--sqm-secondary-button-background-hover);
 }
 
+*::part(tertiarybutton-base){
+  color: var(--sqm-text, var(--sl-color-neutral-800));
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(tertiarybutton-base):hover{
+  color: #1ed760;
+}
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
@@ -26736,11 +26747,11 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 1px);
 }
 
-*::part(input-label):focus,
-*::part(select-label):focus,
-*::part(textarea-label):focus {
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textare::part(textarea-label):focus {
+  border-color: none;
   border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
-  background: pink !important;
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{