@saasquatch/mint-components 1.15.0-42 → 1.15.0-43

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.js

@@ -1724,23 +1724,31 @@ export class TaxAndCashDashboard {
   }; }
 }
 function useDemoTaxAndCashDashboard(props) {
+  // const states = parseStates(props.stateController);
   return deepmerge({
     states: {
       dateSubmitted: "today",
       documentType: "W9",
       documentTypeString: "W9",
-      status: "ACTIVE",
       country: "United States",
-      indirectTaxNumber: 55555555,
+      indirectTaxNumber: "55555555",
       indirectTaxType: "Indirect Tax",
-      noFormNeeded: true,
+      noFormNeeded: false,
       disabled: false,
       loading: false,
       showNewFormDialog: false,
       hasHold: false,
-      showVerifyIdentity: false,
+      subRegion: "CA",
+      subRegionTaxNumber: undefined,
+      qstNumber: undefined,
+      isBusinessEntity: false,
+      province: undefined,
+      notRegistered: true,
+      loadingError: false,
       payoutStatus: "DONE",
       veriffLoading: false,
+      canEditPayoutInfo: true,
+      status: "ACTIVE",
     },
     callbacks: {
       onClick: () => console.debug("check step"),
@@ -1750,5 +1758,12 @@ function useDemoTaxAndCashDashboard(props) {
       onVerifyClick: () => console.log("verify"),
     },
     text: props.getTextProps(),
+    slots: {
+      payoutDetailsCardSlot: (h("sqm-payout-details-card", { demoData: {
+          states: {
+            badgeStatus: "nextPayout",
+          },
+        } })),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/useTaxAndCashDashboard.js

@@ -2,11 +2,11 @@ import { useLocale, useParentQueryValue, useSetParent, } from "@saasquatch/compo
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { DateTime } from "luxon";
 import { vatLabels } from "../countries";
-import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
-import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
-import { taxTypeToName } from "../utils";
+import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { getStatus } from "../sqm-payout-status-alert/usePayoutStatus";
+import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { useVeriffApp, VERIFF_COMPLETE_EVENT_KEY } from "../useVeriffApp";
+import { taxTypeToName } from "../utils";
 function getCountryName(countryCode, locale) {
   if (!countryCode)
     return undefined;

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

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
-import { GeneralLoadingView } from "../TaxForm.stories";
-import { FORM_STEPS } from "../sqm-tax-and-cash/data";
-import { formatErrorMessage, validateBillingField } from "../utils";
+// import { GeneralLoadingView } from "../TaxForm.stories";
+import { FORM_STEPS } from "../data";
 import { PHONE_EXTENSIONS } from "../phoneExtensions";
+import LoadingView from "../sqm-tax-and-cash/LoadingView";
+import { formatErrorMessage, validateBillingField } from "../utils";
 const style = {
   FormWrapper: {},
   ErrorInput: {
@@ -322,7 +323,7 @@ export const UserInfoFormView = (props) => {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       h("br", null))),
-    states.loading ? (h(GeneralLoadingView, null)) : (h("div", null,
+    states.loading ? (h(LoadingView, null)) : (h("div", null,
       h("div", { class: classes.TextContainer },
         h("div", null,
           !states.hideSteps && (h("p", null, intl.formatMessage({

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

@@ -1,9 +1,9 @@
 import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, Host, Prop, State, h } from "@stencil/core";
+import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
-import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data";
+import { TAX_CONTEXT_NAMESPACE } from "../data";
 import { UserInfoFormView } from "./sqm-user-info-form-view";
 import { useUserInfoForm } from "./useUserInfoForm";
 /**
@@ -183,13 +183,12 @@ export class TaxForm {
   }
   render() {
     const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
-    return (h(Host, null,
-      h(UserInfoFormView, { data: props.data, 
-        // @ts-ignore
-        states: props.states, callbacks: {
-          ...props.callbacks,
-          onSubmit: props.onSubmit,
-        }, text: props.text, refs: props.refs })));
+    return (h(UserInfoFormView, { data: props.data, 
+      // @ts-ignore
+      states: props.states, callbacks: {
+        ...props.callbacks,
+        onSubmit: props.onSubmit,
+      }, text: props.text, refs: props.refs }));
   }
   static get is() { return "sqm-user-info-form"; }
   static get encapsulation() { return "shadow"; }
@@ -924,9 +923,10 @@ export class TaxForm {
 }
 function useDemoUserInfoForm(props) {
   const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
+  // @ts-ignore
   return deepmerge({
     setStep,
-    onSubmit: () => {
+    onSubmit: async () => {
       setStep("/2");
     },
     onRadioClick: () => { },

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

@@ -1,9 +1,9 @@
+import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
 import { useEffect, useMemo, useRef, useState, } from "@saasquatch/universal-hooks";
 import jsonpointer from "jsonpointer";
-import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
-import { objectIsFull } from "../utils";
-import { useParent, useParentQueryValue, useParentValue, } from "@saasquatch/component-boilerplate";
+import { CURRENCIES_NAMESPACE, SORTED_COUNTRIES_NAMESPACE, TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { ADDRESS_REGIONS } from "../subregions";
+import { objectIsFull } from "../utils";
 export function useUserInfoForm(props) {
   var _a, _b, _c, _d;
   const currencyRef = useRef(undefined);

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;
-console.log("The branding config is ", window.SquatchBrandingConfig);
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 const style = `
 /* vietnamese */
 @font-face {
@@ -574,26 +573,22 @@ html {
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
   
-  --sqm-text: ${((_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.font.textColor) || "white"};
-  --sqm-text-subdued: ${((_d = window.SquatchBrandingConfig) === null || _d === void 0 ? void 0 : _d.font.secondaryTextColor) || "#b3b3b3"};
+  --sqm-text: ${((_d = (_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.font) === null || _d === void 0 ? void 0 : _d.textColor) || "white"};
+  --sqm-text-subdued: ${((_f = (_e = window.SquatchBrandingConfig) === null || _e === void 0 ? void 0 : _e.font) === null || _f === void 0 ? void 0 : _f.secondaryTextColor) || "#b3b3b3"};
+  --sqm-primary-color: #1ed760;
 
-  --sqm-primary-color: ${((_f = (_e = window.SquatchBrandingConfig) === null || _e === void 0 ? void 0 : _e.color) === null || _f === void 0 ? void 0 : _f.primaryColor) || "#1ed760"};
-  --sqm-primary-button-background:${((_h = (_g = window.SquatchBrandingConfig) === null || _g === void 0 ? void 0 : _g.primaryButton) === null || _h === void 0 ? void 0 : _h.buttonColor) || "#1ed760"};
-  --sqm-primary-button-background-hover: ${((_k = (_j = window.SquatchBrandingConfig) === null || _j === void 0 ? void 0 : _j.primaryButton) === null || _k === void 0 ? void 0 : _k.hoverColor) || "#1ed760"};
-  --sqm-primary-button-color: ${((_m = (_l = window.SquatchBrandingConfig) === null || _l === void 0 ? void 0 : _l.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonTextColor) || "#FFFFFF"};
-  --sqm-primary-button-color-border: ${((_p = (_o = window.SquatchBrandingConfig) === null || _o === void 0 ? void 0 : _o.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonBorderColor) ||
-  "transparent"};
-  --sqm-primary-button-radius: ${((_r = (_q = window.SquatchBrandingConfig) === null || _q === void 0 ? void 0 : _q.primaryButton) === null || _r === void 0 ? void 0 : _r.borderRadius) || "4px"};
+  --sqm-primary-button-background: #1ed760;
+  --sqm-primary-button-background-hover: #1DB954;
+  --sqm-primary-button-color: #121212;
+  --sqm-primary-button-color-border: transparent;
+  --sqm-primary-button-radius: 30px;
 
 
-  --sqm-secondary-button-background: ${((_t = (_s = window.SquatchBrandingConfig) === null || _s === void 0 ? void 0 : _s.secondaryButton) === null || _t === void 0 ? void 0 : _t.buttonColor) || "#191414"};
-  --sqm-secondary-button-background-hover: ${((_v = (_u = window.SquatchBrandingConfig) === null || _u === void 0 ? void 0 : _u.secondaryButton) === null || _v === void 0 ? void 0 : _v.hoverColor) || "#282828"};
-
-  
-  --sqm-secondary-button-color: ${((_x = (_w = window.SquatchBrandingConfig) === null || _w === void 0 ? void 0 : _w.secondaryButton) === null || _x === void 0 ? void 0 : _x.buttonTextColor) || "#FFFFFF"};
-  --sqm-secondary-button-color-border: ${((_z = (_y = window.SquatchBrandingConfig) === null || _y === void 0 ? void 0 : _y.secondaryButton) === null || _z === void 0 ? void 0 : _z.buttonBorderColor) ||
-  "#FFFFFF"};
-  --sqm-secondary-button-radius: ${((_1 = (_0 = window.SquatchBrandingConfig) === null || _0 === void 0 ? void 0 : _0.secondaryButton) === null || _1 === void 0 ? void 0 : _1.borderRadius) || "30px"};
+  --sqm-secondary-button-background: #191414;
+  --sqm-secondary-button-background-hover: #282828; 
+  --sqm-secondary-button-color: #FFFFFF; 
+  --sqm-secondary-button-color-border: #FFFFFF; 
+  --sqm-secondary-button-radius: 30px;
 
   --sqm-tertiary-button-background: transparent;
   --sqm-tertiary-button-background-hover: var(--sqm-primary-color); 
@@ -601,69 +596,52 @@ html {
   --sqm-tertiary-button-color-border: transparent; 
   --sqm-tertiary-button-radius: 30px;
   
-  --sqm-border-radius-normal: ${((_3 = (_2 = window.SquatchBrandingConfig) === null || _2 === void 0 ? void 0 : _2.border) === null || _3 === void 0 ? void 0 : _3.radius) || "18px"}; 
-  --sqm-border-color: ${((_5 = (_4 = window.SquatchBrandingConfig) === null || _4 === void 0 ? void 0 : _4.border) === null || _5 === void 0 ? void 0 : _5.color) || "white"};
-
-  --sqm-border-thickness: ${((_7 = (_6 = window.SquatchBrandingConfig) === null || _6 === void 0 ? void 0 : _6.border) === null || _7 === void 0 ? void 0 : _7.thickness) || "1px"};
-
-  --sqm-accent-color-icon: ${((_10 = (_9 = (_8 = window.SquatchBrandingConfig) === null || _8 === void 0 ? void 0 : _8.color) === null || _9 === void 0 ? void 0 : _9.accentColorShades) === null || _10 === void 0 ? void 0 : _10.iconAndBadge) ||
-  "#1ed760"};
-  --sqm-accent-color-text: ${((_13 = (_12 = (_11 = window.SquatchBrandingConfig) === null || _11 === void 0 ? void 0 : _11.color) === null || _12 === void 0 ? void 0 : _12.accentColorShades) === null || _13 === void 0 ? void 0 : _13.text) || "#fff"};    
-  --sqm-accent-color-border: ${((_16 = (_15 = (_14 = window.SquatchBrandingConfig) === null || _14 === void 0 ? void 0 : _14.color) === null || _15 === void 0 ? void 0 : _15.accentColorShades) === null || _16 === void 0 ? void 0 : _16.border) || "#1ed760"};
-  --sqm-accent-color-background: ${((_19 = (_18 = (_17 = window.SquatchBrandingConfig) === null || _17 === void 0 ? void 0 : _17.color) === null || _18 === void 0 ? void 0 : _18.accentColorShades) === null || _19 === void 0 ? void 0 : _19.background) ||
-  "#0d4a27"};
-
-  --sqm-success-color-icon: ${((_22 = (_21 = (_20 = window.SquatchBrandingConfig) === null || _20 === void 0 ? void 0 : _20.color) === null || _21 === void 0 ? void 0 : _21.success) === null || _22 === void 0 ? void 0 : _22.iconAndBadge) ||
-  "var(--sl-color-success-600)"};
-  --sqm-success-color-text: ${((_25 = (_24 = (_23 = window.SquatchBrandingConfig) === null || _23 === void 0 ? void 0 : _23.color) === null || _24 === void 0 ? void 0 : _24.success) === null || _25 === void 0 ? void 0 : _25.text) ||
-  "var(--sl-color-success-950)"};
-  --sqm-success-color-border: ${((_28 = (_27 = (_26 = window.SquatchBrandingConfig) === null || _26 === void 0 ? void 0 : _26.color) === null || _27 === void 0 ? void 0 : _27.success) === null || _28 === void 0 ? void 0 : _28.border) ||
-  "var(--sl-color-success-400)"};
-  --sqm-success-color-background: ${((_31 = (_30 = (_29 = window.SquatchBrandingConfig) === null || _29 === void 0 ? void 0 : _29.color) === null || _30 === void 0 ? void 0 : _30.success) === null || _31 === void 0 ? void 0 : _31.background) ||
-  "var(--sl-color-success-300)"};
+  --sqm-border-radius-normal: ${((_h = (_g = window.SquatchBrandingConfig) === null || _g === void 0 ? void 0 : _g.border) === null || _h === void 0 ? void 0 : _h.radius) || "18"}px;
+  --sqm-border-color: ${((_k = (_j = window.SquatchBrandingConfig) === null || _j === void 0 ? void 0 : _j.border) === null || _k === void 0 ? void 0 : _k.color) || "white"};
+  --sqm-border-thickness: 1px;
+
+  --sqm-accent-color-icon: ${((_o = (_m = (_l = window.SquatchBrandingConfig) === null || _l === void 0 ? void 0 : _l.color) === null || _m === void 0 ? void 0 : _m.accentColorShades) === null || _o === void 0 ? void 0 : _o.icon) || "#1ed760"};
+  --sqm-accent-color-text: #ffffff;     
+  --sqm-accent-color-border: #1db954;
+  --sqm-accent-color-background: #0d4a27;
+
+  --sqm-success-color-icon: var(--sl-color-success-600);
+  --sqm-success-color-text: var(--sl-color-success-950);
+  --sqm-success-color-border: var(--sl-color-success-400);
+  --sqm-success-color-background: var(--sl-color-success-300);
   
-  --sqm-warning-color-icon: ${((_34 = (_33 = (_32 = window.SquatchBrandingConfig) === null || _32 === void 0 ? void 0 : _32.color) === null || _33 === void 0 ? void 0 : _33.warning) === null || _34 === void 0 ? void 0 : _34.iconAndBadge) ||
-  "var(--sl-color-warning-600)"};
-  --sqm-warning-color-text: ${((_37 = (_36 = (_35 = window.SquatchBrandingConfig) === null || _35 === void 0 ? void 0 : _35.color) === null || _36 === void 0 ? void 0 : _36.warning) === null || _37 === void 0 ? void 0 : _37.text) ||
-  "var(--sl-color-warning-950)"};
-  --sqm-warning-color-border: ${((_40 = (_39 = (_38 = window.SquatchBrandingConfig) === null || _38 === void 0 ? void 0 : _38.color) === null || _39 === void 0 ? void 0 : _39.warning) === null || _40 === void 0 ? void 0 : _40.border) ||
-  "var(--sl-color-warning-400)"};
-  --sqm-warning-color-background: ${((_43 = (_42 = (_41 = window.SquatchBrandingConfig) === null || _41 === void 0 ? void 0 : _41.color) === null || _42 === void 0 ? void 0 : _42.warning) === null || _43 === void 0 ? void 0 : _43.background) ||
-  "var(--sl-color-warning-300)"};
-
-  --sqm-danger-color-icon: ${((_46 = (_45 = (_44 = window.SquatchBrandingConfig) === null || _44 === void 0 ? void 0 : _44.color) === null || _45 === void 0 ? void 0 : _45.critical) === null || _46 === void 0 ? void 0 : _46.iconAndBadge) ||
-  "var(--sl-color-danger-600)"};
-  --sqm-danger-color-text: ${((_49 = (_48 = (_47 = window.SquatchBrandingConfig) === null || _47 === void 0 ? void 0 : _47.color) === null || _48 === void 0 ? void 0 : _48.critical) === null || _49 === void 0 ? void 0 : _49.text) ||
-  "var(--sl-color-danger-950)"};
-  --sqm-danger-color-border: ${((_52 = (_51 = (_50 = window.SquatchBrandingConfig) === null || _50 === void 0 ? void 0 : _50.color) === null || _51 === void 0 ? void 0 : _51.critical) === null || _52 === void 0 ? void 0 : _52.border) ||
-  "var(--sl-color-danger-400)"};
-  --sqm-danger-color-background: ${((_55 = (_54 = (_53 = window.SquatchBrandingConfig) === null || _53 === void 0 ? void 0 : _53.color) === null || _54 === void 0 ? void 0 : _54.critical) === null || _55 === void 0 ? void 0 : _55.background) ||
-  "var(--sl-color-danger-300)"};
-
-  --sqm-informative-color-icon: ${((_58 = (_57 = (_56 = window.SquatchBrandingConfig) === null || _56 === void 0 ? void 0 : _56.color) === null || _57 === void 0 ? void 0 : _57.informative) === null || _58 === void 0 ? void 0 : _58.iconAndBadge) ||
-  "var(--sl-color-sky-600)"};
-  --sqm-informative-color-text: ${((_61 = (_60 = (_59 = window.SquatchBrandingConfig) === null || _59 === void 0 ? void 0 : _59.color) === null || _60 === void 0 ? void 0 : _60.informative) === null || _61 === void 0 ? void 0 : _61.text) ||
-  "var(--sl-color-sky-950)"};
-  --sqm-informative-color-border: ${((_64 = (_63 = (_62 = window.SquatchBrandingConfig) === null || _62 === void 0 ? void 0 : _62.color) === null || _63 === void 0 ? void 0 : _63.informative) === null || _64 === void 0 ? void 0 : _64.border) ||
-  "var(--sl-color-sky-400)"};
-  --sqm-informative-color-background: ${((_67 = (_66 = (_65 = window.SquatchBrandingConfig) === null || _65 === void 0 ? void 0 : _65.color) === null || _66 === void 0 ? void 0 : _66.informative) === null || _67 === void 0 ? void 0 : _67.background) ||
-  "var(--sl-color-sky-300)"};
-
-  --sqm-input-background: ${((_69 = (_68 = window.SquatchBrandingConfig) === null || _68 === void 0 ? void 0 : _68.inputs) === null || _69 === void 0 ? void 0 : _69.background) || "#fff"};
-  --sqm-input-border-color: ${((_71 = (_70 = window.SquatchBrandingConfig) === null || _70 === void 0 ? void 0 : _70.inputs) === null || _71 === void 0 ? void 0 : _71.borderColor) || "#eaeaea"};
-  --sqm-input-border-radius: ${((_73 = (_72 = window.SquatchBrandingConfig) === null || _72 === void 0 ? void 0 : _72.inputs) === null || _73 === void 0 ? void 0 : _73.borderRadius) || "4px"};
-  --sqm-input-color: ${((_75 = (_74 = window.SquatchBrandingConfig) === null || _74 === void 0 ? void 0 : _74.inputs) === null || _75 === void 0 ? void 0 : _75.textColor) || "#000"};
-  --sqm-input-label-color: ${((_77 = (_76 = window.SquatchBrandingConfig) === null || _76 === void 0 ? void 0 : _76.inputs) === null || _77 === void 0 ? void 0 : _77.labelColor) || "#000"};
-  --sqm-border-width: ${((_79 = (_78 = window.SquatchBrandingConfig) === null || _78 === void 0 ? void 0 : _78.inputs) === null || _79 === void 0 ? void 0 : _79.borderThickness) || "1px"};
-  --sqm-border-color-focus: ${((_81 = (_80 = window.SquatchBrandingConfig) === null || _80 === void 0 ? void 0 : _80.inputs) === null || _81 === void 0 ? void 0 : _81.focusBorderColor) || "#eaeaea"};
-  --sqm-border-color-hover: ${((_83 = (_82 = window.SquatchBrandingConfig) === null || _82 === void 0 ? void 0 : _82.inputs) === null || _83 === void 0 ? void 0 : _83.hoverBorderColor) || "#ccc"};
-  --sqm-input-label-font-size: ${((_85 = (_84 = window.SquatchBrandingConfig) === null || _84 === void 0 ? void 0 : _84.inputs) === null || _85 === void 0 ? void 0 : _85.labelFontSize) || "18px"};
-  --sqm-input-disabled-color: ${((_87 = (_86 = window.SquatchBrandingConfig) === null || _86 === void 0 ? void 0 : _86.inputs) === null || _87 === void 0 ? void 0 : _87.labelFontSize) || "#fff"};
-  --sqm-input-disabled-background: ${((_89 = (_88 = window.SquatchBrandingConfig) === null || _88 === void 0 ? void 0 : _88.inputs) === null || _89 === void 0 ? void 0 : _89.disabledBackground) || "#fff"};
+  --sqm-warning-color-icon: var(--sl-color-warning-600);
+  --sqm-warning-color-text: var(--sl-color-warning-950);
+  --sqm-warning-color-border: var(--sl-color-warning-400);
+  --sqm-warning-color-background: var(--sl-color-warning-300);
+
+  --sqm-danger-color-icon: var(--sl-color-danger-600);
+  --sqm-danger-color-text: var(--sl-color-danger-950);
+  --sqm-danger-color-border: var(--sl-color-danger-400);
+  --sqm-danger-color-background: var(--sl-color-danger-300);
+
+  --sqm-informative-color-icon: var(--sl-color-sky-600);
+  --sqm-informative-color-text: var(--sl-color-sky-950);
+  --sqm-informative-color-border: var(--sl-color-sky-400);
+  --sqm-informative-color-background: var(--sl-color-sky-300);
+
+  --sqm-input-background: #121212;
+  --sqm-input-border: 1px solid #7c7c7c;
+  --sqm-input-border-color: #7c7c7c;
+  --sqm-input-border-radius: 30px;
+  --sqm-input-color: var(--sqm-text);
+  --sqm-input-focus-border: 1px solid white;
+  --sqm-input-label-color: white;
+  --sqm-border-width: 1px;
+  --sqm-border-color-focus: white;
+  --sqm-border-color-hover: white;
+  --sqm-input-label-font-size: white;
+  --sqm-input-disabled-color: white;
+  --sqm-input-disabled-background: #303030;
 
   --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-hover: var(--sqm-input-color);
+  --sl-input-color-focus: var(--sqm-input-color);
   --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, white);
@@ -702,7 +680,7 @@ html {
 }
 
 body {
-  font-family: ${window.SquatchBrandingConfig.font.font || "var(--sl-font-sans)"};
+  font-family: 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);
@@ -717,6 +695,39 @@ body {
   color: var(--sqm-text) !important;
 }
 
+sqm-tabs::part(active-tab-indicator) {
+  border: red;
+  :root {
+    --tabs-border-color: pink;
+  
+  }
+}
+
+sl-tab-group::part(nav) {
+  border-bottom: 1px solid blue; /* Emphasize the separator */
+}
+
+sl-tab-group {
+  /* Set the active tab indicator color to Spotify Green */
+  --indicator-color: #1db954; 
+
+  /* Set the border color separating tabs from content */
+  --sl-tab-group-border-color: #333333; 
+
+  /* You might also want to adjust the nav area's background */
+  background-color: #1a1a1a; /* Dark background for the entire group or just the nav */
+  border-radius: 8px; /* Rounded corners for the entire tab group */
+  padding: 1rem; /* Adjust overall padding */
+}
+
+sl-tab::part(base)[active] {
+  /* You can add a top/left/right border to the active tab button itself if desired */
+  /* For a look like your previous input fields, you might want to mimic that border. */
+  border: 1px solid #1db954; /* Spotify Green border */
+  border-bottom-color: transparent; /* Hide the bottom border to let the indicator show */
+  border-radius: 4px 4px 0 0; /* Keep top corners rounded */
+}
+
 sl-spinner {
   --sl-color-primary-500: var(--sqm-accent-color-icon)
   --sl-spinner-stroke-width: 4px;
@@ -802,6 +813,10 @@ h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
 }
 
+sl-button::part(base){
+  width: 100%;
+}
+
 sqm-share-button{
   flex: 1;
 }
@@ -813,7 +828,7 @@ sqm-hero img {
 
 sl-details::part(base){
   background-color: inherit;
-  border-color: var(--sqm-border-color);
+  border-color: var(--sqm-border-color)
 }
 
 sl-details::part(summary) {
@@ -823,8 +838,7 @@ sl-details::part(summary) {
 }
 
 *::part(primarybutton-base){
-  width: 100%;
-  background-color: var(--sqm-primary-button-background) !important;
+  background-color: var(--sqm-primary-button-background);
   color: var(--sqm-primary-button-color);
   border-color: var(--sqm-primary-button-color-border);
   border-radius: var(--sqm-primary-button-radius);
@@ -854,7 +868,7 @@ sl-details::part(summary) {
   color: var(--sqm-tertiary-button-color);
   border-color: var(--sqm-tertiary-button-color-border);
   border-radius: var(--sqm-tertiary-button-radius);
-  width: 100%;
+  width: max-content;
   display: flex;
   margin: auto;
 }
@@ -876,14 +890,6 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 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);
@@ -894,7 +900,8 @@ sqm-name-fields::part(input-base) {
 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);
+  border-color: none;
+  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{