@saasquatch/mint-components 1.5.0-8 → 1.5.0-80

package/dist/esm/sqm-form-message.entry.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
+import { m as h } from './stencil-hooks.module-2f159754.js';
+
+const sqmFormMessageCss = "sl-alert::part(base){border:1px solid;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(20, 20, 20, 0.1);box-shadow:0 1px 2px rgba(20, 20, 20, 0.1)}.Error::part(base){background-color:var(--sl-color-danger-100);border-color:var(--sl-color-danger-200)}.Success::part(base){background-color:var(--sl-color-success-100);border-color:var(--sl-color-success-200)}.Info::part(base){background-color:var(--sl-color-primary-100);border-color:var(--sl-color-primary-200)}";
+
+const FormMessage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    if (this.type === "error") {
+      return (h$1("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }), h$1("slot", null)));
+    }
+    else if (this.type === "info") {
+      return (h$1("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }), h$1("slot", null)));
+    }
+    else {
+      return (h$1("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true }, h$1("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), h$1("slot", null)));
+    }
+  }
+};
+FormMessage.style = sqmFormMessageCss;
+
+export { FormMessage as sqm_form_message };

package/dist/esm/sqm-graphql-client-provider.entry.js

@@ -1,15 +1,16 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { o as m, e as useEffect, m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { g as ee, k, h as Se, P as Pe } from './index.module-eb50a8d2.js';
+import { n as m, u as useEffect, m as h } from './stencil-hooks.module-2f159754.js';
+import './use-callback-d8ef4b5d.js';
+import { e as ee, j, c as Pe, q as qe } from './index.module-ec3dcc82.js';
+import './extends-c31f1eff.js';
 
 async function useGraphQLClientProvider({ domain }) {
   const token = ee();
   const appDomain = domain;
-  const tenantAlias = k();
+  const tenantAlias = j();
   // Memoization is shared. One client per domain, tenant and token (or null)
-  const managedIdentityClient = Se(appDomain, tenantAlias, token);
-  const [, setGraphQLClient] = m(Pe, managedIdentityClient);
+  const managedIdentityClient = Pe(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = m(qe, managedIdentityClient);
   useEffect(() => {
     setGraphQLClient(managedIdentityClient);
   }, [managedIdentityClient]);

package/dist/esm/{sqm-hero-view-bfd8abd1.js → sqm-hero-view-190bc812.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { j as useState, e as useEffect } from './extends-3a3f9fe2.js';
-import { u as useCallback } from './use-callback-b38a1523.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { k as useState, u as useEffect } from './stencil-hooks.module-2f159754.js';
+import { u as useCallback } from './use-callback-d8ef4b5d.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {
@@ -116,8 +116,7 @@ function HeroView(props) {
       minHeight: "100%",
     },
   };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
   :host{    

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

@@ -1,9 +1,10 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import './jss-preset-default.esm-71fae192.js';
-import { g as getProps } from './utils-454405f5.js';
-import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
+import { m as h } from './stencil-hooks.module-2f159754.js';
+import './use-callback-d8ef4b5d.js';
+import './extends-c31f1eff.js';
+import './JSS-96eeab98.js';
+import { g as getProps } from './utils-1d345130.js';
+import { H as HeroView } from './sqm-hero-view-190bc812.js';
 
 const Hero = class {
   constructor(hostRef) {

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

@@ -0,0 +1,193 @@
+import { h, r as registerInstance } from './index-17b4da69.js';
+import { m as h$1 } from './stencil-hooks.module-2f159754.js';
+import './extends-c31f1eff.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
+import { g as getProps } from './utils-1d345130.js';
+import { P as PortalContainerView } from './sqm-portal-container-view-f74db584.js';
+import { P as PortalSectionView } from './sqm-portal-section-view-88a80af9.js';
+
+function ImageView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      width: "100%",
+      justifyContent: props.alignment || "center",
+      background: props.backgroundColor || "",
+    },
+    Image: {
+      maxWidth: props.maxWidth || "100%",
+      minHeight: props.minHeight || "100%",
+      objectFit: "cover",
+      marginLeft: props.left || "0",
+      marginRight: props.right || "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container },
+      h("img", { src: props.imageUrl, class: sheet.classes.Image }))));
+}
+
+const Image = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Position Alignment
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     */
+    this.alignment = "center";
+    this.ignored = true;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return h(ImageView, Object.assign({}, getProps(this)));
+  }
+};
+
+const PortalContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Direction
+     * @uiType string
+     * @uiEnum ["row", "column"]
+     */
+    this.direction = "column";
+    /**
+     * @uiName Gap
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.gap = "xxx-large";
+    /**
+     * @uiName Display
+     * @uiType string
+     * @uiEnum ["grid", "flex"]
+     */
+    this.display = "grid";
+    /**
+     * @uiName Maximum width
+     */
+    this.maxWidth = "100%";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(PortalContainerView, Object.assign({}, getProps(this)), h("slot", null)));
+  }
+};
+
+// import { insertCSS } from "../../insertcss";
+// import debugFn from "debug";
+// const debug = debugFn("sq:global");
+const vanillaStyle = `
+  sqm-text {
+    display: block;
+  }
+
+  sqm-text h1 {
+    font-size: var(--sl-font-size-xxx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h2 {
+    font-size: var(--sl-font-size-xx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h3 {
+    font-size: var(--sl-font-size-x-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h4 {
+    font-size: var(--sl-font-size-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text p {
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text p[light] {
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-600);
+    margin: 0;
+  }
+`;
+const Text = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  componentWillLoad() {
+    // try {
+    //   insertCSS(textStyles);
+    // } catch (error) {
+    //   debug(error);
+    // }
+  }
+  render() {
+    return (h("div", null, h("style", null, vanillaStyle), h("slot", null)));
+  }
+};
+
+const TitledSection = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Text Align
+     * @uiType string
+     * @uiEnum ["left", "center", "right"]
+     */
+    this.textAlign = "left";
+    /**
+     * @uiName Label margin style
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.labelMargin = "small";
+    /**
+     * @uiName Section padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.padding = "none";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const label = h("slot", { name: "label" }, this.label);
+    const content = h("slot", { name: "content" });
+    return h(PortalSectionView, Object.assign({}, { ...getProps(this), label, content }));
+  }
+};
+
+export { Image as sqm_image, PortalContainer as sqm_portal_container, Text as sqm_text, TitledSection as sqm_titled_section };

package/dist/esm/sqm-leaderboard-rank-view-da91f5f3.js

@@ -0,0 +1,8 @@
+import { h } from './index-17b4da69.js';
+
+function LeaderboardRankView(props) {
+  const { data } = props;
+  return h("span", { class: "P" }, data.rank);
+}
+
+export { LeaderboardRankView as L };

package/dist/esm/sqm-leaderboard-rank.entry.js

@@ -1,12 +1,13 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import { i as intl, c as createIntl } from './global-e0e25c22.js';
-import './use-callback-b38a1523.js';
-import { M, n as ne, c as cn, j } from './index.module-eb50a8d2.js';
+import { m as h } from './stencil-hooks.module-2f159754.js';
+import { i as intl } from './global-c2179248.js';
+import './use-callback-d8ef4b5d.js';
+import { d as dist, M, n as ne, b as mn, k } from './index.module-ec3dcc82.js';
+import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-cd1e8962.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-da91f5f3.js';
 
-const GET_RANK = gql `
+const GET_RANK = dist.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
     viewer {
       ... on User {
@@ -30,7 +31,7 @@ function useLeaderboardRank(props) {
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;
   }
-  const { data: rankData } = cn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: rankData } = mn(GET_RANK, rankVariables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const fullRankText = ((_a = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _a === void 0 ? void 0 : _a.leaderboardRank) ? intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
     rank: (_c = (_b = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _b === void 0 ? void 0 : _b.leaderboardRank) === null || _c === void 0 ? void 0 : _c[props.rankType],
   })
@@ -55,16 +56,13 @@ const LeaderboardRank = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = j()
+    const props = k()
       ? useLeaderboardRankDemo(this)
       : useLeaderboardRank(this);
     return h$1(LeaderboardRankView, Object.assign({}, props));
   }
 };
 function useLeaderboardRankDemo(props) {
-  const intl = createIntl({
-    locale: "en",
-  });
   const rank = intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
     rank: 1,
   }) || "1st";

package/dist/esm/{sqm-name-fields-view-4162fb7b.js → sqm-name-fields-view-69b1583f.js}

@@ -1,6 +1,6 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { E as ErrorStyles } from './mixins-10353a39.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
 
 const style = {
   InputContainer: {
@@ -27,8 +27,7 @@ sl-input::part(label){
   font-weight: var(--sl-font-weight-semibold);
 }
 `;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function NameFieldsView(props) {
   const { states } = props;

package/dist/esm/sqm-name-fields.entry.js

@@ -1,11 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { n as d, m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { j } from './index.module-eb50a8d2.js';
-import './jss-preset-default.esm-71fae192.js';
+import { o as d, m as h } from './stencil-hooks.module-2f159754.js';
+import './use-callback-d8ef4b5d.js';
+import { k } from './index.module-ec3dcc82.js';
+import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
+import './JSS-96eeab98.js';
+import { N as NameFieldsView } from './sqm-name-fields-view-69b1583f.js';
 
 const CONTEXT_NAME = "sq:validation-state";
 function useNameFields(props) {
@@ -37,7 +38,7 @@ const NameFields = class {
   }
   disconnectedCallback() { }
   render() {
-    const { states } = j() ? useNameFieldsDemo(this) : useNameFields(this);
+    const { states } = k() ? useNameFieldsDemo(this) : useNameFields(this);
     return h$1(NameFieldsView, { states: states });
   }
 };

package/dist/esm/{sqm-navigation-sidebar-item-view-2d8c368c.js → sqm-navigation-sidebar-item-view-a6f7f96c.js}

@@ -1,7 +1,7 @@
 import { h } from './index-17b4da69.js';
-import { b as mn } from './index.module-eb50a8d2.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { p as pn } from './index.module-ec3dcc82.js';
 import { g as gap } from './mixins-10353a39.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
 
 function NavigationSidebarItemView(props) {
   const { states, data } = props;
@@ -17,7 +17,9 @@ function NavigationSidebarItemView(props) {
       ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
       "&:hover": {
         cursor: "pointer",
-        background: states.active ? "var(--sl-color-gray-300)" : "var(--sl-color-gray-50)",
+        background: states.active
+          ? "var(--sl-color-gray-300)"
+          : "var(--sl-color-gray-50)",
       },
     },
     Label: {
@@ -27,12 +29,11 @@ function NavigationSidebarItemView(props) {
       "flex-shrink": "0",
     },
   };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("a", { href: data.path, onClick: (e) => {
       e.preventDefault();
-      mn.push(data.path);
+      pn.push(data.path);
     }, class: sheet.classes.ItemContainer },
     h("style", { type: "text/css" }, styleString),
     h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),

package/dist/esm/sqm-navigation-sidebar-item.entry.js

@@ -1,15 +1,16 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './use-callback-b38a1523.js';
-import { v as vn, j } from './index.module-eb50a8d2.js';
-import './jss-preset-default.esm-71fae192.js';
-import { g as getProps } from './utils-454405f5.js';
+import { m as h } from './stencil-hooks.module-2f159754.js';
+import './use-callback-d8ef4b5d.js';
+import { h as hn, k } from './index.module-ec3dcc82.js';
+import './extends-c31f1eff.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-10353a39.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-2d8c368c.js';
+import './JSS-96eeab98.js';
+import { g as getProps } from './utils-1d345130.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-a6f7f96c.js';
 
 function useNavigationSidebarItem(props) {
-  const currentPage = vn();
+  const currentPage = hn();
   return {
     states: {
       active: currentPage.pathname === props.path,
@@ -29,7 +30,7 @@ const NavigationSidebarItem = class {
   }
   disconnectedCallback() { }
   render() {
-    const props = j()
+    const props = k()
       ? useSidebarItemDemo(getProps(this))
       : useNavigationSidebarItem(getProps(this));
     return h$1(NavigationSidebarItemView, Object.assign({}, props));

package/dist/esm/{sqm-navigation-sidebar-view-2242502c.js → sqm-navigation-sidebar-view-816558e3.js}

@@ -1,6 +1,6 @@
 import { h } from './index-17b4da69.js';
-import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { g as gap } from './mixins-10353a39.js';
+import { c as createStyleSheet } from './JSS-96eeab98.js';
 
 const style = {
   ItemsContainer: {
@@ -18,8 +18,7 @@ const vanillaStyle = `
     max-width: 320px;
   }
 `;
-jss.setup(create());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function NavigationSidebarView(
 // @ts-ignore - Stencil requires props (even if empty)

package/dist/esm/sqm-navigation-sidebar.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { m as h } from './extends-3a3f9fe2.js';
-import './jss-preset-default.esm-71fae192.js';
+import { m as h } from './stencil-hooks.module-2f159754.js';
+import './extends-c31f1eff.js';
 import './mixins-10353a39.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2242502c.js';
+import './JSS-96eeab98.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-816558e3.js';
 
 const NavigationSidebar = class {
   constructor(hostRef) {