@saasquatch/mint-components 1.15.0-22 → 1.15.0-24

package/dist/cjs/{ShadowViewAddon-d7977499.js → ShadowViewAddon-c08a66ce.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
@@ -1572,6 +1572,7 @@ function PortalChangePasswordView(props) {
   const { states, callbacks } = props;
   const style = {
     Dialog: {
+      background: "var(--sqm-portal-background)",
       padding: "0",
       "&::part(close-button)": {
         "margin-top": "var(--sl-spacing-medium)",
@@ -1626,14 +1627,14 @@ function PortalChangePasswordView(props) {
               index.h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
               index.h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
-              index.h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
-              index.h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+              index.h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", exportparts: "base: primarybutton-base", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
+              index.h("sl-button", { class: sheet.classes.CancelButton, type: "text", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
       }))),
     index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
       labelMargin: "x-large",
       padding: "xxx-large",
       label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
-      content: (index.h("sl-button", { onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+      content: (index.h("sl-button", { exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
     }),
       index.h("style", { type: "text/css" }, styleString))));
 }

package/dist/cjs/{global-f06aabc0.js → global-24116a83.js}

@@ -26518,6 +26518,26 @@ html {
   --sqm-secondary-button-color: #FFFFFF; /* Spotify White for text */
   --sqm-secondary-button-color-border: #FFFFFF; /* Spotify White for border */
   --sqm-secondary-button-radius: 30px;
+
+  --sqm-input-background: #121212;
+  --sqm-input-border: 1px solid #7c7c7c;
+  --sqm-input-border-radius: 30px;
+  --sqm-input-color: white;
+  --sqm-input-focus-border: 1px solid #1ed760;
+  --sqm-input-label-color: white;
+  --sqm-border-width: 1px;
+  --sqm-input-label-font-size: white;
+  --sqm-input-disabled-color: white;
+  --sqm-input-disabled-background: #303030;
+
+  --sl-input-color: var(--sqm-input-color);
+  --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: white !important;
+  --sl-input-border-color: #7c7c7c;
+  --sl-input-border-color-hover: white;
 }
 
 body {
@@ -26598,15 +26618,6 @@ sl-badge[type="neutral"]::part(base) {
   color: var(--sqm-neutral-badge-text-color, var(--sl-color-neutral-700));
 }
 
-// .terms-link,
-// .terms-link:visited {
-//   color: var(--sl-color-gray-500);
-//   text-decoration: none;
-// }
-// .terms-link:hover {
-//   color: var(--sl-color-gray-600);
-// }
-
 h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
 }
@@ -26693,8 +26704,6 @@ sl-details::part(summary) {
   background-color: var(--sqm-primary-button-background-hover);
 }
 
-
-
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
@@ -26714,27 +26723,32 @@ sl-details::part(summary) {
   box-shadow: none;
 }
 
-sl-input::part(input-base){
-  border: 3px dashed red !important;
+*::part(input-label), *::part(select-label), *::part(textarea-label){
+  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);
 }
 
-sl-input::part(input){
-  broder: 3px dashed red !important;
+*::part(input-base), *::part(select-base), *::part(textarea-base){
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-medium), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-width, 1px);
 }
 
-sl-input::part(input-base){
-  border: 3px dashed red !important;
+*::part(input-label):focus,
+*::part(select-label):focus,
+*::part(textarea-label):focus {
+  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
+  background: pink !important;
 }
 
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-size: var(--sl-input-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
+*::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));
 }
 
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
+
 
 *::part(menuitem-base):hover{
   background-color: var(--sl-color-gray-200);

package/dist/cjs/loader.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 require('./stencil-hooks.module-3a336b0f.js');
-require('./global-f06aabc0.js');
+require('./global-24116a83.js');
 require('./index.module-ee84433d.js');
 
 /*

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

@@ -2,7 +2,7 @@
 
 const index = require('./index-a29c60ef.js');
 require('./stencil-hooks.module-3a336b0f.js');
-require('./global-f06aabc0.js');
+require('./global-24116a83.js');
 require('./index.module-ee84433d.js');
 
 /*

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -18,7 +18,7 @@ const luxon = require('./luxon-2926d85f.js');
 const useReferralTable = require('./useReferralTable-7c3f9600.js');
 const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 const ErrorView = require('./ErrorView-b2fcf954.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-431faed1.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-50d3d314.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -23,7 +23,7 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-84e99287.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-d7977499.js');
+const ShadowViewAddon = require('./ShadowViewAddon-c08a66ce.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 require('./index.module-ee84433d.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');

package/dist/cjs/{sqm-invoice-table-view-431faed1.js → sqm-invoice-table-view-50d3d314.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const JSS = require('./JSS-8503a151.js');
 const ErrorView = require('./ErrorView-b2fcf954.js');
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

package/dist/cjs/{sqm-portal-email-verification-view-969cf926.js → sqm-portal-email-verification-view-df11fb08.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-f06aabc0.js');
+require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
 require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-969cf926.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-df11fb08.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/cjs/{sqm-portal-profile-view-96e936cf.js → sqm-portal-profile-view-e787abd7.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 
@@ -79,7 +79,7 @@ function PortalProfileView(props) {
             ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
       index.h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label, base: input-base", disabled: true }),
       states.showCountry && (index.h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label, base: input-base", disabled: true })),
-      index.h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+      index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
           callbacks.onSubmit(e);
         }, submit: true }, text.submitChangeButtonText))));
 }

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-f06aabc0.js');
+require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-96e936cf.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-e787abd7.js');
 const utilities = require('./utilities-78f5e169.js');
 
 const GET_USER = index_module.dist.gql `

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-f06aabc0.js');
+const global = require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-f06aabc0.js');
+require('./global-24116a83.js');
 const index_module = require('./index.module-ee84433d.js');
 require('./cjs-1066ec21.js');
 require('./utils-6847bc06.js');
@@ -24,20 +24,20 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-38a5227a.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-5dfd2b52.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-969cf926.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-df11fb08.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-b986086e.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-84e99287.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-1b2440c3.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-4377d849.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-96e936cf.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-e787abd7.js');
 require('./utilities-78f5e169.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-52fc50fe.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4f837226.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-3da9ed28.js');
-const ShadowViewAddon = require('./ShadowViewAddon-d7977499.js');
+const ShadowViewAddon = require('./ShadowViewAddon-c08a66ce.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-431faed1.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-50d3d314.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password-view.js

@@ -7,6 +7,7 @@ export function PortalChangePasswordView(props) {
   const { states, callbacks } = props;
   const style = {
     Dialog: {
+      background: "var(--sqm-portal-background)",
       padding: "0",
       "&::part(close-button)": {
         "margin-top": "var(--sl-spacing-medium)",
@@ -61,14 +62,14 @@ export function PortalChangePasswordView(props) {
               h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
               h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
-              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
-              h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", exportparts: "base: primarybutton-base", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
+              h("sl-button", { class: sheet.classes.CancelButton, type: "text", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
       }))),
     h(PortalSectionView, Object.assign({}, {
       labelMargin: "x-large",
       padding: "xxx-large",
       label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
-      content: (h("sl-button", { onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+      content: (h("sl-button", { exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
     }),
       h("style", { type: "text/css" }, styleString))));
 }

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile-view.js

@@ -76,7 +76,7 @@ export function PortalProfileView(props) {
             ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
       h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label, base: input-base", disabled: true }),
       states.showCountry && (h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label, base: input-base", disabled: true })),
-      h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
           callbacks.onSubmit(e);
         }, submit: true }, text.submitChangeButtonText))));
 }

package/dist/collection/global/styles.js

@@ -612,6 +612,26 @@ html {
   --sqm-secondary-button-color: #FFFFFF; /* Spotify White for text */
   --sqm-secondary-button-color-border: #FFFFFF; /* Spotify White for border */
   --sqm-secondary-button-radius: 30px;
+
+  --sqm-input-background: #121212;
+  --sqm-input-border: 1px solid #7c7c7c;
+  --sqm-input-border-radius: 30px;
+  --sqm-input-color: white;
+  --sqm-input-focus-border: 1px solid #1ed760;
+  --sqm-input-label-color: white;
+  --sqm-border-width: 1px;
+  --sqm-input-label-font-size: white;
+  --sqm-input-disabled-color: white;
+  --sqm-input-disabled-background: #303030;
+
+  --sl-input-color: var(--sqm-input-color);
+  --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: white !important;
+  --sl-input-border-color: #7c7c7c;
+  --sl-input-border-color-hover: white;
 }
 
 body {
@@ -692,15 +712,6 @@ sl-badge[type="neutral"]::part(base) {
   color: var(--sqm-neutral-badge-text-color, var(--sl-color-neutral-700));
 }
 
-// .terms-link,
-// .terms-link:visited {
-//   color: var(--sl-color-gray-500);
-//   text-decoration: none;
-// }
-// .terms-link:hover {
-//   color: var(--sl-color-gray-600);
-// }
-
 h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
 }
@@ -787,8 +798,6 @@ sl-details::part(summary) {
   background-color: var(--sqm-primary-button-background-hover);
 }
 
-
-
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
@@ -808,27 +817,32 @@ sl-details::part(summary) {
   box-shadow: none;
 }
 
-sl-input::part(input-base){
-  border: 3px dashed red !important;
+*::part(input-label), *::part(select-label), *::part(textarea-label){
+  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);
 }
 
-sl-input::part(input){
-  broder: 3px dashed red !important;
+*::part(input-base), *::part(select-base), *::part(textarea-base){
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-medium), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-width, 1px);
 }
 
-sl-input::part(input-base){
-  border: 3px dashed red !important;
+*::part(input-label):focus,
+*::part(select-label):focus,
+*::part(textarea-label):focus {
+  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
+  background: pink !important;
 }
 
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-size: var(--sl-input-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
+*::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));
 }
 
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
+
 
 *::part(menuitem-base):hover{
   background-color: var(--sl-color-gray-200);

package/dist/collection/global/styles.ts

@@ -613,6 +613,26 @@ html {
   --sqm-secondary-button-color: #FFFFFF; /* Spotify White for text */
   --sqm-secondary-button-color-border: #FFFFFF; /* Spotify White for border */
   --sqm-secondary-button-radius: 30px;
+
+  --sqm-input-background: #121212;
+  --sqm-input-border: 1px solid #7c7c7c;
+  --sqm-input-border-radius: 30px;
+  --sqm-input-color: white;
+  --sqm-input-focus-border: 1px solid #1ed760;
+  --sqm-input-label-color: white;
+  --sqm-border-width: 1px;
+  --sqm-input-label-font-size: white;
+  --sqm-input-disabled-color: white;
+  --sqm-input-disabled-background: #303030;
+
+  --sl-input-color: var(--sqm-input-color);
+  --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: white !important;
+  --sl-input-border-color: #7c7c7c;
+  --sl-input-border-color-hover: white;
 }
 
 body {
@@ -693,15 +713,6 @@ sl-badge[type="neutral"]::part(base) {
   color: var(--sqm-neutral-badge-text-color, var(--sl-color-neutral-700));
 }
 
-// .terms-link,
-// .terms-link:visited {
-//   color: var(--sl-color-gray-500);
-//   text-decoration: none;
-// }
-// .terms-link:hover {
-//   color: var(--sl-color-gray-600);
-// }
-
 h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
 }
@@ -788,8 +799,6 @@ sl-details::part(summary) {
   background-color: var(--sqm-primary-button-background-hover);
 }
 
-
-
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
@@ -809,27 +818,32 @@ sl-details::part(summary) {
   box-shadow: none;
 }
 
-sl-input::part(input-base){
-  border: 3px dashed red !important;
+*::part(input-label), *::part(select-label), *::part(textarea-label){
+  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);
 }
 
-sl-input::part(input){
-  broder: 3px dashed red !important;
+*::part(input-base), *::part(select-base), *::part(textarea-base){
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-medium), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-width, 1px);
 }
 
