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

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view.js

@@ -3,10 +3,10 @@ import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 import { navigation } from "@saasquatch/component-boilerplate";
 export function NavigationSidebarItemView(props) {
-  const { states, data } = props;
+  const { states, data, padding = "x-small" } = props;
   const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
-  const backgroundHoverColor = props.backgroundHoverColor || "var(--sl-color-gray-50)";
-  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sl-color-gray-200)";
+  const backgroundHoverColor = props.backgroundHoverColor || "var(--sqm-accent-color-background)";
+  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sqm-primary-color)";
   const textFocusedColor = props.textFocusedColor || "var(--sqm-text)";
   const style = {
     ItemContainer: {
@@ -14,8 +14,8 @@ export function NavigationSidebarItemView(props) {
       "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
       borderRadius: props.borderRadius
         ? `${props.borderRadius}px`
-        : "var(--sl-border-radius-large)",
-      padding: `var(--sl-spacing-${props.padding})`,
+        : "var(--sqm-border-radius-normal)",
+      padding: `var(--sl-spacing-${padding})`,
       "text-decoration": "none",
       color: states.active
         ? textFocusedColor

package/dist/collection/components/sqm-portal-forgot-password/PortalForgotPassword.stories.js

@@ -18,7 +18,7 @@ const defaultProps = {
     submit: async (e) => await e,
   },
   content: {
-    secondaryButton: "Cancel",
+    loginText: "Login",
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
@@ -33,8 +33,8 @@ const errorProps = {
     submit: async (e) => await e,
   },
   content: {
-    secondaryButton: "Cancel",
     messageSlot: "Enter your email below to receive a password reset link.",
+    loginText: "Login",
   },
 };
 const loadingProps = {
@@ -48,7 +48,7 @@ const loadingProps = {
     submit: async (e) => await e,
   },
   content: {
-    secondaryButton: "Cancel",
+    loginText: "Login",
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
@@ -63,7 +63,7 @@ const successProps = {
     submit: async (e) => await e,
   },
   content: {
-    secondaryButton: "Cancel",
+    loginText: "Login",
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };

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

@@ -12,13 +12,14 @@ const vanillaStyle = `
 }
 `;
 export function PortalForgotPasswordView(props) {
-  const { states, callbacks, content, styles } = props;
+  const { states, callbacks, content } = props;
   const style = {
     FormWrapper: {
       ...AuthWrapper,
-      background: styles.backgroundColor,
-      borderRadius: styles.borderRadius,
-      border: styles.border,
+      background: content.backgroundColor || "var(--sqm-portal-background)",
+      borderRadius: content.borderRadius || "var(--sqm-border-radius-normal)",
+      border: content.border ||
+        "var(--sqm-border-thickness) solid var(--sqm-border-color)",
     },
     Column: { ...AuthColumn },
     ButtonsContainer: AuthButtonsContainer,
@@ -34,7 +35,7 @@ export function PortalForgotPasswordView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h(TextSpanView, { textColor: styles.textColor, type: "h3" }, content.messageSlot),
+    h(TextSpanView, { type: "h3" }, content.messageSlot),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
       props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
@@ -43,5 +44,5 @@ export function PortalForgotPasswordView(props) {
       h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
-        h("sl-button", { type: "text", exportparts: "base: tertiarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, content.loginText)))));
+        h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, content.loginText)))));
 }

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password.js

@@ -57,12 +57,12 @@ export class PortalForgotPassword {
      * @uiName Border radius
      * @uiWidget number
      */
-    this.borderRadius = "var(--sqm-border-radius-normal)";
+    this.borderRadius = "var(--sqm-border-radius-normal, 8px)";
     /**
      * @uiName Border style
      * @uiWidget textArea
      */
-    this.border = "1px solid var(--sqm-border-color, var(--sqm-text), #eaeaea)";
+    this.border = "1px solid var(--sqm-border-color, #eaeaea)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -71,20 +71,16 @@ export class PortalForgotPassword {
       ? usePortalForgotPasswordDemo(this)
       : usePortalForgotPassword(this);
     const content = {
-      secondaryButton: (h("slot", { name: "secondaryButton" },
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, this.loginText))),
       messageSlot: h("slot", { name: "messageSlot" }, this.headerText),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,
       successAlertText: this.successAlertText,
       loginText: this.loginText,
-    };
-    const styles = {
       backgroundColor: this.backgroundColor,
       borderRadius: this.borderRadius,
       border: this.border,
     };
-    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content, styles: styles }));
+    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
   }
   static get is() { return "sqm-portal-forgot-password"; }
   static get encapsulation() { return "shadow"; }
@@ -312,7 +308,7 @@ export class PortalForgotPassword {
       },
       "attribute": "border-radius",
       "reflect": false,
