@saasquatch/mint-components 1.5.0-75 → 1.5.0-76

package/dist/cjs/sqm-tab.cjs.entry.js

@@ -4,16 +4,51 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+require('./extends-08099afd.js');
+const JSS = require('./JSS-c65a40f1.js');
+const utils = require('./utils-01dbfd4a.js');
+
+const style = {
+  OpenStyle: {
+    "sl-button::part(base)": {
+      background: "orange",
+    },
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const TabView = ({ open }, children) => {
+  console.log("OPEN IS ", open);
+  return (index.h(index.Host, null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { style: { display: open ? "block" : "none" } }, children)));
+};
+
+function useTab() {
+  const [open, setOpen] = stencilHooks_module.useState(false);
+  stencilHooks_module.useEffect(() => {
+    return setOpen(!open);
+  }, []);
+  return {
+    state: {
+      open,
+    },
+    callbacks: {
+      setOpen,
+    },
+  };
+}
 
 const Tab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.ignored = true;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    return (index.h(index.Host, { style: { display: "block" } }, index.h("sl-tab", null, index.h("slot", null))));
+    const { header, open } = utils.getProps(this);
+    const { callbacks, state } = useTab();
+    return (index.h(TabView, { open: open }, index.h("slot", null)));
   }
 };
 

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+require('./use-callback-e754042f.js');
+require('./index.module-54724339.js');
+require('./extends-08099afd.js');
+const JSS = require('./JSS-c65a40f1.js');
+const useChildElements = require('./useChildElements-a68699b4.js');
+
+const style = {};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const TabsView = ({ callbacks, content }, children) => {
+  return (index.h(index.Host, null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: `code-container` },
+      index.h("div", { class: "sq-tabs" }, content.tabs.map((tab, i) => {
+        const openClass = tab.open ? "sq-open" : "";
+        return (index.h("div", { class: `sq-tab ${openClass} ` },
+          index.h("button", { role: "tab", class: `sq-tab-button`, onClick: () => callbacks.openTab(i) }, tab.header)));
+      })),
+      index.h("slot", null)),
+    children));
+};
+
+function useTabs() {
+  const tabs = useChildElements.useChildElements();
+  console.log({ tabs });
+  function openTab(tabIndex) {
+    const currentTabs = tabs.map((tab) => {
+      tab.open = false;
+      return tab;
+    });
+    currentTabs[tabIndex].open = true;
+  }
+  return { callbacks: { openTab }, content: { tabs } };
+}
+
+const Tabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { content, callbacks } = useTabs();
+    return (index.h(TabsView, { callbacks: callbacks, content: content }, index.h("slot", null)));
+  }
+};
+
+exports.sqm_tabs = Tabs;

package/dist/cjs/useChildElements-a68699b4.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+const index_module = require('./index.module-54724339.js');
+
+function useChildElements() {
+  const host = index_module.P();
+  const initialState = host.children.length ? Array.from(host.children) : [];
+  const [childElements, setChildElements] = stencilHooks_module.useState(initialState);
+  stencilHooks_module.useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const children = Array.from(host.children);
+      setChildElements([...children]);
+    });
+    observer.observe(host, { childList: true });
+    return () => observer.disconnect();
+  }, [host]);
+  return childElements;
+}
+
+exports.useChildElements = useChildElements;