-sl-input::part(input-base){
-  border: 3px dashed red !important;
+*::part(input-label):focus,
+*::part(select-label):focus,
+*::part(textarea-label):focus {
+  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
+  background: pink !important;
 }
 
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-size: var(--sl-input-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
+*::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));
 }
 
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
+
 
 *::part(menuitem-base):hover{
   background-color: var(--sl-color-gray-200);

package/dist/esm/{ShadowViewAddon-70b09bad.js → ShadowViewAddon-2e660338.js}

@@ -1,6 +1,6 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
 import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-5e65213d.js';
+import { i as intl } from './global-f2c5e24d.js';
 import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
@@ -1570,6 +1570,7 @@ function PortalChangePasswordView(props) {
   const { states, callbacks } = props;
   const style = {
     Dialog: {
+      background: "var(--sqm-portal-background)",
       padding: "0",
       "&::part(close-button)": {
         "margin-top": "var(--sl-spacing-medium)",
@@ -1624,14 +1625,14 @@ function PortalChangePasswordView(props) {
               h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
               h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
-              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
-              h("sl-button", { class: sheet.classes.CancelButton, type: "text", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", exportparts: "base: primarybutton-base", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
+              h("sl-button", { class: sheet.classes.CancelButton, type: "text", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
       }))),
     h(PortalSectionView, Object.assign({}, {
       labelMargin: "x-large",
       padding: "xxx-large",
       label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
-      content: (h("sl-button", { onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+      content: (h("sl-button", { exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
     }),
       h("style", { type: "text/css" }, styleString))));
 }