-      "defaultValue": "\"var(--sqm-border-radius-normal)\""
+      "defaultValue": "\"var(--sqm-border-radius-normal, 8px)\""
     },
     "border": {
       "type": "string",
@@ -336,14 +332,14 @@ export class PortalForgotPassword {
       },
       "attribute": "border",
       "reflect": false,
-      "defaultValue": "\"1px solid var(--sqm-border-color, var(--sqm-text), #eaeaea)\""
+      "defaultValue": "\"1px solid var(--sqm-border-color, #eaeaea)\""
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalForgotPasswordViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; }; styles?: { backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -379,5 +375,16 @@ function usePortalForgotPasswordDemo(props) {
     callbacks: {
       submit: async (_event) => { },
     },
+    content: {
+      secondaryButton: (h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", disabled: false, onClick: () => navigation.push(props.loginPath) }, props.loginText)),
+      messageSlot: h("span", null, props.headerText),
+      emailLabel: props.emailLabel,
+      submitLabel: props.submitLabel,
+      successAlertText: props.successAlertText,
+      loginText: props.loginText,
+      backgroundColor: props.backgroundColor,
+      borderRadius: props.borderRadius,
+      border: props.border,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-portal-login/PortalLogin.stories.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { PortalLoginView } from "./sqm-portal-login-view";
 export default {
   title: "Components/Microsite Login",
 };
@@ -58,6 +59,7 @@ const googleProps = {
   },
 };
 export const Default = () => (h("sqm-portal-login", { demoData: { ...defaultProps } }));
+export const Text = () => h(PortalLoginView, Object.assign({}, defaultProps));
 export const IsGoogle = () => (h("sqm-portal-login", { demoData: { ...googleProps } }));
 export const LoginWithError = () => (h("sqm-portal-login", { demoData: { ...errorProps } }));
 export const LoginLoading = () => (h("sqm-portal-login", { demoData: { ...loadingProps } }));

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js

@@ -87,7 +87,7 @@ export class PortalLogin {
       googleButton: null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),
-        h("sl-button", { exportparts: "base: tertiarybutton-base", type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
+        h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,

package/dist/collection/components/sqm-portal-registration-form/PortalRegistrationForm.stories.js

@@ -3,6 +3,7 @@ import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view
 export default {
   title: "Components/Microsite Portal Register",
 };
+// TODO: Figure out if we can delete this component and it's stories since we have a duplicate
 const defaultProps = {
   states: {
     error: "",

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -9,7 +9,7 @@ import { EmailRegistrationView, } from "../views/email-registration-view";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
- * @example Instant Access Friend Registration - <sqm-referred-registration></sqm-referred-registration>
+ * @example Friend Registration - <sqm-referred-registration></sqm-referred-registration>
  * @slots [{"name":"top","title":"Top Content"},{"name":"bottom","title":"Bottom Content"}]
  */
 export class ReferredRegistration {

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -201,21 +201,8 @@ export class RewardTableStatusCell {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    const getBadgeCSSClass = (badgeType) => {
-      console.log("badgeType", badgeType);
-      // switch (badgeType) {
-      //   case "primary":
-      //     return sheet.classes.RedeemBadge;
-      //   case "danger":
-      //     return sheet.classes.DangerBadge;
-      //   case "success":
-      //     return sheet.classes.SuccessBadge;
-      //   case "warning":
-      //   case "info":
-      //     return sheet.classes.WarningBadge;
-      //   default:
-      //     return sheet.classes.WarningBadge;
-      // }
+    // AL: badgeType arg? TODO
+    const getBadgeCSSClass = (rewardStatus) => {
       switch (rewardStatus) {
         case "AVAILABLE":
           return sheet.classes.SuccessBadge;
@@ -232,13 +219,7 @@ export class RewardTableStatusCell {
     const badgeCSSClass = getBadgeCSSClass(badgeType);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { type: badgeType, pill: true, 
-        // class={
-        //   rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-        //     ? sheet.classes.RedeemBadge
-        //     : sheet.classes.Badge
-        // }
-        class: badgeCSSClass }, statusText),
+      h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),
       h("p", { class: sheet.classes.Date }, fraudStatusText ||
         pendingReasons ||
         this.getPayoutStatusText(rewardStatus) ||

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.js

@@ -2,10 +2,10 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
- * @uiName Reward Table Customer Note Column
+ * @uiName Rewards Table Customer Note Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
+ * @example Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
  */
 export class RewardTableCustomerNoteColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -2,10 +2,10 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
- * @uiName Reward Table Source Column
+ * @uiName Rewards Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
+ * @example Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
  */
 export class RewardTableUserColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Status Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
+ * @example Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
  */
 export class RewardTableStatusColumn {
   constructor() {

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

@@ -15,12 +15,12 @@ import deepmerge from "deepmerge";
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
  * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
- * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example Mobile Share Sheet Button - <sqm-share-button medium="direct">Share</sqm-share-button>
  * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
  * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
- * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
+ * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
  * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export class ShareButton {

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

@@ -71,11 +71,12 @@ export class SqmBrandSelector {
             max-width: 350px;
             overflow: hidden;
             padding: 10px;
-            position: absolute;
+            position: fixed;
             bottom: 0;
             right: 0;
             z-index: 999999;
             border: 1px solid #ccc;
+            margin: 10px;
           }
 
           .card-heading {
@@ -85,6 +86,7 @@ export class SqmBrandSelector {
             padding-bottom: 10px;
             color: black;
             margin: 0;
+            font-size: 16px;
           }
 
           .segmented-control-container {
@@ -104,7 +106,7 @@ export class SqmBrandSelector {
             align-items: center;
             justify-content: center;
             flex: 1;
-            padding: 4px 8px; /* Fixed spacing syntax */
+            padding: 0px 8px; 
             cursor: pointer;
             transition: all 300ms ease-in-out;
             border-radius: 9999px;

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

@@ -93,7 +93,6 @@ import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScr
 import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories";
 import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
 import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
-import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
 import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as QRCode from "../sqm-qr-code/QRCode.stories";
 import * as Text from "../sqm-text/Text.stories";
@@ -190,7 +189,6 @@ const stories = [
   NewPortalRegistrationForm,
   ChangeMarketing,
   BaseRegistrationForm,
-  PortalRegistrationForm,
   PortalGoogleRegistrationFormStories,
   WidgetEmailVerification,
   WidgetCodeVerification,

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

@@ -8,7 +8,7 @@ import { useWidgetVerification } from "./useWidgetVerification";
 /**
  * @uiName Widget Verification Flow
  * @exampleGroup Widget Verification
- * @example Widget Verification Flow - <sqm-widget-verification></sqm-widget-verification>
+ * @example Widget Verification - <sqm-widget-verification></sqm-widget-verification>
  */
 export class WidgetVerification {
   constructor() {

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

@@ -106,20 +106,20 @@ const style = {
     width: "16px",
     height: "16px",
     borderRadius: "50%",
-    background: "var(--sl-color-gray-200)",
+    background: "var(--sqm-skeleton-background)",
   },
   SmallSkeleton: {
     width: "100px",
     height: "16px",
     borderRadius: "50px",
-    background: "var(--sl-color-gray-200)",
+    background: "var(--sqm-skeleton-background)",
   },
   LargeSkeleton: {
     width: "100%",
     maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
-    background: "var(--sl-color-gray-200)",
+    background: "var(--sqm-skeleton-background)",
   },
   InfoWarningIcon: {
     height: "26px",

package/dist/collection/components/tax-and-cash/sqm-docusign-form/docusign-iframe/DocusignIframe.js

@@ -14,7 +14,7 @@ const style = {
     gap: "10px",
     margin: "auto",
     textAlign: "center",
-    border: "1px solid var(--sl-color-gray-200)",
+    border: "1px solid var(--sqm-border-color)",
     justifyContent: "center",
   },
   MessageContainer: {

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.js

@@ -123,6 +123,22 @@ const style = {
       margin: 0,
     },
   },
+  SuccessBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sqm-success-color-text)",
+    },
+  },
+  PrimaryBadge: {
+    "&::part(base)": {
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sqm-informative-color-text)",
+    },
+  },
   AlertContent: {
     display: "flex",
     alignItems: "flex-start",
@@ -150,13 +166,14 @@ export function PayoutDetailsCardView(props) {
   };
   const renderStatusBadge = (status, statusBadgeText) => {
     const badgeType = status === "nextPayout" ? "success" : "primary";
+    const badgeClass = badgeType === "success" ? classes.SuccessBadge : classes.PrimaryBadge;
     const statusText = intl.formatMessage({
       id: "badgeText",
       defaultMessage: statusBadgeText,
     }, {
       badgeText: status,
     });
-    return (h("sl-badge", { pill: true, type: badgeType }, statusText));
+    return (h("sl-badge", { pill: true, class: badgeClass }, statusText));
   };
   const thresholdText = intl.formatMessage({
     id: "thresholdText",

package/dist/collection/components/views/copy-text-view.js

@@ -34,11 +34,22 @@ export function CopyTextView(props) {
         color: props.textColor || "var(--sqm-text)",
       },
       "&::part(base)": {
+        "--sl-input-border-radius": "var(--sqm-border-radius-normal)",
+        "--sl-input-background-color": "var(--sl-color-white)",
+        "--sl-input-color": "var(--sqm-text)",
+        "--sl-input-border-color": "#D6D8F0",
+        "--sl-input-border-color-hover": "#999999",
+        "--sl-input-border-color-focus": "#999999",
+        "--sl-input-color-hover": "var(--sqm-input-color-hover)",
+        "--sl-input-color-focus": "var(--sqm-input-color-focus)",
+        "--sl-input-color-disabled": "var(--sqm-input-disabled-color)",
+        "--sl-input-background-color-focus": "var(--sqm-portal-background)",
+        "--sl-input-background-color-hover": "var(--sqm-portal-background)",
         cursor: "pointer",
         overflow: "visible",
-        borderRadius: `${props.borderRadius}px` || "var(--sl-border-radius-medium)",
-        background: props.backgroundColor || "var(--sl-color-white)",
-        border: `1px solid ${props.borderColor || "transparent"}`,
+        borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
+        background: props.backgroundColor || "var(--sqm-portal-background)",
+        border: `1px solid ${props.borderColor || "#d4d4d8"}`,
       },
       width: "100%",
     },