@saasquatch/mint-components 1.15.0-8 → 1.15.0-81

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

@@ -83,7 +83,7 @@ const getMockData = (status) => {
     dateExpires = today.minus({ days: 1 }).toMillis();
   }
   else if (randomStatus === "PENDING") {
-    // pendingReason = ["PAYOUT_CONFIGURATION_MISSING"];
+    // pendingReason = ["MISSING_PAYOUT_CONFIGURATION"];
     const reason = pendingReasons[Math.floor(Math.random() * 3)];
     pendingReason = [reason];
     if (reason === "SCHEDULED") {

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

@@ -1,6 +1,6 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
+import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
@@ -235,7 +235,8 @@ export class RewardsTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../saasquatch"
           }
         }
       },

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

@@ -1,11 +1,11 @@
 import { useLocale, usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
+import debugFn from "debug";
 import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
 import { generateUserError } from "../sqm-referral-table/useReferralTable";
-import debugFn from "debug";
 const debug = debugFn("sq:useRewardsTable");
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `

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

@@ -44,13 +44,15 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
-export const WithCustomColors = () => {
+export const WithCustomColorsAndBranding = () => {
   const props = {
     medium: "facebook",
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
     iconslot: "prefix",
+    border: "2px solid yellow",
+    borderradius: 30,
   };
   return h(ShareButtonView, Object.assign({}, props), "Facebook");
 };

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -24,15 +24,30 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
+// TODO: Figure out hover and active states
+// *::part(base):hover {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
+// *::part(base):focus {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
-	*::part(base) {
-	border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}80!important;
+	sl-button::part(base) {
+	  border: ${props.border || "none"};
+    font-family: var(--sqm-primary-font);
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -47,21 +62,7 @@ export function ShareButtonView(props, children) {
 	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
 	}
 
-	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
-	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
 	*::part(label) {
 		position: relative;
@@ -71,7 +72,7 @@ export function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}sharebutton-base` },
+    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -15,12 +15,12 @@ import deepmerge from "deepmerge";
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
  * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
- * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example Mobile Share Sheet Button - <sqm-share-button medium="direct">Share</sqm-share-button>
  * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
  * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
- * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
+ * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
  * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export class ShareButton {
@@ -28,8 +28,8 @@ export class ShareButton {
     /**
      * @uiType string
      * @uiName Button style
-     * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
-     * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+     * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
+     * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
      */
     this.type = "default";
     /**
@@ -41,11 +41,13 @@ export class ShareButton {
     this.iconslot = "prefix";
     /**
      * @uiName Hide icon
+     * @uiGroup Style
      * @default
      */
     this.hideicon = false;
     /**
      * @uiName Hide text
+     * @uiGroup Style
      * @default
      */
     this.hidetext = false;
@@ -148,6 +150,9 @@ export class ShareButton {
         "tags": [{
             "text": "Border radius",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Configure border radius with pixel amount"
       },
@@ -174,12 +179,38 @@ export class ShareButton {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
       "attribute": "backgroundcolor",
       "reflect": false
     },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "border",
+      "reflect": false
+    },
     "textcolor": {
       "type": "string",
       "mutable": false,
@@ -200,6 +231,9 @@ export class ShareButton {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -220,6 +254,9 @@ export class ShareButton {
         "tags": [{
             "text": "Display pill",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -250,8 +287,8 @@ export class ShareButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| \"primary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
-        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"success\" | \"text\" | \"warning\"",
+        "original": "| \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
+        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"text\" | \"warning\"",
         "references": {}
       },
       "required": false,
@@ -264,10 +301,10 @@ export class ShareButton {
             "text": "Button style",
             "name": "uiName"
           }, {
-            "text": "[\"primary\" , \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
+            "text": "[\"primary\", \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
+            "text": "[\"Primary\", \"Secondary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
             "name": "uiEnumNames"
           }],
         "text": ""
@@ -299,6 +336,9 @@ export class ShareButton {
           }, {
             "text": "[\"Small\", \"Medium\", \"Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -369,6 +409,9 @@ export class ShareButton {
         "tags": [{
             "text": "Hide icon",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }, {
             "text": undefined,
             "name": "default"
@@ -393,6 +436,9 @@ export class ShareButton {
         "tags": [{
             "text": "Hide text",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }, {
             "text": undefined,
             "name": "default"
@@ -490,7 +536,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; pill?: boolean; type?: \"text\" | \"warning\" | \"info\" | \"success\" | \"primary\" | \"default\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
+        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; border?: string; pill?: boolean; type?: \"text\" | \"primary\" | \"secondary\" | \"warning\" | \"info\" | \"success\" | \"default\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-share-code/sqm-share-code.js

@@ -50,7 +50,7 @@ export class ShareCode {
      */
     this.buttonStyle = "icon";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary or secondary).
      * @uiName Button Type
      * @uiType string
      * @uiEnum ["primary", "secondary"]
@@ -248,7 +248,7 @@ export class ShareCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The border radius on the share link container"
+        "text": "The border radius on the share link container (in pixels)"
       },
       "attribute": "border-radius",
       "reflect": false
@@ -334,7 +334,7 @@ export class ShareCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+        "text": "The type of the button that is used (primary or secondary)."
       },
       "attribute": "button-type",
       "reflect": false,
@@ -364,7 +364,7 @@ export class ShareCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of share link container"
       },
       "attribute": "border-color",
       "reflect": false
@@ -374,7 +374,7 @@ export class ShareCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -413,6 +413,7 @@ function useDemoShareCode(props) {
     backgroundColor: props.backgroundColor,
     textColor: props.textColor,
     borderRadius: props.borderRadius,
+    borderColor: props.borderColor,
     buttonType: props.buttonType,
     rewardStatus: "AVAILABLE",
     open,

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -8,6 +8,7 @@ import { useShareLink } from "./useShareLink";
 /**
  * @uiName Share Link
  * @exampleGroup Sharing
+ * @validParents ["sqm-portal-container","div","sqm-hero","sqm-referral-card","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
  * @example Share Link - <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-link>
  */
 export class ShareLink {
@@ -31,6 +32,7 @@ export class ShareLink {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -38,7 +40,7 @@ export class ShareLink {
      */
     this.copyButtonLabel = "Copy Link";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary or secondary).
      * @uiName Button Type
      * @uiType string
      * @uiEnum ["primary", "secondary"]
@@ -157,6 +159,9 @@ export class ShareLink {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -238,7 +243,7 @@ export class ShareLink {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of share link container"
       },
       "attribute": "border-color",
       "reflect": false
@@ -293,7 +298,7 @@ export class ShareLink {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The border radius on the share link container"
+        "text": "The border radius on the share link container (in pixels)"
       },
       "attribute": "border-radius",
       "reflect": false
@@ -325,7 +330,7 @@ export class ShareLink {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+        "text": "The type of the button that is used (primary or secondary)."
       },
       "attribute": "button-type",
       "reflect": false,
@@ -369,7 +374,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-stat-container/sqm-stat-container-view.js

@@ -5,25 +5,37 @@ export function StatContainerView(props, children) {
     const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
     return `${Math.floor(parseInt(spaceValue) / 2)}rem`;
   };
-  // Dependent on props, not feasiable to move out
+  // take alignment variable and convert it to CSS flexbox alignment
+  const alignment = props.alignment === "center"
+    ? "center"
+    : props.alignment === "right"
+      ? "flex-end"
+      : "flex-start";
+  // Dependent on props, not feasible to move out
   const style = {
     StatContainer: {
       width: "100%",
-      display: props.display || "grid",
-      "grid-template-columns": "repeat(auto-fill, minmax(130px, auto))",
-      gap: divideSpace(),
-      // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: alignment,
+      flexDirection: "row",
+      gap: `var(--sl-spacing-${props.gap})`,
+      // Apply border styles conditionally based on the hideBorder prop
       "& > *": {
-        "border-right": "1px solid #EAEAEA",
+        "border-right": props.hideBorder
+          ? "none"
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
         "border-right": "none",
       },
       "& > ::slotted(*)": {
-        "border-right": "1px solid #EAEAEA",
+        "border-right": props.hideBorder
+          ? "none"
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
-        height: "100%",
       },
       "& > ::slotted(*:last-child)": {
         "border-right": "none",
@@ -38,7 +50,7 @@ export function StatContainerView(props, children) {
       display: "flex",
     },
     BorderFix: {
-      "border-right": "1px solid transparent",
+      "border-right": "var(--sqm-border-thickness) solid transparent",
       width: "0px",
       "margin-left": "-1px",
     },

package/dist/collection/components/sqm-stat-container/sqm-stat-container.js

@@ -21,12 +21,29 @@ export class StatContainer {
      */
     this.space = "xxx-large";
     /**
+     * @undocumented
      * @uiName Display
      * @uiType string
      * @uiEnum ["grid", "flex"]
      * @uiEnumNames ["Grid", "Flex"]
      */
-    this.display = "grid";
+    this.display = "flex";
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     */
+    this.alignment = "center";
+    /**
+     * @uiName Gap
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.gap = "x-large";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -84,6 +101,9 @@ export class StatContainer {
       "optional": false,
       "docs": {
         "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
             "text": "Display",
             "name": "uiName"
           }, {
@@ -100,7 +120,95 @@ export class StatContainer {
       },
       "attribute": "display",
       "reflect": false,
-      "defaultValue": "\"grid\""
+      "defaultValue": "\"flex\""
+    },
+    "hideBorder": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide border",
+            "name": "uiName"
+          }, {
+            "text": "boolean",
+            "name": "uiType"
+          }],
+        "text": "Hide the seperating border between stats"
+      },
+      "attribute": "hide-border",
+      "reflect": false
+    },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"right\" | \"center\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Alignment",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"right\", \"center\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Right\", \"Center\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Controls the alignment of the flexbox"
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "\"center\""
+    },
+    "gap": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Gap",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "\"x-large\""
     }
   }; }
   static get states() { return {