package/dist/cjs/{useDemoBigStat-99093687.js → useDemoBigStat-426e3319.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-f972f103.js');
+const index_module = require('./index.module-54724339.js');
 const cjs = require('./cjs-1066ec21.js');
 
 /**
@@ -301,7 +301,7 @@ function pathToRegexp(path, keys, options) {
 const debug = stencilHooks_module.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.sn(query, variables);
+  const res = index_module.mn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -863,8 +863,8 @@ const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
   const { statType, flexReverse, alignment, programId = index_module.M(), } = props;
-  const locale = index_module.An();
-  const userIdent = index_module.ie();
+  const locale = index_module.R();
+  const userIdent = index_module.ne();
   const re = stencilHooks_module.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {

package/dist/cjs/{useReferralTable-873ca73d.js → useReferralTable-45f295ba.js}

@@ -2,8 +2,9 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-f972f103.js');
-const useChildElements = require('./useChildElements-36bc6f2a.js');
+const index_module = require('./index.module-54724339.js');
+const reRender = require('./re-render-2f8d0f37.js');
+const useChildElements = require('./useChildElements-a68699b4.js');
 
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = index_module.dist.gql `
@@ -170,7 +171,7 @@ const GET_REFERRAL_DATA = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c;
-  const user = index_module.ie();
+  const user = index_module.ne();
   const programIdContext = index_module.M();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
@@ -193,15 +194,15 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.An();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.sn(GET_REFERRER_DATA, {
+  const locale = index_module.R();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.mn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { envelope: referralData, states, callbacks, } = index_module.mn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.wn(GET_REFERRAL_DATA, (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,
   }, {
@@ -223,7 +224,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
       callbacks.setCurrentPage(0);
     }
   }, [props.showReferrer]);
-  const tick = useChildElements.useRerenderListener();
+  const tick = reRender.useRerenderListener();
   const data = referralData === null || referralData === void 0 ? void 0 : referralData.data;
   const components = useChildElements.useChildElements();
   async function getComponentData(components) {

package/dist/collection/collection-manifest.json

@@ -69,10 +69,9 @@
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
     "./components/sqm-tab/sqm-tab.js",
-    "./components/sqm-tab-group/sqm-tab-group.js",
-    "./components/sqm-tab-panel/sqm-tab-panel.js",
     "./components/sqm-table-cell/sqm-table-cell.js",
     "./components/sqm-table-row/sqm-table-row.js",
+    "./components/sqm-tabs/sqm-tabs.js",
     "./components/sqm-task-card/sqm-task-card.js",
     "./components/sqm-text/sqm-text.js",
     "./components/sqm-text-span/sqm-text-span.js",

package/dist/collection/components/sqm-hero-image/HeroImage.stories.js

@@ -3,38 +3,50 @@ export default {
   title: "Components/Hero Image",
 };
 export const OverlayHeader = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayDescription = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayButton = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayPadding = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxx-small" }));
 };
 export const OverlayLong = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayLeft = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayCenter = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayRight = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
-export const OverlayCustom = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay" }));
+export const OverlayCustomOpacity = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.3", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const Columns = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const ColumnsPadding = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "xxxx-large", "padding-text": "large" }));
+};
+export const ColumnsLong = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const ColumnsReverse = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const ColumnsCustomPercentage = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/2evfTx7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "25%", "max-height": "150px", "max-width": "100%", "padding-image": "large", "padding-text": "large" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/MVgOJn7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "33%", "padding-image": "large", "padding-text": "large", "background-color": "" }));
 };
-export const ColumnsCustom = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
+export const ColumnsCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f", "padding-image": "none", "padding-text": "xxxx-large" }));
 };

package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js

@@ -17,13 +17,11 @@ export function HeroImageView(props, children) {
     },
     Image: {
       display: "block",
-      maxWidth: props.maxWidth || "100%",
-      minHeight: props.minHeight || "300px",
+      maxWidth: "100%",
       objectFit: "cover",
       margin: "auto",
     },
     Background: {
-      minHeight: props.minHeight,
       backgroundImage: `url(${props.imageUrl})`,
       backgroundSize: "cover",
       backgroundPosition: props.imagePos || "center",
@@ -48,7 +46,7 @@ export function HeroImageView(props, children) {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
         boxSizing: "border-box",
-        margin: props.maxHeight ? "auto" : "",
+        // margin: props.maxHeight ? "auto" : "",
         "@media (max-width: 599px)": {
           width: "100%",
         },
@@ -121,10 +119,7 @@ export function HeroImageView(props, children) {
     return (h("div", null,
       h("div", { class: sheet.classes.Column },
         h("div", { class: "image-area" },
-          h("img", { class: sheet.classes.Image, src: props.imageUrl, style: {
-              minHeight: props.minHeight || "100%",
-              maxHeight: props.maxHeight,
-            } })),
+          h("img", { class: sheet.classes.Image, src: props.imageUrl })),
         h("div", { class: "text-area" },
           props.header && (h("div", { class: sheet.classes.Header }, props.header)),
           props.description && (h("div", { class: sheet.classes.Description }, props.description)),

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -7,10 +7,6 @@ import { HeroImageView } from "./sqm-hero-image-view";
  */
 export class HeroImage {
   constructor() {
-    /**
-     * @uiName Maximum Image Width
-     */
-    this.maxWidth = "100%";
     /**
      * @uiName Overlay Color
      * @uiWidget color
@@ -21,7 +17,7 @@ export class HeroImage {
      */
     this.overlayOpacity = "0.75";
     /**
-     * @uiName Image Link
+     * @uiName Image Layout
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      */
@@ -48,13 +44,13 @@ export class HeroImage {
      */
     this.buttonNewTab = false;
     /**
-     * @uiName Padding Text
+     * @uiName Text Padding
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      */
     this.paddingText = "xxxx-large";
     /**
-     * @uiName Padding Image
+     * @uiName Image Padding
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      */
@@ -89,67 +85,6 @@ export class HeroImage {
       "attribute": "image-url",
       "reflect": false
     },
-    "minHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Minimum Image Height",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "min-height",
-      "reflect": false
-    },
-    "maxHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Maximum Image Height",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "max-height",
-      "reflect": false
-    },
-    "maxWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Maximum Image Width",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "max-width",
-      "reflect": false,
-      "defaultValue": "\"100%\""
-    },
     "overlayColor": {
       "type": "string",
       "mutable": false,
@@ -253,7 +188,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Image Link",
+            "text": "Image Layout",
             "name": "uiName"
           }, {
             "text": "string",
@@ -464,7 +399,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Text",
+            "text": "Text Padding",
             "name": "uiName"
           }, {
             "text": "string",
@@ -496,7 +431,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Image",
+            "text": "Image Padding",
             "name": "uiName"
           }, {
             "text": "string",

package/dist/collection/components/sqm-image/Image.stories.js

@@ -5,23 +5,23 @@ export default {
 export const Image = () => {
   return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png" });
 };
-export const ImageAlignLeft = () => {
-  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "left" });
+export const ImageAlignmentLeft = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "left" }));
 };
