@saasquatch/mint-components 1.15.0-61 → 1.15.0-62

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

@@ -9,7 +9,7 @@ const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils$1 = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
-const ErrorView = require('./ErrorView-5504c2b6.js');
+const ErrorView = require('./ErrorView-0f564e2a.js');
 const utils = require('./utils-940abb91.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
 const data = require('./data-d4339c2e.js');

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -512,7 +512,7 @@ export class CouponCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of share link container"
       },
       "attribute": "border-color",
       "reflect": false

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -6,14 +6,14 @@ export function DividedLayoutView(props, children) {
       return {
         "border-right": props.borderless
           ? "none"
-          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
       };
     }
     else {
       return {
         "border-bottom": props.borderless
           ? "none"
-          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
       };
     }
   };

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -18,7 +18,7 @@ export class DividedLayout {
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border style
      */
-    this.dividerStyle = "1px solid #EAEAEA";
+    this.dividerStyle = "var(--sqm-border-thickness) solid var(--sqm-border-color)";
     /**
      * Background color of the divider
      * @uiName Divider Background Color
@@ -109,7 +109,7 @@ export class DividedLayout {
       },
       "attribute": "divider-style",
       "reflect": false,
-      "defaultValue": "\"1px solid #EAEAEA\""
+      "defaultValue": "\"var(--sqm-border-thickness) solid var(--sqm-border-color)\""
     },
     "backgroundColor": {
       "type": "string",

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -33,7 +33,7 @@ sl-input::part(base):focus,
 sl-select::part(form-control-wrapper):focus,
 sl-textare::part(textarea-label):focus {
   border-color: none;
-  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
+  border: var(--sqm-input-focus-border, var(--sqm-border-thickness) solid var(--sl-input-border-color-focus));
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{

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

@@ -72,7 +72,7 @@ export function NavigationSidebarView(props, children) {
   .menu-items {
     display: none;
     padding: 20px;
-    border-right: 1px solid #eaeaea;
+    border-right: var(--sqm-border-thickness) solid var(--sqm-border-color);
     padding-top: 60px;
     background: var(--sqm-portal-background); 
     width: 100vw;

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

@@ -62,7 +62,7 @@ export class PortalForgotPassword {
      * @uiName Border style
      * @uiWidget textArea
      */
-    this.border = "1px solid var(--sqm-border-color, #eaeaea)";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -332,7 +332,7 @@ export class PortalForgotPassword {
       },
       "attribute": "border",
       "reflect": false,
-      "defaultValue": "\"1px solid var(--sqm-border-color, #eaeaea)\""
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
     },
     "demoData": {
       "type": "unknown",

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

@@ -20,21 +20,20 @@ export class PortalFrame {
      * @uiWidget color
      * @uiType string
      */
-    this.backgroundColor = "var(--sqm-portal-background, #fff);";
-    // TODO: Replace with border variable later
+    this.backgroundColor = "var(--sqm-portal-background, #fff)";
     /**
      * Borders placed to seperate the header and footer from the body content.
      * @uiName Border
      * @uiType string
      */
-    this.border = "1px solid var(--sqm-text, #eaeaea);";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
     /**
      * Background color for the header and footer.
      * @uiName Header and Footer Background Color
      * @uiWidget color
      * @uiType string
      */
-    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff);";
+    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -96,7 +95,7 @@ export class PortalFrame {
       },
       "attribute": "background-color",
       "reflect": false,
-      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+      "defaultValue": "\"var(--sqm-portal-background, #fff)\""
     },
     "border": {
       "type": "string",
@@ -120,7 +119,7 @@ export class PortalFrame {
       },
       "attribute": "border",
       "reflect": false,
-      "defaultValue": "\"1px solid var(--sqm-text, #eaeaea);\""
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
     },
     "headerAndFooterBackgroundColor": {
       "type": "string",
@@ -147,7 +146,7 @@ export class PortalFrame {
       },
       "attribute": "header-and-footer-background-color",
       "reflect": false,
-      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+      "defaultValue": "\"var(--sqm-portal-background, #fff)\""
     },
     "demoData": {
       "type": "unknown",

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

@@ -42,8 +42,8 @@ const vanillaStyle = `
   `;
 export const RadioCardView = ({ title, icon, description, selected, }) => {
   const border = selected
-    ? "1px solid var(--sl-color-primary-500)"
-    : "1px solid #CACFD3";
+    ? "var(--sqm-border-thickness) solid var(--sqm-primary-color)"
+    : "var(--sqm-border-thickness) solid var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
       border,
     } },

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

