@saasquatch/mint-components 1.15.0-42 → 1.15.0-43

package/dist/cjs/{sqm-text-span-view-7a61ae4c.js → sqm-text-span-view-ce4c0178.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
+const index = require('./index-a29c60ef.js');
 const JSS = require('./JSS-8503a151.js');
 
 function TextSpanView(props, children) {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
+const sqmTextSpanView = require('./sqm-text-span-view-ce4c0178.js');
 
 const TextSpan = class {
   constructor(hostRef) {

package/dist/cjs/sqm-widget-verification-controller.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 const keys = require('./keys-cff24974.js');
 
 const debug = stencilHooks_module.browser("sq:widget-verification");
@@ -37,18 +37,26 @@ function useTemplateChildren({ parent, callback }) {
 const WidgetVerificationController = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * @componentState { "title": "Not Verified", "slot": "not-verified", "props": { "isAuth": false } }
+     * @componentState { "title": "Verified", "slot": "verified", "props": { "isAuth": true } }
+     */
+    this.stateController = "{}";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
+    var _a;
     const [context, setContext] = index_module.In({
       namespace: keys.VERIFICATION_PARENT_NAMESPACE,
       initialValue: false,
     });
+    const props = JSON.parse(this.stateController);
+    const demoIsAuth = index_module.isDemo() && ((_a = props["sqm-widget-verification-controller"]) === null || _a === void 0 ? void 0 : _a.isAuth);
     const [container, setContainer] = stencilHooks_module.useState(undefined);
     const [slot, setSlot] = stencilHooks_module.useState(undefined);
     const updateTemplates = index_module.useCallback(() => {
-      const isAuth = context;
+      const isAuth = demoIsAuth || context;
       const templates = slot.querySelectorAll(`template`);
       const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
       if (template) {
@@ -96,7 +104,7 @@ const WidgetVerificationController = class {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, context]);
+    }, [container, slot, context, demoIsAuth]);
     stencilHooks_module.useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -105,7 +113,7 @@ const WidgetVerificationController = class {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, context]);
+    }, [slot, container, context, demoIsAuth]);
     return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
   }
 };

