@saasquatch/mint-components 1.15.0-49 → 1.15.0-50

package/dist/esm/{ShadowViewAddon-8af65b53.js → ShadowViewAddon-dc890af9.js}

@@ -1,6 +1,6 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-b3a06de8.js';
 import { b as browser, u as useMemo, k as useState } from './stencil-hooks.module-20ad2b5f.js';
-import { i as intl } from './global-9c1112d1.js';
+import { i as intl } from './global-64286824.js';
 import { H, L, J, d as dist, w as wn, F as Fn, $ as $e, B, g as getEnvironmentSDK } from './index.module-d49ae5e7.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
@@ -13,7 +13,7 @@ import { l as luxon } from './luxon-793b7f13.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { a as isValidColor, b as isMobile } from './utilities-6341d9fd.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-f0b1ccfc.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-176e92e3.js';
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
@@ -2907,15 +2907,15 @@ function Dot({ active, completed, incomplete, stage, }) {
     } },
     h("div", { style: {
         backgroundColor: completed
-          ? "var(--sl-color-success-500)"
+          ? "var(--sqm-success-color-icon)"
           : incomplete
-            ? "var(--sl-color-neutral-200)"
-            : "var(--sl-color-neutral-0)",
+            ? "var(--sqm-border-color)"
+            : "white",
         border: active
-          ? "1px solid var(--sl-color-success-500)"
+          ? "1px solid var(--sqm-success-color-border)"
           : incomplete
-            ? "1px solid var(--sl-color-neutral-200)"
-            : "1px solid var(--sl-color-success-500)",
+            ? "1px solid var(--sqm-border-color)"
+            : "1px solid var(--sqm-success-color-border)",
         borderRadius: "50%",
         width: "23px",
         height: "23px",
@@ -2925,8 +2925,8 @@ function Dot({ active, completed, incomplete, stage, }) {
       } }, completed ? (h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
       h(CheckMark, null))) : (h("div", { style: {
         color: active
-          ? "var(--sl-color-success-500)"
-          : "var(--sl-color-neutral-50)",
+          ? "var(--sqm-success-color-border)"
+          : "var(--sqm-text-subdued)",
         width: "23px",
         lineHeight: "24px",
         textAlign: "center",
@@ -2940,8 +2940,8 @@ function ProgressLine({ incomplete = false, active = false, invisible = false, }
       height: "4px",
       borderRadius: "4px",
       background: incomplete || active
-        ? "var(--sl-color-neutral-200)"
-        : "var(--sl-color-success-500)",
+        ? "var(--sqm-border-color)"
+        : "var(--sqm-success-color-icon)",
       position: "relative",
       bottom: "0",
       left: "0",
@@ -2978,21 +2978,25 @@ const style$8 = {
     margin: "0 auto",
   },
   Select: {
+    "&::part(base)": {
+      borderRadius: "var(--sqm-input-border-radius)",
+    },
     "&::part(label)": {
-    //   color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-input-label-color)",
     },
     "&::part(menu)": {
       maxHeight: "450px",
     },
     "& sl-menu-item::part(checked-icon)": {
       top: "8px",
+      color: "var(--sqm-text)",
     },
     "& sl-menu-item::part(base)": {
       flexDirection: "column",
     },
     "& sl-menu-item::part(base):focus": {
-      background: "transparent",
-      color: "var(--sl-color-gray-700)",
+      background: "var(--sqm-accent-color-background)",
+      color: "var(--sqm-text)",
     },
   },
   ProgressBar: {
@@ -3012,7 +3016,7 @@ const style$8 = {
         flex: "1 1 0",
       },
       "& .text.subdued": {
-        color: "var(--sl-color-neutral-200)",
+        color: "var(--sqm-text-subdued)",
       },
     },
   },
@@ -3027,6 +3031,9 @@ const style$8 = {
     userSelect: "none",
     height: "120px",
     "&::part(base)": {
+      background: "var(--sqm-portal-background)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+      borderRadius: "var(--sqm-border-radius-normal)",
       boxShadow: "none",
       width: "100%",
     },
@@ -3035,10 +3042,11 @@ const style$8 = {
       padding: 0,
     },
     "& .selected": {
+      borderRadius: "var(--sqm-border-radius-normal)",
       position: "relative",
       top: "-2%",
       left: "100%",
-      color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-primary-color)",
       margin: "-9px",
     },
   },
@@ -3070,7 +3078,7 @@ const style$8 = {
       fontSize: "var(--sl-font-size-medium)",
       lineHeight: "var(--sl-line-height-dense)",
       fontWeight: "600",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -3080,7 +3088,7 @@ const style$8 = {
       fontSize: "var(--sl-font-size-small)",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-x-small)",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -3091,7 +3099,7 @@ const style$8 = {
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-x-small)",
       fontWeight: "600",
-      color: "var(--sl-color-warning-600)",
+      color: "var(--sqm-warning-color-icon)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -3126,7 +3134,6 @@ const style$8 = {
     "& .text": {
       width: "50%",
       maxWidth: "400px",
-      //   minWidth: "330px",
       "@media (max-width: 799px)": {
         width: "auto",
         margin: "auto",
@@ -3135,17 +3142,17 @@ const style$8 = {
     "& .title": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
     },
     "& .points": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-accent-color-text)",
     },
     "& .description": {
       fontSize: "var(--sl-font-size-medium)",
       fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       margin: "var(--sl-spacing-medium) 0",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-xx-small)",
@@ -3154,14 +3161,14 @@ const style$8 = {
       marginBottom: "var(--sl-spacing-xxx-large)",
     },
     "& sl-menu-item[disabled]::part(label)": {
-      color: "var(--sl-color-neutral-300)",
+      color: "var(sqm-text-subdued)",
     },
     "& sl-menu-item[disabled]": {
       "& .step-cost": {
-        color: "var(--sl-color-neutral-300)",
+        color: "var(sqm-text-subdued)",
       },
       "& .step-value": {
-        color: "var(--sl-color-neutral-300)",
+        color: "var(sqm-text-subdued)",
       },
     },
   },
@@ -3169,16 +3176,16 @@ const style$8 = {
     display: "flex",
     flexDirection: "column",
     "&::part(label)": {
-      color: "var(--sl-color-neutral-900)",
+      color: "var(--sqm-text)",
       margin: "0",
     },
     "& .step-cost": {
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       marginBottom: "var(--sl-spacing-x-small)",
     },
     "& .step-unavailable": {
       fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
       margin: "0",
     },
   },
@@ -3187,10 +3194,10 @@ const style$8 = {
     "& .title": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
     },
     "& .description": {
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text-subued)",
       maxWidth: "350px",
       margin: "0 auto",
       lineHeight: "var(--sl-line-height-dense)",
@@ -3201,7 +3208,7 @@ const style$8 = {
       maxWidth: "350px",
       margin: "-30px auto var(--sl-spacing-xxx-large) auto",
       textAlign: "left",
-      color: "var(--sl-color-neutral-700)",
+      color: "var(--sqm-text-subdued)",
     },
   },
   Grid: {
@@ -3243,10 +3250,9 @@ const style$8 = {
     },
     "& .field": {
       width: "30%",
-      textTransform: "uppercase",
       fontSize: "var(--sl-font-size-medium)",
       fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text-subdued)",
       textAlign: "left",
       paddingRight: "var(--sl-spacing-xxx-large)",
       "@media (max-width: 499px)": {
@@ -3260,7 +3266,7 @@ const style$8 = {
       fontWeight: "var(--sl-font-weight-semibold)",
     },
     "& .top-border": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
+      borderTop: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
     },
     "& .image": {
       width: "200px",
@@ -3276,10 +3282,6 @@ const style$8 = {
     "& .cancel": {
       marginLeft: "auto",
       marginRight: "var(--sl-spacing-medium)",
-      "&::part(base)": {
-        fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-1000)",
-      },
       "@media (max-width: 499px)": {
         width: "100%",
         marginRight: "0",
@@ -3287,12 +3289,6 @@ const style$8 = {
       },
     },
     "& .continue": {
-      "&::part(base)": {
-        background: "var(--sl-color-primary-500)",
-        borderColor: "var(--sl-color-primary-500)",
-        fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-0)",
-      },
       "@media (max-width: 499px)": {
         width: "100%",
       },
@@ -3371,9 +3367,10 @@ function RewardExchangeView(props) {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
-              ? "0 0 0 2px var(--sl-color-primary-500)"
+              ? "0 0 0 2px var(--sqm-primary-color)"
               : "none",
-            borderRadius: "4px",
+            borderRadius: "var(--sqm-border-radius-normal)",
+            borderColor: "none",
           };
           return (h("div", { key: item.key, style: style },
             h("sl-card", { exportparts: "base: exchange-card-container", class: sheet$8.classes.Card, style: {
@@ -3434,7 +3431,7 @@ function RewardExchangeView(props) {
                     }))))))));
         }))),
         h("div", { class: sheet$8.classes.Button },
-          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
+          h("sl-button", { exportparts: "base: primarybutton-base", type: "primary", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
   function chooseAmount() {
@@ -3455,7 +3452,7 @@ function RewardExchangeView(props) {
             h("div", { class: "space" }))),
         h("div", { class: sheet$8.classes.Button },
           h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
-          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
+          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
@@ -3478,8 +3475,8 @@ function RewardExchangeView(props) {
           h("div", { class: "field" }, states.content.text.costTitle),
           h("div", { class: "value" }, cost)),
         h("div", { class: sheet$8.classes.Button },
-          h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
-          h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
+          h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+          h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
     var _a, _b, _c, _d, _e, _f;
@@ -3531,7 +3528,7 @@ function RewardExchangeView(props) {
                   width: "100px",
                   height: "100px",
                   margin: "9px",
-                  "--border-radius": "4px",
+                  "--border-radius": "var(--sqm-border-radius-normal)",
                 } })),
             h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
@@ -3623,15 +3620,14 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
     setStage: null,
     setExchangeState: null,
     copyFuelTankCode: null,
-    refs: null,
   },
   refs: null,
 });
 const baseReward = {
-  key: "",
-  name: "",
+  key: "reward",
+  name: "Demo Reward",
   description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
-  imageUrl: "",
+  imageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png",
   available: true,
   unavailableReasonCode: null,
   ruleType: "FIXED_GLOBAL_REWARD",
@@ -3648,7 +3644,34 @@ const baseReward = {
   prettyDestinationMaxValue: null,
   globalRewardKey: "",
   destinationUnit: null,
-  steps: [],
+  steps: [
+    {
+      prettyDestinationValue: "Reward Step 1",
+      prettySourceValue: "50 Points",
+      available: true,
+      unavailableReasonCode: null,
+      destinationValue: 10,
+      sourceValue: 1,
+      globalRewardKey: "reward1",
+      rewardInput: {
+        accountId: "zach",
+        userId: "zach",
+      },
+    },
+    {
+      prettyDestinationValue: "Reward Step 2",
+      prettySourceValue: "100 Points",
+      available: false,
+      unavailableReasonCode: "Not enough points",
+      destinationValue: 10,
+      sourceValue: 1,
+      globalRewardKey: "reward1",
+      rewardInput: {
+        accountId: "zach",
+        userId: "zach",
+      },
+    },
+  ],
 };
 const notEnoughPoints = {
   available: false,

package/dist/esm/{global-9c1112d1.js → global-64286824.js}

@@ -26743,7 +26743,7 @@ sl-button[type="primary"]::part(base) {
 *::part(primarybutton-base):hover,
 sl-button[type="primary"]::part(base):hover{
   background-color: var(--sqm-primary-button-background-hover);
-  border-color: var(--sqm-primary-button-color-border-hover);
+  border-color: var(--sqm-primary-button-border-color-hover);
   color: var(--sqm-primary-button-color-hover);
 }