@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

package/dist/collection/global/global.js

@@ -19,7 +19,7 @@ try {
   // SlAlert.register();
   registerIconLibrary("default", {
     // same link that shoelace uses internally
-    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.2.0/icons/${name}.svg`,
+    resolver: (name) => `https://fast.ssqt.io/npm/bootstrap-icons@1.7.2/icons/${name}.svg`,
   });
   // SlAlert.register();
   customElements.define("sl-alert", SlAlert);

package/dist/collection/global/styles.js

@@ -503,11 +503,11 @@ html {
   --sl-line-height-dense: 1.4;
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: #0ea5e954;
-  --sl-focus-ring-color-success: #22c55e54;
-  --sl-focus-ring-color-info: #6b728054;
-  --sl-focus-ring-color-warning: #f59e0b54;
-  --sl-focus-ring-color-danger: #ef444454;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --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-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
@@ -583,7 +583,7 @@ html {
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: var(--sl-color-gray-50);
+  --sqm-portal-background: transparent;
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 1280px;
@@ -606,6 +606,14 @@ a:visited {
 a:hover {
   color: var(--sl-color-primary-600);
 }
+// .terms-link,
+// .terms-link:visited {
+//   color: var(--sl-color-gray-500);
+//   text-decoration: none;
+// }
+// .terms-link:hover {
+//   color: var(--sl-color-gray-600);
+// }
 h2, .Title {
   font-size: var(--sl-font-size-large);
   font-weight: var(--sl-font-weight-semibold);
@@ -714,72 +722,6 @@ sl-input::part(label){
   color: var(--sl-color-gray-900);
 }
 
-// The following commented out styles should be moved to Service Titan
-
-// stn-row[topmargin="x-large"] {
-//   margin-top: var(--sl-spacing-x-large);
-// }
-
-// stn-wrapper-column {
-//   max-width: var(--sqm-content-max-width);
-//   margin: var(--sl-spacing-x-large) auto;
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-wrapper-column > :not(:first-child), stn-wrapper-item > :not(:first-child) {
-//   margin-top: var(--sl-spacing-medium);
-// }
-
-// stn-wrapper-item, stn-wrapper-column{
-//   display: flex;
-//   flex-direction: column;
-//   box-sizing: border-box;
-//   width: 100%;
-//   height: auto;
-// }
-// stn-wrapper-item {
-//   padding: var(--sl-spacing-large);
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-row {
-//   display: flex;
-// }
-
-// stn-row[gap="medium"] > :not(:first-child) {
-//   margin-left: var(--sl-spacing-medium);
-// }
-
-// stn-row[space="even"] > * {
-//   flex: 1 1 0;
-// }
-
-// *::part(erroralert-icon), *::part(successalert-icon){
-//   align-items: flex-start;
-//   padding-top: var(--sl-spacing-large);
-// }
-
-// *::part(erroralert-text){
-//   color: var(--sl-color-danger-500);
-// }
-
-// *::part(successalert-text) {
-//   color: var(--sl-color-success-600);
-// }
-
-// *::part(successalert-text),
-// *::part(erroralert-text) {
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-semibold);
-//   width: 100%;
-// }
-// *::part(successalert-subtext){
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-normal);
-//   color: var(--sl-color-gray-800);
-//   width: 100%;
-// }
-
 .FooterEmail{
   text-decoration: none;
   font-size: var(--sl-font-size-medium);

package/dist/collection/global/styles.ts

@@ -504,11 +504,11 @@ html {
   --sl-line-height-dense: 1.4;
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: #0ea5e954;
-  --sl-focus-ring-color-success: #22c55e54;
-  --sl-focus-ring-color-info: #6b728054;
-  --sl-focus-ring-color-warning: #f59e0b54;
-  --sl-focus-ring-color-danger: #ef444454;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --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-width: 3px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
@@ -584,7 +584,7 @@ html {
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: var(--sl-color-gray-50);
+  --sqm-portal-background: transparent;
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 1280px;
@@ -607,6 +607,14 @@ a:visited {
 a:hover {
   color: var(--sl-color-primary-600);
 }
+// .terms-link,
+// .terms-link:visited {
+//   color: var(--sl-color-gray-500);
+//   text-decoration: none;
+// }
+// .terms-link:hover {
+//   color: var(--sl-color-gray-600);
+// }
 h2, .Title {
   font-size: var(--sl-font-size-large);
   font-weight: var(--sl-font-weight-semibold);
@@ -715,72 +723,6 @@ sl-input::part(label){
   color: var(--sl-color-gray-900);
 }
 
-// The following commented out styles should be moved to Service Titan
-
-// stn-row[topmargin="x-large"] {
-//   margin-top: var(--sl-spacing-x-large);
-// }
-
-// stn-wrapper-column {
-//   max-width: var(--sqm-content-max-width);
-//   margin: var(--sl-spacing-x-large) auto;
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-wrapper-column > :not(:first-child), stn-wrapper-item > :not(:first-child) {
-//   margin-top: var(--sl-spacing-medium);
-// }
-
-// stn-wrapper-item, stn-wrapper-column{
-//   display: flex;
-//   flex-direction: column;
-//   box-sizing: border-box;
-//   width: 100%;
-//   height: auto;
-// }
-// stn-wrapper-item {
-//   padding: var(--sl-spacing-large);
-//   background-color: var(--sqm-content-background);
-// }
-
-// stn-row {
-//   display: flex;
-// }
-
-// stn-row[gap="medium"] > :not(:first-child) {
-//   margin-left: var(--sl-spacing-medium);
-// }
-
-// stn-row[space="even"] > * {
-//   flex: 1 1 0;
-// }
-
-// *::part(erroralert-icon), *::part(successalert-icon){
-//   align-items: flex-start;
-//   padding-top: var(--sl-spacing-large);
-// }
-
-// *::part(erroralert-text){
-//   color: var(--sl-color-danger-500);
-// }
-
-// *::part(successalert-text) {
-//   color: var(--sl-color-success-600);
-// }
-
-// *::part(successalert-text),
-// *::part(erroralert-text) {
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-semibold);
-//   width: 100%;
-// }
-// *::part(successalert-subtext){
-//   font-size: var(--sl-font-size-medium);
-//   font-weight: var(--sl-font-weight-normal);
-//   color: var(--sl-color-gray-800);
-//   width: 100%;
-// }
-
 .FooterEmail{
   text-decoration: none;
   font-size: var(--sl-font-size-medium);

package/dist/collection/stories/NewPortal.stories.js

@@ -2,8 +2,7 @@ import { h } from "@stencil/core";
 import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
 import { ShareButtonView } from "../components/sqm-share-button/sqm-share-button-view";
 import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../styling/JSS";
 import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
 import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
@@ -20,8 +19,7 @@ const style = {
     "text-decoration": "underline",
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const barProps = {
   data: {
@@ -130,10 +128,10 @@ export const Dashboard = () => {
             h("h1", null, "John Smith"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58 }), "Referrals"),
-          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000 }), "Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500 }), "Awaiting Payout"))),
+          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500, loading: false }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58, loading: false }), "Referrals"),
+          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500, loading: false }), "Awaiting Payout"))),
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         h(PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
@@ -257,10 +255,10 @@ export const Commissions = () => {
               "program"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000 }), "Total Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000 }), "Available"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000 }), "Pending"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000 }), "Redeemed"))))));
+          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000, loading: false }), "Total Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000, loading: false }), "Available"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000, loading: false }), "Pending"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000, loading: false }), "Redeemed"))))));
 };
 export const Activity = () => {
   return (h("sqm-divided-layout", { direction: "row" },
@@ -287,10 +285,10 @@ export const Activity = () => {
           label: (h("sqm-text", null,
             h("h3", null, "Referral Activity"))),
           content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000 }), "Total Referrals"),
-            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "Converted"),
-            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "Pending"),
-            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20 }), "Disqualified"))),
+            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000, loading: false }), "Total Referrals"),
+            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "Converted"),
+            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
+            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20, loading: false }), "Disqualified"))),
         }))),
       h(PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
@@ -298,8 +296,8 @@ export const Activity = () => {
         label: (h("sqm-text", null,
           h("h3", null, "Traffic Generated"))),
         content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "From share link"),
-          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "From share mediums"))),
+          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000, loading: false }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "From share link"),
+          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "From share mediums"))),
       })))));
 };