package/dist/cjs/sqm-widget-verification.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
+const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
-const extractProps = require('./extractProps-fd93ba62.js');
+const extractProps = require('./extractProps-e9c55ba8.js');
 const keys = require('./keys-cff24974.js');
 
 const USER_LOOKUP = index_module.dist.gql `
@@ -163,6 +164,11 @@ const WidgetVerification = class {
      * @uiGroup Code Verification Step
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    /**
+     * @componentState { "title": "Email Step", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"] }
+     * @componentState { "title": "Code Step", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"] }
+     */
+    this.stateController = "{}";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -171,20 +177,20 @@ const WidgetVerification = class {
     return extractProps.extractProps(props, prefix);
   }
   render() {
-    const { showCode, onVerification, loading } = index_module.isDemo()
-      ? useDemoWidgetVerificationInternal()
+    const props = index_module.isDemo()
+      ? useDemoWidgetVerificationInternal(this)
       : useWidgetVerification();
-    if (loading)
+    if (props.loading)
       return index.h("sl-spinner", null);
     const generalText = this.getStepTextProps("general_");
     return (index.h("div", null, index.h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader), index.h("p", { style: {
         color: "var(--sl-color-neutral-500)",
         fontSize: "var(--sl-font-size-medium)",
         margin: "0",
-      } }, generalText.verifyEmailDescription), showCode ? (index.h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
+      } }, generalText.verifyEmailDescription), props.showCode ? (index.h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps.extractProps(props, "sqm-code-verification_")))) : (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps.extractProps(props, "sqm-email-verification_"))))));
   }
 };
-function useDemoWidgetVerificationInternal() {
+function useDemoWidgetVerificationInternal(props) {
   const [showCode, setShowCode] = index_module.In({
     namespace: keys.SHOW_CODE_NAMESPACE,
     initialValue: false,
@@ -194,10 +200,14 @@ function useDemoWidgetVerificationInternal() {
     initialValue: undefined,
   });
   const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  const states = extractProps.parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   const onVerification = () => {
     setContext(true);
   };
-  return { showCode, onVerification, loading: false };
+  return cjs.cjs({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_widget_verification = WidgetVerification;

package/dist/cjs/{stencil-hooks.module-62264802.js → stencil-hooks.module-3a336b0f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
+const index = require('./index-a29c60ef.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/cjs/{useChildElements-e5fa605c.js → useChildElements-1b35d945.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 function useChildElements() {
   const host = index_module._();

package/dist/cjs/{useInstantAccessRegistration-86b7164c.js → useInstantAccessRegistration-0537e28e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-5f44ca80.js');
+const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
 
 function useInstantAccessRegistration(props) {
   const locale = index_module.L();

package/dist/cjs/{usePayoutStatus-f26f0467.js → usePayoutStatus-feeac99b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 const TAX_FORM_UPDATED_EVENT_KEY = "sqm:tax-form-updated";
 
@@ -986,17 +986,20 @@ const GET_USER_STATUS = index_module.dist.gql `
   }
 `;
 function getStatus(data) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
   const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
   if (!((_d = (_c = data.user) === null || _c === void 0 ? void 0 : _c.impactConnection) === null || _d === void 0 ? void 0 : _d.connected) || !account)
     return "INFORMATION_REQUIRED";
-  if ((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.includes("IDV_CHECK_REQUIRED"))
+  if (((_e = account.holdReasons) === null || _e === void 0 ? void 0 : _e.length) === 1 && ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("NEW_PAYEE_REVIEW"))) {
+    return "DONE";
+  }
+  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REQUIRED"))
     return "VERIFICATION:REQUIRED";
-  if ((_f = account.holdReasons) === null || _f === void 0 ? void 0 : _f.includes("IDV_CHECK_REQUIRED_INTERNAL"))
+  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_REQUIRED_INTERNAL"))
     return "VERIFICATION:INTERNAL";
-  if ((_g = account.holdReasons) === null || _g === void 0 ? void 0 : _g.includes("IDV_CHECK_REVIEW_INTERNAL"))
+  if ((_j = account.holdReasons) === null || _j === void 0 ? void 0 : _j.includes("IDV_CHECK_REVIEW_INTERNAL"))
     return "VERIFICATION:REVIEW";
-  if ((_h = account.holdReasons) === null || _h === void 0 ? void 0 : _h.includes("IDV_CHECK_FAILED_INTERNAL"))
+  if ((_k = account.holdReasons) === null || _k === void 0 ? void 0 : _k.includes("IDV_CHECK_FAILED_INTERNAL"))
     return "VERIFICATION:FAILED";
   if (account.hold)
     return "HOLD";

package/dist/cjs/{usePortalLogin-bd975a79.js → usePortalLogin-63d896d1.js}

@@ -1,63 +1,9 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const utils = require('./utils-6847bc06.js');
-const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-4761d472.js');
-const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
-
-const style = {
-  Wrapper: mixins.AuthWrapper,
-  Column: mixins.AuthColumn,
-  ForgotButtonContainer: {
-    display: "inline",
-    cursor: "pointer",
-    "font-size": "13px",
-    "font-weight": "600",
-    color: "var(--sqm-text-subdued)",
-    margin: "0",
-  },
-  ButtonsContainer: {
-    ...mixins.AuthButtonsContainer,
-    gap: "var(--sl-spacing-medium)",
-    "& > *": {
-      margin: "0 !important",
-    },
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-function PortalLoginView(props) {
-  const { states, callbacks, content } = props;
-  return (index.h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
-    index.h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-    index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
-      props.states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, props.states.error))),
-      index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
-      index.h("div", null,
-        index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
-        index.h("div", { class: sheet.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
-      index.h("div", { class: sheet.classes.ButtonsContainer },
-        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
-        content.googleButton && index.h("sl-menu-divider", null),
-        content.googleButton,
-        content.secondaryButton))));
-}
 
 function usePortalLogin(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
@@ -125,5 +71,4 @@ function usePortalLogin(props) {
   };
 }
 
-exports.PortalLoginView = PortalLoginView;
 exports.usePortalLogin = usePortalLogin;

package/dist/cjs/{usePortalRegistrationForm-d28621de.js → usePortalRegistrationForm-f25d89e7.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-5f44ca80.js');
+const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 
 const RegistrationFormQuery = index_module.dist.gql `

