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

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -14,6 +14,12 @@ export const Default = null;
 export const Netflix = {
   main: {
     brandFont: "Netflix Sans, Arial, sans-serif",
+    brandColor: "#E50914",
+  },
+  border: {
+    borderColor: "#333333",
+    borderRadius: 4,
+    borderThickness: 1,
   },
   color: {
     textColorShades: {
@@ -53,10 +59,9 @@ export const Netflix = {
     },
     neutral: {
       text: "white",
-      icon: "#B3B3B3",
+      iconAndBadge: "#B3B3B3",
       border: "#333333",
       background: "#222222",
-      iconAndBadge: "#B3B3B3",
     },
   },
   primaryButton: {
@@ -70,6 +75,7 @@ export const Netflix = {
       border: "transparent",
       label: "#FFFFFF",
     },
+    borderRadius: 4,
   },
   secondaryButton: {
     buttonColor: {
@@ -82,6 +88,7 @@ export const Netflix = {
       border: "#B3B3B3",
       label: "#FFFFFF",
     },
+    borderRadius: 4,
   },
   formFields: {
     formFieldColor: {
@@ -96,6 +103,12 @@ export const Netflix = {
 export const Amazon = {
   main: {
     brandFont: "Amazon Ember, Arial, sans-serif",
+    brandColor: "#FF9900",
+  },
+  border: {
+    borderColor: "#D5D9D9",
+    borderRadius: 4,
+    borderThickness: 1,
   },
   color: {
     backgroundColor: "#ffffff",
@@ -135,10 +148,9 @@ export const Amazon = {
     },
     neutral: {
       text: "#232F3E",
-      icon: "#565959",
+      iconAndBadge: "#565959",
       border: "#D5D9D9",
       background: "#F0F2F2",
-      iconAndBadge: "#565959",
     },
   },
   primaryButton: {
@@ -152,6 +164,7 @@ export const Amazon = {
       border: "transparent",
       label: "#FFFFFF",
     },
+    borderRadius: 4,
   },
   secondaryButton: {
     buttonColor: {
@@ -164,6 +177,7 @@ export const Amazon = {
       border: "#888C8C",
       label: "#232F3E",
     },
+    borderRadius: 4,
   },
   formFields: {
     formFieldColor: {
@@ -176,6 +190,14 @@ export const Amazon = {
   },
 };
 export const Spotify = {
+  main: {
+    brandColor: "#1ed760",
+  },
+  border: {
+    borderColor: "#f4f4f4",
+    borderRadius: 18,
+    borderThickness: 1,
+  },
   color: {
     textColorShades: {
       mainText: "white",
@@ -197,6 +219,7 @@ export const Spotify = {
       border: "transparent",
       label: "#121212",
     },
+    borderRadius: 30,
   },
   secondaryButton: {
     buttonColor: {
@@ -209,6 +232,7 @@ export const Spotify = {
       border: "#FFFFFF",
       label: "#121212",
     },
+    borderRadius: 30,
   },
   formFields: {
     formFieldColor: {
@@ -222,6 +246,11 @@ export const Spotify = {
 };
 export const Google = {
   main: { brandColor: "#4285F4", brandFont: "Roboto, Arial, sans-serif" },
+  border: {
+    borderColor: "#DADCE0",
+    borderRadius: 4,
+    borderThickness: 1,
+  },
   color: {
     textColorShades: {
       mainText: "#212124",
@@ -276,6 +305,7 @@ export const Google = {
       border: "transparent",
       label: "#FFFFFF",
     },
+    borderRadius: 4,
   },
   secondaryButton: {
     buttonColor: {
@@ -288,6 +318,7 @@ export const Google = {
       border: "#DADCE0",
       label: "#4285F4",
     },
+    borderRadius: 4,
   },
   formFields: {
     formFieldColor: {
@@ -295,7 +326,7 @@ export const Google = {
       border: "#DADCE0",
       inputText: "#202124",
     },
-    hoverStateColor: "9AA0A6",
-    selectedStateColor: "4285F4",
+    hoverStateColor: "#9AA0A6",
+    selectedStateColor: "#4285F4",
   },
 };

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

@@ -18,8 +18,8 @@ export function TaskCardView(props) {
         position: "relative",
         boxSizing: "border-sizing",
         background: content.backgroundColor || "var(--sqm-portal-background)",
-        border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-        borderRadius: "var(--sl-border-radius-large)",
+        border: `1px solid ${content.borderColor || "var(--sqm-border-color)"}`,
+        borderRadius: "var(--sqm-border-radius-normal)",
         boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
@@ -52,7 +52,7 @@ export function TaskCardView(props) {
       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",
+      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)",
@@ -69,7 +69,7 @@ export function TaskCardView(props) {
       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",
+      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-warning-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
@@ -211,7 +211,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

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

@@ -127,8 +127,8 @@ export class TaskCard {
     /**
      * @uiName Button Style
      * @uiType string
-     * @uiEnum ["primary", "secondary", "tertiary"]
-     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
      * @uiGroup Style
      */
     this.buttonType = "primary";
@@ -849,8 +849,8 @@ export class TaskCard {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"primary\" | \"secondary\" | \"tertiary\"",
-        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "original": "\"primary\" | \"secondary\"",
+        "resolved": "\"primary\" | \"secondary\"",
         "references": {}
       },
       "required": false,
@@ -863,10 +863,10 @@ export class TaskCard {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"primary\", \"secondary\", \"tertiary\"]",
+            "text": "[\"primary\", \"secondary\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Secondary\", \"Tertiary\"]",
+            "text": "[\"Primary\", \"Secondary\"]",
             "name": "uiEnumNames"
           }, {
             "text": "Style",

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.js

@@ -118,19 +118,19 @@ const style = {
       background: "var(--sqm-primary-button-background-hover)",
     },
   },
-  TertiaryButton: {
+  SecondaryButton: {
     "&::part(base)": {
-      background: "var(--sqm-tertiary-button-background)",
-      color: "var(--sqm-tertiary-button-color)",
-      borderColor: "var(--sqm-tertiary-button-color-border)",
-      borderRadius: "var(--sqm-tertiary-button-radius)",
+      background: "var(--sqm-secondary-button-background)",
+      color: "var(--sqm-secondary-button-color)",
+      borderColor: "var(--sqm-secondary-button-color-border)",
+      borderRadius: "var(--sqm-secondary-button-radius)",
       width: "max-content",
       display: "flex",
       margin: "auto",
     },
     "&::part(base):hover": {
       color: "var(--sqm-text)",
-      background: "var(--sqm-tertiary-button-background-hover)",
+      background: "var(--sqm-secondary-button-background-hover)",
     },
   },
 };
@@ -234,5 +234,5 @@ export const IndirectTaxFormView = (props) => {
         })),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        h("sl-button", { class: classes.TertiaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: tertiarybutton-base" }, text.backButton))))));
+        h("sl-button", { class: classes.SecondaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
 };

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -137,7 +137,6 @@ const vanillaStyle = `
       min-width: 250px;
     }
 
-    /* Corrected: Target sl-button::part(base) for primary button */
     sl-button[type="primary"]::part(base){
         background-color: var(--sqm-primary-button-background);
         color: var(--sqm-primary-button-color);
@@ -153,7 +152,6 @@ const vanillaStyle = `
         box-shadow: none;
     }
 
-    /* Corrected: Target sl-button::part(base) for secondary button */
     sl-button[type="secondary"]::part(base){
         background-color: var(--sqm-secondary-button-background);
         color: var(--sqm-secondary-button-color);
@@ -165,13 +163,7 @@ const vanillaStyle = `
         background-color: var(--sqm-secondary-button-background-hover);
     }
 
-    /* Corrected: Target sl-button::part(base) for tertiary button */
-    sl-button[type="tertiary"]::part(base){
-        color: var(--sqm-text, var(--sl-color-neutral-800));
-        width: max-content;
-        display: flex;
-        margin: auto;
-    }
+
 
 *::part(primarybutton-base){
   background-color: var(--sqm-primary-button-background);
@@ -199,18 +191,18 @@ const vanillaStyle = `
   background-color: var(--sqm-secondary-button-background-hover);
 }
 
-*::part(tertiarybutton-base){
-  background-color: var(--sqm-tertiary-button-background);
-  color: var(--sqm-tertiary-button-color);
-  border-color: var(--sqm-tertiary-button-color-border);
-  border-radius: var(--sqm-tertiary-button-radius);
+*::part(secondarybutton-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);
   width: max-content;
   display: flex;
   margin: auto;
 }
 
-*::part(tertiarybutton-base):hover{
-  background: var(--sqm-tertiary-button-background-hover);
+*::part(secondarybutton-base):hover{
+  background: var(--sqm-secondary-button-background-hover);
 }
 
     sl-input::part(label),

package/dist/collection/global/styles.js

@@ -70,7 +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;
+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, _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 {
@@ -576,107 +576,89 @@ html {
   --sqm-max-width: 100%;
   --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) ||
-  "#b3b3b3"};
+  --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:${((_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) ||
+  --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-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) ||
+  --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: ${((_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: ${((_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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_11 = (_10 = window.SquatchBrandingConfig) === null || _10 === void 0 ? void 0 : _10.secondaryButton) === null || _11 === void 0 ? void 0 : _11.borderRadius) || "30px"};
+  --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-tertiary-button-background: transparent;
-  --sqm-tertiary-button-background-hover: var(--sqm-primary-color); 
-  --sqm-tertiary-button-color: var(--sqm-text); 
-  --sqm-tertiary-button-color-border: transparent; 
-  --sqm-tertiary-button-radius: 30px;
-  
-  --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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${((_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) ||
+  --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: ${
-// 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) ||
+  --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: ${((_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-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: ${
-// window.SquatchBrandingConfig?.inputs?.labelFontSize || "#fff"
-"#fff"};
-  --sqm-input-disabled-background: ${
-// window.SquatchBrandingConfig?.inputs?.disabledBackground || "#fff"
-"#fff"};
+  --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);
@@ -725,7 +707,7 @@ html {
 }
 
 body {
-  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-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);
@@ -857,6 +839,8 @@ sl-button[type="primary"]::part(base) {
 *::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-color-border-hover);
+  color: var(--sqm-primary-button-color-hover);
 }
 
 
@@ -876,20 +860,8 @@ sl-button[type="secondary"]::part(base) {
 *::part(secondarybutton-base):hover,
 sl-button[type="secondary"]::part(base):hover {
   background-color: var(--sqm-secondary-button-background-hover);
-}
-
-*::part(tertiarybutton-base){
-  background-color: var(--sqm-tertiary-button-background);
-  color: var(--sqm-tertiary-button-color);
-  border-color: var(--sqm-tertiary-button-color-border);
-  border-radius: var(--sqm-tertiary-button-radius);
-  width: 100%;
-  display: flex;
-  margin: auto;
-}
-
-*::part(tertiarybutton-base):hover{
-  background: var(--sqm-tertiary-button-background-hover);
+  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){