package/dist/collection/styling/JSS.js

@@ -0,0 +1,9 @@
+import preset from "jss-preset-default";
+import { create } from "jss";
+export const jss = create(preset());
+export const createStyleSheet = (...args) => jss.createStyleSheet(...args);
+/**
+ * Use this preset instead of creating a new JSS instance everywhere
+ *
+ */
+export default jss;

package/dist/collection/tables/GenericTableView.js

@@ -1,51 +1,110 @@
 import { h } from "@stencil/core";
-import { TextSpanView } from "../components/sqm-text-span/sqm-text-span-view";
-import jss from "jss";
-import preset from "jss-preset-default";
 import { gap } from "../global/mixins";
-const style = {
-  THead: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-    "text-align": "left",
-  },
-  TCell: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-  },
-  TRow: {
-    "border-top": "1px solid #EAEAEA",
-  },
-  Table: {
-    "border-collapse": "collapse",
-    width: "100%",
-  },
-  ButtonContainer: {
-    display: "flex",
-    "justify-content": "flex-end",
-    "margin-top": "var(--sl-spacing-small)",
-    ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
-  },
-};
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
+import { createStyleSheet } from "../styling/JSS";
 export function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;
   const { columns, rows } = elements;
   const { show } = states;
+  console.log("table", props);
+  const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
+  const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
+  const style = {
+    Table: {
+      //   borderCollapse: "collapse",
+      tableLayout: "fixed",
+      width: "100%",
+      "& th": {
+        paddingBottom: "var(--sl-spacing-small)",
+        textAlign: "left",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        overflowWrap: "anywhere",
+      },
+      "& tr": {},
+      "& td": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+        padding: "var(--sl-spacing-small)",
+        paddingLeft: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+      },
+      [mobile]: {
+        "& thead": {
+          display: "none",
+        },
+        "& tr": {
+          display: "block",
+          background: "#FFFFFF",
+          border: "1px solid var(--sl-color-neutral-200)",
+          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+          borderRadius: "var(--sl-border-radius-medium)",
+          padding: "var(--sl-spacing-medium)",
+          fontSize: "var(--sl-font-size-small)",
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "& td": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          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",
+          },
+        },
+      },
+      [tablet]: {
+        "& tbody": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          gap: "25px",
+        },
+      },
+    },
+    ButtonContainer: {
+      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",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  if (show === "empty") {
+    return h("div", { style: { width: "100%" } }, elements.emptyElement);
+  }
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
       data.textOverrides.showLabels && (h("thead", null,
-        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet.classes.THead },
-          h(TextSpanView, { type: "h3" }, column))))))),
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", null, column)))))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
-        show === "empty" && elements.emptyElement,
-        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet.classes.TRow, style: {
-            borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
-          }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet.classes.TCell },
-          h(TextSpanView, { type: "p" }, cell)))))))))),
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => {
+          console.log("ROW", row);
+          return (h("tr", { style: {
+              borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+            }, part: "table-row" }, row.map((cell, j) => {
+            console.log("CELL", cell);
+            return (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":" }, cell));
+          })));
+        })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
-      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
-      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
 }

