@saasquatch/mint-components 1.3.3-1 → 1.3.3-5

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

@@ -0,0 +1,31 @@
+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 { Q, k, g as pe, h as ge } from './index.module-c4098674.js';
+
+async function useGraphQLClientProvider({ domain }) {
+  const token = Q();
+  const appDomain = domain;
+  const tenantAlias = k();
+  // Memoization is shared. One client per domain, tenant and token (or null)
+  const managedIdentityClient = pe(appDomain, tenantAlias, token);
+  const [, setGraphQLClient] = m(ge, managedIdentityClient);
+  useEffect(() => {
+    setGraphQLClient(managedIdentityClient);
+  }, [managedIdentityClient]);
+}
+
+const GraphQLClientProvider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+     useGraphQLClientProvider(this);
+    return (h$1(Host, { style: { display: "contents" } }, h$1("slot", null)));
+  }
+};
+
+export { GraphQLClientProvider as sqm_graphql_client_provider };

package/dist/esm/sqm-hero-view-8a6c5d99.js

@@ -0,0 +1,147 @@
+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 { IntlMessageFormat } from 'intl-messageformat';
+function isMobile(breakPoint) {
+  const [width, setWidth] = useState(window.innerWidth);
+  const handleWindowResize = useCallback(() => setWidth(window.innerWidth), []);
+  useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+  return width > breakPoint ? false : true;
+}
+function isValidColor(teststr) {
+  return CSS.supports(`(color: ${teststr})`);
+}
+
+const paddingList = [
+  "var(--sl-spacing-xxx-small)",
+  "var(--sl-spacing-xx-small)",
+  "var(--sl-spacing-x-small)",
+  "var(--sl-spacing-small)",
+  "var(--sl-spacing-medium)",
+  "var(--sl-spacing-large)",
+  "var(--sl-spacing-x-large)",
+  "var(--sl-spacing-xx-large)",
+  "var(--sl-spacing-xxx-large)",
+  "var(--sl-spacing-xxxx-large)",
+];
+const parseBackground = (provided_bg) => {
+  if (provided_bg) {
+    if (isValidColor(provided_bg)) {
+      return provided_bg;
+    }
+    else {
+      return `url(${provided_bg})`;
+    }
+  }
+  else {
+    return "";
+  }
+};
+function HeroView(props) {
+  const { states, content } = props;
+  const getVertivalPadding = (size, half) => {
+    const sizes = {
+      small: 7,
+      medium: 8,
+      large: 9,
+    };
+    var index = sizes[size];
+    if (isMobile(767)) {
+      index = index - 2;
+    }
+    else if (isMobile(1023)) {
+      index = index - 1;
+    }
+    return half ? paddingList[index - 2] : paddingList[index];
+  };
+  const getHorizontalPadding = (size) => {
+    if (size == "small") {
+      return "1%";
+    }
+    else if (size == "medium") {
+      return "3%";
+    }
+    else {
+      return "5%";
+    }
+  };
+  const style = {
+    TwoColumnContainer: {
+      display: "flex",
+      "@media screen and (max-width: 1023px)": {
+        flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
+        justfiyContent: "center",
+      },
+    },
+    ColumnPadding: {
+      paddingTop: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingBottom: states.paddingSize == "none"
+        ? "0px"
+        : getVertivalPadding(states.paddingSize),
+      paddingLeft: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+      paddingRight: states.paddingSize == "none"
+        ? "0px"
+        : getHorizontalPadding(states.paddingSize),
+    },
+    ColumnWrapper: {
+      "&:first-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      },
+      "&:last-of-type": {
+        background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
+      },
+      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
+      display: "block",
+    },
+    SingleColumnContainer: {
+      background: `no-repeat center/cover ${parseBackground(states.background)}`,
+      flex: "1 1 0",
+    },
+    Container: {
+      width: "100%",
+      maxWidth: "var(--sqm-max-width)",
+      margin: "0 auto",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%",
+    },
+  };
+  jss.setup(create());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{    
+    height: 100%;
+    display: contents;
+  }
+  sqm-hero{    
+    height: 100%;
+    display: contents;
+  }
+  img{
+      max-width: 100%;
+      height: auto;
+  }
+  
+`;
+  // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer },
+      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
+      h("div", { class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+}
+
+export { HeroView as H };

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

@@ -0,0 +1,32 @@
+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-271197e1.js';
+import { H as HeroView } from './sqm-hero-view-8a6c5d99.js';
+
+const Hero = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** @uiName Number of columns in the layout */
+    this.columns = 1;
+    /** @uiName Padding size */
+    this.paddingSize = "large";
+    /** @uiName Wrap direction */
+    this.wrapDirection = "wrap";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      states: { ...getProps(this) },
+      content: {
+        primaryColumn: h$1("slot", null),
+        secondaryColumn: h$1("slot", { name: "secondary-column" }),
+      },
+    };
+    return h$1(HeroView, Object.assign({}, props));
+  }
+};
+
+export { Hero as sqm_hero };

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

@@ -0,0 +1,128 @@
+import { h } from './index-17b4da69.js';
+import { _ as __assign } from './global-bc17ddd7.js';
+import { p as parse } from './index.module-c4098674.js';
+
+var docCache = new Map();
+var fragmentSourceMap = new Map();
+var printFragmentWarnings = true;
+var experimentalFragmentVariables = false;
+function normalize(string) {
+    return string.replace(/[\s,]+/g, ' ').trim();
+}
+function cacheKeyFromLoc(loc) {
+    return normalize(loc.source.body.substring(loc.start, loc.end));
+}
+function processFragments(ast) {
+    var seenKeys = new Set();
+    var definitions = [];
+    ast.definitions.forEach(function (fragmentDefinition) {
+        if (fragmentDefinition.kind === 'FragmentDefinition') {
+            var fragmentName = fragmentDefinition.name.value;
+            var sourceKey = cacheKeyFromLoc(fragmentDefinition.loc);
+            var sourceKeySet = fragmentSourceMap.get(fragmentName);
+            if (sourceKeySet && !sourceKeySet.has(sourceKey)) {
+                if (printFragmentWarnings) {
+                    console.warn("Warning: fragment with name " + fragmentName + " already exists.\n"
+                        + "graphql-tag enforces all fragment names across your application to be unique; read more about\n"
+                        + "this in the docs: http://dev.apollodata.com/core/fragments.html#unique-names");
+                }
+            }
+            else if (!sourceKeySet) {
+                fragmentSourceMap.set(fragmentName, sourceKeySet = new Set);
+            }
+            sourceKeySet.add(sourceKey);
+            if (!seenKeys.has(sourceKey)) {
+                seenKeys.add(sourceKey);
+                definitions.push(fragmentDefinition);
+            }
+        }
+        else {
+            definitions.push(fragmentDefinition);
+        }
+    });
+    return __assign(__assign({}, ast), { definitions: definitions });
+}
+function stripLoc(doc) {
+    var workSet = new Set(doc.definitions);
+    workSet.forEach(function (node) {
+        if (node.loc)
+            delete node.loc;
+        Object.keys(node).forEach(function (key) {
+            var value = node[key];
+            if (value && typeof value === 'object') {
+                workSet.add(value);
+            }
+        });
+    });
+    var loc = doc.loc;
+    if (loc) {
+        delete loc.startToken;
+        delete loc.endToken;
+    }
+    return doc;
+}
+function parseDocument(source) {
+    var cacheKey = normalize(source);
+    if (!docCache.has(cacheKey)) {
+        var parsed = parse(source, {
+            experimentalFragmentVariables: experimentalFragmentVariables
+        });
+        if (!parsed || parsed.kind !== 'Document') {
+            throw new Error('Not a valid GraphQL document.');
+        }
+        docCache.set(cacheKey, stripLoc(processFragments(parsed)));
+    }
+    return docCache.get(cacheKey);
+}
+function gql(literals) {
+    var args = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        args[_i - 1] = arguments[_i];
+    }
+    if (typeof literals === 'string') {
+        literals = [literals];
+    }
+    var result = literals[0];
+    args.forEach(function (arg, i) {
+        if (arg && arg.kind === 'Document') {
+            result += arg.loc.source.body;
+        }
+        else {
+            result += arg;
+        }
+        result += literals[i + 1];
+    });
+    return parseDocument(result);
+}
+function resetCaches() {
+    docCache.clear();
+    fragmentSourceMap.clear();
+}
+function disableFragmentWarnings() {
+    printFragmentWarnings = false;
+}
+function enableExperimentalFragmentVariables() {
+    experimentalFragmentVariables = true;
+}
+function disableExperimentalFragmentVariables() {
+    experimentalFragmentVariables = false;
+}
+var extras = {
+    gql: gql,
+    resetCaches: resetCaches,
+    disableFragmentWarnings: disableFragmentWarnings,
+    enableExperimentalFragmentVariables: enableExperimentalFragmentVariables,
+    disableExperimentalFragmentVariables: disableExperimentalFragmentVariables
+};
+(function (gql_1) {
+    gql_1.gql = extras.gql, gql_1.resetCaches = extras.resetCaches, gql_1.disableFragmentWarnings = extras.disableFragmentWarnings, gql_1.enableExperimentalFragmentVariables = extras.enableExperimentalFragmentVariables, gql_1.disableExperimentalFragmentVariables = extras.disableExperimentalFragmentVariables;
+})(gql || (gql = {}));
+gql["default"] = gql;
+const gql$1 = gql;
+
+function LeaderboardRankView(props) {
+  const { data } = props;
+  return h("span", { class: "P" }, data.rank);
+}
+
+export { LeaderboardRankView as L, gql$1 as g };

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

@@ -0,0 +1,79 @@
+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-bc17ddd7.js';
+import './use-callback-b38a1523.js';
+import { M, T, e as en, j } from './index.module-c4098674.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-eb1f817c.js';
+
+const GET_RANK = gql `
+  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+    viewer {
+      ... on User {
+        leaderboardRank(type: $type, filter: $filter) {
+          rowNumber
+          rank
+          denseRank
+        }
+      }
+    }
+  }
+`;
+function useLeaderboardRank(props) {
+  var _a, _b, _c;
+  const programId = M();
+  const user = T();
+  const rankVariables = {
+    type: props.leaderboardType,
+    filter: { programId_eq: programId },
+  };
+  if (props.interval) {
+    rankVariables.filter["interval"] = props.interval;
+  }
+  const { data: rankData } = en(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],
+  })
+    : props.unrankedText || "unranked";
+  return {
+    data: {
+      rank: fullRankText,
+    },
+  };
+}
+
+const sqmLeaderboardRankCss = "p,.P{font-size:var(--sl-font-size-small);color:var(--sl-color-gray-800);margin-top:0px}p.Subtitle,.P.Subtitle{color:var(--sl-color-gray-500);margin:0px}";
+
+const LeaderboardRank = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * @uiName Rank Text
+     */
+    this.rankText = "You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = j()
+      ? 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";
+  return cjs({
+    data: {
+      rank,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+LeaderboardRank.style = sqmLeaderboardRankCss;
+
+export { LeaderboardRank as sqm_leaderboard_rank };

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

@@ -0,0 +1,65 @@
+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 { j } from './index.module-c4098674.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { w as withShadowView, u as useLeaderboard, L as LeaderboardView } from './ShadowViewAddon-f84fe5c8.js';
+
+const sqmLeaderboardCss = ":host{display:block}:host([hidden]){display:none}table{width:100%}th{font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-semibold);text-align:left}td{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-normal)}td,th{color:var(--sl-color-gray-800);padding:var(--sl-spacing-x-small) var(--sl-spacing-small)}.User{width:100%}.Score{width:auto;white-space:nowrap}";
+
+const Leaderboard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h(this);
+    withShadowView(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      empty: h$1("slot", { name: "empty" }),
+      loadingstate: h$1("slot", { name: "loading" }),
+      usersheading: this.usersheading,
+      statsheading: this.statsheading,
+      rankType: this.rankType,
+      leaderboardType: this.leaderboardType,
+      interval: this.interval,
+    };
+    const demoProps = { ...props, demoData: this.demoData };
+    const viewprops = j()
+      ? useLeaderboardDemo(demoProps)
+      : useLeaderboard(props);
+    return h$1(LeaderboardView, Object.assign({}, viewprops));
+  }
+};
+function useLeaderboardDemo(props) {
+  return cjs({
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        usersheading: props.usersheading
+          ? props.usersheading
+          : "TOP REFERRERS",
+        statsheading: props.statsheading ? props.statsheading : "NEW TITANS",
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
+        { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
+        { firstName: "Benny", lastInitial: "B", value: 55, rank: 4 },
+        { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
+      ],
+    },
+    elements: {
+      empty: props.empty ? props.empty : h$1("div", null, "Empty"),
+      loadingstate: props.loadingstate ? (props.loadingstate) : (h$1("div", null, "Loading")),
+    },
+  }, props.demoProps || {}, { arrayMerge: (_, a) => a });
+}
+Leaderboard.style = sqmLeaderboardCss;
+
+export { Leaderboard as sqm_leaderboard };

package/dist/esm/sqm-name-fields-view-443f3baa.js

@@ -0,0 +1,52 @@
+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-eba86511.js';
+
+const style = {
+  InputContainer: {
+    "& > :not(:last-child)": {
+      "margin-bottom": "20px",
+    },
+  },
+  FieldsContainer: {
+    "& > :not(:last-child)": {
+      "margin-bottom": "var(--sl-spacing-large)",
+    },
+  },
+  ErrorStyle: ErrorStyles,
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+
+sl-input::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
+`;
+jss.setup(create());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+function NameFieldsView(props) {
+  const { states } = props;
+  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
+  return (h("div", { class: sheet.classes.FieldsContainer },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
+    }
+      : []))),
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true }, ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
+    }
+      : [])))));
+}
+
+export { NameFieldsView as N };

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

