@saasquatch/mint-components 1.15.0-38 → 1.15.0-39

package/dist/cjs/{GenericTableView-925a0842.js → GenericTableView-40fd9dd1.js}

@@ -41,7 +41,7 @@ function GenericTableView(props) {
         },
         "& tr": {
           display: "block",
-          background: "#FFFFFF",
+          background: "inherit",
           border: "1px solid var(--sl-color-neutral-200)",
           boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
           borderRadius: "var(--sl-border-radius-large)",

package/dist/cjs/{ShadowViewAddon-3460f9e5.js → ShadowViewAddon-8993904c.js}

@@ -2,14 +2,14 @@
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-efeaed0c.js');
+const global = require('./global-a1506e15.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const useReferralCodes = require('./useReferralCodes-82e8797b.js');
 const mixins = require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-f0702822.js');
+const copyTextView = require('./copy-text-view-9017cd99.js');
 const useChildElements = require('./useChildElements-1b35d945.js');
 const luxon = require('./luxon-2926d85f.js');
 const sqmTextSpanView = require('./sqm-text-span-view-ce4c0178.js');
@@ -1819,6 +1819,12 @@ function ChangeMarktingView(props) {
 
 const style$3 = {
   Description: {
+    "& .icon": {
+      color: "var(--sqm-text)",
+      "&:hover": {
+        color: "var(--sqm-accent-color-icon)",
+      },
+    },
     "& input[type=checkbox]": {
       display: "none",
     },
@@ -1865,7 +1871,7 @@ function Details(props) {
     index.h("span", { class: sheet$3.classes.Description },
       index.h("input", { type: "checkbox", id: "details-" + rid }),
       index.h("label", { class: "details", htmlFor: "details-" + rid },
-        index.h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
+        index.h("sl-icon", { class: "icon", exportparts: "base: chevron-icon", name: "chevron-down" })),
       index.h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }
 
@@ -1931,7 +1937,8 @@ const style$4 = {
       width: "100%",
       height: "4px",
       borderRadius: "4px",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
+      background: "red",
     },
     "& .progress": {
       display: "block",
@@ -1944,7 +1951,7 @@ const style$4 = {
       width: "12px",
       height: "12px",
       display: "flex",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
       borderRadius: "50%",
       position: "relative",
       left: "47%",
@@ -2297,7 +2304,7 @@ const arrow_left_right = () => {
 function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
-  console.log("text color from the view ", content.textColor);
+  console.log("buttonType ", content.buttonType);
   const style = {
     TaskCard: {
       display: "inline-block",
@@ -2314,8 +2321,8 @@ function TaskCardView(props) {
         color: content.textColor || "var(--sqm-text)",
       },
       "& .main.complete": {
-        background: content.backgroundColor || "var(--sl-color-primary-50)",
-        borderColor: content.borderColor || "var(--sl-color-primary-500)",
+        background: "var(--sl-color-primary-50)",
+        borderColor: "var(--sqm-accent-color-border)",
       },
       "& .main.expired": {
         color: content.textColor || "var(--sqm-text)",
@@ -2376,7 +2383,7 @@ function TaskCardView(props) {
         top: "5%",
         alignSelf: "center",
         lineHeight: "0",
-        color: content.textColor || "var(--sqm-text)",
+        color: "var(--sqm-accent-color-icon)",
         fontSize: "var(--sl-font-size-large)",
         marginRight: "var(--sl-spacing-x-small)",
       },
@@ -2438,7 +2445,7 @@ function TaskCardView(props) {
     },
   };
   const sheet = JSS.createStyleSheet(style);
-  const contenttring = sheet.toString();
+  const contentString = sheet.toString();
   const dateStart = content.rewardDuration &&
     luxon.luxon.DateTime.fromISO(content.rewardDuration.split("/")[0]);
   const dateEnd = content.rewardDuration &&
@@ -2473,7 +2480,7 @@ function TaskCardView(props) {
   `;
   return (index.h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      contenttring,
+      contentString,
       vanillaStyle),
     !states.loading && taskNotStarted && (index.h("div", { class: sheet.classes.NotStarted },
       index.h("span", { class: "icon" },
@@ -2521,7 +2528,7 @@ function TaskCardView(props) {
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
         states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (index.h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        content.showProgressBar && states.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
         index.h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
           index.h("span", { class: "text" },
             content.repeatable && (index.h("div", null,
@@ -2551,9 +2558,7 @@ function TaskCardView(props) {
                 .setLocale(utils.luxonLocale(states.locale))
                 .toLocaleString(luxon.luxon.DateTime.DATETIME_MED),
             })))),
-          content.hideButton ? ("") : (index.h("sl-button", { exportparts: `base: ${content.buttonStyle === "primary"
-              ? "primary"
-              : "secondary"}button-base`, id: "sl-button", type: content.buttonStyle === "primary" ? "primary" : "default", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+          content.hideButton ? ("") : (index.h("sl-button", { exportparts: `base: ${content.buttonType || "primary"}button-base`, type: "primary", id: "sl-button", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
               opacity: taskComplete || taskUnavailable ? "0.45" : "1",
             } }, content.buttonText)))))))));
 }
@@ -2598,8 +2603,8 @@ const vanillaStyle$2 = `
   }
   a{
     cursor:pointer;
-    color: inherit;
-    text-decoration: none;
+    color: var(--sqm-text-subdued);
+    text-decoration: none ;
   }
 `;
 function PortalFooterView(props) {
@@ -2615,14 +2620,14 @@ function PortalFooterView(props) {
       "flex-direction": "column",
       "align-items": "center",
       "font-size": "var(--sl-font-size-small)",
-      color: "var(--sl-color-gray-600)",
+      color: "var(--sqm-text-subdued)",
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
       "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
       "row-gap": `var(--sl-spacing-small)`,
       "& a:hover": {
-        color: "var(--sl-color-gray-900)",
+        color: "var(--sqm-text)",
       },
     },
     SupportText: {
@@ -2630,7 +2635,7 @@ function PortalFooterView(props) {
       margin: 0,
     },
     PoweredByLink: {
-      color: "var(--sl-color-gray-400)",
+      color: "var(--sqm-text-subdued)",
       "font-size": "var(--sl-font-size-small)",
       display: "flex",
       alignItems: "center",
@@ -2639,7 +2644,7 @@ function PortalFooterView(props) {
         shapeRendering: "geometricprecision",
       },
       "&:hover, &:hover *": {
-        color: "var(--sl-color-gray-900)",
+        color: "var(--sqm-text)",
       },
     },
   };

package/dist/cjs/{copy-text-view-f0702822.js → copy-text-view-9017cd99.js}

@@ -71,7 +71,7 @@ function CopyTextView(props) {
     },
     errorTextStyle: {
       margin: "0",
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
     notificationTextStyle: {
       margin: "0",
@@ -88,7 +88,8 @@ function CopyTextView(props) {
     : props.buttonStyle === "button-outside"
       ? "top"
       : "top-end";
-  const copyButton = (index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (index.h("sl-icon-button", { class: sheet.classes.icon, exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (index.h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  const copyButton = (index.h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (index.h("sl-icon-button", { class: sheet.classes.icon, exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (index.h("sl-button", { exportparts: `base: ${props.buttonType || "primary"}button-base`, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  console.log("buttontype is ", props.buttonType);
   return (index.h("div", { class: sheet.classes.ContainerDiv },
     index.h("style", { type: "text/css" },
       styleString,

package/dist/cjs/{global-efeaed0c.js → global-a1506e15.js}

@@ -26414,7 +26414,7 @@ html {
   --sl-focus-ring-color-success: var(--sl-color-success-100);
   --sl-focus-ring-color-info: var(--sl-color-info-100);
   --sl-focus-ring-color-warning: var(--sl-color-warning-100);
-  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);
   --sl-focus-ring-width: 0px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
@@ -26422,16 +26422,7 @@ html {
   --sl-input-height-small: 1.875rem;
   --sl-input-height-medium: 2.5rem;
   --sl-input-height-large: 3.125rem;
-  --sl-input-background-color: var(--sl-color-white);
-  --sl-input-background-color-hover: var(--sl-color-white);
-  --sl-input-background-color-focus: var(--sl-color-white);
-  --sl-input-background-color-disabled: var(--sl-color-gray-100);
-  --sl-input-border-color: var(--sl-color-gray-300);
-  --sl-input-border-color-hover: var(--sl-color-gray-400);
-  --sl-input-border-color-disabled: var(--sl-color-gray-300);
-  --sl-input-border-width: 1px;
   --sl-input-border-radius-small: var(--sl-border-radius-medium);
-  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
   --sl-input-border-radius-large: var(--sl-border-radius-medium);
   --sl-input-font-family: var(--sl-font-sans);
   --sl-input-font-weight: var(--sl-font-weight-normal);
@@ -26439,15 +26430,11 @@ html {
   --sl-input-font-size-medium: var(--sl-font-size-medium);
   --sl-input-font-size-large: var(--sl-font-size-large);
   --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
-  --sl-input-color: var(--sl-color-gray-700);
-  --sl-input-color-hover: var(--sl-color-gray-700);
-  --sl-input-color-focus: var(--sl-color-gray-700);
   --sl-input-color-disabled: var(--sl-color-gray-900);
   --sl-input-icon-color: var(--sl-color-gray-400);
   --sl-input-icon-color-hover: var(--sl-color-gray-600);
   --sl-input-icon-color-focus: var(--sl-color-gray-600);
   --sl-input-placeholder-color: var(--sl-color-gray-400);
-  --sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
   --sl-input-spacing-small: var(--sl-spacing-small);
   --sl-input-spacing-medium: var(--sl-spacing-medium);
   --sl-input-spacing-large: var(--sl-spacing-large);
@@ -26498,14 +26485,7 @@ html {
 
   --sqm-text: white;
   --sqm-text-subdued: #b3b3b3;
-  
-  /*
-  --sqm-primary-button-background: var(--sl-color-primary-500);
-  --sqm-primary-button-background-hover: var(--sl-color-primary-300);
-  --sqm-primary-button-color: var(--sl-color-primary-text);
-  --sqm-primary-button-color-border: none;
-  --sqm-primary-button-radius: var(--sl-border-radius-large);
- */
+  --sqm-primary-color: #1ed760;
 
   --sqm-primary-button-background: #1ed760;
   --sqm-primary-button-background-hover: #1DB954;
@@ -26514,37 +26494,101 @@ html {
   --sqm-primary-button-radius: 30px;
 
 
-  --sqm-secondary-button-background: #191414; /* Spotify Black */
-  --sqm-secondary-button-background-hover: #282828; /* Slightly lighter black for hover effect */
-  --sqm-secondary-button-color: #FFFFFF; /* Spotify White for text */
-  --sqm-secondary-button-color-border: #FFFFFF; /* Spotify White for border */
+  --sqm-secondary-button-background: #191414;
+  --sqm-secondary-button-background-hover: #282828; 
+  --sqm-secondary-button-color: #FFFFFF; 
+  --sqm-secondary-button-color-border: #FFFFFF; 
   --sqm-secondary-button-radius: 30px;
+
+  --sqm-tertiary-button-background: transparent;
+  --sqm-tertiary-button-background-hover: var(--sqm-primary-color); 
+  --sqm-tertiary-button-color: var(--sqm-text); 
+  --sqm-tertiary-button-color-border: transparent; 
+  --sqm-tertiary-button-radius: 30px;
   
   --sqm-border-radius-normal: 18px;
   --sqm-border-color: white;
   --sqm-border-thickness: 1px;
 
+  --sqm-accent-color-icon: var(--sl-color-primary-600);
+  --sqm-accent-color-text: var(--sl-color-primary-950);
+  --sqm-accent-color-border: var(--sl-color-primary-400);
+  --sqm-accent-color-background: var(--sl-color-primary-300);
+
+  --sqm-success-color-icon: var(--sl-color-success-600);
+  --sqm-success-color-text: var(--sl-color-success-950);
+  --sqm-success-color-border: var(--sl-color-success-400);
+  --sqm-success-color-background: var(--sl-color-success-300);
+  
+  --sqm-warning-color-icon: var(--sl-color-warning-600);
+  --sqm-warning-color-text: var(--sl-color-warning-950);
+  --sqm-warning-color-border: var(--sl-color-warning-400);
+  --sqm-warning-color-background: var(--sl-color-warning-300);
+
+  --sqm-danger-color-icon: var(--sl-color-danger-600);
+  --sqm-danger-color-text: var(--sl-color-danger-950);
+  --sqm-danger-color-border: var(--sl-color-danger-400);
+  --sqm-danger-color-background: var(--sl-color-danger-300);
+
+  --sqm-informative-color-icon: var(--sl-color-sky-600);
+  --sqm-informative-color-text: var(--sl-color-sky-950);
+  --sqm-informative-color-border: var(--sl-color-sky-400);
+  --sqm-informative-color-background: var(--sl-color-sky-300);
 
   --sqm-input-background: #121212;
   --sqm-input-border: 1px solid #7c7c7c;
+  --sqm-input-border-color: #7c7c7c;
   --sqm-input-border-radius: 30px;
-  --sqm-input-color: white;
+  --sqm-input-color: var(--sqm-text);
   --sqm-input-focus-border: 1px solid white;
   --sqm-input-label-color: white;
   --sqm-border-width: 1px;
   --sqm-border-color-focus: white;
+  --sqm-border-color-hover: white;
   --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-border-radius-medium: var(--sqm-input-border-radius, var(--sqm-border-radius-normal));
   --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;
+  --sl-input-border-color-focus: var(--sqm-input-border-color-focus, white);
+  --sl-input-border-color: var(--sqm-input-border-color, #7c7c7c);
+  --sl-input-border-color-hover: var(--sqm-input-border-color-hover, white); 
+  --sl-input-background-color-focus: var(--sqm-input-background, #ffffff);
+  --sl-input-border-radius: var(--sqm-input-border-radius, var(--sqm-border-radius-normal));
+  --sl-input-background-color: var(--sqm-input-background, #ffffff);
+  --sl-input-color: var(--sqm-input-color, var(--sqm-text), #333); 
+  --sl-input-placeholder-color: var(--sqm-text-subdued, var(--sl-color-neutral-500));
+  --sl-input-background-color-hover: var(--sqm-input-background, #ffffff);
+  --sl-input-border-width: var(--sqm-border-width, 1px);
+  --sl-input-border-style: solid;
+
+
+
+/* --- Disabled State --- */
+--sl-input-background-color-disabled: var(--sqm-input-disabled-background, var(--sl-color-neutral-100));
+--sl-input-color-disabled: var(--sqm-input-disabled-color, var(--sl-color-neutral-500)); /* Your current: var(--sqm-input-disabled-color) */
+--sl-input-placeholder-color-disabled: var(--sl-color-neutral-400);
+
+/* --- Invalid/Error State --- */
+--sl-input-background-color-invalid: var(--sl-color-danger-50);
+--sl-input-border-color-invalid: var(--sl-color-danger-500);
+--sl-input-color-invalid: var(--sl-color-danger-700);
+
+/* --- Internal Elements (Prefix, Suffix, Clear Icon) --- */
+--sl-input-icon-color: var(--sl-color-neutral-500);
+--sl-input-icon-size: var(--sl-font-size-medium);
+--sl-input-clear-icon-color: var(--sl-color-neutral-500);
+--sl-input-clear-icon-color-hover: var(--sl-color-neutral-700);
+
+/* --- Box Shadow --- */
+--sl-input-box-shadow: none; /* Typically no box shadow by default */
+--sl-input-box-shadow-focus: 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color);
 }
 
 body {
@@ -26558,6 +26602,16 @@ body {
   background-color: var(--sqm-portal-background);
 }
 
+sl-select::part(menu) {
+  background: var(--sqm-input-background, inherit);
+  color: var(--sqm-input-color, inherit);
+  border:none;
+}
+
+sl-select::part(panel) {
+  border-radius: var(--sqm-border-radius-normal);
+}
+
 /** AL: Shading variables **/
 sl-alert[type="success"]::part(icon) {
   color: var(--sqm-success-icon-color, var(--sl-color-success-500));
@@ -26583,7 +26637,6 @@ sl-alert[type="danger"]::part(base) {
   background-color: var(--sqm-danger-icon-color, var(--sl-color-danger-100));
 }
 
-
 sl-alert[type="info"]::part(icon) {
   color: var(--sqm-info-icon-color, var(--sl-color-info-500));
 }
@@ -26629,36 +26682,6 @@ h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
 }
 
-
-h2, .Title {
-  font-size: var(--sl-font-size-large);
-  font-weight: var(--sl-font-weight-semibold);
-  margin: 0;
-}
-.H4 {
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-semibold);
-  margin: 0;
-}
-.P {
-  font-size: var(--sl-font-size-small);
-  margin-top: 0px;
-}
-
-.Title {
-  text-align: center;
-}
-
-.Subtitle {
-  text-align: center;
-  margin-bottom: 0px;
-  color: var(--sqm-text-subdued);
-}
-.SupportText{
-  margin-top: var(--sl-spacing-small);
-  text-align: center;
-}
-
 sl-button::part(base){
   width: 100%;
 }
@@ -26676,30 +26699,13 @@ sl-details::part(base){
   background-color: var(--sl-color-white);
   border-color: var(--sl-color-gray-300)
 }
+
 sl-details::part(summary) {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-semibold);
   margin: 0px;
 }
 
-/**************************
- * Now Deprecated - Use secondarybutton-base instead *
-*::part(defaultbutton-base){
-
-  color: var(--sl-color-gray-800);
-  border-color: var(--sl-color-gray-800);
-}
-*::part(defaultbutton-base):hover{
-  background-color: rgba(20,20,20,.08);
-}
-*::part(defaultbutton-base):active{
-  background-color: rgba(20,20,20,.16);
-}
-*::part(defaultbutton-base):focus{
-  box-shadow: none;
-}
-*/
-
 *::part(primarybutton-base){
   background-color: var(--sqm-primary-button-background);
   color: var(--sqm-primary-button-color);
@@ -26727,17 +26733,17 @@ sl-details::part(summary) {
 }
 
 *::part(tertiarybutton-base){
-  color: var(--sqm-text, var(--sl-color-neutral-800));
+  background-color: var(--sqm-tertiary-button-background);
+  color: var(--sqm-tertiary-button-color);
+  border-color: var(--sqm-tertiary-button-color-border);
+  border-radius: var(--sqm-tertiary-button-radius);
   width: max-content;
   display: flex;
   margin: auto;
 }
 
 *::part(tertiarybutton-base):hover{
-  color: #1ed760;
-}
-*::part(primarybutton-base):focus{
-  box-shadow: none;
+  background: var(--sqm-tertiary-button-background-hover);
 }
 
 *::part(input-label), *::part(select-label), *::part(textarea-label){
@@ -26760,8 +26766,6 @@ sqm-name-fields::part(input-base) {
   border-width: var(--sqm-border-width, 1px);
 }
 
-
-
 sl-input::part(base):focus,
 sl-select::part(form-control-wrapper):focus,
 sl-textarea::part(textarea-label):focus {
@@ -26789,36 +26793,27 @@ sl-textarea::part(textarea-label):focus {
   -webkit-text-fill-color: var(--sqm-input-color, white) !important;
 }
 
-sl-checkbox::part(input-base) {
-  border: red;
-  background: black;
+a {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
 }
 
-sl-input {
-  --sl-input-border-color-focus: var(--sqm-border-color-focus); 
-}
 
 *::part(menuitem-base):hover{
   background-color: var(--sl-color-gray-200);
   color: var(--sl-color-gray-700);
 }
 
-.poweredBy {
-  color: var(--sl-color-gray-400);
-  font-size: var(--sl-font-size-xx-small);
+sl-icon::part(base) {
+  color: var(--sqm-text);
 }
 
-.poweredBy:hover {
-  color: var(--sl-color-gray-900);
+sl-icon::part(base):hover {
+  color: var(--sqm-accent-color-icon);
 }
 
-.FooterEmail{
-  text-decoration: none;
-  font-size: var(--sl-font-size-medium);
-  color: var(--sl-color-gray-800);
-  margin: 0px;
-  cursor:pointer;
-}
+