@saasquatch/mint-components 1.15.0-53 → 1.15.0-55

package/dist/cjs/{usePortalLogin-e246988e.js → usePortalLogin-1c022d8d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const utils = require('./utils-6847bc06.js');
 
@@ -9,7 +9,7 @@ function usePortalLogin(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
   const [request, { loading, errors, data }] = index_module.je();
   const [loginWithGoogle, { loading: gLoading, errors: gErrors }] = index_module.hn();
-  const [error, setError] = stencilHooks_module.useState("");
+  const [error, setError] = domContextHooks_module.useState("");
   const urlParams = new URLSearchParams(index_module.jn.location.search);
   const nextPageOverride = urlParams.get("nextPage");
   const googleSubmit = async (e) => {

package/dist/cjs/{usePortalRegistrationForm-d28621de.js → usePortalRegistrationForm-75b647fe.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-5f44ca80.js');
+const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 
 const RegistrationFormQuery = index_module.dist.gql `
@@ -21,13 +21,13 @@ const RegistrationFormQuery = index_module.dist.gql `
 `;
 function usePortalRegistrationForm(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  const formRef = stencilHooks_module.useRef(null);
+  const formRef = domContextHooks_module.useRef(null);
   const locale = index_module.L();
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
   const [request, { loading, errors, data, formError }] = index_module.Oe();
   const queryResponse = index_module.wn(RegistrationFormQuery, { key: props.formKey });
   const formLoading = loading || queryResponse.loading;
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a, _b, _c;
     const initialData = (_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData.initialData;
     const disabled = ((_b = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _b === void 0 ? void 0 : _b.form.initialData.isEnabled) === false;
@@ -41,7 +41,7 @@ function usePortalRegistrationForm(props) {
     };
     setRegistrationFormState(formState);
   }, [(_a = queryResponse === null || queryResponse === void 0 ? void 0 : queryResponse.data) === null || _a === void 0 ? void 0 : _a.form.initialData]);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (!formRef.current)
       return;
     const form = formRef.current;

package/dist/cjs/{useReferralCodes-a47dcbc2.js → useReferralCodes-11cdf43b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 
 const GET_REFERRAL_CODES = index_module.dist.gql `
   query getCodes(
@@ -99,7 +99,7 @@ function useReferralCodes(props) {
       whatsapp: { messageLink: "" },
     },
   });
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     if ((_a = referralData === null || referralData === void 0 ? void 0 : referralData.data) === null || _a === void 0 ? void 0 : _a.length) {
       const data = referralData.data[0];

package/dist/cjs/{useReferralTable-19e7523a.js → useReferralTable-90d4d6e9.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
-const reRender = require('./re-render-28fed959.js');
-const useChildElements = require('./useChildElements-e5fa605c.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
+const reRender = require('./re-render-d516138a.js');
+const useChildElements = require('./useChildElements-966c9041.js');
 
-const debug = stencilHooks_module.browser("sq:useReferralTable");
+const debug = domContextHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = index_module.dist.gql `
   query getReferrals(
@@ -259,7 +259,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
     userId_eq: user === null || user === void 0 ? void 0 : user.id,
     accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,
   };
-  const [content, setContent] = stencilHooks_module.useReducer((state, next) => ({
+  const [content, setContent] = domContextHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
   }), {
@@ -286,11 +286,11 @@ function useReferralTable(props, emptyElement, loadingElement) {
     rewardFilter,
     locale,
   }, (props.showReferrer && referrerLoading && !referrerResponse) || !(user === null || user === void 0 ? void 0 : user.jwt));
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (states.currentPage === 0 && showReferrerRow)
       callbacks.setLimit(props.perPage - 1);
   }, [showReferrerRow]);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (props.showReferrer && showReferrerRow) {
       callbacks.setLimit(props.perPage - 1);
       callbacks.setCurrentPage(0);
@@ -327,7 +327,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
     // Set the content to render and finish loading components
     setContent({ columns, loading: false, page: states.currentPage });
   }
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     setContent({ loading: true });
     referralData && getComponentData(components);
   }, [referralData, components, tick]);

package/dist/cjs/{useRegistrationFormState-5f44ca80.js → useRegistrationFormState-bbee6e7b.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 const REGISTRATION_FORM_STATE_CONTEXT_INTERNAL = "sq:registration-form-state-internal";
 function useRegistrationForm() {
-  const parent = stencilHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT_INTERNAL);
-  const parentValue = stencilHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT);
+  const parent = domContextHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT_INTERNAL);
+  const parentValue = domContextHooks_module.d(REGISTRATION_FORM_STATE_CONTEXT);
   if (!parent)
     return [undefined, undefined];
   return [parentValue, parent[1]];
 }
 function useRegistrationFormState(formState) {
   const host = index_module._();
-  const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
-  stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT_INTERNAL, [
+  const [registrationFormState, setRegistrationFormState] = domContextHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  domContextHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT_INTERNAL, [
     registrationFormState,
     setRegistrationFormState,
   ]);

package/dist/cjs/{useVerificationEmail-1496b993.js → useVerificationEmail-9dd3997a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 
 const UserLookupQuery = index_module.dist.gql `
   query userLookup {
@@ -59,8 +59,8 @@ const SubmitImpactCodeMutation = index_module.dist.gql `
 // ! is done before calling any mutations
 function useVerificationEmail() {
   const userIdentity = index_module.J();
-  const [verificationEmail, setVerificationEmail] = stencilHooks_module.useState(null);
-  const [hasEmails, setHasEmails] = stencilHooks_module.useState({
+  const [verificationEmail, setVerificationEmail] = domContextHooks_module.useState(null);
+  const [hasEmails, setHasEmails] = domContextHooks_module.useState({
     participant: false,
     impact: false,
   });
@@ -75,7 +75,7 @@ function useVerificationEmail() {
   const [submitImpactCode, { loading: submitImpactCodeLoading, errors: submitImpactCodeErrors },] = index_module.$e(SubmitImpactCodeMutation);
   const verifyLoading = verifyMutationLoading || submitImpactCodeLoading;
   const verifyErrors = verifyMutationErrors || submitImpactCodeErrors;
-  const [initialized, setInitialized] = stencilHooks_module.useState(false);
+  const [initialized, setInitialized] = domContextHooks_module.useState(false);
   const initialise = async () => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     try {
@@ -152,7 +152,7 @@ function useVerificationEmail() {
       return result;
     }
   };
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (!initialized)
       initialise();
   }, []);

package/dist/cjs/{utilities-be3ce1f8.js → utilities-9a0c5e91.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {
-  const [width, setWidth] = stencilHooks_module.useState(window.innerWidth);
+  const [width, setWidth] = domContextHooks_module.useState(window.innerWidth);
   const handleWindowResize = index_module.useCallback(() => setWidth(window.innerWidth), []);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     window.addEventListener("resize", handleWindowResize);
     return () => window.removeEventListener("resize", handleWindowResize);
   }, []);

package/dist/cjs/{utils-0b09e2cb.js → utils-5c07844e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-6d0d196d.js');
+const global = require('./global-adc86686.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

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

@@ -26,12 +26,12 @@ export function TaskCardView(props) {
         color: content.textColor || "var(--sqm-text)",
       },
       "& .main.complete": {
-        background: "var(--sl-color-primary-50)",
+        opacity: "0.8",
         borderColor: "var(--sqm-accent-color-border)",
       },
       "& .main.expired": {
         color: content.textColor || "var(--sqm-text)",
-        background: content.backgroundColor || "var(--sl-color-neutral-50)",
+        opacity: "0.8",
       },
       "& .title": {
         fontSize: "var(--sl-font-size-medium)",

package/dist/collection/global/global.js

@@ -1,11 +1,11 @@
-import "@formatjs/intl-relativetimeformat/polyfill";
 import "@formatjs/intl-relativetimeformat/dist/locale-data/en";
-import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-relativetimeformat/polyfill";
+import { createIntl, createIntlCache } from "@formatjs/intl";
 import "@formatjs/intl-pluralrules/dist/locale-data/en";
-import "babel-polyfill";
+import "@formatjs/intl-pluralrules/polyfill";
+import { getEnvironmentSDK, setUseHostImplementation, } from "@saasquatch/component-boilerplate";
 import { useHost } from "@saasquatch/stencil-hooks";
-import { setUseHostImplementation } from "@saasquatch/component-boilerplate";
-import { createIntl, createIntlCache } from "@formatjs/intl";
+import "babel-polyfill";
 import debugFn from "debug";
 setUseHostImplementation(useHost);
 const debug = debugFn("sq:global");
@@ -13,7 +13,7 @@ const cache = createIntlCache();
 export const intl = createIntl({
   locale: "en",
 }, cache);
-import { SlAlert, SlAnimation, SlAvatar, SlBadge, SlButton, SlButtonGroup, SlCard, SlCheckbox, SlColorPicker, SlDetails, SlDialog, SlDrawer, SlDropdown, SlForm, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuDivider, SlMenuItem, SlMenuLabel, SlProgressBar, SlProgressRing, SlRadio, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlResponsiveEmbed, SlSelect, SlSkeleton, SlSpinner, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, setBasePath, registerIconLibrary, } from "@saasquatch/shoelace";
+import { SlAlert, SlAnimation, SlAvatar, SlBadge, SlButton, SlButtonGroup, SlCard, SlCheckbox, SlColorPicker, SlDetails, SlDialog, SlDrawer, SlDropdown, SlForm, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuDivider, SlMenuItem, SlMenuLabel, SlProgressBar, SlProgressRing, SlRadio, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlResponsiveEmbed, SlSelect, SlSkeleton, SlSpinner, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, registerIconLibrary, setBasePath, } from "@saasquatch/shoelace";
 try {
   setBasePath("/dist/shoelace");
   // SlAlert.register();
@@ -71,10 +71,22 @@ catch (error) {
   debug("components already registered");
 }
 import { insertCSS } from "../insertcss";
-import CSS from "./styles";
-try {
-  insertCSS(CSS);
-}
-catch (error) {
-  debug(error);
+import { getStyles } from "./styles";
+const applyStyles = (css) => {
+  try {
+    insertCSS(css);
+  }
+  catch (error) {
+    debug(error);
+  }
+};
+if (getEnvironmentSDK().type === "None") {
+  window.addEventListener("message", ({ data }) => {
+    if (!(data === null || data === void 0 ? void 0 : data.brandingConfig))
+      return;
+    const styles = getStyles(data.brandingConfig);
+    applyStyles(styles);
+  });
 }
+const styles = getStyles(window.SquatchBrandingConfig);
+applyStyles(styles);

package/dist/collection/global/styles.js

@@ -70,8 +70,9 @@
   --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, _91, _92, _93, _94, _95, _96, _97, _98, _99, _100, _101, _102, _103, _104, _105, _106, _107, _108, _109, _110, _111, _112;
-const style = `
+export const getStyles = (config) => {
+  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;
+  return `
 /* vietnamese */
 @font-face {
   font-family: 'Nunito Sans';
@@ -570,95 +571,70 @@ html {
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: ${((_b = (_a = window.SquatchBrandingConfig) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.backgroundColor) || "#121212"};
+  --sqm-portal-background: ${(_a = config === null || config === void 0 ? void 0 : config.color) === null || _a === void 0 ? void 0 : _a.backgroundColor};
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --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};
-
-  --sqm-primary-color: ${((_k = (_j = window.SquatchBrandingConfig) === null || _j === void 0 ? void 0 : _j.main) === null || _k === void 0 ? void 0 : _k.brandColor) || "#1ed760"};
-  --sqm-primary-button-background:${((_o = (_m = (_l = window.SquatchBrandingConfig) === null || _l === void 0 ? void 0 : _l.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonColor) === null || _o === void 0 ? void 0 : _o.background) ||
-  "#1ed760"};
-  --sqm-primary-button-background-hover: ${((_r = (_q = (_p = window.SquatchBrandingConfig) === null || _p === void 0 ? void 0 : _p.primaryButton) === null || _q === void 0 ? void 0 : _q.buttonHoverColor) === null || _r === void 0 ? void 0 : _r.background) ||
-  "#1ed760"};
-  --sqm-primary-button-color-hover: ${(_u = (_t = (_s = window.SquatchBrandingConfig) === null || _s === void 0 ? void 0 : _s.primaryButton) === null || _t === void 0 ? void 0 : _t.buttonHoverColor) === null || _u === void 0 ? void 0 : _u.label};
-  --sqm-primary-button-border-color-hover: ${(_x = (_w = (_v = window.SquatchBrandingConfig) === null || _v === void 0 ? void 0 : _v.primaryButton) === null || _w === void 0 ? void 0 : _w.buttonHoverColor) === null || _x === void 0 ? void 0 : _x.border};
-  --sqm-primary-button-color: ${((_0 = (_z = (_y = window.SquatchBrandingConfig) === null || _y === void 0 ? void 0 : _y.primaryButton) === null || _z === void 0 ? void 0 : _z.buttonColor) === null || _0 === void 0 ? void 0 : _0.label) || "#FFFFFF"};
-  --sqm-primary-button-color-border: ${((_3 = (_2 = (_1 = window.SquatchBrandingConfig) === null || _1 === void 0 ? void 0 : _1.primaryButton) === null || _2 === void 0 ? void 0 : _2.buttonColor) === null || _3 === void 0 ? void 0 : _3.border) ||
-  "transparent"};
-  --sqm-primary-button-radius: ${((_5 = (_4 = window.SquatchBrandingConfig) === null || _4 === void 0 ? void 0 : _4.primaryButton) === null || _5 === void 0 ? void 0 : _5.borderRadius) + "px"};
-  --sqm-secondary-button-background: ${((_7 = (_6 = window.SquatchBrandingConfig) === null || _6 === void 0 ? void 0 : _6.secondaryButton) === null || _7 === void 0 ? void 0 : _7.buttonColor) || "#191414"};
-  --sqm-secondary-button-background-hover: ${(_10 = (_9 = (_8 = window.SquatchBrandingConfig) === null || _8 === void 0 ? void 0 : _8.secondaryButton) === null || _9 === void 0 ? void 0 : _9.buttonHoverColor) === null || _10 === void 0 ? void 0 : _10.background};
-  --sqm-secondary-button-color-hover: ${(_13 = (_12 = (_11 = window.SquatchBrandingConfig) === null || _11 === void 0 ? void 0 : _11.secondaryButton) === null || _12 === void 0 ? void 0 : _12.buttonHoverColor) === null || _13 === void 0 ? void 0 : _13.label};
-  --sqm-secondary-button-border-color-hover: ${(_16 = (_15 = (_14 = window.SquatchBrandingConfig) === null || _14 === void 0 ? void 0 : _14.secondaryButton) === null || _15 === void 0 ? void 0 : _15.buttonHoverColor) === null || _16 === void 0 ? void 0 : _16.border};
-  --sqm-secondary-button-color: ${((_19 = (_18 = (_17 = window.SquatchBrandingConfig) === null || _17 === void 0 ? void 0 : _17.secondaryButton) === null || _18 === void 0 ? void 0 : _18.buttonColor) === null || _19 === void 0 ? void 0 : _19.label) ||
-  "#FFFFFF"};
-  --sqm-secondary-button-color-border: ${((_22 = (_21 = (_20 = window.SquatchBrandingConfig) === null || _20 === void 0 ? void 0 : _20.secondaryButton) === null || _21 === void 0 ? void 0 : _21.buttonColor) === null || _22 === void 0 ? void 0 : _22.border) ||
-  "#FFFFFF"};
-  --sqm-secondary-button-radius: ${((_24 = (_23 = window.SquatchBrandingConfig) === null || _23 === void 0 ? void 0 : _23.secondaryButton) === null || _24 === void 0 ? void 0 : _24.borderRadius) + "px"};
-
-  --sqm-border-radius-normal: ${((_26 = (_25 = window.SquatchBrandingConfig) === null || _25 === void 0 ? void 0 : _25.border) === null || _26 === void 0 ? void 0 : _26.borderRadius) + "px"}; 
-  --sqm-border-color: ${(_28 = (_27 = window.SquatchBrandingConfig) === null || _27 === void 0 ? void 0 : _27.border) === null || _28 === void 0 ? void 0 : _28.borderColor};
-
-  --sqm-border-thickness: ${((_30 = (_29 = window.SquatchBrandingConfig) === null || _29 === void 0 ? void 0 : _29.border) === null || _30 === void 0 ? void 0 : _30.borderThickness) + "px"};
-
-  --sqm-accent-color-icon: ${((_33 = (_32 = (_31 = window.SquatchBrandingConfig) === null || _31 === void 0 ? void 0 : _31.color) === null || _32 === void 0 ? void 0 : _32.accentColorShades) === null || _33 === void 0 ? void 0 : _33.icon) || "#1ed760"};
-  --sqm-accent-color-text: ${((_36 = (_35 = (_34 = window.SquatchBrandingConfig) === null || _34 === void 0 ? void 0 : _34.color) === null || _35 === void 0 ? void 0 : _35.accentColorShades) === null || _36 === void 0 ? void 0 : _36.text) || "#fff"};    
-  --sqm-accent-color-border: ${((_39 = (_38 = (_37 = window.SquatchBrandingConfig) === null || _37 === void 0 ? void 0 : _37.color) === null || _38 === void 0 ? void 0 : _38.accentColorShades) === null || _39 === void 0 ? void 0 : _39.border) || "#1ed760"};
-  --sqm-accent-color-background: ${((_42 = (_41 = (_40 = window.SquatchBrandingConfig) === null || _40 === void 0 ? void 0 : _40.color) === null || _41 === void 0 ? void 0 : _41.accentColorShades) === null || _42 === void 0 ? void 0 : _42.background) ||
-  "#0d4a27"};
-
-  --sqm-success-color-icon: ${((_45 = (_44 = (_43 = window.SquatchBrandingConfig) === null || _43 === void 0 ? void 0 : _43.color) === null || _44 === void 0 ? void 0 : _44.success) === null || _45 === void 0 ? void 0 : _45.iconAndBadge) ||
-  "var(--sl-color-success-600)"};
-  --sqm-success-color-text: ${((_48 = (_47 = (_46 = window.SquatchBrandingConfig) === null || _46 === void 0 ? void 0 : _46.color) === null || _47 === void 0 ? void 0 : _47.success) === null || _48 === void 0 ? void 0 : _48.text) ||
-  "var(--sl-color-success-950)"};
-  --sqm-success-color-border: ${((_51 = (_50 = (_49 = window.SquatchBrandingConfig) === null || _49 === void 0 ? void 0 : _49.color) === null || _50 === void 0 ? void 0 : _50.success) === null || _51 === void 0 ? void 0 : _51.border) ||
-  "var(--sl-color-success-400)"};
-  --sqm-success-color-background: ${((_54 = (_53 = (_52 = window.SquatchBrandingConfig) === null || _52 === void 0 ? void 0 : _52.color) === null || _53 === void 0 ? void 0 : _53.success) === null || _54 === void 0 ? void 0 : _54.background) ||
-  "var(--sl-color-success-300)"};
+  --sqm-text: ${((_c = (_b = config === null || config === void 0 ? void 0 : config.color) === null || _b === void 0 ? void 0 : _b.textColorShades) === null || _c === void 0 ? void 0 : _c.mainText) || "white"};
+  --sqm-text-subdued: ${(_e = (_d = config === null || config === void 0 ? void 0 : config.color) === null || _d === void 0 ? void 0 : _d.textColorShades) === null || _e === void 0 ? void 0 : _e.subduedText};
+
+  --sqm-primary-color: ${((_f = config === null || config === void 0 ? void 0 : config.main) === null || _f === void 0 ? void 0 : _f.brandColor) || "#1ed760"};
+  --sqm-primary-button-background:${((_h = (_g = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _g === void 0 ? void 0 : _g.buttonColor) === null || _h === void 0 ? void 0 : _h.background) || "#1ed760"};
+  --sqm-primary-button-background-hover: ${((_k = (_j = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _j === void 0 ? void 0 : _j.buttonHoverColor) === null || _k === void 0 ? void 0 : _k.background) || "#1ed760"};
+  --sqm-primary-button-color-hover: ${(_m = (_l = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _l === void 0 ? void 0 : _l.buttonHoverColor) === null || _m === void 0 ? void 0 : _m.label};
+  --sqm-primary-button-border-color-hover: ${(_p = (_o = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _o === void 0 ? void 0 : _o.buttonHoverColor) === null || _p === void 0 ? void 0 : _p.border};
+  --sqm-primary-button-color: ${((_r = (_q = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _q === void 0 ? void 0 : _q.buttonColor) === null || _r === void 0 ? void 0 : _r.label) || "#FFFFFF"};
+  --sqm-primary-button-color-border: ${((_t = (_s = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _s === void 0 ? void 0 : _s.buttonColor) === null || _t === void 0 ? void 0 : _t.border) || "transparent"};
+  --sqm-primary-button-radius: ${((_u = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _u === void 0 ? void 0 : _u.borderRadius) + "px"};
+  --sqm-secondary-button-background: ${((_v = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _v === void 0 ? void 0 : _v.buttonColor) || "#191414"};
+  --sqm-secondary-button-background-hover: ${(_x = (_w = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _w === void 0 ? void 0 : _w.buttonHoverColor) === null || _x === void 0 ? void 0 : _x.background};
+  --sqm-secondary-button-color-hover: ${(_z = (_y = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _y === void 0 ? void 0 : _y.buttonHoverColor) === null || _z === void 0 ? void 0 : _z.label};
+  --sqm-secondary-button-border-color-hover: ${(_1 = (_0 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _0 === void 0 ? void 0 : _0.buttonHoverColor) === null || _1 === void 0 ? void 0 : _1.border};
+  --sqm-secondary-button-color: ${((_3 = (_2 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _2 === void 0 ? void 0 : _2.buttonColor) === null || _3 === void 0 ? void 0 : _3.label) || "#FFFFFF"};
+  --sqm-secondary-button-color-border: ${((_5 = (_4 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _4 === void 0 ? void 0 : _4.buttonColor) === null || _5 === void 0 ? void 0 : _5.border) || "#FFFFFF"};
+  --sqm-secondary-button-radius: ${((_6 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _6 === void 0 ? void 0 : _6.borderRadius) + "px"};
+
+  --sqm-border-radius-normal: ${((_7 = config === null || config === void 0 ? void 0 : config.border) === null || _7 === void 0 ? void 0 : _7.borderRadius) + "px"}; 
+  --sqm-border-color: ${(_8 = config === null || config === void 0 ? void 0 : config.border) === null || _8 === void 0 ? void 0 : _8.borderColor};
+
+  --sqm-border-thickness: ${((_9 = config === null || config === void 0 ? void 0 : config.border) === null || _9 === void 0 ? void 0 : _9.borderThickness) + "px"};
+
+  --sqm-accent-color-icon: ${((_11 = (_10 = config === null || config === void 0 ? void 0 : config.color) === null || _10 === void 0 ? void 0 : _10.accentColorShades) === null || _11 === void 0 ? void 0 : _11.icon) || "#1ed760"};
+  --sqm-accent-color-text: ${((_13 = (_12 = config === null || config === void 0 ? void 0 : config.color) === null || _12 === void 0 ? void 0 : _12.accentColorShades) === null || _13 === void 0 ? void 0 : _13.text) || "#fff"};    
+  --sqm-accent-color-border: ${((_15 = (_14 = config === null || config === void 0 ? void 0 : config.color) === null || _14 === void 0 ? void 0 : _14.accentColorShades) === null || _15 === void 0 ? void 0 : _15.border) || "#1ed760"};
+  --sqm-accent-color-background: ${((_17 = (_16 = config === null || config === void 0 ? void 0 : config.color) === null || _16 === void 0 ? void 0 : _16.accentColorShades) === null || _17 === void 0 ? void 0 : _17.background) || "#0d4a27"};
+
+  --sqm-success-color-icon: ${((_19 = (_18 = config === null || config === void 0 ? void 0 : config.color) === null || _18 === void 0 ? void 0 : _18.success) === null || _19 === void 0 ? void 0 : _19.iconAndBadge) || "var(--sl-color-success-600)"};
+  --sqm-success-color-text: ${((_21 = (_20 = config === null || config === void 0 ? void 0 : config.color) === null || _20 === void 0 ? void 0 : _20.success) === null || _21 === void 0 ? void 0 : _21.text) || "var(--sl-color-success-950)"};
+  --sqm-success-color-border: ${((_23 = (_22 = config === null || config === void 0 ? void 0 : config.color) === null || _22 === void 0 ? void 0 : _22.success) === null || _23 === void 0 ? void 0 : _23.border) || "var(--sl-color-success-400)"};
+  --sqm-success-color-background: ${((_25 = (_24 = config === null || config === void 0 ? void 0 : config.color) === null || _24 === void 0 ? void 0 : _24.success) === null || _25 === void 0 ? void 0 : _25.background) || "var(--sl-color-success-300)"};
   
-  --sqm-warning-color-icon: ${((_57 = (_56 = (_55 = window.SquatchBrandingConfig) === null || _55 === void 0 ? void 0 : _55.color) === null || _56 === void 0 ? void 0 : _56.warning) === null || _57 === void 0 ? void 0 : _57.iconAndBadge) ||
-  "var(--sl-color-warning-600)"};
-  --sqm-warning-color-text: ${((_60 = (_59 = (_58 = window.SquatchBrandingConfig) === null || _58 === void 0 ? void 0 : _58.color) === null || _59 === void 0 ? void 0 : _59.warning) === null || _60 === void 0 ? void 0 : _60.text) ||
-  "var(--sl-color-warning-950)"};
-  --sqm-warning-color-border: ${((_63 = (_62 = (_61 = window.SquatchBrandingConfig) === null || _61 === void 0 ? void 0 : _61.color) === null || _62 === void 0 ? void 0 : _62.warning) === null || _63 === void 0 ? void 0 : _63.border) ||
-  "var(--sl-color-warning-400)"};
-  --sqm-warning-color-background: ${((_66 = (_65 = (_64 = window.SquatchBrandingConfig) === null || _64 === void 0 ? void 0 : _64.color) === null || _65 === void 0 ? void 0 : _65.warning) === null || _66 === void 0 ? void 0 : _66.background) ||
-  "var(--sl-color-warning-300)"};
-
-  --sqm-danger-color-icon: ${((_69 = (_68 = (_67 = window.SquatchBrandingConfig) === null || _67 === void 0 ? void 0 : _67.color) === null || _68 === void 0 ? void 0 : _68.critical) === null || _69 === void 0 ? void 0 : _69.iconAndBadge) ||
-  "var(--sl-color-danger-600)"};
-  --sqm-danger-color-text: ${((_72 = (_71 = (_70 = window.SquatchBrandingConfig) === null || _70 === void 0 ? void 0 : _70.color) === null || _71 === void 0 ? void 0 : _71.critical) === null || _72 === void 0 ? void 0 : _72.text) ||
-  "var(--sl-color-danger-950)"};
-  --sqm-danger-color-border: ${((_75 = (_74 = (_73 = window.SquatchBrandingConfig) === null || _73 === void 0 ? void 0 : _73.color) === null || _74 === void 0 ? void 0 : _74.critical) === null || _75 === void 0 ? void 0 : _75.border) ||
-  "var(--sl-color-danger-400)"};
-  --sqm-danger-color-background: ${((_78 = (_77 = (_76 = window.SquatchBrandingConfig) === null || _76 === void 0 ? void 0 : _76.color) === null || _77 === void 0 ? void 0 : _77.critical) === null || _78 === void 0 ? void 0 : _78.background) ||
-  "var(--sl-color-danger-300)"};
-
-  --sqm-informative-color-icon: ${((_81 = (_80 = (_79 = window.SquatchBrandingConfig) === null || _79 === void 0 ? void 0 : _79.color) === null || _80 === void 0 ? void 0 : _80.informative) === null || _81 === void 0 ? void 0 : _81.iconAndBadge) ||
-  "var(--sl-color-sky-600)"};
-  --sqm-informative-color-text: ${((_84 = (_83 = (_82 = window.SquatchBrandingConfig) === null || _82 === void 0 ? void 0 : _82.color) === null || _83 === void 0 ? void 0 : _83.informative) === null || _84 === void 0 ? void 0 : _84.text) ||
-  "var(--sl-color-sky-950)"};
-  --sqm-informative-color-border: ${((_87 = (_86 = (_85 = window.SquatchBrandingConfig) === null || _85 === void 0 ? void 0 : _85.color) === null || _86 === void 0 ? void 0 : _86.informative) === null || _87 === void 0 ? void 0 : _87.border) ||
-  "var(--sl-color-sky-400)"};
-  --sqm-informative-color-background: ${((_90 = (_89 = (_88 = window.SquatchBrandingConfig) === null || _88 === void 0 ? void 0 : _88.color) === null || _89 === void 0 ? void 0 : _89.informative) === null || _90 === void 0 ? void 0 : _90.background) ||
-  "var(--sl-color-sky-300)"};
-
-  --sqm-input-background: ${((_93 = (_92 = (_91 = window.SquatchBrandingConfig) === null || _91 === void 0 ? void 0 : _91.formFields) === null || _92 === void 0 ? void 0 : _92.formFieldColor) === null || _93 === void 0 ? void 0 : _93.background) ||
-  "#fff"};
-  --sqm-input-border-color: ${((_96 = (_95 = (_94 = window.SquatchBrandingConfig) === null || _94 === void 0 ? void 0 : _94.formFields) === null || _95 === void 0 ? void 0 : _95.formFieldColor) === null || _96 === void 0 ? void 0 : _96.border) ||
-  "#eaeaea"};
-  --sqm-input-border-radius: ${((_98 = (_97 = window.SquatchBrandingConfig) === null || _97 === void 0 ? void 0 : _97.formFields) === null || _98 === void 0 ? void 0 : _98.borderRadius) + "px"};
-  --sqm-input-color: ${((_101 = (_100 = (_99 = window.SquatchBrandingConfig) === null || _99 === void 0 ? void 0 : _99.formFields) === null || _100 === void 0 ? void 0 : _100.formFieldColor) === null || _101 === void 0 ? void 0 : _101.inputText) ||
-  "#000"};
-  --sqm-input-label-color: ${((_104 = (_103 = (_102 = window.SquatchBrandingConfig) === null || _102 === void 0 ? void 0 : _102.color) === null || _103 === void 0 ? void 0 : _103.textColorShades) === null || _104 === void 0 ? void 0 : _104.mainText) || "#000"};
-  --sqm-input-border-color-focus: ${((_106 = (_105 = window.SquatchBrandingConfig) === null || _105 === void 0 ? void 0 : _105.formFields) === null || _106 === void 0 ? void 0 : _106.selectedStateColor) || "#eaeaea"};
-  --sqm-input-border-color-hover: ${((_108 = (_107 = window.SquatchBrandingConfig) === null || _107 === void 0 ? void 0 : _107.formFields) === null || _108 === void 0 ? void 0 : _108.hoverStateColor) || "#ccc"};
+  --sqm-warning-color-icon: ${((_27 = (_26 = config === null || config === void 0 ? void 0 : config.color) === null || _26 === void 0 ? void 0 : _26.warning) === null || _27 === void 0 ? void 0 : _27.iconAndBadge) || "var(--sl-color-warning-600)"};
+  --sqm-warning-color-text: ${((_29 = (_28 = config === null || config === void 0 ? void 0 : config.color) === null || _28 === void 0 ? void 0 : _28.warning) === null || _29 === void 0 ? void 0 : _29.text) || "var(--sl-color-warning-950)"};
+  --sqm-warning-color-border: ${((_31 = (_30 = config === null || config === void 0 ? void 0 : config.color) === null || _30 === void 0 ? void 0 : _30.warning) === null || _31 === void 0 ? void 0 : _31.border) || "var(--sl-color-warning-400)"};
+  --sqm-warning-color-background: ${((_33 = (_32 = config === null || config === void 0 ? void 0 : config.color) === null || _32 === void 0 ? void 0 : _32.warning) === null || _33 === void 0 ? void 0 : _33.background) || "var(--sl-color-warning-300)"};
+
+  --sqm-danger-color-icon: ${((_35 = (_34 = config === null || config === void 0 ? void 0 : config.color) === null || _34 === void 0 ? void 0 : _34.critical) === null || _35 === void 0 ? void 0 : _35.iconAndBadge) || "var(--sl-color-danger-600)"};
+  --sqm-danger-color-text: ${((_37 = (_36 = config === null || config === void 0 ? void 0 : config.color) === null || _36 === void 0 ? void 0 : _36.critical) === null || _37 === void 0 ? void 0 : _37.text) || "var(--sl-color-danger-950)"};
+  --sqm-danger-color-border: ${((_39 = (_38 = config === null || config === void 0 ? void 0 : config.color) === null || _38 === void 0 ? void 0 : _38.critical) === null || _39 === void 0 ? void 0 : _39.border) || "var(--sl-color-danger-400)"};
+  --sqm-danger-color-background: ${((_41 = (_40 = config === null || config === void 0 ? void 0 : config.color) === null || _40 === void 0 ? void 0 : _40.critical) === null || _41 === void 0 ? void 0 : _41.background) || "var(--sl-color-danger-300)"};
+
+  --sqm-informative-color-icon: ${((_43 = (_42 = config === null || config === void 0 ? void 0 : config.color) === null || _42 === void 0 ? void 0 : _42.informative) === null || _43 === void 0 ? void 0 : _43.iconAndBadge) || "var(--sl-color-sky-600)"};
+  --sqm-informative-color-text: ${((_45 = (_44 = config === null || config === void 0 ? void 0 : config.color) === null || _44 === void 0 ? void 0 : _44.informative) === null || _45 === void 0 ? void 0 : _45.text) || "var(--sl-color-sky-950)"};
+  --sqm-informative-color-border: ${((_47 = (_46 = config === null || config === void 0 ? void 0 : config.color) === null || _46 === void 0 ? void 0 : _46.informative) === null || _47 === void 0 ? void 0 : _47.border) || "var(--sl-color-sky-400)"};
+  --sqm-informative-color-background: ${((_49 = (_48 = config === null || config === void 0 ? void 0 : config.color) === null || _48 === void 0 ? void 0 : _48.informative) === null || _49 === void 0 ? void 0 : _49.background) || "var(--sl-color-sky-300)"};
+
+  --sqm-input-background: ${((_51 = (_50 = config === null || config === void 0 ? void 0 : config.formFields) === null || _50 === void 0 ? void 0 : _50.formFieldColor) === null || _51 === void 0 ? void 0 : _51.background) || "#fff"};
+  --sqm-input-border-color: ${((_53 = (_52 = config === null || config === void 0 ? void 0 : config.formFields) === null || _52 === void 0 ? void 0 : _52.formFieldColor) === null || _53 === void 0 ? void 0 : _53.border) || "#eaeaea"};
+  --sqm-input-border-radius: ${((_54 = config === null || config === void 0 ? void 0 : config.formFields) === null || _54 === void 0 ? void 0 : _54.borderRadius) + "px"};
+  --sqm-input-color: ${((_56 = (_55 = config === null || config === void 0 ? void 0 : config.formFields) === null || _55 === void 0 ? void 0 : _55.formFieldColor) === null || _56 === void 0 ? void 0 : _56.inputText) || "#000"};
+  --sqm-input-label-color: ${((_58 = (_57 = config === null || config === void 0 ? void 0 : config.color) === null || _57 === void 0 ? void 0 : _57.textColorShades) === null || _58 === void 0 ? void 0 : _58.mainText) || "#000"};
+  --sqm-input-border-color-focus: ${((_59 = config === null || config === void 0 ? void 0 : config.formFields) === null || _59 === void 0 ? void 0 : _59.selectedStateColor) || "#eaeaea"};
+  --sqm-input-border-color-hover: ${((_60 = config === null || config === void 0 ? void 0 : config.formFields) === null || _60 === void 0 ? void 0 : _60.hoverStateColor) || "#ccc"};
   --sqm-input-label-font-size: inherit;
   --sqm-input-disabled-color: var(--sqm-text-subdued);
-  --sqm-input-disabled-background: ${(_110 = (_109 = window.SquatchBrandingConfig) === null || _109 === void 0 ? void 0 : _109.formFields) === null || _110 === void 0 ? void 0 : _110.disabledBackgroundColor};
+  --sqm-input-disabled-background: ${(_61 = config === null || config === void 0 ? void 0 : config.formFields) === null || _61 === void 0 ? void 0 : _61.disabledBackgroundColor};
 
   --sl-color-primary-100: var(--sqm-primary-color);
   --sl-color-primary-200: var(--sqm-primary-color);
@@ -707,18 +683,18 @@ html {
 }
 
 body {
-  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-family: ${((_62 = config === null || config === void 0 ? void 0 : config.main) === null || _62 === void 0 ? void 0 : _62.brandFont) || "var(--sl-font-sans)"};
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
   color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
-  background-color: var(--sqm-portal-background) !important;
+  background-color: var(--sqm-portal-background);
 }
 
 .story-div {
-  background: var(--sqm-portal-background) !important;
+  background: var(--sqm-portal-background);
   color: var(--sqm-text) !important;
 }
 
@@ -830,7 +806,7 @@ sl-details::part(summary) {
 *::part(primarybutton-base),
 sl-button[type="primary"]::part(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);
@@ -942,4 +918,4 @@ sl-icon::part(base):hover {
 
 
 `;
-export default style;
+};