@@ -0,0 +1,56 @@
+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-c4098674.js';
+import './jss-preset-default.esm-71fae192.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import './mixins-eba86511.js';
+import { N as NameFieldsView } from './sqm-name-fields-view-443f3baa.js';
+
+const CONTEXT_NAME = "sq:validation-state";
+function useNameFields(props) {
+  const validationState = d(CONTEXT_NAME);
+  return {
+    states: {
+      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+      content: {
+        lastNameLabel: props.lastNameLabel,
+        firstNameLabel: props.firstNameLabel,
+      },
+    },
+  };
+}
+
+const NameFields = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName First name field label
+     */
+    this.firstNameLabel = "First Name";
+    /**
+     * @uiName Last name field label
+     */
+    this.lastNameLabel = "Last Name";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states } = j() ? useNameFieldsDemo(this) : useNameFields(this);
+    return h$1(NameFieldsView, { states: states });
+  }
+};
+function useNameFieldsDemo(props) {
+  return cjs({
+    states: {
+      validationErrors: [],
+      content: {
+        firstNameLabel: "First Name",
+        lastNameLabel: "Last Name",
+      },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { NameFields as sqm_name_fields };

package/dist/esm/sqm-navigation-sidebar-item-view-41c952fe.js

@@ -0,0 +1,42 @@
+import { h } from './index-17b4da69.js';
+import { r as rn } from './index.module-c4098674.js';
+import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
+import { g as gap } from './mixins-eba86511.js';
+
+function NavigationSidebarItemView(props) {
+  const { states, data } = props;
+  const style = {
+    ItemContainer: {
+      display: "flex",
+      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
+      "border-radius": "8px",
+      padding: "8px",
+      "text-decoration": "none",
+      color: "#454444",
+      "align-items": "center",
+      ...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)",
+      },
+    },
+    Label: {
+      margin: "0",
+    },
+    Icon: {
+      "flex-shrink": "0",
+    },
+  };
+  jss.setup(create());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("a", { href: data.path, onClick: (e) => {
+      e.preventDefault();
+      rn.push(data.path);
+    }, class: sheet.classes.ItemContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
+    h("p", { class: sheet.classes.Label }, data.label)));
+}
+
+export { NavigationSidebarItemView as N };

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

@@ -0,0 +1,50 @@
+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 { c as an, j } from './index.module-c4098674.js';
+import './jss-preset-default.esm-71fae192.js';
+import { g as getProps } from './utils-271197e1.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import './mixins-eba86511.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-41c952fe.js';
+
+function useNavigationSidebarItem(props) {
+  const currentPage = an();
+  return {
+    states: {
+      active: currentPage.pathname === props.path,
+    },
+    data: {
+      label: props.label,
+      icon: props.icon,
+      path: props.path
+    },
+  };
+}
+
+const NavigationSidebarItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = j()
+      ? useSidebarItemDemo(getProps(this))
+      : useNavigationSidebarItem(getProps(this));
+    return h$1(NavigationSidebarItemView, Object.assign({}, props));
+  }
+};
+function useSidebarItemDemo(props) {
+  return cjs({
+    states: {
+      active: false,
+    },
+    data: {
+      label: props.label || "Dashboard",
+      icon: props.icon || "house",
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+export { NavigationSidebarItem as sqm_navigation_sidebar_item };