@saasquatch/mint-components 1.15.0-46 → 1.15.0-47

package/dist/collection/global/styles.js

@@ -70,8 +70,7 @@
   --teal-6: #0b6270;
   --teal-7: #004551;
 } */
-var _a, _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;
-console.log("The input hover color is ", (_a = window.SquatchBrandingConfig.inputs) === null || _a === void 0 ? void 0 : _a.hoverBorderColor);
+var _a, _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;
 const style = `
 /* vietnamese */
 @font-face {
@@ -571,31 +570,34 @@ html {
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: ${((_c = (_b = window.SquatchBrandingConfig) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c.background) || "#121212"};
+  --sqm-portal-background: ${((_b = (_a = window.SquatchBrandingConfig) === null || _a === void 0 ? void 0 : _a.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-skeleton-background: #eee;
-  --sqm-text: ${((_d = window.SquatchBrandingConfig) === null || _d === void 0 ? void 0 : _d.font.textColor) || "white"};
-  --sqm-text-subdued: ${((_e = window.SquatchBrandingConfig) === null || _e === void 0 ? void 0 : _e.font.secondaryTextColor) || "#b3b3b3"};
-
-  --sqm-primary-color: ${((_g = (_f = window.SquatchBrandingConfig) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g.primaryColor) || "#1ed760"};
-  --sqm-primary-button-background:${((_j = (_h = window.SquatchBrandingConfig) === null || _h === void 0 ? void 0 : _h.primaryButton) === null || _j === void 0 ? void 0 : _j.buttonColor) || "#1ed760"};
-  --sqm-primary-button-background-hover: ${((_l = (_k = window.SquatchBrandingConfig) === null || _k === void 0 ? void 0 : _k.primaryButton) === null || _l === void 0 ? void 0 : _l.hoverColor) || "#1ed760"};
-  --sqm-primary-button-color: ${((_o = (_m = window.SquatchBrandingConfig) === null || _m === void 0 ? void 0 : _m.primaryButton) === null || _o === void 0 ? void 0 : _o.buttonTextColor) || "#FFFFFF"};
-  --sqm-primary-button-color-border: ${((_q = (_p = window.SquatchBrandingConfig) === null || _p === void 0 ? void 0 : _p.primaryButton) === null || _q === void 0 ? void 0 : _q.buttonBorderColor) ||
+  --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) ||
+  "#b3b3b3"};
+
+  --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:${((_m = (_l = window.SquatchBrandingConfig) === null || _l === void 0 ? void 0 : _l.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonColor) || "#1ed760"};
+  --sqm-primary-button-background-hover: ${((_q = (_p = (_o = window.SquatchBrandingConfig) === null || _o === void 0 ? void 0 : _o.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonHoverColor) === null || _q === void 0 ? void 0 : _q.background) ||
+  "#1ed760"};
+  --sqm-primary-button-color: ${((_t = (_s = (_r = window.SquatchBrandingConfig) === null || _r === void 0 ? void 0 : _r.primaryButton) === null || _s === void 0 ? void 0 : _s.buttonColor) === null || _t === void 0 ? void 0 : _t.label) || "#FFFFFF"};
+  --sqm-primary-button-color-border: ${((_w = (_v = (_u = window.SquatchBrandingConfig) === null || _u === void 0 ? void 0 : _u.primaryButton) === null || _v === void 0 ? void 0 : _v.buttonColor) === null || _w === void 0 ? void 0 : _w.border) ||
   "transparent"};
-  --sqm-primary-button-radius: ${((_s = (_r = window.SquatchBrandingConfig) === null || _r === void 0 ? void 0 : _r.primaryButton) === null || _s === void 0 ? void 0 : _s.borderRadius) || "4px"};
+  --sqm-primary-button-radius: ${((_y = (_x = window.SquatchBrandingConfig) === null || _x === void 0 ? void 0 : _x.primaryButton) === null || _y === void 0 ? void 0 : _y.borderRadius) || "4px"};
 
 
-  --sqm-secondary-button-background: ${((_u = (_t = window.SquatchBrandingConfig) === null || _t === void 0 ? void 0 : _t.secondaryButton) === null || _u === void 0 ? void 0 : _u.buttonColor) || "#191414"};
-  --sqm-secondary-button-background-hover: ${((_w = (_v = window.SquatchBrandingConfig) === null || _v === void 0 ? void 0 : _v.secondaryButton) === null || _w === void 0 ? void 0 : _w.hoverColor) || "#282828"};
+  --sqm-secondary-button-background: ${((_0 = (_z = window.SquatchBrandingConfig) === null || _z === void 0 ? void 0 : _z.secondaryButton) === null || _0 === void 0 ? void 0 : _0.buttonColor) || "#191414"};
+  --sqm-secondary-button-background-hover: ${((_3 = (_2 = (_1 = window.SquatchBrandingConfig) === null || _1 === void 0 ? void 0 : _1.secondaryButton) === null || _2 === void 0 ? void 0 : _2.buttonHoverColor) === null || _3 === void 0 ? void 0 : _3.background) || "#282828"};
 
   
-  --sqm-secondary-button-color: ${((_y = (_x = window.SquatchBrandingConfig) === null || _x === void 0 ? void 0 : _x.secondaryButton) === null || _y === void 0 ? void 0 : _y.buttonTextColor) || "#FFFFFF"};
-  --sqm-secondary-button-color-border: ${((_0 = (_z = window.SquatchBrandingConfig) === null || _z === void 0 ? void 0 : _z.secondaryButton) === null || _0 === void 0 ? void 0 : _0.buttonBorderColor) ||
+  --sqm-secondary-button-color: ${((_6 = (_5 = (_4 = window.SquatchBrandingConfig) === null || _4 === void 0 ? void 0 : _4.secondaryButton) === null || _5 === void 0 ? void 0 : _5.buttonHoverColor) === null || _6 === void 0 ? void 0 : _6.label) ||
+  "#FFFFFF"};
+  --sqm-secondary-button-color-border: ${((_9 = (_8 = (_7 = window.SquatchBrandingConfig) === null || _7 === void 0 ? void 0 : _7.secondaryButton) === null || _8 === void 0 ? void 0 : _8.buttonHoverColor) === null || _9 === void 0 ? void 0 : _9.border) ||
   "#FFFFFF"};
-  --sqm-secondary-button-radius: ${((_2 = (_1 = window.SquatchBrandingConfig) === null || _1 === void 0 ? void 0 : _1.secondaryButton) === null || _2 === void 0 ? void 0 : _2.borderRadius) || "30px"};
+  --sqm-secondary-button-radius: ${((_11 = (_10 = window.SquatchBrandingConfig) === null || _10 === void 0 ? void 0 : _10.secondaryButton) === null || _11 === void 0 ? void 0 : _11.borderRadius) || "30px"};
 
   --sqm-tertiary-button-background: transparent;
   --sqm-tertiary-button-background-hover: var(--sqm-primary-color); 
@@ -603,65 +605,78 @@ html {
   --sqm-tertiary-button-color-border: transparent; 
   --sqm-tertiary-button-radius: 30px;
   
-  --sqm-border-radius-normal: ${((_4 = (_3 = window.SquatchBrandingConfig) === null || _3 === void 0 ? void 0 : _3.border) === null || _4 === void 0 ? void 0 : _4.radius) || "18px"}; 
-  --sqm-border-color: ${((_6 = (_5 = window.SquatchBrandingConfig) === null || _5 === void 0 ? void 0 : _5.border) === null || _6 === void 0 ? void 0 : _6.color) || "white"};
-
-  --sqm-border-thickness: ${((_8 = (_7 = window.SquatchBrandingConfig) === null || _7 === void 0 ? void 0 : _7.border) === null || _8 === void 0 ? void 0 : _8.thickness) || "1px"};
-
-  --sqm-accent-color-icon: ${((_11 = (_10 = (_9 = window.SquatchBrandingConfig) === null || _9 === void 0 ? void 0 : _9.color) === null || _10 === void 0 ? void 0 : _10.accentColorShades) === null || _11 === void 0 ? void 0 : _11.iconAndBadge) ||
-  "#1ed760"};
-  --sqm-accent-color-text: ${((_14 = (_13 = (_12 = window.SquatchBrandingConfig) === null || _12 === void 0 ? void 0 : _12.color) === null || _13 === void 0 ? void 0 : _13.accentColorShades) === null || _14 === void 0 ? void 0 : _14.text) || "#fff"};    
-  --sqm-accent-color-border: ${((_17 = (_16 = (_15 = window.SquatchBrandingConfig) === null || _15 === void 0 ? void 0 : _15.color) === null || _16 === void 0 ? void 0 : _16.accentColorShades) === null || _17 === void 0 ? void 0 : _17.border) || "#1ed760"};
-  --sqm-accent-color-background: ${((_20 = (_19 = (_18 = window.SquatchBrandingConfig) === null || _18 === void 0 ? void 0 : _18.color) === null || _19 === void 0 ? void 0 : _19.accentColorShades) === null || _20 === void 0 ? void 0 : _20.background) ||
+  --sqm-border-radius-normal: ${
+// window.SquatchBrandingConfig?.border?.radius || "18px"
+"18px"}; 
+  --sqm-border-color: ${
+// window.SquatchBrandingConfig?.border?.color || "white"
+"white"};
+
+  --sqm-border-thickness: ${
+// window.SquatchBrandingConfig?.border?.thickness || "1px"
+"1px"};
+
+  --sqm-accent-color-icon: ${((_14 = (_13 = (_12 = window.SquatchBrandingConfig) === null || _12 === void 0 ? void 0 : _12.color) === null || _13 === void 0 ? void 0 : _13.accentColorShades) === null || _14 === void 0 ? void 0 : _14.icon) || "#1ed760"};
+  --sqm-accent-color-text: ${((_17 = (_16 = (_15 = window.SquatchBrandingConfig) === null || _15 === void 0 ? void 0 : _15.color) === null || _16 === void 0 ? void 0 : _16.accentColorShades) === null || _17 === void 0 ? void 0 : _17.text) || "#fff"};    
+  --sqm-accent-color-border: ${((_20 = (_19 = (_18 = window.SquatchBrandingConfig) === null || _18 === void 0 ? void 0 : _18.color) === null || _19 === void 0 ? void 0 : _19.accentColorShades) === null || _20 === void 0 ? void 0 : _20.border) || "#1ed760"};
+  --sqm-accent-color-background: ${((_23 = (_22 = (_21 = window.SquatchBrandingConfig) === null || _21 === void 0 ? void 0 : _21.color) === null || _22 === void 0 ? void 0 : _22.accentColorShades) === null || _23 === void 0 ? void 0 : _23.background) ||
   "#0d4a27"};
 
-  --sqm-success-color-icon: ${((_23 = (_22 = (_21 = window.SquatchBrandingConfig) === null || _21 === void 0 ? void 0 : _21.color) === null || _22 === void 0 ? void 0 : _22.success) === null || _23 === void 0 ? void 0 : _23.iconAndBadge) ||
+  --sqm-success-color-icon: ${((_26 = (_25 = (_24 = window.SquatchBrandingConfig) === null || _24 === void 0 ? void 0 : _24.color) === null || _25 === void 0 ? void 0 : _25.success) === null || _26 === void 0 ? void 0 : _26.iconAndBadge) ||
   "var(--sl-color-success-600)"};
-  --sqm-success-color-text: ${((_26 = (_25 = (_24 = window.SquatchBrandingConfig) === null || _24 === void 0 ? void 0 : _24.color) === null || _25 === void 0 ? void 0 : _25.success) === null || _26 === void 0 ? void 0 : _26.text) ||
+  --sqm-success-color-text: ${((_29 = (_28 = (_27 = window.SquatchBrandingConfig) === null || _27 === void 0 ? void 0 : _27.color) === null || _28 === void 0 ? void 0 : _28.success) === null || _29 === void 0 ? void 0 : _29.text) ||
   "var(--sl-color-success-950)"};
-  --sqm-success-color-border: ${((_29 = (_28 = (_27 = window.SquatchBrandingConfig) === null || _27 === void 0 ? void 0 : _27.color) === null || _28 === void 0 ? void 0 : _28.success) === null || _29 === void 0 ? void 0 : _29.border) ||
+  --sqm-success-color-border: ${((_32 = (_31 = (_30 = window.SquatchBrandingConfig) === null || _30 === void 0 ? void 0 : _30.color) === null || _31 === void 0 ? void 0 : _31.success) === null || _32 === void 0 ? void 0 : _32.border) ||
   "var(--sl-color-success-400)"};
-  --sqm-success-color-background: ${((_32 = (_31 = (_30 = window.SquatchBrandingConfig) === null || _30 === void 0 ? void 0 : _30.color) === null || _31 === void 0 ? void 0 : _31.success) === null || _32 === void 0 ? void 0 : _32.background) ||
+  --sqm-success-color-background: ${((_35 = (_34 = (_33 = window.SquatchBrandingConfig) === null || _33 === void 0 ? void 0 : _33.color) === null || _34 === void 0 ? void 0 : _34.success) === null || _35 === void 0 ? void 0 : _35.background) ||
   "var(--sl-color-success-300)"};
   
-  --sqm-warning-color-icon: ${((_35 = (_34 = (_33 = window.SquatchBrandingConfig) === null || _33 === void 0 ? void 0 : _33.color) === null || _34 === void 0 ? void 0 : _34.warning) === null || _35 === void 0 ? void 0 : _35.iconAndBadge) ||
+  --sqm-warning-color-icon: ${((_38 = (_37 = (_36 = window.SquatchBrandingConfig) === null || _36 === void 0 ? void 0 : _36.color) === null || _37 === void 0 ? void 0 : _37.warning) === null || _38 === void 0 ? void 0 : _38.iconAndBadge) ||
   "var(--sl-color-warning-600)"};
-  --sqm-warning-color-text: ${((_38 = (_37 = (_36 = window.SquatchBrandingConfig) === null || _36 === void 0 ? void 0 : _36.color) === null || _37 === void 0 ? void 0 : _37.warning) === null || _38 === void 0 ? void 0 : _38.text) ||
+  --sqm-warning-color-text: ${((_41 = (_40 = (_39 = window.SquatchBrandingConfig) === null || _39 === void 0 ? void 0 : _39.color) === null || _40 === void 0 ? void 0 : _40.warning) === null || _41 === void 0 ? void 0 : _41.text) ||
   "var(--sl-color-warning-950)"};
-  --sqm-warning-color-border: ${((_41 = (_40 = (_39 = window.SquatchBrandingConfig) === null || _39 === void 0 ? void 0 : _39.color) === null || _40 === void 0 ? void 0 : _40.warning) === null || _41 === void 0 ? void 0 : _41.border) ||
+  --sqm-warning-color-border: ${((_44 = (_43 = (_42 = window.SquatchBrandingConfig) === null || _42 === void 0 ? void 0 : _42.color) === null || _43 === void 0 ? void 0 : _43.warning) === null || _44 === void 0 ? void 0 : _44.border) ||
   "var(--sl-color-warning-400)"};
-  --sqm-warning-color-background: ${((_44 = (_43 = (_42 = window.SquatchBrandingConfig) === null || _42 === void 0 ? void 0 : _42.color) === null || _43 === void 0 ? void 0 : _43.warning) === null || _44 === void 0 ? void 0 : _44.background) ||
+  --sqm-warning-color-background: ${((_47 = (_46 = (_45 = window.SquatchBrandingConfig) === null || _45 === void 0 ? void 0 : _45.color) === null || _46 === void 0 ? void 0 : _46.warning) === null || _47 === void 0 ? void 0 : _47.background) ||
   "var(--sl-color-warning-300)"};
 
-  --sqm-danger-color-icon: ${((_47 = (_46 = (_45 = window.SquatchBrandingConfig) === null || _45 === void 0 ? void 0 : _45.color) === null || _46 === void 0 ? void 0 : _46.critical) === null || _47 === void 0 ? void 0 : _47.iconAndBadge) ||
+  --sqm-danger-color-icon: ${((_50 = (_49 = (_48 = window.SquatchBrandingConfig) === null || _48 === void 0 ? void 0 : _48.color) === null || _49 === void 0 ? void 0 : _49.critical) === null || _50 === void 0 ? void 0 : _50.iconAndBadge) ||
   "var(--sl-color-danger-600)"};
-  --sqm-danger-color-text: ${((_50 = (_49 = (_48 = window.SquatchBrandingConfig) === null || _48 === void 0 ? void 0 : _48.color) === null || _49 === void 0 ? void 0 : _49.critical) === null || _50 === void 0 ? void 0 : _50.text) ||
+  --sqm-danger-color-text: ${((_53 = (_52 = (_51 = window.SquatchBrandingConfig) === null || _51 === void 0 ? void 0 : _51.color) === null || _52 === void 0 ? void 0 : _52.critical) === null || _53 === void 0 ? void 0 : _53.text) ||
   "var(--sl-color-danger-950)"};
-  --sqm-danger-color-border: ${((_53 = (_52 = (_51 = window.SquatchBrandingConfig) === null || _51 === void 0 ? void 0 : _51.color) === null || _52 === void 0 ? void 0 : _52.critical) === null || _53 === void 0 ? void 0 : _53.border) ||
+  --sqm-danger-color-border: ${((_56 = (_55 = (_54 = window.SquatchBrandingConfig) === null || _54 === void 0 ? void 0 : _54.color) === null || _55 === void 0 ? void 0 : _55.critical) === null || _56 === void 0 ? void 0 : _56.border) ||
   "var(--sl-color-danger-400)"};
-  --sqm-danger-color-background: ${((_56 = (_55 = (_54 = window.SquatchBrandingConfig) === null || _54 === void 0 ? void 0 : _54.color) === null || _55 === void 0 ? void 0 : _55.critical) === null || _56 === void 0 ? void 0 : _56.background) ||
+  --sqm-danger-color-background: ${((_59 = (_58 = (_57 = window.SquatchBrandingConfig) === null || _57 === void 0 ? void 0 : _57.color) === null || _58 === void 0 ? void 0 : _58.critical) === null || _59 === void 0 ? void 0 : _59.background) ||
   "var(--sl-color-danger-300)"};
 
-  --sqm-informative-color-icon: ${((_59 = (_58 = (_57 = window.SquatchBrandingConfig) === null || _57 === void 0 ? void 0 : _57.color) === null || _58 === void 0 ? void 0 : _58.informative) === null || _59 === void 0 ? void 0 : _59.iconAndBadge) ||
+  --sqm-informative-color-icon: ${((_62 = (_61 = (_60 = window.SquatchBrandingConfig) === null || _60 === void 0 ? void 0 : _60.color) === null || _61 === void 0 ? void 0 : _61.informative) === null || _62 === void 0 ? void 0 : _62.iconAndBadge) ||
   "var(--sl-color-sky-600)"};
-  --sqm-informative-color-text: ${((_62 = (_61 = (_60 = window.SquatchBrandingConfig) === null || _60 === void 0 ? void 0 : _60.color) === null || _61 === void 0 ? void 0 : _61.informative) === null || _62 === void 0 ? void 0 : _62.text) ||
+  --sqm-informative-color-text: ${((_65 = (_64 = (_63 = window.SquatchBrandingConfig) === null || _63 === void 0 ? void 0 : _63.color) === null || _64 === void 0 ? void 0 : _64.informative) === null || _65 === void 0 ? void 0 : _65.text) ||
   "var(--sl-color-sky-950)"};
-  --sqm-informative-color-border: ${((_65 = (_64 = (_63 = window.SquatchBrandingConfig) === null || _63 === void 0 ? void 0 : _63.color) === null || _64 === void 0 ? void 0 : _64.informative) === null || _65 === void 0 ? void 0 : _65.border) ||
+  --sqm-informative-color-border: ${((_68 = (_67 = (_66 = window.SquatchBrandingConfig) === null || _66 === void 0 ? void 0 : _66.color) === null || _67 === void 0 ? void 0 : _67.informative) === null || _68 === void 0 ? void 0 : _68.border) ||
   "var(--sl-color-sky-400)"};
-  --sqm-informative-color-background: ${((_68 = (_67 = (_66 = window.SquatchBrandingConfig) === null || _66 === void 0 ? void 0 : _66.color) === null || _67 === void 0 ? void 0 : _67.informative) === null || _68 === void 0 ? void 0 : _68.background) ||
+  --sqm-informative-color-background: ${((_71 = (_70 = (_69 = window.SquatchBrandingConfig) === null || _69 === void 0 ? void 0 : _69.color) === null || _70 === void 0 ? void 0 : _70.informative) === null || _71 === void 0 ? void 0 : _71.background) ||
   "var(--sl-color-sky-300)"};
 
-  --sqm-input-background: ${((_70 = (_69 = window.SquatchBrandingConfig) === null || _69 === void 0 ? void 0 : _69.inputs) === null || _70 === void 0 ? void 0 : _70.background) || "#fff"};
-  --sqm-input-border-color: ${((_72 = (_71 = window.SquatchBrandingConfig) === null || _71 === void 0 ? void 0 : _71.inputs) === null || _72 === void 0 ? void 0 : _72.borderColor) || "#eaeaea"};
-  --sqm-input-border-radius: ${((_74 = (_73 = window.SquatchBrandingConfig) === null || _73 === void 0 ? void 0 : _73.inputs) === null || _74 === void 0 ? void 0 : _74.borderRadius) || "4px"};
-  --sqm-input-color: ${((_76 = (_75 = window.SquatchBrandingConfig) === null || _75 === void 0 ? void 0 : _75.inputs) === null || _76 === void 0 ? void 0 : _76.textColor) || "#000"};
-  --sqm-input-label-color: ${((_78 = (_77 = window.SquatchBrandingConfig) === null || _77 === void 0 ? void 0 : _77.inputs) === null || _78 === void 0 ? void 0 : _78.labelColor) || "#000"};
-  --sqm-border-width: ${((_80 = (_79 = window.SquatchBrandingConfig) === null || _79 === void 0 ? void 0 : _79.inputs) === null || _80 === void 0 ? void 0 : _80.borderThickness) || "1px"};
-  --sqm-input-border-color-focus: ${((_82 = (_81 = window.SquatchBrandingConfig) === null || _81 === void 0 ? void 0 : _81.inputs) === null || _82 === void 0 ? void 0 : _82.focusBorderColor) || "#eaeaea"};
-  --sqm-input-border-color-hover: ${((_84 = (_83 = window.SquatchBrandingConfig) === null || _83 === void 0 ? void 0 : _83.inputs) === null || _84 === void 0 ? void 0 : _84.hoverBorderColor) || "#ccc"};
-  --sqm-input-label-font-size: ${((_86 = (_85 = window.SquatchBrandingConfig) === null || _85 === void 0 ? void 0 : _85.inputs) === null || _86 === void 0 ? void 0 : _86.labelFontSize) || "18px"};
-  --sqm-input-disabled-color: ${((_88 = (_87 = window.SquatchBrandingConfig) === null || _87 === void 0 ? void 0 : _87.inputs) === null || _88 === void 0 ? void 0 : _88.labelFontSize) || "#fff"};
-  --sqm-input-disabled-background: ${((_90 = (_89 = window.SquatchBrandingConfig) === null || _89 === void 0 ? void 0 : _89.inputs) === null || _90 === void 0 ? void 0 : _90.disabledBackground) || "#fff"};
+  --sqm-input-background: ${((_74 = (_73 = (_72 = window.SquatchBrandingConfig) === null || _72 === void 0 ? void 0 : _72.formFields) === null || _73 === void 0 ? void 0 : _73.formFieldColor) === null || _74 === void 0 ? void 0 : _74.background) ||
+  "#fff"};
+  --sqm-input-border-color: ${((_77 = (_76 = (_75 = window.SquatchBrandingConfig) === null || _75 === void 0 ? void 0 : _75.formFields) === null || _76 === void 0 ? void 0 : _76.formFieldColor) === null || _77 === void 0 ? void 0 : _77.border) ||
+  "#eaeaea"};
+  --sqm-input-border-radius: ${
+// window.SquatchBrandingConfig?.formFields?.borderRadius || "4px"
+"4px"};
+  --sqm-input-color: ${((_80 = (_79 = (_78 = window.SquatchBrandingConfig) === null || _78 === void 0 ? void 0 : _78.formFields) === null || _79 === void 0 ? void 0 : _79.formFieldColor) === null || _80 === void 0 ? void 0 : _80.inputText) ||
+  "#000"};
+  --sqm-input-label-color: ${((_83 = (_82 = (_81 = window.SquatchBrandingConfig) === null || _81 === void 0 ? void 0 : _81.color) === null || _82 === void 0 ? void 0 : _82.textColorShades) === null || _83 === void 0 ? void 0 : _83.mainText) || "#000"};
+  --sqm-input-border-color-focus: ${((_85 = (_84 = window.SquatchBrandingConfig) === null || _84 === void 0 ? void 0 : _84.formFields) === null || _85 === void 0 ? void 0 : _85.selectedStateColor) || "#eaeaea"};
+  --sqm-input-border-color-hover: ${((_87 = (_86 = window.SquatchBrandingConfig) === null || _86 === void 0 ? void 0 : _86.formFields) === null || _87 === void 0 ? void 0 : _87.hoverStateColor) || "#ccc"};
+  --sqm-input-label-font-size: inherit;
+  --sqm-input-disabled-color: ${
+// window.SquatchBrandingConfig?.inputs?.labelFontSize || "#fff"
+"#fff"};
+  --sqm-input-disabled-background: ${
+// window.SquatchBrandingConfig?.inputs?.disabledBackground || "#fff"
+"#fff"};
 
   --sl-color-primary-100: var(--sqm-primary-color);
   --sl-color-primary-200: var(--sqm-primary-color);
@@ -683,7 +698,7 @@ html {
   --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-width, 1px);
+  --sl-input-border-width: var(--sqm-border-thickness, 1px);
   --sl-input-border-style: solid;
 
 
@@ -710,7 +725,7 @@ html {
 }
 
 body {
-  font-family: ${window.SquatchBrandingConfig.font.font || "var(--sl-font-sans)"};
+  font-family: ${((_89 = (_88 = window.SquatchBrandingConfig) === null || _88 === void 0 ? void 0 : _88.main) === null || _89 === void 0 ? void 0 : _89.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);
@@ -887,7 +902,7 @@ sl-button[type="secondary"]::part(base):hover {
   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-width, 1px);
+  border-width: var(--sqm-border-thickness, 1px);
 }
 
 *::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
@@ -902,7 +917,7 @@ 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-width, 1px);
+  border-width: var(--sqm-border-thickness, 1px);
 }
 
 sl-input::part(base):focus,

package/dist/collection/global/styles.ts

@@ -71,17 +71,14 @@
   --teal-7: #004551;
 } */
 
+import { BrandingConfiguration } from "../saasquatch";
+
 declare global {
   interface Window {
-    SquatchBrandingConfig: BrandingConfig | null;
+    SquatchBrandingConfig: BrandingConfiguration | null;
   }
 }
 
-console.log(
-  "The input hover color is ",
-  window.SquatchBrandingConfig.inputs?.hoverBorderColor
-);
-
 const style = `
 /* vietnamese */
 @font-face {
@@ -582,31 +579,35 @@ html {
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
   --sqm-portal-background: ${
-    window.SquatchBrandingConfig?.color?.background || "#121212"
+    window.SquatchBrandingConfig?.color?.backgroundColor || "#121212"
   };
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
   --sqm-skeleton-background: #eee;
-  --sqm-text: ${window.SquatchBrandingConfig?.font.textColor || "white"};
+  --sqm-text: ${
+    window.SquatchBrandingConfig?.color?.textColorShades?.mainText || "white"
+  };
   --sqm-text-subdued: ${
-    window.SquatchBrandingConfig?.font.secondaryTextColor || "#b3b3b3"
+    window.SquatchBrandingConfig?.color?.textColorShades?.subduedText ||
+    "#b3b3b3"
   };
 
   --sqm-primary-color: ${
-    window.SquatchBrandingConfig?.color?.primaryColor || "#1ed760"
+    window.SquatchBrandingConfig?.main?.brandColor || "#1ed760"
   };
   --sqm-primary-button-background:${
     window.SquatchBrandingConfig?.primaryButton?.buttonColor || "#1ed760"
   };
   --sqm-primary-button-background-hover: ${
-    window.SquatchBrandingConfig?.primaryButton?.hoverColor || "#1ed760"
+    window.SquatchBrandingConfig?.primaryButton?.buttonHoverColor?.background ||
+    "#1ed760"
   };
   --sqm-primary-button-color: ${
-    window.SquatchBrandingConfig?.primaryButton?.buttonTextColor || "#FFFFFF"
+    window.SquatchBrandingConfig?.primaryButton?.buttonColor?.label || "#FFFFFF"
   };
   --sqm-primary-button-color-border: ${
-    window.SquatchBrandingConfig?.primaryButton?.buttonBorderColor ||
+    window.SquatchBrandingConfig?.primaryButton?.buttonColor?.border ||
     "transparent"
   };
   --sqm-primary-button-radius: ${
@@ -618,15 +619,17 @@ html {
     window.SquatchBrandingConfig?.secondaryButton?.buttonColor || "#191414"
   };
   --sqm-secondary-button-background-hover: ${
-    window.SquatchBrandingConfig?.secondaryButton?.hoverColor || "#282828"
+    window.SquatchBrandingConfig?.secondaryButton?.buttonHoverColor
+      ?.background || "#282828"
   };
 
   
   --sqm-secondary-button-color: ${
-    window.SquatchBrandingConfig?.secondaryButton?.buttonTextColor || "#FFFFFF"
+    window.SquatchBrandingConfig?.secondaryButton?.buttonHoverColor?.label ||
+    "#FFFFFF"
   };
   --sqm-secondary-button-color-border: ${
-    window.SquatchBrandingConfig?.secondaryButton?.buttonBorderColor ||
+    window.SquatchBrandingConfig?.secondaryButton?.buttonHoverColor?.border ||
     "#FFFFFF"
   };
   --sqm-secondary-button-radius: ${
@@ -640,17 +643,21 @@ html {
   --sqm-tertiary-button-radius: 30px;
   
   --sqm-border-radius-normal: ${
-    window.SquatchBrandingConfig?.border?.radius || "18px"
+    // window.SquatchBrandingConfig?.border?.radius || "18px"
+    "18px"
   }; 
-  --sqm-border-color: ${window.SquatchBrandingConfig?.border?.color || "white"};
+  --sqm-border-color: ${
+    // window.SquatchBrandingConfig?.border?.color || "white"
+    "white"
+  };
 
   --sqm-border-thickness: ${
-    window.SquatchBrandingConfig?.border?.thickness || "1px"
+    // window.SquatchBrandingConfig?.border?.thickness || "1px"
+    "1px"
   };
 
   --sqm-accent-color-icon: ${
-    window.SquatchBrandingConfig?.color?.accentColorShades?.iconAndBadge ||
-    "#1ed760"
+    window.SquatchBrandingConfig?.color?.accentColorShades?.icon || "#1ed760"
   };
   --sqm-accent-color-text: ${
     window.SquatchBrandingConfig?.color?.accentColorShades?.text || "#fff"
@@ -732,37 +739,38 @@ html {
   };
 
   --sqm-input-background: ${
-    window.SquatchBrandingConfig?.inputs?.background || "#fff"
+    window.SquatchBrandingConfig?.formFields?.formFieldColor?.background ||
+    "#fff"
   };
   --sqm-input-border-color: ${
-    window.SquatchBrandingConfig?.inputs?.borderColor || "#eaeaea"
+    window.SquatchBrandingConfig?.formFields?.formFieldColor?.border ||
+    "#eaeaea"
   };
   --sqm-input-border-radius: ${
-    window.SquatchBrandingConfig?.inputs?.borderRadius || "4px"
+    // window.SquatchBrandingConfig?.formFields?.borderRadius || "4px"
+    "4px"
   };
   --sqm-input-color: ${
-    window.SquatchBrandingConfig?.inputs?.textColor || "#000"
+    window.SquatchBrandingConfig?.formFields?.formFieldColor?.inputText ||
+    "#000"
   };
   --sqm-input-label-color: ${
-    window.SquatchBrandingConfig?.inputs?.labelColor || "#000"
-  };
-  --sqm-border-width: ${
-    window.SquatchBrandingConfig?.inputs?.borderThickness || "1px"
+    window.SquatchBrandingConfig?.color?.textColorShades?.mainText || "#000"
   };
   --sqm-input-border-color-focus: ${
-    window.SquatchBrandingConfig?.inputs?.focusBorderColor || "#eaeaea"
+    window.SquatchBrandingConfig?.formFields?.selectedStateColor || "#eaeaea"
   };
   --sqm-input-border-color-hover: ${
-    window.SquatchBrandingConfig?.inputs?.hoverBorderColor || "#ccc"
-  };
-  --sqm-input-label-font-size: ${
-    window.SquatchBrandingConfig?.inputs?.labelFontSize || "18px"
+    window.SquatchBrandingConfig?.formFields?.hoverStateColor || "#ccc"
   };
+  --sqm-input-label-font-size: inherit;
   --sqm-input-disabled-color: ${
-    window.SquatchBrandingConfig?.inputs?.labelFontSize || "#fff"
+    // window.SquatchBrandingConfig?.inputs?.labelFontSize || "#fff"
+    "#fff"
   };
   --sqm-input-disabled-background: ${
-    window.SquatchBrandingConfig?.inputs?.disabledBackground || "#fff"
+    // window.SquatchBrandingConfig?.inputs?.disabledBackground || "#fff"
+    "#fff"
   };
 
   --sl-color-primary-100: var(--sqm-primary-color);
@@ -785,7 +793,7 @@ html {
   --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-width, 1px);
+  --sl-input-border-width: var(--sqm-border-thickness, 1px);
   --sl-input-border-style: solid;
 
 
@@ -813,7 +821,7 @@ html {
 
 body {
   font-family: ${
-    window.SquatchBrandingConfig.font.font || "var(--sl-font-sans)"
+    window.SquatchBrandingConfig?.main?.brandFont || "var(--sl-font-sans)"
   };
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
@@ -991,7 +999,7 @@ sl-button[type="secondary"]::part(base):hover {
   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-width, 1px);
+  border-width: var(--sqm-border-thickness, 1px);
 }
 
 *::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
@@ -1006,7 +1014,7 @@ 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-width, 1px);
+  border-width: var(--sqm-border-thickness, 1px);
 }
 
 sl-input::part(base):focus,

package/dist/collection/stories/PortalTemplates.stories.js

@@ -1,34 +1,26 @@
 import { useState } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
 import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import activityTemplate from "../templates/Activity.html";
+import dashboardTemplate from "../templates/Dashboard.html";
+import editProfileTemplate from "../templates/EditProfile.html";
+import emailVerificationTemplate from "../templates/EmailVerification.html";
+import emailVerifiedTemplate from "../templates/EmailVerified.html";
+import forgotPasswordTemplate from "../templates/ForgotPassword.html";
+import leadSubmitTemplate from "../templates/LeadSubmit.html";
+import loginTemplate from "../templates/Login.html";
+import multiProgramTemplate from "../templates/MultiProgramPortal.html";
+import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html";
 import portalTemplate from "../templates/Portal.html";
 import portalLeadSubmitTemplate from "../templates/PortalLeadSubmit.html";
-import taxAndCashTemplate from "../templates/TaxAndCash.html";
 import portalLeadSubmitTemplateWithDashboard from "../templates/PortalLeadSubmitWithDashboard.html";
 import portalTemplateWithDashboard from "../templates/PortalWithDashboard.html";
-import multiProgramTemplate from "../templates/MultiProgramPortal.html";
-import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html";
-import dashboardTemplate from "../templates/Dashboard.html";
-import leadSubmitTemplate from "../templates/LeadSubmit.html";
-import editProfileTemplate from "../templates/EditProfile.html";
-import activityTemplate from "../templates/Activity.html";
-import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html";
-import verifyEmailTemplate from "../templates/VerifyEmail.html";
-import taxPayoutReminderEmailTemplate from "../templates/TaxPayoutReminderEmail.html";
-import loginTemplate from "../templates/Login.html";
 import registerTemplate from "../templates/Register.html";
-import forgotPasswordTemplate from "../templates/ForgotPassword.html";
 import resetPasswordTemplate from "../templates/ResetPassword.html";
-import emailVerifiedTemplate from "../templates/EmailVerified.html";
-import emailVerificationTemplate from "../templates/EmailVerification.html";
-import LoginReadme from "../components/sqm-portal-login/readme.md";
-import ReferralIframeReadme from "../components/sqm-referral-iframe/readme.md";
-import ForgotPasswordReadme from "../components/sqm-portal-forgot-password/readme.md";
-import RegisterReadme from "../components/sqm-portal-register/readme.md";
-import EditProfileReadme from "../components/sqm-portal-profile/readme.md";
-import ResetPasswordReadme from "../components/sqm-portal-reset-password/readme.md";
-import EmailVerificationReadme from "../components/sqm-portal-email-verification/readme.md";
-import EmailVerifiedReadme from "../components/sqm-portal-verify-email/readme.md";
+import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html";
+import taxAndCashTemplate from "../templates/TaxAndCash.html";
+import taxPayoutReminderEmailTemplate from "../templates/TaxPayoutReminderEmail.html";
+import verifyEmailTemplate from "../templates/VerifyEmail.html";
 import { DefaultTemplateView } from "../utils/DefaultTemplateView";
 import { TemplateView } from "../utils/TemplateView";
 export default {
@@ -60,15 +52,15 @@ export const TaxAndCash = createHookStory(() => {
 });
 export const Login = createHookStory(() => {
   const { states, callbacks } = useTemplate(loginTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: LoginReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const ForgotPassword = createHookStory(() => {
   const { states, callbacks } = useTemplate(forgotPasswordTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const Register = createHookStory(() => {
   const { states, callbacks } = useTemplate(registerTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: RegisterReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const Dashboard = createHookStory(() => {
   const { states, callbacks } = useTemplate(dashboardTemplate);
@@ -76,7 +68,7 @@ export const Dashboard = createHookStory(() => {
 });
 export const LeadSubmitIframe = createHookStory(() => {
   const { states, callbacks } = useTemplate(leadSubmitTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ReferralIframeReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const Activity = createHookStory(() => {
   const { states, callbacks } = useTemplate(activityTemplate);
@@ -84,19 +76,19 @@ export const Activity = createHookStory(() => {
 });
 export const EditProfile = createHookStory(() => {
   const { states, callbacks } = useTemplate(editProfileTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const ResetPassword = createHookStory(() => {
   const { states, callbacks } = useTemplate(resetPasswordTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const EmailVerification = createHookStory(() => {
   const { states, callbacks } = useTemplate(emailVerificationTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const EmailVerified = createHookStory(() => {
   const { states, callbacks } = useTemplate(emailVerifiedTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const Widget = createHookStory(() => {
   return (h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {

package/dist/collection/utils/parseStates.js

@@ -0,0 +1,12 @@
+export function parseStates(states) {
+  if (typeof states === "string") {
+    try {
+      return JSON.parse(states);
+    }
+    catch (e) {
+      return undefined;
+    }
+  }
+  if (typeof states === "object")
+    return states;
+}