@@ -38,7 +38,9 @@ export function ReferralCardView(props) {
   const styleString = sheet.toString();
   const borderColor = props.borderColor || "var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
+      border: `${props.hideBorder
+        ? "none"
+        : `var(--sqm-border-thickness) solid ${borderColor}`}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,

package/dist/collection/components/sqm-referral-card/sqm-referral-card.js

@@ -299,7 +299,7 @@ export class ReferralCard {
             "text": "color",
             "name": "format"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of container"
       },
       "attribute": "border-color",
       "reflect": false
@@ -348,7 +348,7 @@ export class ReferralCard {
             "text": "number",
             "name": "uiType"
           }],
-        "text": "The border radius on the share link container (in pixels)"
+        "text": "The border radius (in pixels)"
       },
       "attribute": "border-radius",
       "reflect": false

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

@@ -36,7 +36,7 @@ export class ReferralTableRewardsCell {
           padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
         },
         "&::part(base)": {
-          border: "1px solid var(--sqm-border-color)",
+          border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
           opacity: "1",
         },
         "&::part(summary-icon)": {

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

@@ -364,7 +364,7 @@ export class ShareCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of share link container"
       },
       "attribute": "border-color",
       "reflect": false

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

@@ -242,7 +242,7 @@ export class ShareLink {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of share link container"
       },
       "attribute": "border-color",
       "reflect": false

package/dist/collection/components/sqm-stat-container/sqm-stat-container-view.js

@@ -25,7 +25,7 @@ export function StatContainerView(props, children) {
       "& > *": {
         "border-right": props.hideBorder
           ? "none"
-          : "1px solid var(--sqm-text-subdued)",
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
@@ -34,7 +34,7 @@ export function StatContainerView(props, children) {
       "& > ::slotted(*)": {
         "border-right": props.hideBorder
           ? "none"
-          : "1px solid var(--sqm-text-subdued)",
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
       },
       "& > ::slotted(*:last-child)": {
@@ -50,7 +50,7 @@ export function StatContainerView(props, children) {
       display: "flex",
     },
     BorderFix: {
-      "border-right": "1px solid transparent",
+      "border-right": "var(--sqm-border-thickness) solid transparent",
       width: "0px",
       "margin-left": "-1px",
     },

package/dist/collection/components/sqm-table-row/sqm-table-row.js

@@ -8,7 +8,7 @@ export class TableRow {
     /**
      * @uiName Border
      */
-    this.border = "1px solid #EAEAEA";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
   }
   render() {
     return (h(Host, { style: { display: "contents" } },
@@ -37,7 +37,7 @@ export class TableRow {
       },
       "attribute": "border",
       "reflect": false,
-      "defaultValue": "\"1px solid #EAEAEA\""
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
     }
   }; }
 }

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

@@ -18,7 +18,7 @@ export function TaskCardView(props) {
         position: "relative",
         boxSizing: "border-box",
         background: content.backgroundColor || "var(--sqm-portal-background)",
-        border: `1px solid ${content.borderColor || "var(--sqm-border-color)"}`,
+        border: `var(--sqm-border-thickness) solid ${content.borderColor || "var(--sqm-border-color)"}`,
         borderRadius: "var(--sqm-border-radius-normal)",
         boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
         fontSize: "var(--sl-font-size-small)",
@@ -51,7 +51,7 @@ export function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-primary-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
       borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-primary-50)",
@@ -68,7 +68,7 @@ export function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-warning-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
       borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-warning-50)",

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

@@ -88,8 +88,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "1px solid var(--sqm-border-color)",
-    borderBottom: "1px solid var(--sqm-border-color)",
+    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    borderBottom: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",

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(--sqm-border-color)",
+    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     justifyContent: "center",
   },
   MessageContainer: {

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

@@ -142,7 +142,7 @@ const vanillaStyle = `
     }
 
     hr {
-      border: 1px solid var(--sqm-border-color);
+      border: var(--sqm-border-thickness, 1px) solid var(--sqm-border-color);
     }
 
     a {

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

@@ -12,7 +12,7 @@ const style = {
     borderRadius: "var(--sqm-border-radius-normal)",
     padding: "var(--sl-spacing-large)",
     minHeight: "150px",
-    border: "1px solid var(--sqm-border-color)",
+    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     maxWidth: "450px",
   },
   StatusContainer: {
@@ -36,7 +36,7 @@ const style = {
     width: "auto",
   },
   PaypalEmail: {
-    borderRight: "1px solid var(--sqm-border-color)",
+    borderRight: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     paddingRight: "var(--sl-spacing-small)",
     "@media (max-width: 499px)": {
       borderRight: "none",
@@ -78,7 +78,7 @@ const style = {
     gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)",
     paddingTop: "var(--sq-spacing-xx-small)",
     "& > :not(:last-child)": {
-      borderRight: "1px solid var(--sqm-border-color)",
+      borderRight: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     },
     "& > :nth-child(3)": {
       border: "none",
@@ -95,7 +95,7 @@ const style = {
   },
   W9Container: {
     paddingTop: "var(--sl-spacing-large)",
-    borderTop: "1px solid var(--sqm-border-color)",
+    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
   },
   SkeletonOne: {
     width: "25%",
@@ -112,7 +112,7 @@ const style = {
   Alert: {
     "&::part(base)": {
       backgroundColor: "var(--sqm-warning-color-background)",
-      border: "1px solid var(--sqm-warning-color-border)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-warning-color-border)",
       padding: "0 16px",
     },
     "& sl-icon": {

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

@@ -4,7 +4,7 @@ const styles = {
   Alert: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-danger-100)",
-      border: "1px solid var(--sl-color-danger-200)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sl-color-danger-200)",
       padding: "0 16px",
     },
     "& sl-icon": {

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

@@ -54,7 +54,7 @@ const style = {
   },
   IndirectTaxPreviewContainer: {
     marginTop: "var(--sl-spacing-x-large)",
-    borderTop: "1px solid var(--sqm-border-color)",
+    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
   },
   IndirectTaxPreviewHeaderContainer: {
     marginTop: "var(--sl-spacing-large)",

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

@@ -25,7 +25,7 @@ const style = {
     gap: "16px",
   },
   HR: {
-    border: "1px solid #E0E0E0",
+    border: "var(--sqm-border-thickness, 1px) solid #E0E0E0",
     margin: "10px 0",
   },
   Input: { maxWidth: "500px" },
@@ -40,7 +40,7 @@ const style = {
   ErrorInput: {
     maxWidth: "500px",
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sl-color-danger-500)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {

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

@@ -10,7 +10,7 @@ const style = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sqm-danger-color-icon)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-icon)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {

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

@@ -34,10 +34,10 @@ 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-border-radius": `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
+        "--sl-input-background-color": props.backgroundColor || "var(--sqm-portal-background)",
         "--sl-input-color": "var(--sqm-text)",
-        "--sl-input-border-color": "#D6D8F0",
+        "--sl-input-border-color": "var(--sqm-border-color)",
         "--sl-input-border-color-hover": "#999999",
         "--sl-input-border-color-focus": "#999999",
         "--sl-input-color-hover": "var(--sqm-input-color-hover)",
@@ -49,7 +49,7 @@ export function CopyTextView(props) {
         overflow: "visible",
         borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
         background: props.backgroundColor || "var(--sqm-portal-background)",
-        border: `1px solid ${props.borderColor || "#d4d4d8"}`,
+        border: `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
       },
       width: "100%",
     },

package/dist/collection/components/views/email-registration-view.js

@@ -43,7 +43,9 @@ export function EmailRegistrationView(props) {
   };
   const emailValidationRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return (h("div", { part: "sqm-base", class: sheet.classes.Wrapper, style: {
-      border: `${content.hideBorder ? "none" : "1px solid var(--sqm-border-color)"}`,
+      border: `${content.hideBorder
+        ? "none"
+        : "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)"}`,
       backgroundColor: content.backgroundColor,
       "padding-top": `var(--sl-spacing-${content.paddingTop})`,
       "padding-right": `var(--sl-spacing-${content.paddingRight})`,

package/dist/collection/tables/GenericTableView.js

@@ -15,9 +15,9 @@ export function GenericTableView(props) {
       tableLayout: "fixed",
       width: "100%",
       "& tbody tr": {
-        borderBottom: "1px solid var(--sqm-border-color)",
+        borderBottom: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
         "&:first-child": {
-          borderTop: "1px solid var(--sqm-border-color)",
+          borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
         },
       },
       "& th": {
@@ -39,7 +39,7 @@ export function GenericTableView(props) {
         "& tr": {
           display: "block",
           background: "inherit",
-          border: "1px solid var(--sqm-border-color)",
+          border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
           boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
           borderRadius: "var(--sl-border-radius-large)",
           padding: "var(--sl-spacing-medium)",

package/dist/esm/{ErrorView-eaafd6f5.js → ErrorView-b396dcc7.js}

@@ -5,7 +5,7 @@ const styles = {
   Alert: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-danger-100)",
-      border: "1px solid var(--sl-color-danger-200)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sl-color-danger-200)",
       padding: "0 16px",
     },
     "& sl-icon": {

package/dist/esm/{GenericTableView-dd9be3ea.js → GenericTableView-e43d310f.js}

@@ -16,9 +16,9 @@ function GenericTableView(props) {
       tableLayout: "fixed",
       width: "100%",
       "& tbody tr": {
-        borderBottom: "1px solid var(--sqm-border-color)",
+        borderBottom: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
         "&:first-child": {
-          borderTop: "1px solid var(--sqm-border-color)",
+          borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
         },
       },
       "& th": {
@@ -40,7 +40,7 @@ function GenericTableView(props) {
         "& tr": {
           display: "block",
           background: "inherit",
-          border: "1px solid var(--sqm-border-color)",
+          border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
           boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
           borderRadius: "var(--sl-border-radius-large)",
           padding: "var(--sl-spacing-medium)",

package/dist/esm/{IndirectTaxDetailsView-ceeb9b1a.js → IndirectTaxDetailsView-0ae0aeb9.js}

@@ -511,7 +511,7 @@ const style$1 = {
     gap: "16px",
   },
   HR: {
-    border: "1px solid #E0E0E0",
+    border: "var(--sqm-border-thickness, 1px) solid #E0E0E0",
     margin: "10px 0",
   },
   Input: { maxWidth: "500px" },
@@ -526,7 +526,7 @@ const style$1 = {
   ErrorInput: {
     maxWidth: "500px",
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sl-color-danger-500)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {

package/dist/esm/{ShadowViewAddon-b07a7e53.js → ShadowViewAddon-51e9ebf7.js}

@@ -7,7 +7,7 @@ import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-311e6d72.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-6dec9902.js';
+import { C as CopyTextView } from './copy-text-view-8d1713d7.js';
 import { u as useChildElements } from './useChildElements-4e70ac0e.js';
 import { l as luxon } from './luxon-bbf75a9d.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
@@ -158,7 +158,7 @@ function StatContainerView(props, children) {
       "& > *": {
         "border-right": props.hideBorder
           ? "none"
-          : "1px solid var(--sqm-text-subdued)",
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
@@ -167,7 +167,7 @@ function StatContainerView(props, children) {
       "& > ::slotted(*)": {
         "border-right": props.hideBorder
           ? "none"
-          : "1px solid var(--sqm-text-subdued)",
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
       },
       "& > ::slotted(*:last-child)": {
@@ -183,7 +183,7 @@ function StatContainerView(props, children) {
       display: "flex",
     },
     BorderFix: {
-      "border-right": "1px solid transparent",
+      "border-right": "var(--sqm-border-thickness) solid transparent",
       width: "0px",
       "margin-left": "-1px",
     },
@@ -1796,7 +1796,7 @@ function TaskCardView(props) {
         position: "relative",
         boxSizing: "border-box",
         background: content.backgroundColor || "var(--sqm-portal-background)",
-        border: `1px solid ${content.borderColor || "var(--sqm-border-color)"}`,
+        border: `var(--sqm-border-thickness) solid ${content.borderColor || "var(--sqm-border-color)"}`,
         borderRadius: "var(--sqm-border-radius-normal)",
         boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
         fontSize: "var(--sl-font-size-small)",
@@ -1829,7 +1829,7 @@ function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-primary-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
       borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-primary-50)",
@@ -1846,7 +1846,7 @@ function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-warning-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
       borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-warning-50)",
@@ -2641,7 +2641,7 @@ sl-input::part(base):focus,
 sl-select::part(form-control-wrapper):focus,
 sl-textare::part(textarea-label):focus {
   border-color: none;
-  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
+  border: var(--sqm-input-focus-border, var(--sqm-border-thickness) solid var(--sl-input-border-color-focus));
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{

package/dist/esm/{copy-text-view-6dec9902.js → copy-text-view-8d1713d7.js}

@@ -35,10 +35,10 @@ 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-border-radius": `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
+        "--sl-input-background-color": props.backgroundColor || "var(--sqm-portal-background)",
         "--sl-input-color": "var(--sqm-text)",
-        "--sl-input-border-color": "#D6D8F0",
+        "--sl-input-border-color": "var(--sqm-border-color)",
         "--sl-input-border-color-hover": "#999999",
         "--sl-input-border-color-focus": "#999999",
         "--sl-input-color-hover": "var(--sqm-input-color-hover)",
@@ -50,7 +50,7 @@ function CopyTextView(props) {
         overflow: "visible",
         borderRadius: `${props.borderRadius}px` || "var(--sqm-border-radius-normal)",
         background: props.backgroundColor || "var(--sqm-portal-background)",
-        border: `1px solid ${props.borderColor || "#d4d4d8"}`,
+        border: `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
       },
       width: "100%",
     },