package/dist/cjs/{useReferralCodes-a47dcbc2.js → useReferralCodes-82e8797b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 const GET_REFERRAL_CODES = index_module.dist.gql `
   query getCodes(

package/dist/cjs/{useReferralTable-19e7523a.js → useReferralTable-7c3f9600.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
-const reRender = require('./re-render-28fed959.js');
-const useChildElements = require('./useChildElements-e5fa605c.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
+const reRender = require('./re-render-b324deab.js');
+const useChildElements = require('./useChildElements-1b35d945.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";

package/dist/cjs/{useRegistrationFormState-5f44ca80.js → useRegistrationFormState-7b820f0c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 const REGISTRATION_FORM_STATE_CONTEXT_INTERNAL = "sq:registration-form-state-internal";

package/dist/cjs/{useVerificationEmail-1496b993.js → useVerificationEmail-95a82767.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 const UserLookupQuery = index_module.dist.gql `
   query userLookup {

package/dist/cjs/{utilities-be3ce1f8.js → utilities-78f5e169.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
-const index_module = require('./index.module-39955732.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index_module = require('./index.module-ee84433d.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/cjs/utils-ce18d1bc.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const index = require('./index-a29c60ef.js');
+const global = require('./global-d62c5561.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  Container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+  },
+  TitleSkeleton: {
+    width: "45%",
+    height: "40px !important",
+  },
+  StepSkeleton: {
+    width: "15%",
+  },
+  HeaderSkeleton: {
+    width: "25%",
+    height: "30px !important",
+  },
+  InputSkeleton: {
+    width: "75%",
+  },
+  ButtonSkeleton: {
+    width: "80px",
+    height: "30px !important",
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const LoadingView = () => {
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
+    index.h("div", { class: sheet.classes.HeaderContainer },
+      index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      index.h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
+};
+
+function validTaxDocument(requiredType) {
+  const validTypes = ["W9", "W8BENE", "W8BEN"];
+  if (validTypes.includes(requiredType))
+    return true;
+  return false;
+}
+const objectIsFull = (obj) => {
+  return !Object.keys(obj).find((k) => obj[k] == undefined);
+};
+const taxTypeToName = (taxType) => {
+  switch (taxType) {
+    case "W9":
+      return "W-9";
+    case "W8BEN":
+    case "W8BENE":
+      return "W-8";
+    default:
+      return "";
+  }
+};
+function validateBillingField(regex, value) {
+  const trimmed = value.trim();
+  const idx = trimmed.search(regex);
+  return idx > -1;
+}
+const formatErrorMessage = (fieldName, errorMessage) => {
+  return global.intl.formatMessage({
+    id: fieldName,
+    defaultMessage: errorMessage,
+  }, {
+    fieldName,
+  });
+};
+function getCountryObj({ countryCode, locale, }) {
+  // @ts-ignore DisplayNames not in Intl type
+  const displayName = new Intl.DisplayNames([locale], {
+    type: "region",
+  }).of(countryCode);
+  return {
+    countryCode,
+    displayName,
+  };
+}
+
+exports.LoadingView = LoadingView;
+exports.formatErrorMessage = formatErrorMessage;
+exports.getCountryObj = getCountryObj;
+exports.objectIsFull = objectIsFull;
+exports.taxTypeToName = taxTypeToName;
+exports.validTaxDocument = validTaxDocument;
+exports.validateBillingField = validateBillingField;

package/dist/collection/collection-manifest.json

@@ -12,6 +12,7 @@
     "./components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.js",
     "./components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.js",
     "./components/raisins-plop-target/raisins-plop-target.js",
+    "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
     "./components/sqm-brand/sqm-brand.js",
     "./components/sqm-card-feed/sqm-card-feed.js",

package/dist/collection/components/sqm-asset-card/AssetCard.stories.js

@@ -0,0 +1,29 @@
+import { h } from "@stencil/core";
+import { AssetCardView } from "./sqm-asset-card-view";
+export default {
+  title: "Components/Asset Card",
+};
+export const Default = () => {
+  const props = {
+    text: { titleText: "Marketing Banner" },
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
+    callbacks: {},
+  };
+  return h(AssetCardView, Object.assign({}, props));
+};
+export const CardWithLongText = () => {
+  const props = {
+    text: { titleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt dolores? Dolore temporibus autem officia blanditiis minus in voluptatem molestiae!" },
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
+    callbacks: {},
+  };
+  return h(AssetCardView, Object.assign({}, props));
+};
+export const CardWithNoImg = () => {
+  const props = {
+    text: { titleText: "Marketing Banner" },
+    imgUrl: "",
+    callbacks: {},
+  };
+  return h(AssetCardView, Object.assign({}, props));
+};

package/dist/collection/components/sqm-asset-card/sqm-asset-card-view.js

@@ -0,0 +1,46 @@
+import { getAssetPath, h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  CardContainer: {
+    "box-sizing": "border-box",
+    width: "100%",
+    "max-width": "260px",
+    border: "1px solid #EAEAEA",
+    padding: "0px 16px 16px 16px",
+    "border-radius": "8px",
+  },
+  TextContainer: {
+    display: "flex",
+    "justify-content": "space-between",
+    "align-items": "center",
+  },
+  Title: {
+    "font-weight": 600,
+    color: "var(--sl-color-gray-800)",
+    "max-width": "85%",
+    "overflow-wrap": "break-word",
+  },
+  CardImg: {
+    width: "100%",
+    height: "228px",
+    "border-radius": "4px",
+  },
+  Icon: {
+    "&:hover": {
+      cursor: "pointer",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export const AssetCardView = (props) => {
+  const { text: { titleText }, imgUrl, } = props;
+  return (h("div", { class: sheet.classes.CardContainer, part: "sqm-base" },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.TextContainer },
+      h("p", { class: sheet.classes.Title, part: "sqm-title" }, titleText),
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", class: `bi bi-download ${sheet.classes.Icon}`, viewBox: "0 0 16 16" },
+        h("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
+        h("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" }))),
+    h("img", { src: getAssetPath(imgUrl), class: sheet.classes.CardImg })));
+};