@saasquatch/mint-components 1.15.0-21 → 1.15.0-23

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-3a7b5592.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-3a7b5592.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-3a7b5592.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-22fe1a8c.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-fe3da5a3.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-f641a7de.js');
+const ShadowViewAddon = require('./ShadowViewAddon-2a3becd8.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-2d5441b9.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

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

@@ -2,23 +2,27 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
 export function PortalFrameView(props, children) {
-  const { data, notFullScreen } = props;
+  const { data, notFullScreen, border } = props;
   const style = {
     HostBlock: HostBlock,
     Frame: {
       display: "flex",
       "flex-direction": "column",
       "box-sizing": "border-box",
+      "&:nth-child(2)": {
+        background: props.backgroundColor,
+      },
     },
     FooterWrapper: {
       width: "100%",
       "max-width": "100%",
       padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
-      background: props.backgroundColor,
+      background: props.headerAndFooterBackgroundColor,
       display: "flex",
       "justify-content": "flex-end",
       "align-items": "center",
       "box-sizing": "border-box",
+      borderTop: border,
       "margin-top": "auto",
     },
     HeaderWrapper: {
@@ -29,7 +33,8 @@ export function PortalFrameView(props, children) {
       "justify-content": "space-between",
       padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
       "align-items": "center",
-      background: props.backgroundColor,
+      borderBottom: border,
+      background: props.headerAndFooterBackgroundColor,
       "@media screen and (max-width: 499px)": {
         "flex-direction": "row-reverse",
         "justify-content": "flex-end",

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

@@ -21,6 +21,20 @@ export class PortalFrame {
      * @uiType string
      */
     this.backgroundColor = "var(--sqm-portal-background, #fff);";
+    // TODO: Replace with border variable later
+    /**
+     * Borders placed to seperate the header and footer from the body content.
+     * @uiName Border
+     * @uiType string
+     */
+    this.border = "1px solid var(--sqm-text, #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);";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -84,12 +98,63 @@ export class PortalFrame {
       "reflect": false,
       "defaultValue": "\"var(--sqm-portal-background, #fff);\""
     },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Borders placed to seperate the header and footer from the body content."
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"1px solid var(--sqm-text, #eaeaea);\""
+    },
+    "headerAndFooterBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header and Footer Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Background color for the header and footer."
+      },
+      "attribute": "header-and-footer-background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalFrameViewProps>",
-        "resolved": "{ data?: { footer: VNode; header: VNode; }; backgroundColor?: string; notFullScreen?: boolean; }",
+        "resolved": "{ data?: { footer: VNode; header: VNode; }; backgroundColor?: string; notFullScreen?: boolean; border?: string; headerAndFooterBackgroundColor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -123,6 +188,8 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
   return deepmerge({
     notFullScreen: true,
     backgroundColor: props.backgroundColor,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
+    border: props.border,
     data: {
       footer: footerContent ? (footerContent) : (h("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (h("div", { style: { display: "flex", flexDirection: "column" } },

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

@@ -10,5 +10,7 @@ export function usePortalFrame(footerContent, headerContent, props) {
       rerender,
     },
     backgroundColor: props.backgroundColor,
+    border: props.border,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }

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/components/sqm-share-button/sqm-share-button.js

@@ -536,7 +536,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; pill?: boolean; type?: \"text\" | \"primary\" | \"secondary\" | \"warning\" | \"info\" | \"success\" | \"default\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; border?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
+        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; border?: string; pill?: boolean; type?: \"text\" | \"primary\" | \"secondary\" | \"warning\" | \"info\" | \"success\" | \"default\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
         "references": {
           "DemoData": {
             "location": "import",

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-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;
+  --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,31 @@ 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);
 }
 
-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-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;
+  --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,31 @@ 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);
 }
 
-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-908b4435.js → ShadowViewAddon-ac486867.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-2f638eba.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';
@@ -267,23 +267,27 @@ function BigStatView(props) {
 }
 
 function PortalFrameView(props, children) {
-  const { data, notFullScreen } = props;
+  const { data, notFullScreen, border } = props;
   const style = {
     HostBlock: HostBlock,
     Frame: {
       display: "flex",
       "flex-direction": "column",
       "box-sizing": "border-box",
+      "&:nth-child(2)": {
+        background: props.backgroundColor,
+      },
     },
     FooterWrapper: {
       width: "100%",
       "max-width": "100%",
       padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
-      background: props.backgroundColor,
+      background: props.headerAndFooterBackgroundColor,
       display: "flex",
       "justify-content": "flex-end",
       "align-items": "center",
       "box-sizing": "border-box",
+      borderTop: border,
       "margin-top": "auto",
     },
     HeaderWrapper: {
@@ -294,7 +298,8 @@ function PortalFrameView(props, children) {
       "justify-content": "space-between",
       padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
       "align-items": "center",
-      background: props.backgroundColor,
+      borderBottom: border,
+      background: props.headerAndFooterBackgroundColor,
       "@media screen and (max-width: 499px)": {
         "flex-direction": "row-reverse",
         "justify-content": "flex-end",

package/dist/esm/{global-5e65213d.js → global-2f638eba.js}

@@ -26516,6 +26516,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-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;
+  --sl-input-border-color: #7c7c7c;
+  --sl-input-border-color-hover: white;
 }
 
 body {
@@ -26596,15 +26616,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);
 }
@@ -26691,8 +26702,6 @@ sl-details::part(summary) {
   background-color: var(--sqm-primary-button-background-hover);
 }
 
-
-
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
@@ -26712,27 +26721,31 @@ 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);
 }
 
-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);