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

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1, g as getElement, c as Host } from './index-91e7729f.js';
 import { n as h, j as useReducer, u as useMemo, f as useEffect } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-7687af94.js';
+import { i as intl } from './global-66746c30.js';
 import { i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import { G as GenericTableView } from './GenericTableView-708c49d6.js';
+import { G as GenericTableView } from './GenericTableView-3b6f9ccc.js';
 import { a as useRequestRerender, u as useRerenderListener } from './re-render-cc945f38.js';
 import { u as useChildElements } from './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
@@ -453,6 +453,7 @@ const ReferralTableRewardsCell = class {
           padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
         },
         "&::part(base)": {
+          border: "1px solid var(--sqm-border-color)",
           opacity: "1",
         },
         "&::part(summary-icon)": {
@@ -460,7 +461,6 @@ const ReferralTableRewardsCell = class {
         },
         "&::part(summary-icon[open])": {
           transform: "rotate(-90deg)",
-          background: "red",
         },
       },
       BadgeContainer: {
@@ -471,23 +471,64 @@ const ReferralTableRewardsCell = class {
       BoldText: {
         "font-weight": "var(--sl-font-weight-semibold)",
       },
-      StatusBadge: {
+      RedeemBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
+          background: "var(--sqm-informative-color-background)",
+          color: "var(--sqm-informative-color-text)",
         },
       },
-      RedeemBadge: {
+      DangerBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
-          background: "var(--sl-color-blue-600)",
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-danger-color-background)",
+          color: "var(--sqm-danger-color-text)",
+        },
+      },
+      WarningBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-warning-color-background)",
+          color: "var(--sqm-warning-color-text)",
+        },
+      },
+      SuccessBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-success-color-background)",
+          color: "var(--sqm-success-color-text)",
         },
       },
     };
     const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
+    const getBadgeCSSClass = (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;
+      }
+    };
     const getState = (reward, taxConnection) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
       const possibleStates = [
@@ -588,19 +629,13 @@ const ReferralTableRewardsCell = class {
       }, {
         status: state,
       });
-      return (h$1("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, h$1("style", { type: "text/css" }, styleString), h$1("div", { slot: "summary", class: sheet.classes.DetailsContainer }, h$1(TextSpanView, { type: "p" }, h$1("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)), h$1("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (h$1("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
+      return (h$1("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails }, h$1("style", { type: "text/css" }, styleString), h$1("div", { slot: "summary", class: sheet.classes.DetailsContainer }, h$1(TextSpanView, { type: "p" }, h$1("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)), h$1("div", { class: sheet.classes.BadgeContainer }, state === "PENDING" && reward.dateScheduledFor ? (h$1("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, intl.formatMessage({
         id: "pendingForText",
         defaultMessage: this.pendingForText,
       }, {
         status: badgeText,
         date: getTimeDiff(reward.dateScheduledFor),
-      }))) : (h$1("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)), reward.dateExpires && state === "AVAILABLE" && (h$1("sl-badge", { class: slBadgeType === "primary"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.StatusBadge, type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`)))), h$1("div", null, state === "PENDING_REVIEW" && ((_a = reward.referral) === null || _a === void 0 ? void 0 : _a.dateModerated) && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.DateTime.fromMillis(reward.referral.dateModerated)
+      }))) : (h$1("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, badgeText)), reward.dateExpires && state === "AVAILABLE" && (h$1("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: "info", pill: true }, this.expiringText, ` ${getTimeDiff(reward.dateExpires)}`)))), h$1("div", null, state === "PENDING_REVIEW" && ((_a = reward.referral) === null || _a === void 0 ? void 0 : _a.dateModerated) && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.DateTime.fromMillis(reward.referral.dateModerated)
         .setLocale(luxonLocale(this.locale))
         .toLocaleString(luxon.DateTime.DATE_MED))))), state === "PAYOUT_APPROVED" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PAYOUT_FAILED" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PAYOUT_CANCELLED" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PENDING_TAX_REVIEW" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PENDING_NEW_TAX_FORM" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PENDING_TAX_SUBMISSION" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "PENDING_PARTNER_CREATION" && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText))), state === "DENIED" && ((_b = reward.referral) === null || _b === void 0 ? void 0 : _b.dateModerated) && (h$1("div", null, h$1(TextSpanView, { type: "p" }, statusText, " ", h$1("span", { class: sheet.classes.BoldText, part: "sqm-cell-value" }, luxon.DateTime.fromMillis(reward.referral.dateModerated)
         .setLocale(luxonLocale(this.locale))