package/dist/collection/tables/TableSlots.js

@@ -1,7 +1,15 @@
 import { h } from "@stencil/core";
 export function LoadingSlot() {
   return (h("slot", { name: "loading" },
-    h(LoadingSkeleton, null)));
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+export function LoadingRow() {
+  return (h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))));
 }
 export function LoadingSkeleton() {
   return (h("div", { style: { width: "100%" } },

package/dist/collection/utils/RequiredPropsError.js

@@ -1,8 +1,7 @@
 import { useHost } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../styling/JSS";
 const style = {
   IconStyle: {
     display: "block",
@@ -22,8 +21,7 @@ const style = {
     margin: "30px",
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function RequiredPropsError({ missingProps }) {
   if (!missingProps)

package/dist/collection/utils/utils.js

@@ -31,3 +31,11 @@ export function getMissingProps(props) {
   const missingProps = props.filter((prop) => !prop.value);
   return missingProps.length ? missingProps : false;
 }
+export function luxonLocale(locale) {
+  const splitLocale = locale === null || locale === void 0 ? void 0 : locale.split("_");
+  if (!splitLocale || splitLocale.length === 1)
+    return locale;
+  const language = splitLocale[0];
+  const country = splitLocale[1];
+  return `${language}-${country.toUpperCase()}`;
+}

package/dist/esm/GenericTableView-6e103d56.js

@@ -0,0 +1,113 @@
+import { h } from './index-17b4da69.js';
+import { g as gap } from './mixins-10353a39.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
+
+function GenericTableView(props) {
+  const { states, data, callbacks, elements } = props;
+  const { columns, rows } = elements;
+  const { show } = states;
+  console.log("table", props);
+  const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
+  const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
+  const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
+  const style = {
+    Table: {
+      //   borderCollapse: "collapse",
+      tableLayout: "fixed",
+      width: "100%",
+      "& th": {
+        paddingBottom: "var(--sl-spacing-small)",
+        textAlign: "left",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        overflowWrap: "anywhere",
+      },
+      "& tr": {},
+      "& td": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+        padding: "var(--sl-spacing-small)",
+        paddingLeft: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+      },
+      [mobile]: {
+        "& thead": {
+          display: "none",
+        },
+        "& tr": {
+          display: "block",
+          background: "#FFFFFF",
+          border: "1px solid var(--sl-color-neutral-200)",
+          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+          borderRadius: "var(--sl-border-radius-medium)",
+          padding: "var(--sl-spacing-medium)",
+          fontSize: "var(--sl-font-size-small)",
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "& td": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          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",
+          },
+        },
+      },
+      [tablet]: {
+        "& tbody": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          gap: "25px",
+        },
+      },
+    },
+    ButtonContainer: {
+      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",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  if (show === "empty") {
+    return h("div", { style: { width: "100%" } }, elements.emptyElement);
+  }
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("table", { class: sheet.classes.Table },
+      data.textOverrides.showLabels && (h("thead", null,
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", null, column)))))),
+      h("tbody", null,
+        show === "loading" && elements.loadingElement,
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => {
+          console.log("ROW", row);
+          return (h("tr", { style: {
+              borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+            }, part: "table-row" }, row.map((cell, j) => {
+            console.log("CELL", cell);
+            return (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":" }, cell));
+          })));
+        })))),
+    h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
+}
+
+export { GenericTableView as G };

package/dist/esm/{jss-preset-default.esm-71fae192.js → JSS-96eeab98.js}

@@ -1,4 +1,4 @@
-import { _ as _extends } from './extends-3a3f9fe2.js';
+import { _ as _extends } from './extends-c31f1eff.js';
 
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -4267,4 +4267,7 @@ var create$1 = function create(options) {
   };
 };
 
-export { create$1 as c, jss as j };
+const jss$1 = create(create$1());
+const createStyleSheet = (...args) => jss$1.createStyleSheet(...args);
+
+export { createStyleSheet as c };