@saasquatch/mint-components 1.3.1-7 → 1.3.2-0

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -0,0 +1,222 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { GenericTableView, } from "../../tables/GenericTableView";
+import { EmptySlot, LoadingSlot, EmptySkeleton, LoadingSkeleton } from "../../tables/TableSlots";
+import { useRewardsTable, CSS_NAMESPACE } from "./useRewardsTable";
+/**
+ * @uiName Rewards Table
+ */
+export class RewardsTable {
+  constructor() {
+    /** @uiName Number of rewards per page */
+    this.perPage = 3;
+    /** @uiName Show column labels */
+    this.showLabels = true;
+    /** @uiName Previous button text  */
+    this.prevLabel = "Prev";
+    /** @uiName View More button text  */
+    this.moreLabel = "Next";
+    /** @uiName Show Referred by user in table  */
+    this.showReferrer = false;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const empty = h(EmptySlot, { label: "No Rewards Yet" });
+    const loading = h(LoadingSlot, null);
+    const { states, data, callbacks, elements } = isDemo()
+      ? useRewardsTableDemo(this)
+      : useRewardsTable(this, empty, loading);
+    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+  }
+  static get is() { return "sqm-rewards-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Program",
+            "name": "uiName"
+          }],
+        "text": "Filters to only show rewards in this program. Will default to filtering by the program context where\r\nthis table lives. If no program ID is set or provided by context, then shows all rewards from all programs."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "perPage": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Number of rewards per page",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "per-page",
+      "reflect": false,
+      "defaultValue": "3"
+    },
+    "showLabels": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Show column labels",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "show-labels",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "prevLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Previous button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "prev-label",
+      "reflect": false,
+      "defaultValue": "\"Prev\""
+    },
+    "moreLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "View More button text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "more-label",
+      "reflect": false,
+      "defaultValue": "\"Next\""
+    },
+    "showReferrer": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Show Referred by user in table",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "show-referrer",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<GenericTableViewProps>",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "GenericTableViewProps": {
+            "location": "import",
+            "path": "../../tables/GenericTableView"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useRewardsTableDemo(props) {
+  return deepmerge({
+    states: {
+      hasPrev: false,
+      hasNext: false,
+      loading: false,
+      namespace: CSS_NAMESPACE,
+    },
+    callbacks: {
+      prevPage: () => console.log("Prev"),
+      nextPage: () => console.log("Next"),
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+      referralData: [],
+    },
+    elements: {
+      emptyElement: h(EmptySkeleton, { label: "No Rewards Yet" }),
+      loadingElement: h(LoadingSkeleton, null),
+      // TODO: This should be smarter
+      columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+      rows: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -0,0 +1,195 @@
+import { usePaginatedQuery, useProgramId, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect, useReducer } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import gql from "graphql-tag";
+import { useRerenderListener } from "../../tables/re-render";
+import { useChildElements } from "../../tables/useChildElements";
+export const CSS_NAMESPACE = "sqm-rewards-table";
+const GET_REWARDS = gql `
+  query getRewards(
+    $limit: Int!
+    $offset: Int!
+    $referralFilter: ReferralFilterInput
+    $rewardFilter: RewardFilterInput
+  ) {
+    viewer {
+      ... on User {
+        id
+        rewards(limit: $limit, offset: $offset, filter: $referralFilter) {
+          totalCount
+          count
+          data {
+            id
+            type
+            value
+            unit
+            name
+            dateGiven
+            dateExpires
+            dateCancelled
+            dateRedeemed
+            dateScheduledFor
+            fuelTankCode
+            fuelTankType
+            currency
+            prettyValue
+            statuses
+            globalRewardKey
+            programRewardKey
+            rewardRedemptionTransactions {
+              data {
+                exchangedRewards {
+                  data {
+                    prettyValue
+                    type
+                    fuelTankCode
+                    globalRewardKey
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export function useRewardsTable(props, emptyElement, loadingElement) {
+  var _a, _b;
+  const user = useUserIdentity();
+  const programIdContext = useProgramId();
+  // Default to context, overriden by props
+  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  // If no program ID, shows all programs
+  const referralFilter = programId
+    ? programId === "classic"
+      ? { programId_exists: false }
+      : { programId_eq: programId }
+    : {};
+  const rewardFilter = {
+    userId_eq: user === null || user === void 0 ? void 0 : user.id,
+    accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,
+  };
+  const [content, setContent] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    columns: [],
+    rows: [],
+    loading: false,
+    page: 0,
+  });
+  const { envelope: rewardsData, states, callbacks, } = usePaginatedQuery(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+    limit: props.perPage,
+    offset: 0,
+  }, {
+    referralFilter,
+    rewardFilter,
+  }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const tick = useRerenderListener();
+  const components = useChildElements();
+  const data = rewardsData === null || rewardsData === void 0 ? void 0 : rewardsData.data;
+  async function getComponentData(components) {
+    // filter out loading and empty states from columns array
+    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    // get the column titles (renderLabel is asynchronous)
+    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderLabel()));
+    // get the column cells (renderCell is asynchronous)
+    const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, c)));
+      const cells = await Promise.all(cellPromise);
+      return cells;
+    });
+    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
+    setContent({ rows });
+    const columns = columnsPromise && (await Promise.all(columnsPromise));
+    // Set the content to render and finish loading components
+    setContent({ columns, loading: false, page: states.currentPage });
+  }
+  useEffect(() => {
+    setContent({ loading: true });
+    rewardsData && getComponentData(components);
+  }, [rewardsData, components, tick]);
+  const isEmpty = !((_b = content === null || content === void 0 ? void 0 : content.rows) === null || _b === void 0 ? void 0 : _b.length) && !(data === null || data === void 0 ? void 0 : data.length);
+  const show = 
+  // 1 - Loading if loading
+  states.loading || content.loading
+    ? "loading"
+    : // 2 - Empty if empty
+      isEmpty
+        ? "empty"
+        : // 3 - Then show rows
+          "rows";
+  return {
+    states: {
+      hasNext: states.currentPage < states.pageCount - 1,
+      hasPrev: states.currentPage > 0,
+      show,
+      namespace: CSS_NAMESPACE
+    },
+    data: {
+      textOverrides: {
+        showLabels: props.showLabels,
+        prevLabel: props.prevLabel,
+        moreLabel: props.moreLabel,
+      },
+    },
+    elements: {
+      columns: content.columns,
+      rows: content.rows,
+      emptyElement,
+      loadingElement,
+    },
+    callbacks: {
+      nextPage: () => {
+        if (states.currentPage === 0)
+          callbacks.setLimit(props.perPage);
+        callbacks.setCurrentPage(states.currentPage + 1);
+      },
+      prevPage: () => {
+        if (states.currentPage === 1)
+          callbacks.setLimit(props.perPage - 1);
+        callbacks.setCurrentPage(states.currentPage - 1);
+      },
+    },
+  };
+}
+function generateUserError(e) {
+  try {
+    return JSON.stringify(e);
+  }
+  catch (e) {
+    return "An unknown error";
+  }
+}
+async function tryMethod(c, callback) {
+  const tag = c.tagName.toLowerCase();
+  await customElements.whenDefined(tag);
+  let labelPromise;
+  try {
+    labelPromise = callback();
+  }
+  catch (e) {
+    // renderLabel did not return a promise, so this method probably doesn't exist
+    // therefore, we IGNORE the label
+    if (callback.name === "renderReferrerCell") {
+      console.error("column does not have a renderReferrerCell method.");
+    }
+    else {
+      console.error("label promise failed", e);
+    }
+    return h("span", null);
+  }
+  try {
+    return await labelPromise;
+  }
+  catch (e) {
+    // The column returned a promise, and that promise failed.
+    // This should not happen so we fail fast
+    console.error("Error rendering label", e);
+    const userError = generateUserError(e);
+    return (h("details", null,
+      h("summary", null, "Error"),
+      userError));
+  }
+}

package/dist/collection/{stories → components/sqm-share-button}/ShareButton.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { ShareButtonView } from "../components/sqm-share-button/sqm-share-button-view";
+import { ShareButtonView } from "./sqm-share-button-view";
 export default {
-  title: "Share Button",
+  title: "Components/Share Button",
 };
 export const WithIcon = () => {
   const props = { medium: "facebook", iconslot: "suffix" };

package/dist/collection/{stories → components/sqm-share-button}/UseShareButton.stories.js

@@ -1,8 +1,8 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { useShareButton } from "../components/sqm-share-button/useShareButton";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { useShareButton } from "./useShareButton";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 export default {
   title: "Hooks / useShareButton",
 };

package/dist/collection/{stories → components/sqm-share-link}/ShareLink.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
+import { ShareLinkView } from "./sqm-share-link-view";
 export default {
-  title: "Share Link",
+  title: "Components/Share Link",
 };
 export const Default = () => {
   const props = {

package/dist/collection/{stories → components/sqm-share-link}/UseShareLink.stories.js

@@ -1,9 +1,9 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
-import { useShareLink } from "../components/sqm-share-link/useShareLink";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { ShareLinkView } from "./sqm-share-link-view";
+import { useShareLink } from "./useShareLink";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 export default {
   title: "Hooks / useShareLink",
 };

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -1,45 +1,47 @@
 import { h, Component, Host, State } from "@stencil/core";
 import { useStencilbook } from "@saasquatch/stencilbook";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import * as ShareButton from "../../stories/ShareButton.stories";
-import * as ShareLink from "../../stories/ShareLink.stories";
-import * as BigStat from "../../stories/BigStat.stories";
-import * as Leaderboard from "../../stories/Leaderboard.stories";
-import * as Router from "../../stories/Router.stories";
-import * as LeaderboardRank from "../../stories/LeaderboardRank.stories";
-import * as PortalFrame from "../../stories/PortalFrame.stories";
-import * as EditProfile from "../../stories/EditProfileForm.stories";
-import * as UseShareLink from "../../stories/UseShareLink.stories";
-import * as UseShareButton from "../../stories/UseShareButton.stories";
-import * as UseBigStat from "../../stories/UseBigStat.stories";
-import * as UseEditProfile from "../../stories/UseEditProfile.stories";
-import * as UseLeaderboard from "../../stories/UseLeaderboard.stories";
-import * as FormMessage from "../../stories/FormMessage.stories";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import * as BigStat from "../sqm-big-stat/BigStat.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as Router from "../sqm-rewards-table/Router.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
+import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
+import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
+import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
+import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as FormMessage from "../sqm-form-message/FormMessage.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
 import * as NewPortal from "../../stories/NewPortal.stories";
-import * as SidebarItem from "../../stories/SidebarItem.stories";
-import * as NavigationSidebar from "../../stories/NavigationSidebar.stories";
-import * as PortalLogin from "../../stories/PortalLogin.stories";
-import * as PortalRegister from "../../stories/PortalRegister.stories";
-import * as PortalForgotPassword from "../../stories/PortalForgotPassword.stories";
-import * as PortalEmailVerification from "../../stories/PortalEmailVerification.stories";
-import * as PortalResetPassword from "../../stories/PortalResetPassword.stories";
-import * as PortalVerifyEmail from "../../stories/PortalVerifyEmail.stories";
-import * as AssetCard from "../../stories/AssetCard.stories";
-import * as DividedLayout from "../../stories/DividedLayout.stories";
-import * as ChangePassword from "../../stories/ChangePassword.stories";
-import * as PortalProfile from "../../stories/PortalProfile.stories";
-import * as ReferralTable from "../../stories/ReferralTable.stories";
-import * as ReferralTableCell from "../../stories/ReferralTableCell.stories";
-import * as ReferralTableRewardsCell from "../../stories/ReferralTableRewardsCell.stories";
-import * as UserName from "../../stories/UserName.stories";
-import * as PasswordField from "../../stories/PasswordField.stories";
+import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
+import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
+import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
+import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
+import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
+import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
+import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
+import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
+import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
 import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../../stories/ProgramMenu.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
 import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as PortalFooter from "../../stories/PortalFooter.stories";
-import * as Hero from "../../stories/Hero.stories";
-import * as ReferralIframe from "../../stories/ReferralIframe.stories";
-import * as NameFields from "../../stories/NameFields.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
@@ -76,6 +78,7 @@ const stories = [
   ReferralTableRewardsCell,
   UserName,
   PasswordField,
+  TaskCard,
   PortalTemplates,
   ProgramMenu,
   PoweredByImg,
@@ -83,6 +86,7 @@ const stories = [
   Hero,
   ReferralIframe,
   NameFields,
+  UseRewardExchangeList,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-task-card/Matrix.js

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+/**
+ * Displays a cartesian product of the input props
+ *
+ * @returns
+ */
+export function MatrixStory({ matrix, props, Component, }) {
+  const propMatrix = Object.keys(matrix).map((propKey) => {
+    const propValues = matrix[propKey];
+    return propValues.map((val) => {
+      return {
+        [propKey]: val,
+      };
+    });
+  });
+  const combinations = cartesian(...propMatrix);
+  const propsCombinations = combinations.map((combo) => {
+    return combo.reduce((props, prop) => {
+      return {
+        ...props,
+        ...prop,
+      };
+    }, {});
+  });
+  return propsCombinations.map((combo) => {
+    const example = { ...props, ...combo };
+    return (h("div", null,
+      h(PropsTable, { values: example }),
+      h("hr", null),
+      h(Component, Object.assign({}, example))));
+  });
+}
+function PropsTable({ values }) {
+  return (h("table", null,
+    h("tbody", null, Object.keys(values).map((key) => {
+      return (h("tr", null,
+        h("th", null, key),
+        h("td", null, JSON.stringify(values[key]))));
+    }))));
+}
+/**
+ * Source: https://stackoverflow.com/questions/15298912/javascript-generating-combinations-from-n-arrays-with-m-elements
+ *
+ * TODO: Could replace with a fork of https://www.npmjs.com/package/cartesian
+ *
+ * @param args - an array of arrays
+ * @returns combinations of the elements in those array
+ */
+function cartesian(...args) {
+  var r = [], max = args.length - 1;
+  function helper(arr, i) {
+    for (var j = 0, l = args[i].length; j < l; j++) {
+      var a = arr.slice(0); // clone arr
+      a.push(args[i][j]);
+      if (i == max)
+        r.push(a);
+      else
+        helper(a, i + 1);
+    }
+  }
+  helper([], 0);
+  return r;
+}

package/dist/collection/components/sqm-task-card/SVGs.js

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+export const checkmark_circle = () => {
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" },
+    h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M1.636 9a7.364 7.364 0 1114.728 0A7.364 7.364 0 011.636 9zM9 0a9 9 0 100 18A9 9 0 009 0zm5.192 6.266a.982.982 0 00-1.548-1.208l-4.787 6.137-2.58-2.58a.982.982 0 00-1.39 1.388l3.367 3.366a.982.982 0 001.468-.09l5.47-7.013z", "clip-rule": "evenodd" })));
+};
+export const arrow_left_right = () => {
+  return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
+};
+export const gift = () => {
+  return (h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
+};