@saasquatch/mint-components 1.15.0-5 → 1.15.0-51

package/dist/esm/{global-7b65dcb8.js → global-64286824.js}

@@ -1,5 +1,5 @@
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-4bc38af4.js';
-import { s as src, m as memoize, U } from './index.module-89a79f66.js';
+import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-20ad2b5f.js';
+import { s as src, m as memoize, U } from './index.module-d49ae5e7.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -25974,6 +25974,7 @@ function createStyleElement() {
   --teal-6: #0b6270;
   --teal-7: #004551;
 } */
+var _a$1, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91, _92, _93, _94, _95, _96, _97, _98, _99, _100, _101, _102, _103, _104, _105, _106, _107, _108, _109, _110, _111, _112;
 const style = `
 /* vietnamese */
 @font-face {
@@ -26412,7 +26413,7 @@ html {
   --sl-focus-ring-color-success: var(--sl-color-success-100);
   --sl-focus-ring-color-info: var(--sl-color-info-100);
   --sl-focus-ring-color-warning: var(--sl-color-warning-100);
-  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);
   --sl-focus-ring-width: 0px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
@@ -26420,17 +26421,7 @@ html {
   --sl-input-height-small: 1.875rem;
   --sl-input-height-medium: 2.5rem;
   --sl-input-height-large: 3.125rem;
-  --sl-input-background-color: var(--sl-color-white);
-  --sl-input-background-color-hover: var(--sl-color-white);
-  --sl-input-background-color-focus: var(--sl-color-white);
-  --sl-input-background-color-disabled: var(--sl-color-gray-100);
-  --sl-input-border-color: var(--sl-color-gray-300);
-  --sl-input-border-color-hover: var(--sl-color-gray-400);
-  --sl-input-border-color-focus: var(--sl-color-primary-500);
-  --sl-input-border-color-disabled: var(--sl-color-gray-300);
-  --sl-input-border-width: 1px;
   --sl-input-border-radius-small: var(--sl-border-radius-medium);
-  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
   --sl-input-border-radius-large: var(--sl-border-radius-medium);
   --sl-input-font-family: var(--sl-font-sans);
   --sl-input-font-weight: var(--sl-font-weight-normal);
@@ -26438,15 +26429,11 @@ html {
   --sl-input-font-size-medium: var(--sl-font-size-medium);
   --sl-input-font-size-large: var(--sl-font-size-large);
   --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
-  --sl-input-color: var(--sl-color-gray-700);
-  --sl-input-color-hover: var(--sl-color-gray-700);
-  --sl-input-color-focus: var(--sl-color-gray-700);
   --sl-input-color-disabled: var(--sl-color-gray-900);
   --sl-input-icon-color: var(--sl-color-gray-400);
   --sl-input-icon-color-hover: var(--sl-color-gray-600);
   --sl-input-icon-color-focus: var(--sl-color-gray-600);
   --sl-input-placeholder-color: var(--sl-color-gray-400);
-  --sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
   --sl-input-spacing-small: var(--sl-spacing-small);
   --sl-input-spacing-medium: var(--sl-spacing-medium);
   --sl-input-spacing-large: var(--sl-spacing-large);
@@ -26478,102 +26465,250 @@ html {
   --sl-z-index-toast: 950;
   --sl-z-index-tooltip: 1000;
 }
+
+
+  
 :root {
   --sqm-header-background: var(--sl-color-white);
   --sqm-footer-background: var(--sl-color-white);
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: transparent;
+  --sqm-portal-background: ${((_b = (_a$1 = window.SquatchBrandingConfig) === null || _a$1 === void 0 ? void 0 : _a$1.color) === null || _b === void 0 ? void 0 : _b.backgroundColor) || "#121212"};
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-
-  /*
-  --sqm-text: var(--sl-color-neutral-800);
-  --sqm-text-subdued: var(--sl-color-neutral-500);
- */
-
-  --sqm-text: slateblue;
-  --sqm-text-subdued: var(--sl-color-neutral-500);
-  /*
-  --sqm-primary-button-background: var(--sl-color-primary-500);
-  --sqm-primary-button-background-hover: var(--sl-color-primary-300);
-  --sqm-primary-button-color: var(--sl-color-primary-text);
-  --sqm-primary-button-color-border: none;
-  --sqm-primary-button-radius: var(--sl-border-radius-large);
- */
-
-  --sqm-primary-button-background: tomato;
-  --sqm-primary-button-background-hover: darkred;
-  --sqm-primary-button-color: white;
-  --sqm-primary-button-color-border: transparent;
-  --sqm-primary-button-radius: 30px;
-
-
-  --sqm-secondary-button-background: var(--sl-color-primary-200);
-  --sqm-secondary-button-background-hover: var(--sl-color-primary-100);
-  --sqm-secondary-button-color: var(--sl-color-secondary-500);
-  --sqm-secondary-button-color-border: var(--sl-color-primary-200);
-  --sqm-secondary-button-radius: var(--sl-border-radius-large);
+  --sqm-skeleton-background: #eee;
+  --sqm-text: ${((_e = (_d = (_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d.textColorShades) === null || _e === void 0 ? void 0 : _e.mainText) || "white"};
+  --sqm-text-subdued: ${(_h = (_g = (_f = window.SquatchBrandingConfig) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g.textColorShades) === null || _h === void 0 ? void 0 : _h.subduedText};
+
+  --sqm-primary-color: ${((_k = (_j = window.SquatchBrandingConfig) === null || _j === void 0 ? void 0 : _j.main) === null || _k === void 0 ? void 0 : _k.brandColor) || "#1ed760"};
+  --sqm-primary-button-background:${((_o = (_m = (_l = window.SquatchBrandingConfig) === null || _l === void 0 ? void 0 : _l.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonColor) === null || _o === void 0 ? void 0 : _o.background) ||
+  "#1ed760"};
+  --sqm-primary-button-background-hover: ${((_r = (_q = (_p = window.SquatchBrandingConfig) === null || _p === void 0 ? void 0 : _p.primaryButton) === null || _q === void 0 ? void 0 : _q.buttonHoverColor) === null || _r === void 0 ? void 0 : _r.background) ||
+  "#1ed760"};
+  --sqm-primary-button-color-hover: ${(_u = (_t = (_s = window.SquatchBrandingConfig) === null || _s === void 0 ? void 0 : _s.primaryButton) === null || _t === void 0 ? void 0 : _t.buttonHoverColor) === null || _u === void 0 ? void 0 : _u.label};
+  --sqm-primary-button-border-color-hover: ${(_x = (_w = (_v = window.SquatchBrandingConfig) === null || _v === void 0 ? void 0 : _v.primaryButton) === null || _w === void 0 ? void 0 : _w.buttonHoverColor) === null || _x === void 0 ? void 0 : _x.border};
+  --sqm-primary-button-color: ${((_0 = (_z = (_y = window.SquatchBrandingConfig) === null || _y === void 0 ? void 0 : _y.primaryButton) === null || _z === void 0 ? void 0 : _z.buttonColor) === null || _0 === void 0 ? void 0 : _0.label) || "#FFFFFF"};
+  --sqm-primary-button-color-border: ${((_3 = (_2 = (_1 = window.SquatchBrandingConfig) === null || _1 === void 0 ? void 0 : _1.primaryButton) === null || _2 === void 0 ? void 0 : _2.buttonColor) === null || _3 === void 0 ? void 0 : _3.border) ||
+  "transparent"};
+  --sqm-primary-button-radius: ${((_5 = (_4 = window.SquatchBrandingConfig) === null || _4 === void 0 ? void 0 : _4.primaryButton) === null || _5 === void 0 ? void 0 : _5.borderRadius) + "px"};
+  --sqm-secondary-button-background: ${((_7 = (_6 = window.SquatchBrandingConfig) === null || _6 === void 0 ? void 0 : _6.secondaryButton) === null || _7 === void 0 ? void 0 : _7.buttonColor) || "#191414"};
+  --sqm-secondary-button-background-hover: ${(_10 = (_9 = (_8 = window.SquatchBrandingConfig) === null || _8 === void 0 ? void 0 : _8.secondaryButton) === null || _9 === void 0 ? void 0 : _9.buttonHoverColor) === null || _10 === void 0 ? void 0 : _10.background};
+  --sqm-secondary-button-color-hover: ${(_13 = (_12 = (_11 = window.SquatchBrandingConfig) === null || _11 === void 0 ? void 0 : _11.secondaryButton) === null || _12 === void 0 ? void 0 : _12.buttonHoverColor) === null || _13 === void 0 ? void 0 : _13.label};
+  --sqm-secondary-button-border-color-hover: ${(_16 = (_15 = (_14 = window.SquatchBrandingConfig) === null || _14 === void 0 ? void 0 : _14.secondaryButton) === null || _15 === void 0 ? void 0 : _15.buttonHoverColor) === null || _16 === void 0 ? void 0 : _16.border};
+  --sqm-secondary-button-color: ${((_19 = (_18 = (_17 = window.SquatchBrandingConfig) === null || _17 === void 0 ? void 0 : _17.secondaryButton) === null || _18 === void 0 ? void 0 : _18.buttonColor) === null || _19 === void 0 ? void 0 : _19.label) ||
+  "#FFFFFF"};
+  --sqm-secondary-button-color-border: ${((_22 = (_21 = (_20 = window.SquatchBrandingConfig) === null || _20 === void 0 ? void 0 : _20.secondaryButton) === null || _21 === void 0 ? void 0 : _21.buttonColor) === null || _22 === void 0 ? void 0 : _22.border) ||
+  "#FFFFFF"};
+  --sqm-secondary-button-radius: ${((_24 = (_23 = window.SquatchBrandingConfig) === null || _23 === void 0 ? void 0 : _23.secondaryButton) === null || _24 === void 0 ? void 0 : _24.borderRadius) + "px"};
+
+  --sqm-border-radius-normal: ${((_26 = (_25 = window.SquatchBrandingConfig) === null || _25 === void 0 ? void 0 : _25.border) === null || _26 === void 0 ? void 0 : _26.borderRadius) + "px"}; 
+  --sqm-border-color: ${(_28 = (_27 = window.SquatchBrandingConfig) === null || _27 === void 0 ? void 0 : _27.border) === null || _28 === void 0 ? void 0 : _28.borderColor};
+
+  --sqm-border-thickness: ${((_30 = (_29 = window.SquatchBrandingConfig) === null || _29 === void 0 ? void 0 : _29.border) === null || _30 === void 0 ? void 0 : _30.borderThickness) + "px"};
+
+  --sqm-accent-color-icon: ${((_33 = (_32 = (_31 = window.SquatchBrandingConfig) === null || _31 === void 0 ? void 0 : _31.color) === null || _32 === void 0 ? void 0 : _32.accentColorShades) === null || _33 === void 0 ? void 0 : _33.icon) || "#1ed760"};
+  --sqm-accent-color-text: ${((_36 = (_35 = (_34 = window.SquatchBrandingConfig) === null || _34 === void 0 ? void 0 : _34.color) === null || _35 === void 0 ? void 0 : _35.accentColorShades) === null || _36 === void 0 ? void 0 : _36.text) || "#fff"};    
+  --sqm-accent-color-border: ${((_39 = (_38 = (_37 = window.SquatchBrandingConfig) === null || _37 === void 0 ? void 0 : _37.color) === null || _38 === void 0 ? void 0 : _38.accentColorShades) === null || _39 === void 0 ? void 0 : _39.border) || "#1ed760"};
+  --sqm-accent-color-background: ${((_42 = (_41 = (_40 = window.SquatchBrandingConfig) === null || _40 === void 0 ? void 0 : _40.color) === null || _41 === void 0 ? void 0 : _41.accentColorShades) === null || _42 === void 0 ? void 0 : _42.background) ||
+  "#0d4a27"};
+
+  --sqm-success-color-icon: ${((_45 = (_44 = (_43 = window.SquatchBrandingConfig) === null || _43 === void 0 ? void 0 : _43.color) === null || _44 === void 0 ? void 0 : _44.success) === null || _45 === void 0 ? void 0 : _45.iconAndBadge) ||
+  "var(--sl-color-success-600)"};
+  --sqm-success-color-text: ${((_48 = (_47 = (_46 = window.SquatchBrandingConfig) === null || _46 === void 0 ? void 0 : _46.color) === null || _47 === void 0 ? void 0 : _47.success) === null || _48 === void 0 ? void 0 : _48.text) ||
+  "var(--sl-color-success-950)"};
+  --sqm-success-color-border: ${((_51 = (_50 = (_49 = window.SquatchBrandingConfig) === null || _49 === void 0 ? void 0 : _49.color) === null || _50 === void 0 ? void 0 : _50.success) === null || _51 === void 0 ? void 0 : _51.border) ||
+  "var(--sl-color-success-400)"};
+  --sqm-success-color-background: ${((_54 = (_53 = (_52 = window.SquatchBrandingConfig) === null || _52 === void 0 ? void 0 : _52.color) === null || _53 === void 0 ? void 0 : _53.success) === null || _54 === void 0 ? void 0 : _54.background) ||
+  "var(--sl-color-success-300)"};
+  
+  --sqm-warning-color-icon: ${((_57 = (_56 = (_55 = window.SquatchBrandingConfig) === null || _55 === void 0 ? void 0 : _55.color) === null || _56 === void 0 ? void 0 : _56.warning) === null || _57 === void 0 ? void 0 : _57.iconAndBadge) ||
+  "var(--sl-color-warning-600)"};
+  --sqm-warning-color-text: ${((_60 = (_59 = (_58 = window.SquatchBrandingConfig) === null || _58 === void 0 ? void 0 : _58.color) === null || _59 === void 0 ? void 0 : _59.warning) === null || _60 === void 0 ? void 0 : _60.text) ||
+  "var(--sl-color-warning-950)"};
+  --sqm-warning-color-border: ${((_63 = (_62 = (_61 = window.SquatchBrandingConfig) === null || _61 === void 0 ? void 0 : _61.color) === null || _62 === void 0 ? void 0 : _62.warning) === null || _63 === void 0 ? void 0 : _63.border) ||
+  "var(--sl-color-warning-400)"};
+  --sqm-warning-color-background: ${((_66 = (_65 = (_64 = window.SquatchBrandingConfig) === null || _64 === void 0 ? void 0 : _64.color) === null || _65 === void 0 ? void 0 : _65.warning) === null || _66 === void 0 ? void 0 : _66.background) ||
+  "var(--sl-color-warning-300)"};
+
+  --sqm-danger-color-icon: ${((_69 = (_68 = (_67 = window.SquatchBrandingConfig) === null || _67 === void 0 ? void 0 : _67.color) === null || _68 === void 0 ? void 0 : _68.critical) === null || _69 === void 0 ? void 0 : _69.iconAndBadge) ||
+  "var(--sl-color-danger-600)"};
+  --sqm-danger-color-text: ${((_72 = (_71 = (_70 = window.SquatchBrandingConfig) === null || _70 === void 0 ? void 0 : _70.color) === null || _71 === void 0 ? void 0 : _71.critical) === null || _72 === void 0 ? void 0 : _72.text) ||
+  "var(--sl-color-danger-950)"};
+  --sqm-danger-color-border: ${((_75 = (_74 = (_73 = window.SquatchBrandingConfig) === null || _73 === void 0 ? void 0 : _73.color) === null || _74 === void 0 ? void 0 : _74.critical) === null || _75 === void 0 ? void 0 : _75.border) ||
+  "var(--sl-color-danger-400)"};
+  --sqm-danger-color-background: ${((_78 = (_77 = (_76 = window.SquatchBrandingConfig) === null || _76 === void 0 ? void 0 : _76.color) === null || _77 === void 0 ? void 0 : _77.critical) === null || _78 === void 0 ? void 0 : _78.background) ||
+  "var(--sl-color-danger-300)"};
+
+  --sqm-informative-color-icon: ${((_81 = (_80 = (_79 = window.SquatchBrandingConfig) === null || _79 === void 0 ? void 0 : _79.color) === null || _80 === void 0 ? void 0 : _80.informative) === null || _81 === void 0 ? void 0 : _81.iconAndBadge) ||
+  "var(--sl-color-sky-600)"};
+  --sqm-informative-color-text: ${((_84 = (_83 = (_82 = window.SquatchBrandingConfig) === null || _82 === void 0 ? void 0 : _82.color) === null || _83 === void 0 ? void 0 : _83.informative) === null || _84 === void 0 ? void 0 : _84.text) ||
+  "var(--sl-color-sky-950)"};
+  --sqm-informative-color-border: ${((_87 = (_86 = (_85 = window.SquatchBrandingConfig) === null || _85 === void 0 ? void 0 : _85.color) === null || _86 === void 0 ? void 0 : _86.informative) === null || _87 === void 0 ? void 0 : _87.border) ||
+  "var(--sl-color-sky-400)"};
+  --sqm-informative-color-background: ${((_90 = (_89 = (_88 = window.SquatchBrandingConfig) === null || _88 === void 0 ? void 0 : _88.color) === null || _89 === void 0 ? void 0 : _89.informative) === null || _90 === void 0 ? void 0 : _90.background) ||
+  "var(--sl-color-sky-300)"};
+
+  --sqm-input-background: ${((_93 = (_92 = (_91 = window.SquatchBrandingConfig) === null || _91 === void 0 ? void 0 : _91.formFields) === null || _92 === void 0 ? void 0 : _92.formFieldColor) === null || _93 === void 0 ? void 0 : _93.background) ||
+  "#fff"};
+  --sqm-input-border-color: ${((_96 = (_95 = (_94 = window.SquatchBrandingConfig) === null || _94 === void 0 ? void 0 : _94.formFields) === null || _95 === void 0 ? void 0 : _95.formFieldColor) === null || _96 === void 0 ? void 0 : _96.border) ||
+  "#eaeaea"};
+  --sqm-input-border-radius: ${((_98 = (_97 = window.SquatchBrandingConfig) === null || _97 === void 0 ? void 0 : _97.formFields) === null || _98 === void 0 ? void 0 : _98.borderRadius) + "px"};
+  --sqm-input-color: ${((_101 = (_100 = (_99 = window.SquatchBrandingConfig) === null || _99 === void 0 ? void 0 : _99.formFields) === null || _100 === void 0 ? void 0 : _100.formFieldColor) === null || _101 === void 0 ? void 0 : _101.inputText) ||
+  "#000"};
+  --sqm-input-label-color: ${((_104 = (_103 = (_102 = window.SquatchBrandingConfig) === null || _102 === void 0 ? void 0 : _102.color) === null || _103 === void 0 ? void 0 : _103.textColorShades) === null || _104 === void 0 ? void 0 : _104.mainText) || "#000"};
+  --sqm-input-border-color-focus: ${((_106 = (_105 = window.SquatchBrandingConfig) === null || _105 === void 0 ? void 0 : _105.formFields) === null || _106 === void 0 ? void 0 : _106.selectedStateColor) || "#eaeaea"};
+  --sqm-input-border-color-hover: ${((_108 = (_107 = window.SquatchBrandingConfig) === null || _107 === void 0 ? void 0 : _107.formFields) === null || _108 === void 0 ? void 0 : _108.hoverStateColor) || "#ccc"};
+  --sqm-input-label-font-size: inherit;
+  --sqm-input-disabled-color: var(--sqm-text-subdued);
+  --sqm-input-disabled-background: ${(_110 = (_109 = window.SquatchBrandingConfig) === null || _109 === void 0 ? void 0 : _109.formFields) === null || _110 === void 0 ? void 0 : _110.disabledBackgroundColor};
+
+  --sl-color-primary-100: var(--sqm-primary-color);
+  --sl-color-primary-200: var(--sqm-primary-color);
+  --sl-color-primary-300: var(--sqm-primary-color);
+  --sl-color-primary-400: var(--sqm-primary-color);
+  --sl-color-primary-500: var(--sqm-primary-color);
+
+  --sl-input-border-radius-medium: var(--sqm-input-border-radius, var(--sqm-border-radius-normal));
+  --sl-input-color-hover: var(--sqm-input-color-hover);
+  --sl-input-color-focus: var(--sqm-input-color-focus);
+  --sl-input-color-disabled: var(--sqm-input-disabled-color);
+  --sl-input-border-color-disabled: #7c7c7c;
+  --sl-input-border-color-focus: var(--sqm-input-border-color-focus, #999999);
+  --sl-input-border-color: var(--sqm-input-border-color, #7c7c7c);
+  --sl-input-border-color-hover: var(--sqm-input-border-color-hover, #999999); 
+  --sl-input-background-color-focus: var(--sqm-input-background, #ffffff);
+  --sl-input-border-radius: var(--sqm-input-border-radius, var(--sqm-border-radius-normal));
+  --sl-input-background-color: var(--sqm-input-background, #ffffff);
+  --sl-input-color: var(--sqm-input-color, var(--sqm-text), #333); 
+  --sl-input-placeholder-color: var(--sqm-text-subdued, var(--sl-color-neutral-500));
+  --sl-input-background-color-hover: var(--sqm-input-background, #ffffff);
+  --sl-input-border-width: var(--sqm-border-thickness, 1px);
+  --sl-input-border-style: solid;
+
+
+
+/* --- Disabled State --- */
+--sl-input-background-color-disabled: var(--sqm-input-disabled-background, var(--sl-color-neutral-100));
+--sl-input-color-disabled: var(--sqm-input-disabled-color, var(--sl-color-neutral-500)); /* Your current: var(--sqm-input-disabled-color) */
+--sl-input-placeholder-color-disabled: var(--sl-color-neutral-400);
+
+/* --- Invalid/Error State --- */
+--sl-input-background-color-invalid: var(--sl-color-danger-50);
+--sl-input-border-color-invalid: var(--sl-color-danger-500);
+--sl-input-color-invalid: var(--sl-color-danger-700);
+
+/* --- Internal Elements (Prefix, Suffix, Clear Icon) --- */
+--sl-input-icon-color: var(--sl-color-neutral-500);
+--sl-input-icon-size: var(--sl-font-size-medium);
+--sl-input-clear-icon-color: var(--sl-color-neutral-500);
+--sl-input-clear-icon-color-hover: var(--sl-color-neutral-700);
+
+/* --- Box Shadow --- */
+--sl-input-box-shadow: none; /* Typically no box shadow by default */
+--sl-input-box-shadow-focus: 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color);
 }
 
 body {
-  font-family: var(--sl-font-sans);
+  font-family: ${((_112 = (_111 = window.SquatchBrandingConfig) === null || _111 === void 0 ? void 0 : _111.main) === null || _112 === void 0 ? void 0 : _112.brandFont) || "var(--sl-font-sans)"};
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
   color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
-  background-color: var(--sqm-portal-background);
+  background-color: var(--sqm-portal-background) !important;
 }
 
-// .terms-link,
-// .terms-link:visited {
-//   color: var(--sl-color-gray-500);
-//   text-decoration: none;
-// }
-// .terms-link:hover {
-//   color: var(--sl-color-gray-600);
-// }
+.story-div {
+  background: var(--sqm-portal-background) !important;
+  color: var(--sqm-text) !important;
+}
 
-h1, h2, h3, h4{
-  line-height: var(--sl-line-height-dense);
+sl-spinner {
+  --sl-color-primary-500: var(--sqm-accent-color-icon)
+  --sl-spinner-stroke-width: 4px;
 }
 
+sl-select::part(menu) {
+  background: var(--sqm-input-background, inherit);
+  color: var(--sqm-input-color, inherit);
+  border:none;
+}
 
-h2, .Title {
-  font-size: var(--sl-font-size-large);
-  font-weight: var(--sl-font-weight-semibold);
-  margin: 0;
+sl-select::part(panel) {
+  border-radius: var(--sqm-border-radius-normal);
 }
-.H4 {
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-semibold);
-  margin: 0;
+
+/** AL: Shading variables **/
+sl-alert[type="success"]::part(icon) {
+  color: var(--sqm-success-icon-color, var(--sl-color-success-500));
+}
+
+sl-alert[type="success"]::part(base) {
+  background-color: var(--sqm-success-icon-color, var(--sl-color-success-100));
+}
+
+sl-alert[type="warning"]::part(icon) {
+  color: var(--sqm-warning-icon-color, var(--sl-color-warning-500));
 }
-.P {
-  font-size: var(--sl-font-size-small);
-  margin-top: 0px;
+
+sl-alert[type="warning"]::part(base) {
+  background-color: var(--sqm-warning-icon-color, var(--sl-color-warning-100));
 }
 
-.Title {
-  text-align: center;
+sl-alert[type="danger"]::part(icon) {
+  color: var(--sqm-danger-icon-color, var(--sl-color-danger-500));
 }
 
-.Subtitle {
-  text-align: center;
-  margin-bottom: 0px;
-  color: var(--sqm-text-subdued);
+sl-alert[type="danger"]::part(base) {
+  background-color: var(--sqm-danger-icon-color, var(--sl-color-danger-100));
 }
-.SupportText{
-  margin-top: var(--sl-spacing-small);
-  text-align: center;
+
+sl-alert[type="info"]::part(icon) {
+  color: var(--sqm-info-icon-color, var(--sl-color-info-500));
 }
 
-sl-button::part(base){
-  width: 100%;
+sl-alert[type="info"]::part(base) {
+  background-color: var(--sqm-info-icon-color, var(--sl-color-info-100));
+}
+
+sl-alert[type="neutral"]::part(icon) {
+  color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-500));
+}
+
+sl-alert[type="neutral"]::part(base) {
+  background-color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-100));
+}
+
+sl-badge[type="success"]::part(base) {
+  background-color: var(--sqm-success-badge-background, var(--sl-color-success-100));
+  color: var(--sqm-success-badge-text-color, var(--sl-color-success-700));
+}
+
+sl-badge[type="warning"]::part(base) {
+  background-color: var(--sqm-warning-badge-background, var(--sl-color-warning-100));
+  color: var(--sqm-warning-badge-text-color, var(--sl-color-warning-700));
+}
+
+sl-badge[type="danger"]::part(base) {
+  background-color: var(--sqm-danger-badge-background, var(--sl-color-danger-100));
+  color: var(--sqm-danger-badge-text-color, var(--sl-color-danger-700));
+}
+
+sl-badge[type="info"]::part(base) {
+  background-color: var(--sqm-info-badge-background, var(--sl-color-info-100));
+  color: var(--sqm-info-badge-text-color, var(--sl-color-info-700));
+}
+
+sl-badge[type="neutral"]::part(base) {
+  background-color: var(--sqm-neutral-badge-background, var(--sl-color-neutral-100));
+  color: var(--sqm-neutral-badge-text-color, var(--sl-color-neutral-700));
+}
+
+h1, h2, h3, h4{
+  line-height: var(--sl-line-height-dense);
 }
 
 sqm-share-button{
@@ -26586,96 +26721,127 @@ sqm-hero img {
 }
 
 sl-details::part(base){
-  background-color: var(--sl-color-white);
-  border-color: var(--sl-color-gray-300)
+  background-color: inherit;
+  border-color: var(--sqm-border-color);
 }
+
 sl-details::part(summary) {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-semibold);
   margin: 0px;
 }
 
-/**************************
- * Now Deprecated - Use secondarybutton-base instead *
-*::part(defaultbutton-base){
-
-  color: var(--sl-color-gray-800);
-  border-color: var(--sl-color-gray-800);
-}
-*::part(defaultbutton-base):hover{
-  background-color: rgba(20,20,20,.08);
-}
-*::part(defaultbutton-base):active{
-  background-color: rgba(20,20,20,.16);
-}
-*::part(defaultbutton-base):focus{
-  box-shadow: none;
-}
-*/
-
-*::part(primarybutton-base){
-  background-color: var(--sqm-primary-button-background);
+*::part(primarybutton-base),
+sl-button[type="primary"]::part(base) {
+  width: 100%;
+  background-color: var(--sqm-primary-button-background) !important;
   color: var(--sqm-primary-button-color);
   border-color: var(--sqm-primary-button-color-border);
   border-radius: var(--sqm-primary-button-radius);
 }
 
-*::part(primarybutton-base):hover{
+*::part(primarybutton-base):hover,
+sl-button[type="primary"]::part(base):hover{
   background-color: var(--sqm-primary-button-background-hover);
+  border-color: var(--sqm-primary-button-border-color-hover);
+  color: var(--sqm-primary-button-color-hover);
 }
 
 
-
-*::part(primarybutton-base):focus{
+*::part(primarybutton-base):focus,
+sl-button[type="primary"]::part(base):focus {
   box-shadow: none;
 }
 
-*::part(secondarybutton-base){
+*::part(secondarybutton-base),
+sl-button[type="secondary"]::part(base) {
   background-color: var(--sqm-secondary-button-background);
   color: var(--sqm-secondary-button-color);
   border-color: var(--sqm-secondary-button-color-border);
   border-radius: var(--sqm-secondary-button-radius);
 }
 
-*::part(secondarybutton-base):hover{
+*::part(secondarybutton-base):hover,
+sl-button[type="secondary"]::part(base):hover {
   background-color: var(--sqm-secondary-button-background-hover);
-}
-
-*::part(primarybutton-base):focus{
-  box-shadow: none;
+  color: var(--sqm-secondary-button-color-hover);
+  border-color: var(--sqm-secondary-button-border-color-hover);
 }
 
 *::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-size: var(--sl-input-font-size-small);
+  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
   font-weight: var(--sl-font-weight-semibold);
+  color: var(--sqm-input-label-color, var(--sqm-text), black);
 }
 
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
+*::part(input-base), *::part(select-base), *::part(textarea-base){
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
+  border-color: var(--sqm-border-color-hover);
+}
+
+*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{
+  border-color: var(--sqm-border-color-focus);
+}
+
+sqm-name-fields::part(input-base) {
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textarea::part(textarea-label):focus {
+  border-color: var(--sqm-border-color-focus);
+}
+
+*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
+  background: var(--sqm-input-disabled-background, #f5f5f5);
+  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+}
+
+*::part(input):-webkit-autofill {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input):-webkit-autofill:hover {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
 }
 
+*::part(input):-webkit-autofill:focus {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+
 *::part(menuitem-base):hover{
   background-color: var(--sl-color-gray-200);
   color: var(--sl-color-gray-700);
 }
 
-.poweredBy {
-  color: var(--sl-color-gray-400);
-  font-size: var(--sl-font-size-xx-small);
+sl-icon::part(base) {
+  color: var(--sqm-text);
 }
 
-.poweredBy:hover {
-  color: var(--sl-color-gray-900);
+sl-icon::part(base):hover {
+  color: var(--sqm-accent-color-icon);
 }
 
-.FooterEmail{
-  text-decoration: none;
-  font-size: var(--sl-font-size-medium);
-  color: var(--sl-color-gray-800);
-  margin: 0px;
-  cursor:pointer;
-}
 
 
 

package/dist/esm/{index-91e7729f.js → index-b3a06de8.js}

@@ -1112,6 +1112,7 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance =  hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
@@ -1119,6 +1120,9 @@ const postUpdateComponent = (hostRef) => {
             // DOM WRITE!
             addHydratedFlag(elm);
         }
+        {
+            safeCall(instance, 'componentDidLoad');
+        }
         endPostUpdate();
         {
             hostRef.$onReadyResolve$(elm);

package/dist/esm/{index.module-89a79f66.js → index.module-d49ae5e7.js}

@@ -1,4 +1,4 @@
-import { u as useMemo, d as c, s, c as createCommonjsModule, a as commonjsGlobal, e as getDefaultExportFromCjs, f as useEffect, h, y, i as d, j as useReducer, k as useState, m as useRef } from './stencil-hooks.module-4bc38af4.js';
+import { u as useMemo, d as c, s, c as createCommonjsModule, a as commonjsGlobal, e as getDefaultExportFromCjs, f as useEffect, h, y, i as d, j as useReducer, k as useState, m as useRef } from './stencil-hooks.module-20ad2b5f.js';
 
 const useCallback = (fn, inputs) => useMemo(() => fn, inputs);