-export const ImageAlignCenter = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "center" }));
+export const ImageAlignmentCenter = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "center" }));
 };
-export const ImageAlignRight = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "right" }));
+export const ImageAlignmentRight = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "right" }));
 };
 export const ImageMarginLeft = () => {
-  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", left: "100px" });
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", left: "100px", alignment: "center" }));
 };
 export const ImageMarginRight = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", right: "100px" }));
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", right: "100px", alignment: "center" }));
 };
 export const ImageBackground = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick" }));
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick", alignment: "center" }));
 };
 export const ImageSizeConstrained = () => {
   return (h("sqm-image", { "image-url": "https://i.imgur.com/oIiVdMM.jpg", minHeight: "192px", maxWidth: "192px" }));

package/dist/collection/components/sqm-image/sqm-image-view.js

@@ -5,7 +5,7 @@ export function ImageView(props) {
     Container: {
       display: "flex",
       width: "100%",
-      justifyContent: props.align || "left",
+      justifyContent: props.alignment || "center",
       background: props.backgroundColor || "",
     },
     Image: {

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

@@ -12,7 +12,7 @@ export class Image {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      */
-    this.align = "center";
+    this.alignment = "center";
     this.ignored = true;
     withHooks(this);
   }
@@ -83,7 +83,7 @@ export class Image {
       "attribute": "right",
       "reflect": false
     },
-    "align": {
+    "alignment": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -106,7 +106,7 @@ export class Image {
           }],
         "text": ""
       },
-      "attribute": "align",
+      "attribute": "alignment",
       "reflect": false,
       "defaultValue": "\"center\""
     },

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

@@ -342,7 +342,7 @@ function LoadingRow() {
       h("sl-skeleton", null))));
 }
 function useReferraltableDemo(props) {
-  return deepmerge({
+  const demoProps = deepmerge({
     states: {
       hasPrev: false,
       hasNext: false,
@@ -371,6 +371,8 @@ function useReferraltableDemo(props) {
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  console.log("PROPS", demoProps);
+  return demoProps;
 }
 function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
   return (h("div", { slot: "empty", style: { display: "contents" } },

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

@@ -86,7 +86,11 @@ export const SourceCellManual = () => {
   return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
 };
 export const SourceCellProgram = () => {
-  return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Automated" }));
+  return (h("sqm-rewards-table-source-cell", { reward: {
+      ...rewardsData,
+      rewardSource: "AUTOMATED",
+      program: { name: "Klip Loyalty" },
+    }, rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" }));
 };
 const exchange = {
   exchangedRewardRedemptionTransaction: {

package/dist/collection/components/sqm-tab/sqm-tab-view.js

@@ -0,0 +1,17 @@
+import { h, Host } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  OpenStyle: {
+    "sl-button::part(base)": {
+      background: "orange",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export const TabView = ({ open }, children) => {
+  console.log("OPEN IS ", open);
+  return (h(Host, null,
+    h("style", { type: "text/css" }, styleString),
+    h("div", { style: { display: open ? "block" : "none" } }, children)));
+};