@saasquatch/mint-components 1.15.0-63 → 1.15.0-65

package/dist/cjs/{IndirectTaxDetailsView-79703291.js → IndirectTaxDetailsView-eb18813f.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const JSS = require('./JSS-8503a151.js');
-const utils = require('./utils-62fd5f09.js');
+const utils = require('./utils-7bcbf319.js');
 
 const style = {
   Description: {

package/dist/cjs/{ShadowViewAddon-e0aa9b07.js → ShadowViewAddon-f06fc674.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -105,7 +105,7 @@ function ShareButtonView(props, children) {
   const vanillaStyle = `
 	sl-button::part(base) {
 	  border: ${props.border || "none"};
-	
+    font-family: var(--sqm-primary-font);
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor

package/dist/cjs/{global-38031ab9.js → global-0c73fe16.js}

@@ -26842,6 +26842,35 @@ sl-textarea::part(textarea-label):focus {
   -webkit-text-fill-color: var(--sqm-input-color, white) !important;
 }
 
+*::part(input)::placeholder,
+*::part(select)::placeholder, 
+*::part(textarea)::placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-webkit-input-placeholder,
+*::part(select)::-webkit-input-placeholder,
+*::part(textarea)::-webkit-input-placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-moz-placeholder,
+*::part(select)::-moz-placeholder,
+*::part(textarea)::-moz-placeholder {
+  font-family: var(--sqm-primary-font);
+  opacity: 1; /* Firefox adds an opacity to placeholders by default */
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-ms-input-placeholder,
+*::part(select)::-ms-input-placeholder,
+*::part(textarea)::-ms-input-placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
 a {
   font-family: var(--sqm-primary-font);
   color: inherit;

package/dist/cjs/loader.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-38031ab9.js');
+require('./global-0c73fe16.js');
 require('./dom-context-hooks.module-7fa676ae.js');
 require('./index.module-4f54e412.js');
 

package/dist/cjs/mint-components.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-require('./global-38031ab9.js');
+require('./global-0c73fe16.js');
 require('./dom-context-hooks.module-7fa676ae.js');
 require('./index.module-4f54e412.js');
 

package/dist/cjs/sqm-banking-info-form_10.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.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');
@@ -16,8 +16,8 @@ const reRender = require('./re-render-d516138a.js');
 const useChildElements = require('./useChildElements-966c9041.js');
 const luxon = require('./luxon-949beaf2.js');
 const useReferralTable = require('./useReferralTable-90d4d6e9.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-79703291.js');
-const utils$1 = require('./utils-62fd5f09.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-eb18813f.js');
+const utils$1 = require('./utils-7bcbf319.js');
 const data = require('./data-d4339c2e.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-3b34dab1.js');

package/dist/cjs/sqm-big-stat_42.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.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');
@@ -23,7 +23,7 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const usePortalLogin = require('./usePortalLogin-6aa864ef.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-9a0c5e91.js');
-const ShadowViewAddon = require('./ShadowViewAddon-e0aa9b07.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f06fc674.js');
 require('./sqm-portal-container-view-07e4343f.js');
 const usePayoutStatus = require('./usePayoutStatus-3b34dab1.js');
 

package/dist/cjs/sqm-code-verification.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/sqm-email-verification.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -167,11 +167,11 @@ const style = {
   },
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
-      borderRadius: "var(--sl-input-border-radius-medium)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-danger-color-border)",
+      borderRadius: "var(--sqm-input-border-radius)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
   },
 };
@@ -188,6 +188,133 @@ a {
   text-decoration: underline;
   cursor: pointer;
 }
+
+*::part(primarybutton-base),
+sl-button[type="primary"]::part(base) {
+  font-family: var(--sqm-primary-font);
+  width: 100%;
+  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);
+}
+
+*::part(primarybutton-base):hover,
+sl-button[type="primary"]::part(base):hover{
+  background-color: var(--sqm-primary-button-background-hover);
+  border-color: var(--sqm-primary-button-border-color-hover);
+  color: var(--sqm-primary-button-color-hover);
+}
+
+
+*::part(primarybutton-base):focus,
+sl-button[type="primary"]::part(base):focus {
+  box-shadow: none;
+}
+
+*::part(secondarybutton-base),
+sl-button[type="secondary"]::part(base) {
+font-family: var(--sqm-primary-font);
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover,
+sl-button[type="secondary"]::part(base):hover {
+  background-color: var(--sqm-secondary-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){
+  font-family: var(--sqm-primary-font);
+  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+  font-weight: var(--sl-font-weight-semibold);
+  color: var(--sqm-input-label-color, var(--sqm-text), black);
+}
+
+*::part(input-base), *::part(select-base), *::part(textarea-base){
+  font-family: var(--sqm-primary-font);
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
+  border-color: var(--sqm-border-color-hover);
+}
+
+*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{
+  border-color: var(--sqm-border-color-focus);
+}
+
+sqm-name-fields::part(input-base) {
+  font-family: var(--sqm-primary-font);
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textarea::part(textarea-label):focus {
+  border-color: var(--sqm-border-color-focus);
+}
+
+*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
+  background: var(--sqm-input-disabled-background, #f5f5f5);
+  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+}
+
+*::part(input):-webkit-autofill {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input):-webkit-autofill:hover {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input):-webkit-autofill:focus {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input)::placeholder,
+*::part(select)::placeholder, 
+*::part(textarea)::placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-webkit-input-placeholder,
+*::part(select)::-webkit-input-placeholder,
+*::part(textarea)::-webkit-input-placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-moz-placeholder,
+*::part(select)::-moz-placeholder,
+*::part(textarea)::-moz-placeholder {
+  font-family: var(--sqm-primary-font);
+  opacity: 1; /* Firefox adds an opacity to placeholders by default */
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-ms-input-placeholder,
+*::part(select)::-ms-input-placeholder,
+*::part(textarea)::-ms-input-placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
+
 `;
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();

package/dist/cjs/sqm-empty_4.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 require('./index.module-4f54e412.js');
 const utils = require('./utils-7cbd60cc.js');

package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/sqm-pagination_3.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/{sqm-portal-email-verification-view-f1671646.js → sqm-portal-email-verification-view-405c000d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
 const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-38031ab9.js');
+require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 require('./sqm-text-span-view-7a61ae4c.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f1671646.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-405c000d.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/cjs/{sqm-portal-profile-view-5aabad8c.js → sqm-portal-profile-view-92dc7a3a.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-38031ab9.js');
+require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-7cbd60cc.js');
 require('./JSS-8503a151.js');
 require('./sqm-text-span-view-7a61ae4c.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-5aabad8c.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-92dc7a3a.js');
 const utilities = require('./utilities-9a0c5e91.js');
 
 const GET_USER = index_module.dist.gql `

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-38031ab9.js');
+require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 require('./cjs-1066ec21.js');
@@ -23,20 +23,20 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-6a1e63de.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-b61c8bdf.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-de90ef03.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-ec7a5c53.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f1671646.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-405c000d.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-0a8d3243.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8847804c.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-5aabad8c.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-92dc7a3a.js');
 require('./utilities-9a0c5e91.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-0c3b2f48.js');
-const ShadowViewAddon = require('./ShadowViewAddon-e0aa9b07.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f06fc674.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-79703291.js');
-const utils = require('./utils-62fd5f09.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-eb18813f.js');
+const utils = require('./utils-7bcbf319.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -21,6 +21,7 @@ const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
 
     sl-tab::part(base) {
       color: ${textColor};
+      font-family: var(--sqm-primary-font);
     }
 
     sl-tab-group {
@@ -29,6 +30,7 @@ const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
 
     sl-tab-group::part(tabs) {
       border-bottom: 2px solid var(--sqm-border-color);
+      font-family: var(--sqm-primary-font);
     }
   `;
   return (index.h(index.Host, null,

package/dist/cjs/sqm-tax-and-cash.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-38031ab9.js');
+require('./global-0c73fe16.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils$1 = require('./utils-7cbd60cc.js');
 require('./JSS-8503a151.js');
-const utils = require('./utils-62fd5f09.js');
+const utils = require('./utils-7bcbf319.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
 const data = require('./data-d4339c2e.js');
 

package/dist/cjs/{utils-62fd5f09.js → utils-7bcbf319.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-38031ab9.js');
+const global = require('./global-0c73fe16.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -47,7 +47,7 @@ export function ShareButtonView(props, children) {
   const vanillaStyle = `
 	sl-button::part(base) {
 	  border: ${props.border || "none"};
-	
+    font-family: var(--sqm-primary-font);
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor

package/dist/collection/components/sqm-tabs/sqm-tabs-view.js

@@ -11,6 +11,7 @@ export const TabsView = ({ content, placement, textColor = "var(--sqm-text)", })
 
     sl-tab::part(base) {
       color: ${textColor};
+      font-family: var(--sqm-primary-font);
     }
 
     sl-tab-group {
@@ -19,6 +20,7 @@ export const TabsView = ({ content, placement, textColor = "var(--sqm-text)", })
 
     sl-tab-group::part(tabs) {
       border-bottom: 2px solid var(--sqm-border-color);
+      font-family: var(--sqm-primary-font);
     }
   `;
   return (h(Host, null,

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.js

@@ -34,11 +34,11 @@ const style = {
   },
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
-      borderRadius: "var(--sl-input-border-radius-medium)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-danger-color-border)",
+      borderRadius: "var(--sqm-input-border-radius)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
   },
 };
@@ -55,6 +55,133 @@ a {
   text-decoration: underline;
   cursor: pointer;
 }
+
+*::part(primarybutton-base),
+sl-button[type="primary"]::part(base) {
+  font-family: var(--sqm-primary-font);
+  width: 100%;
+  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);
+}
+
+*::part(primarybutton-base):hover,
+sl-button[type="primary"]::part(base):hover{
+  background-color: var(--sqm-primary-button-background-hover);
+  border-color: var(--sqm-primary-button-border-color-hover);
+  color: var(--sqm-primary-button-color-hover);
+}
+
+
+*::part(primarybutton-base):focus,
+sl-button[type="primary"]::part(base):focus {
+  box-shadow: none;
+}
+
+*::part(secondarybutton-base),
+sl-button[type="secondary"]::part(base) {
+font-family: var(--sqm-primary-font);
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover,
+sl-button[type="secondary"]::part(base):hover {
+  background-color: var(--sqm-secondary-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){
+  font-family: var(--sqm-primary-font);
+  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+  font-weight: var(--sl-font-weight-semibold);
+  color: var(--sqm-input-label-color, var(--sqm-text), black);
+}
+
+*::part(input-base), *::part(select-base), *::part(textarea-base){
+  font-family: var(--sqm-primary-font);
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
+  border-color: var(--sqm-border-color-hover);
+}
+
+*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{
+  border-color: var(--sqm-border-color-focus);
+}
+
+sqm-name-fields::part(input-base) {
+  font-family: var(--sqm-primary-font);
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textarea::part(textarea-label):focus {
+  border-color: var(--sqm-border-color-focus);
+}
+
+*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
+  background: var(--sqm-input-disabled-background, #f5f5f5);
+  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+}
+
+*::part(input):-webkit-autofill {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input):-webkit-autofill:hover {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input):-webkit-autofill:focus {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input)::placeholder,
+*::part(select)::placeholder, 
+*::part(textarea)::placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-webkit-input-placeholder,
+*::part(select)::-webkit-input-placeholder,
+*::part(textarea)::-webkit-input-placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-moz-placeholder,
+*::part(select)::-moz-placeholder,
+*::part(textarea)::-moz-placeholder {
+  font-family: var(--sqm-primary-font);
+  opacity: 1; /* Firefox adds an opacity to placeholders by default */
+  color: var(--sqm-text-subdued);
+}
+
+*::part(input)::-ms-input-placeholder,
+*::part(select)::-ms-input-placeholder,
+*::part(textarea)::-ms-input-placeholder {
+  font-family: var(--sqm-primary-font);
+  color: var(--sqm-text-subdued);
+}
+
+
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();