@@ -704,17 +739,54 @@ const ReferralTableRewardsColumn = class {
 };
 
 const style = {
-  Badge: {
+  SubText: {
+    fontSize: "var(--sl-font-size-small)",
+    color: "var(--sqm-text-subdued)",
+    margin: "0",
+  },
+  RedeemBadge: {
     "&::part(base)": {
       fontSize: "var(--sl-font-size-small)",
       padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
       whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-background)",
+      color: "var(--sqm-informative-color-text)",
     },
   },
-  SubText: {
-    fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
-    margin: "0",
+  DangerBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-background)",
+      color: "var(--sqm-danger-color-text)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-background)",
+      color: "var(--sqm-warning-color-text)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-background)",
+      color: "var(--sqm-success-color-text)",
+    },
   },
 };
 const sheet = createStyleSheet(style);
@@ -724,6 +796,8 @@ const ReferralTableStatusCell = class {
     registerInstance(this, hostRef);
   }
   render() {
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
     const getBadgeType = (fraudStatus) => {
       if (fraudStatus === "PENDING")
         return "warning";
@@ -733,7 +807,22 @@ const ReferralTableStatusCell = class {
         return "success";
       return "warning";
     };
-    return (h$1("div", null, h$1("style", { type: "text/css" }, styleString), h$1("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: sheet.classes.Badge }, this.statusText), this.statusSubText ? (h$1("p", { class: sheet.classes.SubText }, this.statusSubText)) : null));
+    const getBadgeCSSClass = (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;
+      }
+    };
+    return (h$1("div", null, h$1("style", { type: "text/css" }, styleString), h$1("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: getBadgeCSSClass(getBadgeType(this.fraudStatus)) }, this.statusText), this.statusSubText ? (h$1("p", { class: sheet.classes.SubText }, this.statusSubText)) : null));
   }
 };
 

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

@@ -1,12 +1,12 @@
 import { h, r as registerInstance, c as Host } from './index-91e7729f.js';
 import { b as browser, j as useReducer, f as useEffect, n as h$1, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-7687af94.js';
+import { i as intl } from './global-66746c30.js';
 import { d as dist, J, H, L, w as wn, R as Rn, i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import { G as GenericTableView } from './GenericTableView-708c49d6.js';
+import { G as GenericTableView } from './GenericTableView-3b6f9ccc.js';
 import { u as useRerenderListener, a as useRequestRerender } from './re-render-cc945f38.js';
 import { u as useChildElements } from './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
@@ -583,11 +583,11 @@ const RewardTableRewardsCell = class {
             height: "3px",
             width: "100%",
             margin: "var(--sl-spacing-xx-small) 0",
-            background: "var(--sl-color-neutral-200)",
+            background: "var(--sqm-border-color)",
             "&:after": {
               content: '""',
               display: "block",
-              background: "var(--sl-color-primary-300)",
+              background: "var(--sqm-accent-color-icon)",
               borderRadius: "100px",
               width: `${progress}%`,
               height: "100%",
@@ -681,7 +681,7 @@ const RewardTableSourceCell = class {
       var _a;
       const rewardExchange = (h("div", null, h("span", { style: {
           fontSize: "var(--sl-font-size-small)",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text-subdued)",
         } }, this.rewardExchangeText), h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
         _a.prettyRedeemedCredit, " → ", reward.prettyValue));
       return reward.exchangedRewardRedemptionTransaction.prettyRedeemedCredit
@@ -705,10 +705,10 @@ const RewardTableSourceCell = class {
     };
     const Source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
       this.reward.rewardSource === "REFERRED" ? (this.reward.referral === null ? (h("p", { style: {
-        color: "var(--sl-color-gray-400)",
+        color: "var(--sqm-text-subdued)",
       } }, this.deletedReferralText)) : (h("div", null, h("div", { style: {
         fontSize: "var(--sl-font-size-small)",
-        color: "var(--sl-color-neutral-500)",
+        color: "var(--sqm-text-subdued)",
       } }, intl.formatMessage({
       id: "referralText",
       defaultMessage: this.referralText,
@@ -791,14 +791,47 @@ const style$1 = {
   },
   RedeemBadge: {
     "&::part(base)": {
+      padding: "4px 8px",
       fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-background)",
+      color: "var(--sqm-informative-color-text)",
+    },
+  },
+  DangerBadge: {
+    "&::part(base)": {
       padding: "4px 8px",
-      background: "var(--sl-color-blue-600)",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-background)",
+      color: "var(--sqm-danger-color-text)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-background)",
+      color: "var(--sqm-warning-color-text)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-background)",
+      color: "var(--sqm-success-color-text)",
     },
   },
   Date: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
 };
@@ -946,9 +979,42 @@ const RewardTableStatusCell = class {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    return (h("div", { style: { display: "contents" } }, h("style", { type: "text/css" }, styleString$1), h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-        ? sheet$1.classes.RedeemBadge
-        : sheet$1.classes.Badge }, statusText), h("p", { class: sheet$1.classes.Date }, fraudStatusText ||
+    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;
+      // }
+      switch (rewardStatus) {
+        case "AVAILABLE":
+          return sheet$1.classes.SuccessBadge;
+        case "REDEEMED":
+        case "PAYOUT_APPROVED":
+          return sheet$1.classes.RedeemBadge;
+        case "PENDING":
+        case "PENDING_REVIEW":
+          return sheet$1.classes.WarningBadge;
+        default:
+          return sheet$1.classes.DangerBadge;
+      }
+    };
+    const badgeCSSClass = getBadgeCSSClass(badgeType);
+    return (h("div", { style: { display: "contents" } }, h("style", { type: "text/css" }, styleString$1), h("sl-badge", { type: badgeType, pill: true,
+      // class={
+      //   rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
+      //     ? sheet.classes.RedeemBadge
+      //     : sheet.classes.Badge
+      // }
+      class: badgeCSSClass }, statusText), h("p", { class: sheet$1.classes.Date }, fraudStatusText ||
       pendingReasons ||
       this.getPayoutStatusText(rewardStatus) ||
       date)));

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

@@ -1,14 +1,14 @@
 import { h, r as registerInstance, c as Host } from './index-91e7729f.js';
 import { a as commonjsGlobal, u as useMemo, k as useState, f as useEffect, c as createCommonjsModule, n as h$1 } from './stencil-hooks.module-4bc38af4.js';
-import './global-7687af94.js';
+import './global-66746c30.js';
 import { j as jn, k as kn, b as setUserIdentity, d as dist, X as Xe, p as setProgramId } from './index.module-89a79f66.js';
 import './cjs-bdfb4486.js';
 import './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './useReferralCodes-8f75921a.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-0faf5db4.js';
-import { G as GenericTableView } from './GenericTableView-708c49d6.js';
+import { C as CopyTextView } from './copy-text-view-4a207b17.js';
+import { G as GenericTableView } from './GenericTableView-3b6f9ccc.js';
 import './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
 import './sqm-text-span-view-cd3902e5.js';
@@ -20,20 +20,20 @@ import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-84b3c539.j
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ef8180f.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-f898265a.js';
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-6e046743.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-4a0f0e0e.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-00f03873.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-55fc0873.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-e870b4b0.js';
 import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-d732a5df.js';
 import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-5d651c04.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-62d46ac3.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-0d45de87.js';
 import './utilities-5b0ca040.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-6903828e.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-01ac711f.js';
 import './ErrorView-48e2b969.js';
-import { Q as QrCodeView } from './sqm-qr-code-view-10b8b4cb.js';
-import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-4e3d77d4.js';
+import { Q as QrCodeView } from './sqm-qr-code-view-62c10948.js';
+import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-5f9b6d07.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
-import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-b33d96e3.js';
+import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-b7e91eef.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

package/dist/esm/sqm-tabs.entry.js

@@ -18,8 +18,15 @@ const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
     sl-tab::part(base) {
       color: ${textColor};
     }
+
+    sl-tab-group {
+      --sl-color-primary-500: var(--sqm-accent-color-icon);
+    }
+
+    sl-tab-group::part(tabs) {
+      border-bottom: 2px solid var(--sqm-border-color);
+    }
   `;
-  console.log("text color is ", textColor);
   return (h(Host, null,
     h("style", { type: "text/css" }, vanillaStyle),
     h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {

package/dist/esm-es5/GenericTableView-3b6f9ccc.js

@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var a,t=1,r=arguments.length;t<r;t++){a=arguments[t];for(var s in a)if(Object.prototype.hasOwnProperty.call(a,s))e[s]=a[s]}return e};return __assign.apply(this,arguments)};import{h}from"./index-91e7729f.js";import{c as createStyleSheet}from"./JSS-67b5cff8.js";import{g as gap}from"./mixins-f750863a.js";function GenericTableView(e){var a;var t=e.states,r=e.data,s=e.callbacks,l=e.elements;var i=l.columns,o=l.rows;var n=t.show;var d=r.hiddenColumns&&r.hiddenColumns.split(",").map(Number);var p="@media (max-width: "+r.mdBreakpoint+"px)";var m="@media (min-width: "+(Boolean(o.length<2)?r.mdBreakpoint:r.smBreakpoint)+"px) and (max-width: "+r.mdBreakpoint+"px)";var c={Table:(a={borderCollapse:"collapse",tableLayout:"fixed",width:"100%","& tbody tr":{borderBottom:"1px solid var(--sqm-border-color)","&:first-child":{borderTop:"1px solid var(--sqm-border-color)"}},"& th":{paddingBottom:"var(--sl-spacing-small)",textAlign:"left",fontWeight:"var(--sl-font-weight-semibold)",overflowWrap:"anywhere"},"& td":{padding:"var(--sl-spacing-small)",paddingLeft:"0",overflow:"hidden",textOverflow:"ellipsis"}},a[p]={"& thead":{display:"none"},"& tr":{display:"block",background:"inherit",border:"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)",fontSize:"var(--sl-font-size-small)",marginBottom:"var(--sl-spacing-large)"},"& td":{display:"grid",borderTop:"none",padding:"0",marginBottom:"var(--sl-spacing-medium)","&:first-child":{textAlign:"left"},"&:before":{content:"attr(data-label)",whiteSpace:"nowrap"},"&:last-child":{marginBottom:"0"},"&.hidden:before":{content:"none"}}},a[m]={"& tbody":{display:"grid",gridTemplateColumns:"0.5fr 0.5fr",gap:"25px"}},a),ButtonContainer:__assign({display:"flex","justify-content":"flex-end","margin-top":"var(--sl-spacing-small)"},gap({direction:"row",size:"var(--sl-spacing-small)"})),ButtonDisabled:{"&::part(base)":{opacity:"0.25"}}};var b=createStyleSheet(c);var g=b.toString();if(n==="empty")return l.emptyElement;return h("div",null,h("style",{type:"text/css"},g),h("table",{class:b.classes.Table},r.textOverrides.showLabels&&h("thead",null,h("tr",null,i===null||i===void 0?void 0:i.map((function(e){if(typeof e==="string")return h("th",null,e);return h("th",{style:{width:"30px"}},e)})))),h("tbody",null,n==="loading"&&l.loadingElement,n==="rows"&&(o===null||o===void 0?void 0:o.map((function(e,a){return h("tr",{style:{borderTop:""+(!r.textOverrides.showLabels&&a===0?"none":"")},part:"table-row"},e.map((function(e,a){return typeof i[a]==="string"?h("td",{class:(d===null||d===void 0?void 0:d.includes(a))?"hidden":"","data-label":i[a]+":",style:{gridTemplateColumns:(d===null||d===void 0?void 0:d.includes(a))?"1fr":"0.5fr 0.5fr"}},e):h("td",null,e)})))}))))),h("div",{class:b.classes.ButtonContainer,part:t.namespace+"-button-wrapper"},h("sl-button",{size:"small",disabled:!t.hasPrev,loading:n==="loading",onClick:s.prevPage,exportparts:"base: secondarybutton-base",class:!t.hasPrev?b.classes.ButtonDisabled:""},r.textOverrides.prevLabel),h("sl-button",{size:"small",loading:n==="loading",disabled:!t.hasNext,onClick:s.nextPage,exportparts:"base: secondarybutton-base",class:!t.hasNext?b.classes.ButtonDisabled:""},r.textOverrides.moreLabel)))}export{GenericTableView as G};