@saasquatch/mint-components 1.3.3-6 → 1.5.0-0

package/dist/cjs/sqm-divided-layout_30.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const global = require('./global-b957dd98.js');
+const global = require('./global-6223fe8f.js');
 const useCallback = require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-85eb6b4d.js');
+const index_module = require('./index.module-7dd4b981.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
@@ -15,21 +15,21 @@ const mixins = require('./mixins-7b7c59fe.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-d144735a.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-3b008930.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-9114d9ad.js');
-const reRender = require('./re-render-59955561.js');
-const useDemoBigStat = require('./useDemoBigStat-9193e8c5.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-7dd44d62.js');
+const reRender = require('./re-render-6111d4bd.js');
+const useDemoBigStat = require('./useDemoBigStat-2786227e.js');
 const sqmShareLinkView = require('./sqm-share-link-view-a935d07e.js');
-const ShadowViewAddon = require('./ShadowViewAddon-d6a442a9.js');
+const ShadowViewAddon = require('./ShadowViewAddon-a85b8c8d.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-d06e1885.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-b565a10a.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6c7f78e6.js');
 const sqmStatContainerView = require('./sqm-stat-container-view-ee7b00ff.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-c3b889d4.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-14b41436.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-1704d285.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-bd40f7eb.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-08d1848c.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-4d78fd6d.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-b595e302.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-07f86880.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-b60e17c8.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-69c73802.js');
 const sqmHeroView = require('./sqm-hero-view-bb3d00a1.js');
 const sqmNameFieldsView = require('./sqm-name-fields-view-24614ac7.js');
 
@@ -14921,51 +14921,69 @@ function useRewardExchangeList(props) {
   };
 }
 
-const ExchangeArrows = () => (index.h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  index.h("circle", { cx: "15", cy: "15", r: "15", fill: "white" }),
-  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.6255 21.783C10.5129 21.8963 10.3597 21.96 10.2 21.96C10.0402 21.96 9.88705 21.8963 9.77442 21.783L5.87442 17.8597C5.64081 17.6247 5.64194 17.2448 5.87695 17.0112C6.11197 16.7775 6.49186 16.7787 6.72548 17.0137L9.59995 19.9054V8.52001C9.59995 8.18864 9.86858 7.92001 10.2 7.92001C10.5313 7.92001 10.8 8.18864 10.8 8.52001V19.9054L13.6744 17.0137C13.908 16.7787 14.2879 16.7775 14.5229 17.0112C14.758 17.2448 14.7591 17.6247 14.5255 17.8597L10.6255 21.783ZM20.2255 8.09707C20.1129 7.98378 19.9597 7.92007 19.8 7.92007C19.6402 7.92007 19.487 7.98378 19.3744 8.09707L15.4744 12.0204C15.2408 12.2554 15.2419 12.6353 15.477 12.8689C15.712 13.1025 16.0919 13.1014 16.3255 12.8664L19.2 9.97473V21.3601C19.2 21.6914 19.4686 21.9601 19.8 21.9601C20.1313 21.9601 20.4 21.6914 20.4 21.3601V9.97473L23.2744 12.8664C23.508 13.1014 23.8879 13.1025 24.1229 12.8689C24.358 12.6353 24.3591 12.2554 24.1255 12.0204L20.2255 8.09707Z", fill: "#333333" })));
-const CheckMark = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "7", viewBox: "0 0 10 7", fill: "none" },
-  index.h("path", { d: "M2.12828 2.71485C1.72536 2.33712 1.09253 2.35754 0.714799 2.76045C0.337068 3.16336 0.357483 3.7962 0.760395 4.17393L2.12828 2.71485ZM3.81471 5.66661L3.13076 6.39615C3.51542 6.75677 4.11399 6.75677 4.49865 6.39615L3.81471 5.66661ZM9.23939 1.95171C9.6423 1.57397 9.66271 0.941139 9.28498 0.538227C8.90725 0.135315 8.27442 0.114901 7.87151 0.492631L9.23939 1.95171ZM0.760395 4.17393L3.13076 6.39615L4.49865 4.93708L2.12828 2.71485L0.760395 4.17393ZM4.49865 6.39615L9.23939 1.95171L7.87151 0.492631L3.13076 4.93708L4.49865 6.39615Z", fill: "white" })));
-
-function Dot({ active, completed, incomplete, }) {
+const ExchangeArrows = () => (index.h("svg", { width: 19, height: 15, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.125 14.783a.6.6 0 0 1-.851 0l-3.9-3.923a.6.6 0 1 1 .85-.846L4.1 12.905V1.52a.6.6 0 0 1 1.2 0v11.385l2.875-2.891a.6.6 0 1 1 .85.846l-3.9 3.923Zm9.6-13.686a.6.6 0 0 0-.851 0l-3.9 3.923a.6.6 0 0 0 .85.846L13.7 2.975V14.36a.6.6 0 1 0 1.2 0V2.975l2.875 2.891a.6.6 0 1 0 .85-.846l-3.9-3.923Z", fill: "#333" })));
+const CheckMark = () => (index.h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.58.23c.475.371.56 1.057.19 1.532L5.69 9.554a1.091 1.091 0 0 1-1.631.1L.32 5.915a1.09 1.09 0 1 1 1.542-1.542L4.73 7.239 10.049.42A1.09 1.09 0 0 1 11.58.23Z", fill: "#fff" })));
+const Gift = () => (index.h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M40.18 126h83.663a3 3 0 0 0 3-3V73.966a3 3 0 0 0-3-3H40.18a3 3 0 0 0-3 3V123a3 3 0 0 0 3 3Z", fill: "#FFD34F" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
+  index.h("path", { d: "M133.039 74.224a2.18 2.18 0 0 0 2.187-2.172v-19.19c0-1.2-.98-2.172-2.187-2.172H31.347a2.18 2.18 0 0 0-2.187 2.172v19.19c0 1.2.98 2.172 2.187 2.172H133.04Z", fill: "#FFC000" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M123.287 35.172c0 6.056-9.155 15.226-13.76 15.654H88.888V126H75.141V50.826H58.534c-9.462-2.038-17.803-9.258-17.803-16.944 0-7.49 3.274-13.422 9.23-15.983 5.693-2.446 12.265-1.105 17.46 2.479 6.378 4.398 9.956 12.654 13.202 20.144.284.657.567 1.308.848 1.95.274-.608.55-1.228.83-1.856 3.216-7.22 6.887-15.464 13.057-19.89 5.454-3.913 12.387-5.39 18.38-2.711 6.197 2.77 9.549 9.127 9.549 17.157Zm-23.306-8.266c3.305-2.37 7.262-2.8 10.645 0 2.946 2.44 3.103 3.588 3.482 6.351l.067.483c0 4.09-3.549 10.252-7.097 10.252-2.515 0-4.489-.022-6.34-.041-3.375-.036-6.337-.068-11.403.04.966-1.86 1.737-3.644 2.473-5.346 1.967-4.553 3.678-8.515 8.173-11.739Zm-39.034 0c-1.6-1.103-5.268-.61-6.79.043-1.257.54-3.134 2.19-3.134 6.933 0 4.61 7.511 8.59 7.511 8.59s5.962 1.52 16.607 1.52c-3.624-8.922-8.757-13.336-14.194-17.086Z", fill: "#EB5757" }),
+  index.h("path", { d: "M75.086 74.224h13.85v7.604h-13.85v-7.604Z", fill: "#DD4747" }),
+  index.h("g", { filter: "url(#a)" },
+    index.h("ellipse", { cx: 82.008, cy: 141.207, rx: 36.813, ry: 5.793, fill: "#E0DDDD", "fill-opacity": 0.8 })),
+  index.h("path", { d: "M150.446 79.134a.5.5 0 0 1 .9 0l1.133 2.336c.05.102.132.184.234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.503.503 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.499.499 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.343-1.122a.499.499 0 0 0 .234-.233l1.134-2.336Z", fill: "#FAB6B6" }),
+  index.h("path", { d: "M14.86 29.168a.5.5 0 0 1 .9 0l1.133 2.336a.5.5 0 0 0 .234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.5.5 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.5.5 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.344-1.122a.5.5 0 0 0 .233-.233l1.134-2.336Z", fill: "#F4EFBC" }),
+  index.h("path", { d: "m125.382 0 .712 1.466 1.475.706-1.475.707-.712 1.466-.711-1.466-1.476-.707 1.476-.706.711-1.466Z", fill: "#FDA802" }),
+  index.h("path", { d: "m2.187 103.552.711 1.466 1.476.706-1.476.707-.711 1.466-.711-1.466L0 105.724l1.476-.706.71-1.466Z", fill: "#E4599C" }),
+  index.h("defs", null,
+    index.h("filter", { id: "a", x: 35.195, y: 125.414, width: 93.625, height: 31.586, filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" },
+      index.h("feFlood", { "flood-opacity": 0, result: "BackgroundImageFix" }),
+      index.h("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+      index.h("feGaussianBlur", { stdDeviation: 5, result: "effect1_foregroundBlur_653_17907" })))));
+
+function Dot({ active, completed, incomplete, stage, }) {
   return (index.h("div", { style: {
-      flex: "0 0 0",
-      content: "''",
-      height: "4px",
-      borderRadius: "4px",
-      background: incomplete ? "#E5E5E5" : "#9E9E9E",
-      position: "relative",
-      bottom: "0",
-      left: "0",
       display: "flex",
-      justifyContent: "center",
-      columnGap: "50px",
-      marginRight: "-2px",
-      boxSizing: "content-box",
     } },
     index.h("div", { style: {
-        backgroundColor: completed ? "#9E9E9E" : "#FFF",
+        backgroundColor: completed
+          ? "var(--sl-color-success-500)"
+          : incomplete
+            ? "var(--sl-color-neutral-200)"
+            : "var(--sl-color-neutral-0)",
         border: active
-          ? "3px solid #9E9E9E"
+          ? "1px solid var(--sl-color-success-500)"
           : incomplete
-            ? "3px solid #E5E5E5"
-            : "3px solid #9E9E9E",
+            ? "1px solid var(--sl-color-neutral-200)"
+            : "1px solid var(--sl-color-success-500)",
         borderRadius: "50%",
-        width: "10px",
-        height: "10px",
-        margin: "-6px auto 0px",
+        width: "23px",
+        height: "23px",
+        margin: "-11px",
         zIndex: "1",
         boxSizing: "content-box",
-      } }, completed && (index.h("div", { style: { top: "-6px", position: "relative" } },
-      index.h(CheckMark, null))))));
+      } }, completed ? (index.h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
+      index.h(CheckMark, null))) : (index.h("div", { style: {
+        color: active
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-neutral-50)",
+        width: "23px",
+        lineHeight: "24px",
+        textAlign: "center",
+        position: "relative",
+      } }, stage + 1)))));
 }
-function ProgressLine({ incomplete = false, active = false }) {
+function ProgressLine({ incomplete = false, active = false, invisible = false, }) {
   return (index.h("div", { style: {
       content: "''",
       flex: "0.5 0.5 0",
       height: "4px",
       borderRadius: "4px",
-      background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
+      background: incomplete || active
+        ? "var(--sl-color-neutral-200)"
+        : "var(--sl-color-success-500)",
       position: "relative",
       bottom: "0",
       left: "0",
@@ -14974,17 +14992,18 @@ function ProgressLine({ incomplete = false, active = false }) {
       columnGap: "50px",
       marginRight: "-2px",
       boxSizing: "content-box",
+      opacity: invisible ? "0" : "1",
     } }));
 }
-function Progress({ active, completed, incomplete }) {
+function Progress({ active, completed, incomplete, stage }) {
   return [
-    index.h(ProgressLine, { incomplete: incomplete }),
-    index.h(Dot, { active: active, completed: completed, incomplete: incomplete }),
-    index.h(ProgressLine, { incomplete: incomplete, active: active }),
+    index.h(ProgressLine, { incomplete: incomplete, invisible: stage === 0 }),
+    index.h(Dot, { active: active, completed: completed, incomplete: incomplete, stage: stage }),
+    index.h(ProgressLine, { incomplete: incomplete, active: active, invisible: stage === 2 }),
   ];
 }
 function ProgressBar({ stageCount, currentStage, }) {
-  return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage })))));
+  return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
 }
 
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
@@ -15014,7 +15033,6 @@ function RewardExchangeView(props) {
       "&::part(base)": {
         boxShadow: "none",
         width: "100%",
-        // maxWidth: "350px",
         display: "flex",
         margin: "0 auto",
       },
@@ -15023,35 +15041,6 @@ function RewardExchangeView(props) {
         display: "flex",
         width: "100%",
       },
-      "& .text-area": {
-        textAlign: "left",
-        padding: "8px",
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .amount": {
-        fontSize: "var(--sl-font-size-small)",
-      },
-      "& .error": {
-        fontSize: "var(--sl-font-size-small)",
-        color: "var(--sl-color-warning-500)",
-      },
-      "& .selected-outline": {
-        width: "18px",
-        height: "18px",
-        minWidth: "18px",
-        borderRadius: "50%",
-        background: "var(--sl-color-primary-500)",
-        position: "relative",
-        margin: "-9px",
-        left: "100%",
-      },
-      "& .selected-checkmark": {
-        position: "relative",
-        top: "-6px",
-      },
     },
     Drawer: {
       "&::part(base)": {
@@ -15069,14 +15058,14 @@ function RewardExchangeView(props) {
     FullImage: {
       objectFit: "contain",
       maxWidth: "100%",
-      height: "150px",
+      height: "250px",
       display: "flex",
       margin: "0 auto",
     },
     PreviewImage: {
       objectFit: "contain",
       width: "120px",
-      height: "120px",
+      height: "118px",
       flex: 0.33,
     },
     InputBox: {
@@ -15103,8 +15092,10 @@ function RewardExchangeView(props) {
       cursor: "pointer",
     },
     ProgressBar: {
-      fontSize: "80%",
-      marginBottom: "20px",
+      maxWidth: "350px",
+      width: "100%",
+      margin: "auto",
+      marginBottom: "var(--sl-spacing-xxx-large)",
       "& .text-area": {
         marginTop: "5px",
         display: "flex",
@@ -15113,16 +15104,133 @@ function RewardExchangeView(props) {
         whiteSpace: "nowrap",
         marginBottom: "6px",
         "& .text": {
+          marginBottom: "var(--sl-spacing-x-small)",
           flex: "1 1 0",
         },
         "& .text.subdued": {
-          color: "#BDBDBD",
+          color: "var(--sl-color-neutral-200)",
         },
       },
     },
     KutayCard: {
+      display: "flex",
+      userSelect: "none",
+      height: "120px",
       "&::part(base)": {
         boxShadow: "none",
+        width: "100%",
+      },
+      "&::part(body)": {
+        display: "flex",
+        padding: 0,
+      },
+      "& .selected-outline": {
+        width: "18px",
+        height: "18px",
+        minWidth: "18px",
+        borderRadius: "50%",
+        background: "var(--sl-color-primary-500)",
+        position: "relative",
+        margin: "-9px",
+        left: "100%",
+      },
+      "& .selected-checkmark": {
+        position: "relative",
+        left: "12%",
+        top: "-29%",
+        transform: "scale(0.8)",
+      },
+    },
+    Square: {
+      width: "120px",
+      height: "118px",
+      borderRadius: "3px 0 0 3px",
+      "& .image": {
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        borderRadius: "inherit",
+      },
+      "& .image.subdued": {
+        filter: "brightness(0.95)",
+        opacity: "0.5",
+      },
+    },
+    Image: {
+      "& .image": {
+        objectFit: "contain",
+        width: "120px",
+        height: "118px",
+        flex: 0.33,
+      },
+      "& .image.black": {
+        filter: "brightness(20%)",
+      },
+    },
+    TextArea: {
+      textAlign: "left",
+      padding: "12px",
+      "& .title": {
+        fontSize: "16px",
+        lineHeight: "20px",
+        fontWeight: "600",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .amount": {
+        fontSize: "14px",
+        lineHeight: "18px",
+        marginTop: "8px",
+        color: "var(--sl-color-neutral-500)",
+      },
+      "& .error": {
+        fontSize: "14px",
+        lineHeight: "18px",
+        marginTop: "8px",
+        fontWeight: "600",
+        color: "var(--sl-color-warning-500)",
+      },
+    },
+    ChooseAmount: {
+      margin: "var(--sl-spacing-medium) 0",
+      "& .title": {
+        //fontSize: "var(--sl-font-size-large)",
+        fontSize: "113%",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .points": {
+        //fontSize: "var(--sl-font-size-large)",
+        fontSize: "113%",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-sky-500)",
+      },
+      "& .description": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+        color: "var(--sl-color-neutral-500)",
+        margin: "var(--sl-spacing-medium) 0",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-xx-small)",
+      },
+      "& .space": {
+        marginBottom: "var(--sl-spacing-xxx-large)",
+      },
+    },
+    Success: {
+      textAlign: "center",
+      "& .title": {
+        fontSize: "var(--sl-font-size-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .description": {
+        color: "var(--sl-color-neutral-400)",
+        width: "100%",
+        maxWidth: "350px",
+        margin: "0 auto",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginBottom: "var(--sl-spacing-xxx-large)",
+        marginTop: "var(--sl-spacing-xx-small)",
       },
     },
     KutayButton: {
@@ -15155,6 +15263,9 @@ function RewardExchangeView(props) {
       "& .continue.right": {
         marginLeft: "auto",
       },
+      "& .continue.center": {
+        margin: "0 auto",
+      },
     },
   };
   // JSS config
@@ -15190,7 +15301,7 @@ function RewardExchangeView(props) {
             id: "unavailableCode",
             defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
           }, {
-            unavailableReason: step.unavailableReason || step.unavailableReasonCode,
+            unavailableReason: step.unavailableReasonCode,
           }))))));
     })));
   }
@@ -15218,51 +15329,70 @@ function RewardExchangeView(props) {
           ? item.prettySourceValue
           : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
         return (index.h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
-          index.h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
+          index.h("sl-card", { class: sheet.classes.KutayCard, style: {
+              cursor: item.unavailableReasonCode
+                ? "not-allowed"
+                : "pointer",
+            }, onClick: () => item.available &&
               callbacks.setExchangeState({ selectedItem: item }) },
             item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (index.h("div", { class: "selected-outline" },
               index.h("div", { class: "selected-checkmark" },
                 index.h(CheckMark, null)))),
-            // item?.imageUrl &&
-            index.h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || index.getAssetPath("./assets/Reward-icon.png") }),
-            index.h("div", { class: "text-area" },
-              index.h("div", { class: "title" }, item.description),
-              index.h("div", { class: "amount" }, amount),
-              item.unavailableReasonCode && (index.h("div", { class: "error" }, global.intl.formatMessage({
-                id: "unavailableCode",
-                defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
-              }, {
-                unavailableReason: item.unavailableReason ||
-                  item.unavailableReasonCode,
-              })))))));
+            index.h("div", { style: {
+                display: "flex",
+                width: "100%",
+                borderRadius: "3px",
+                background: item.unavailableReasonCode
+                  ? "rgba(0, 0, 0, 0.05)"
+                  : "rgba(0, 0, 0, 0)",
+              } },
+              index.h("div", { class: sheet.classes.Square },
+                index.h("img", { class: item.unavailableReasonCode ? "image subdued" : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
+                    index.getAssetPath("./assets/placeholder.png") })),
+              index.h("div", { class: sheet.classes.TextArea, style: {
+                  opacity: item.unavailableReasonCode ? "0.5" : "1",
+                } },
+                index.h("div", { class: "title" }, item.name),
+                index.h("div", { class: "amount" }, amount),
+                item.unavailableReasonCode && (index.h("div", { class: "error" }, global.intl.formatMessage({
+                  id: "unavailableCode",
+                  defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+                }, {
+                  unavailableReason: item.unavailableReason ||
+                    item.unavailableReasonCode,
+                }))))))));
       })),
       index.h("div", { class: sheet.classes.KutayButton },
         index.h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
     ];
   }
   function chooseAmount() {
-    var _a;
+    var _a, _b, _c;
     const input = getInput();
     const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
       ? false
       : input && !states.amount;
     return (index.h("div", null,
-      index.h("div", null, 
-      //selectedItem?.imageUrl &&
-      index.h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-          index.getAssetPath("./assets/Reward-icon.png") })),
-      index.h("b", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
-      index.h("div", { class: sheet.classes.InputBox }, input),
+      index.h("div", null, index.h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+          index.getAssetPath("./assets/placeholder.png") })),
+      index.h("div", { class: sheet.classes.ChooseAmount },
+        index.h("div", { class: "title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
+        ((_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "points" }, input)) : (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
+        ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", { class: "points" }, input)),
+        index.h("div", { class: "space" })),
       index.h("div", { class: sheet.classes.KutayButton },
         index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
         index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
   }
   function confirmation() {
     return (index.h("div", null,
-      index.h("h2", null, "Confirm and redeem"),
-      index.h("div", { style: { textAlign: "center" } },
+      index.h("h2", { style: { margin: "20px 0" } }, "Confirm and redeem"),
+      index.h("div", { style: {
+          textAlign: "center",
+          marginBottom: "var(--sl-spacing-xxx-large)",
+        } },
         index.h("p", null,
-          index.h("b", null, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
+          index.h("span", { style: { fontSize: "18px" } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
         index.h("p", null,
           index.h(ExchangeArrows, null)),
         index.h("div", { class: sheet.classes.CardContainer, style: {
@@ -15271,20 +15401,27 @@ function RewardExchangeView(props) {
             flex: "1",
             minWidth: "100%",
           } },
-          index.h("sl-card", { class: sheet.classes.Base },
-            index.h("img", { class: sheet.classes.PreviewImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                index.getAssetPath("./assets/Reward-icon.png") }),
-            index.h("p", { style: { marginBottom: "0", flex: "1" } }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))),
+          index.h("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.KutayCard },
+            index.h("div", { class: sheet.classes.Square },
+              index.h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                  index.getAssetPath("./assets/placeholder.png") })),
+            index.h("div", { class: sheet.classes.TextArea, style: {
+                lineHeight: "18px",
+                alignSelf: "center",
+              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) +
+              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)
+              : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)))),
       index.h("div", { class: sheet.classes.KutayButton },
         index.h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
         index.h("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
   }
   function success() {
-    return (index.h("div", { style: { textAlign: "center" } },
-      index.h("img", { class: sheet.classes.FullImage, src: index.getAssetPath("./assets/Reward-icon.png") }),
-      index.h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
-      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && index.h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode),
-      index.h("sl-button", { class: "continue", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done")));
+    return (index.h("div", { class: sheet.classes.Success },
+      index.h(Gift, null),
+      index.h("div", { class: "title" }, "Reward Redeemed"),
+      index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
+      index.h("div", { class: sheet.classes.KutayButton },
+        index.h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done"))));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -15297,7 +15434,7 @@ function RewardExchangeView(props) {
     const stageNumber = stageList.indexOf(states.redeemStage);
     return (index.h("div", { class: sheet.classes.ProgressBar },
       index.h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
-        if (stage === states.redeemStage) {
+        if (stageList.indexOf(stage) <= stageNumber) {
           return index.h("span", { class: "text" }, stageProgressList[stage]);
         }
         else {
@@ -15306,25 +15443,16 @@ function RewardExchangeView(props) {
       })),
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
-  // const BackButton = () => {
-  //   if (states.redeemStage === "success") return "";
-  //   let previousStage: Stages = "";
-  //   if (states.redeemStage === "confirmation") {
-  //     previousStage = "chooseAmount";
-  //   } else if (states.redeemStage === "chooseAmount") {
-  //     previousStage = "chooseReward";
-  //   }
-  //   return (
-  //     <div slot="label">
-  //       <a
-  //         style={{ cursor: "pointer", fontSize: "80%", color: "#858585" }}
-  //         onClick={() => callbacks.setStage(previousStage)}
-  //       >
-  //         <LeftArrow /> Back
-  //       </a>
-  //     </div>
-  //   );
-  // };
+  function loading() {
+    return (index.h("div", { style: {
+        display: "flex",
+        height: "400px",
+        alignItems: "center",
+        justifyContent: "center",
+      } },
+      index.h("div", { style: { transform: "scale(5)" } },
+        index.h("sl-spinner", null))));
+  }
   function errorMessage() {
     return (index.h("sl-alert", { type: "danger", open: true },
       index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
@@ -15334,6 +15462,7 @@ function RewardExchangeView(props) {
     index.h("style", { type: "text/css" }, styleString),
     index.h("div", null,
       stageMap(),
+      states.loading && loading(),
       states.exchangeError && errorMessage(),
       currentStage && currentStage())));
 }
@@ -21139,8 +21268,13 @@ function cartesian(...args) {
 }
 
 const checkmark_circle = () => {
-  return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" },
-    index.h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M1.636 9a7.364 7.364 0 1114.728 0A7.364 7.364 0 011.636 9zM9 0a9 9 0 100 18A9 9 0 009 0zm5.192 6.266a.982.982 0 00-1.548-1.208l-4.787 6.137-2.58-2.58a.982.982 0 00-1.39 1.388l3.367 3.366a.982.982 0 001.468-.09l5.47-7.013z", "clip-rule": "evenodd" })));
+  return (index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.81818 10C1.81818 5.48131 5.48131 1.81818 10 1.81818C14.5187 1.81818 18.1818 5.48131 18.1818 10C18.1818 14.5187 14.5187 18.1818 10 18.1818C5.48131 18.1818 1.81818 14.5187 1.81818 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM15.7692 6.96189C16.1398 6.48683 16.0551 5.80132 15.58 5.43077C15.1049 5.06022 14.4194 5.14495 14.0489 5.62001L8.72994 12.4391L5.86229 9.5715C5.43627 9.14548 4.74554 9.14548 4.31952 9.5715C3.89349 9.99752 3.89349 10.6882 4.31952 11.1143L8.05976 14.8545C8.28083 15.0756 8.58613 15.1912 8.89818 15.172C9.21023 15.1528 9.49905 15.0006 9.69133 14.7541L15.7692 6.96189Z", fill: "currentColor" })));
+};
+const checkmark_filled = () => {
+  return (index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.65 6.19231C15.0459 6.5011 15.1165 7.07236 14.8077 7.46825L9.74277 13.9617C9.58254 14.1672 9.34186 14.294 9.08182 14.31C8.82178 14.326 8.56736 14.2297 8.38314 14.0454L5.26627 10.9286C4.91124 10.5735 4.91124 9.99794 5.26627 9.64292C5.62129 9.2879 6.19689 9.2879 6.55191 9.64292L8.94162 12.0326L13.3741 6.35001C13.6828 5.95412 14.2541 5.88352 14.65 6.19231Z", fill: "white" })));
 };
 const arrow_left_right = () => {
   return (index.h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -21148,21 +21282,21 @@ const arrow_left_right = () => {
 };
 
 const gift = () => {
-  return (index.h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    index.h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
-    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
+  return (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    index.h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#F2C94C" }),
+    index.h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#F2C94C" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
+    index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#EB5757" })));
 };
 
 function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, } = props;
-  console.log("progress bar props", props);
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, finite = 0, } = props;
+  //   console.log("progress bar props", props);
   const gift1 = gift();
   const gift2 = gift();
   const gift3 = gift();
   var items = [];
   var columns = "";
-  var repetitions = Math.floor(progress / goal);
   if (repeatable) {
     if (steps) {
       addStepsRepeatable();
@@ -21183,12 +21317,12 @@ function ProgressBarView(props) {
   const style = {
     ProgressBar: {
       "& .progress-bar": {
-        height: "15px",
+        height: "0",
         marginTop: steps
           ? "var(--sl-spacing-medium)"
           : "var(--sl-spacing-large)",
         filter: expired ? "grayscale(1)" : "",
-        marginBottom: "var(--sl-spacing-xx-large)",
+        marginBottom: "var(--sl-spacing-xxx-large)",
         marginRight: "var(--sl-spacing-x-small)",
         fontSize: "var(--sl-font-size-x-small)",
         display: "grid",
@@ -21293,7 +21427,10 @@ function ProgressBarView(props) {
   const styleString = sheet.toString();
   return (index.h("div", { class: sheet.classes.ProgressBar },
     index.h("style", { type: "text/css" }, styleString),
-    index.h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
+    index.h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
+        (Boolean(finite) && progress > 2 * goal)
+        ? "progress-bar repeatable-steps"
+        : "progress-bar" }, items)));
   function clamp(x, min, max) {
     return Math.min(Math.max(x, min), max);
   }
@@ -21366,6 +21503,23 @@ function ProgressBarView(props) {
       items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
       items.push(index.h("div", { class: "gift bw" }, gift2));
     }
+    // finite repetition hit
+    else if (finite && repetitions >= finite) {
+      if (repetitions > 2) {
+        items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
+        items.push(index.h("div", { class: "gift start" }, gift1));
+        columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
+      }
+      else {
+        columns = "0.5fr 0fr 0fr 0.5fr 0fr 0fr";
+      }
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
+      items.push(index.h("div", { class: "gift" }, gift2));
+      items.push(index.h("div", { class: "filled" }));
+      items.push(index.h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
+      items.push(index.h("div", { class: "gift" }, gift3));
+    }
     // multiple repetitions
     else {
       columns =
@@ -21466,29 +21620,27 @@ function ProgressBarView(props) {
 }
 
 function TaskCardView(props) {
-  console.log({ props });
+  //   console.log({ props });
   const checkmark_circle$1 = checkmark_circle();
+  const checkmark_filled$1 = checkmark_filled();
   const arrow_left_right$1 = arrow_left_right();
   const style = {
     HostBlock: mixins.HostBlock,
     TaskCard: {
-      "& .main > div": {
-        margin: "var(--sl-spacing-medium)",
-      },
       "& .main": {
         position: "relative",
         boxSizing: "border-box",
         minWidth: "347px",
         background: "var(--sl-color-neutral-0)",
-        border: "1px solid var(--sl-color-neutral-300)",
-        borderRadius: "var(--sl-border-radius-medium)",
+        border: "1px solid var(--sl-color-neutral-200)",
+        borderRadius: "var(--sl-border-radius-large)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
         color: "var(--sl-color-neutral-600)",
       },
       "& .main.complete": {
-        background: "var(--sl-color-success-50)",
-        borderColor: "var(--sl-color-success-700)",
+        background: "var(--sl-color-primary-50)",
+        borderColor: "var(--sl-color-primary-500)",
       },
       "& .main.expired": {
         color: "var(--sl-color-neutral-400)",
@@ -21497,17 +21649,30 @@ function TaskCardView(props) {
       "& .title": {
         fontSize: "var(--sl-font-size-small)",
         fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-950)",
       },
-      "& .black": {
-        color: "var(--sl-color-neutral-1000)",
+      "& .container": {
+        margin: "var(--sl-spacing-medium)",
+      },
+      "& .container.subdued": {
+        opacity: "0.66",
+      },
+      "& .container > div": {
+        margin: "var(--sl-spacing-medium) 0",
       },
     },
+    Expired: {
+      margin: "var(--sl-spacing-medium)",
+      marginBottom: "calc(var(--sl-spacing-x-small)*-1)",
+      color: "var(--sl-color-warning-500)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
     Header: {
       display: "flex",
       "& .icon": {
         alignSelf: "center",
         lineHeight: "0",
-        color: "var(--sl-color-success-700)",
+        color: "var(--sl-color-primary-400)",
         fontSize: "var(--sl-font-size-large)",
         marginRight: "var(--sl-spacing-x-small)",
       },
@@ -21515,6 +21680,7 @@ function TaskCardView(props) {
         alignSelf: "center",
         fontSize: "var(--sl-font-size-x-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-950)",
         lineHeight: "100%",
         marginRight: "var(--sl-spacing-xx-small)",
       },
@@ -21522,6 +21688,7 @@ function TaskCardView(props) {
         alignSelf: "end",
         textTransform: "uppercase",
         fontSize: "var(--sl-font-size-x-small)",
+        color: "var(--sl-color-neutral-950)",
         lineHeight: "var(--sl-font-size-medium)",
         marginRight: "var(--sl-spacing-xx-small)",
       },
@@ -21530,9 +21697,6 @@ function TaskCardView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
         marginBottom: "var(--sl-spacing-xx-small)",
       },
-      "& .black": {
-        color: "var(--sl-color-neutral-1000)",
-      },
       "& .neutral": {
         color: "var(--sl-color-neutral-400)",
       },
@@ -21542,6 +21706,7 @@ function TaskCardView(props) {
       "& .icon": {
         fontSize: "var(--sl-font-size-xx-small)",
         marginRight: "var(--sl-spacing-xx-small)",
+        verticalAlign: "bottom",
       },
       "& .text": {
         marginTop: "auto",
@@ -21549,7 +21714,7 @@ function TaskCardView(props) {
         fontSize: "var(--sl-font-size-x-small)",
       },
       "& .success": {
-        color: "var(--sl-color-success-600)",
+        color: "var(--sl-color-primary-500)",
         fontWeight: "var(--sl-font-weight-semibold)",
       },
       "& .action": {
@@ -21560,6 +21725,10 @@ function TaskCardView(props) {
           borderRadius: "var(--sl-border-radius-medium)",
         },
         "&.disabled::part(base)": {
+          border: "1px solid var(--sl-color-primary-400)",
+          background: "var(--sl-color-primary-400)",
+        },
+        "&.neutral::part(base)": {
           border: "1px solid var(--sl-color-neutral-400)",
           background: "var(--sl-color-neutral-400)",
         },
@@ -21579,8 +21748,11 @@ function TaskCardView(props) {
   const dateStart = props.showExpiry && luxon.DateTime.fromISO(props.rewardDuration.split("/")[0]);
   const dateEnd = props.showExpiry && luxon.DateTime.fromISO(props.rewardDuration.split("/")[1]);
   const dateToday = luxon.DateTime.now();
-  const taskComplete = showComplete && props.repeatable === false;
-  const taskUnavailable = props.showExpiry && (dateEnd < dateToday || dateToday < dateStart);
+  const taskComplete = (showComplete && props.repeatable === false) ||
+    (props.finite && props.progress >= props.finite * props.goal);
+  const taskEnded = props.showExpiry && dateEnd <= dateToday;
+  const taskNotStarted = props.showExpiry && dateToday <= dateStart;
+  const taskUnavailable = taskEnded || taskNotStarted;
   return (index.h("div", { class: sheet.classes.TaskCard },
     index.h("div", { class: taskUnavailable
         ? "main expired"
@@ -21588,34 +21760,43 @@ function TaskCardView(props) {
           ? "main complete"
           : "main" },
       index.h("style", { type: "text/css" }, styleString),
-      index.h("div", { class: sheet.classes.Header }, props.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0", height: "12px" } })) : (index.h("div", null,
-        taskUnavailable && (index.h("div", { class: "end" }, "Available " +
-          dateStart.toLocaleString(luxon.DateTime.DATE_MED).split(",")[0] +
-          " - " +
-          dateEnd.toLocaleString(luxon.DateTime.DATE_MED).split(",")[0])),
-        showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, checkmark_circle$1)),
-        index.h("span", { class: taskUnavailable ? "value" : "value black" }, props.rewardAmount),
-        index.h("span", { class: "text" }, props.rewardUnit)))),
-      props.loading ? (index.h("sl-skeleton", { style: { width: "42%", margin: "0 16px", height: "12px" } })) : (index.h("div", { class: taskUnavailable ? "title" : "title black" }, props.cardTitle)),
-      props.loading ? (index.h("sl-skeleton", { style: { margin: "12px 16px", height: "12px" } })) : (index.h(Details, Object.assign({}, props))),
-      props.showProgressBar && props.loading ? (index.h("sl-skeleton", { style: { margin: "0 16px", height: "12px" } })) : (props.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
-      index.h("div", { class: sheet.classes.Footer }, props.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto", height: "12px" } })) : (index.h("div", { style: { display: "contents" } },
-        index.h("span", { class: "text" },
-          props.repeatable && (index.h("div", null,
-            index.h("span", { class: repetitions > 0
-                ? taskUnavailable
-                  ? "icon neutral"
-                  : "icon success"
-                : "icon" }, arrow_left_right$1),
-            index.h("span", { class: repetitions > 0
-                ? taskUnavailable
-                  ? "neutral"
-                  : "success"
-                : "" }, "Completed " + repetitions + " times"))),
-          props.showExpiry && !taskUnavailable && (index.h("span", null, "Ends " + dateEnd.toLocaleString(luxon.DateTime.DATE_FULL)))),
-        index.h("sl-button", { class: taskComplete || taskUnavailable ? "action disabled" : "action", type: "primary", size: "small", onClick: () => props.openNewTab
-            ? window.open(props.buttonLink)
-            : window.open(props.buttonLink, "_self"), disabled: taskComplete || taskUnavailable }, props.buttonText)))))));
+      taskUnavailable && (index.h("div", { class: sheet.classes.Expired }, taskEnded
+        ? "Ended " + dateEnd.toLocaleString(luxon.DateTime.DATE_MED)
+        : "Starts " + dateStart.toLocaleString(luxon.DateTime.DATE_MED))),
+      index.h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
+        index.h("div", { class: sheet.classes.Header }, props.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
+          showComplete && (index.h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
+          index.h("span", { class: taskUnavailable ? "value black" : "value black" }, props.rewardAmount),
+          index.h("span", { class: "text" }, props.rewardUnit)))),
+        props.loading ? (index.h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (index.h("div", { class: taskUnavailable ? "title black" : "title black" }, props.cardTitle)),
+        props.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (index.h(Details, Object.assign({}, props))),
+        props.showProgressBar && props.loading ? (index.h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (props.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
+        index.h("div", { class: sheet.classes.Footer }, props.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
+          index.h("span", { class: "text" },
+            props.repeatable && (index.h("div", null,
+              index.h("span", { class: repetitions > 0
+                  ? taskUnavailable
+                    ? "icon neutral"
+                    : "icon success"
+                  : "icon" }, arrow_left_right$1),
+              index.h("span", { class: repetitions > 0
+                  ? taskUnavailable
+                    ? "neutral"
+                    : "success"
+                  : "" }, "Completed " +
+                (props.finite
+                  ? Math.min(repetitions, props.finite)
+                  : repetitions) +
+                (props.finite ? "/" + props.finite : "") +
+                " times"))),
+            props.showExpiry && !taskUnavailable && (index.h("span", null, "Ends " + dateEnd.toLocaleString(luxon.DateTime.DATE_FULL)))),
+          index.h("sl-button", { class: taskUnavailable
+              ? "action neutral"
+              : taskComplete
+                ? "action disabled"
+                : "action", type: "primary", size: "small", onClick: () => props.openNewTab
+              ? window.open(props.buttonLink)
+              : window.open(props.buttonLink, "_parent"), disabled: taskComplete || taskUnavailable }, props.buttonText))))))));
 }
 function Details(props) {
   const style = {
@@ -21642,10 +21823,10 @@ function Details(props) {
         transition: "all var(--sl-transition-medium) ease",
         maxHeight: "300px",
         marginBottom: props.steps
-          ? "var(--sl-spacing-large)"
+          ? "var(--sl-spacing-x-large)"
           : props.showProgressBar
             ? "var(--sl-spacing-xx-large)"
-            : "var(--sl-spacing-large)",
+            : "var(--sl-spacing-x-large)",
       },
       "& .summary": {
         display: "block",
@@ -21674,6 +21855,32 @@ const scenarioTaskCard = "@author:derek\r\n@owner:\r\nFeature: Task Card\r\n\r\n
 
 const scenarioProgressBar = "@author:\r\n@owner:\r\nFeature: Task Card Progress Bar\r\n\r\n\tScenario Outline: Progress Bar\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> with <unit> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | unit | color |\r\n\t\t\t| -100     | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 0        | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 250      | 500  | ―――――――――●―――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1000     | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\tScenario Outline: Progress Bar Steps\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps from 1 to <goal>\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | color |\r\n\t\t\t| -1       | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 0        | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | 5    | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 7        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\r\n\r\n\tScenario Outline: Progress Bar Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd <icon3> is <color3> with <text3> displayed below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 1 | text 3 |\r\n\t\t\t| 250      | 500  | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 500      | 500  | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 750      | 500  | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 1000     | 500  | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 500    | 1500   |\r\n\t\t\t| 1250     | 500  | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 500    | 1500   |\r\n\r\n\tScenario Outline: Progress Bar Steps Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar |";
 
+const ResizerStylesheet = `
+
+:root{
+    --checker-color-1: #ffffff00;
+    --checker-color-2: #ffffff00;
+    --checker-size: 7px;
+    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
+}
+.resizer{
+    resize: horizontal;
+    border: 2px dashed gray;
+	margin: -2px;
+    padding: 12px;
+    height: fit-content;
+    overflow: hidden;
+}
+
+.resizer{
+    background-color: var(--checker-color-2);
+    background-image: var(--checker-gradient), var(--checker-gradient);
+    background-position: 0 0, var(--checker-size) var(--checker-size);
+    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
+}
+`;
+const Resizer = (_, children) => (index.h("div", { class: "resizer" }, children));
+
 const scenario$5 = scenarioTaskCard + scenarioProgressBar;
 const TaskCard_stories = {
   title: "Components/Task Card/",
@@ -21707,6 +21914,7 @@ const oneAction = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  finite: 0,
 };
 const coupleActions = {
   rewardAmount: 40,
@@ -21724,6 +21932,7 @@ const coupleActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  finite: 0,
 };
 const manyActions = {
   rewardAmount: 150,
@@ -21741,6 +21950,49 @@ const manyActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  finite: 0,
+};
+const TaskCard$1 = () => {
+  const expire = {
+    showExpiry: true,
+    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
+  };
+  const expireRepeat = { ...expire, repeatable: true };
+  return (index.h("div", { style: storyFrame },
+    index.h(Resizer, null,
+      index.h("h4", null, "Not Repeatable"),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 230 }))),
+    index.h(Resizer, null,
+      index.h("h4", null, "Repeatable"),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 2, repeatable: true })),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 7, repeatable: true })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true }))),
+    index.h(Resizer, null,
+      index.h("h4", null, "Complete"),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }))),
+    index.h(Resizer, null,
+      index.h("h4", null, "Unavailable"),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 3 }, expireRepeat)),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 250 }, expireRepeat)))));
 };
 const TaskCardNotRepeatable = () => {
   return (index.h("div", { style: storyFrame },
@@ -21800,10 +22052,51 @@ const TaskCardRepeatable = () => {
       index.h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
       index.h("h5", null))));
 };
+const TaskCardRepeatableFinite = () => {
+  return (index.h("div", { style: storyFrame },
+    index.h("div", { style: resizable },
+      index.h("h4", null, "One Action"),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0, repeatable: true, finite: 2 })),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1, repeatable: true, finite: 2 })),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 2, repeatable: true, finite: 2 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "A Couple Actions"),
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "Many Actions"),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 100, repeatable: true, finite: 2 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true, finite: 2 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true, finite: 2 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 950, repeatable: true, finite: 2 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true, finite: 2 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 1300, repeatable: true, finite: 3 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 1500, repeatable: true, finite: 3 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 3 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 4 })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 5 })),
+      index.h("h5", null))));
+};
 const TaskCardEndDate = () => {
   const expire = {
     showExpiry: true,
-    rewardDuration: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
+    rewardDuration: luxon.DateTime.now().minus({ days: 1 }).toISO() +
+      "/" +
+      luxon.DateTime.now().plus({ days: 1 }).toISO(),
   };
   const expireRepeat = { ...expire, repeatable: true };
   return (index.h("div", { style: storyFrame },
@@ -21860,10 +22153,60 @@ const TaskCardLoading = () => {
       " ",
       index.h("h5", null))));
 };
-const TaskCardUnavailable = () => {
+const TaskCardNotStarted = () => {
   const expire = {
     showExpiry: true,
-    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
+    rewardDuration: luxon.DateTime.now().plus({ days: 1 }).toISO() +
+      "/" +
+      luxon.DateTime.now().plus({ days: 2 }).toISO(),
+  };
+  const expireRepeat = { ...expire, repeatable: true };
+  return (index.h("div", { style: storyFrame },
+    index.h("div", { style: resizable },
+      index.h("h4", null, "One Action"),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "A Couple Actions"),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expireRepeat)),
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "Many Actions"),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expire)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
+      index.h("h5", null))));
+};
+const TaskCardEnded = () => {
+  const expire = {
+    showExpiry: true,
+    rewardDuration: luxon.DateTime.now().minus({ days: 2 }).toISO() +
+      "/" +
+      luxon.DateTime.now().minus({ days: 1 }).toISO(),
   };
   const expireRepeat = { ...expire, repeatable: true };
   return (index.h("div", { style: storyFrame },
@@ -21947,14 +22290,17 @@ const ProgressBarStepsRepeatable = () => {
     index.h(MatrixStory, { matrix: { progress: [1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
 };
 
-const TaskCard$1 = /*#__PURE__*/Object.freeze({
+const TaskCard$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': TaskCard_stories,
+  TaskCard: TaskCard$1,
   TaskCardNotRepeatable: TaskCardNotRepeatable,
   TaskCardRepeatable: TaskCardRepeatable,
+  TaskCardRepeatableFinite: TaskCardRepeatableFinite,
   TaskCardEndDate: TaskCardEndDate,
   TaskCardLoading: TaskCardLoading,
-  TaskCardUnavailable: TaskCardUnavailable,
+  TaskCardNotStarted: TaskCardNotStarted,
+  TaskCardEnded: TaskCardEnded,
   ProgressBar: ProgressBar$1,
   ProgressBarSteps: ProgressBarSteps,
   ProgressBarRepeatable: ProgressBarRepeatable,
@@ -25492,19 +25838,19 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const baseResponse = (data, selected = null) => ({
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false) => ({
   states: {
     content: {
       text: {
         notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
       },
     },
-    redeemStage: "chooseReward",
+    redeemStage: stage,
     amount: 0,
-    exchangeError: false,
-    loading: false,
-    selectedItem: selected,
-    selectedStep: null,
+    exchangeError: error,
+    loading: loading,
+    selectedItem: selectedItem,
+    selectedStep: selectedStep,
   },
   data: {
     exchangeList: data,
@@ -25521,7 +25867,7 @@ const baseResponse = (data, selected = null) => ({
 const baseReward$2 = {
   key: "",
   name: "",
-  description: "",
+  description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
   imageUrl: "",
   available: true,
   unavailableReason: null,
@@ -25556,8 +25902,8 @@ const selected = {
 const imageUrl = (props) => ({
   imageUrl: props,
 });
-const description = (props) => ({
-  description: props,
+const name = (props) => ({
+  name: props,
 });
 const fixedValue = (props) => ({
   prettySourceValue: props,
@@ -25572,54 +25918,54 @@ const variableValue = (min, max, text) => ({
 const data = [
   {
     ...baseReward$2,
-    ...description("Free swag with a promo code"),
-    ...imageUrl("https://i.imgur.com/Ds7M19I.png"),
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
   },
   {
     ...baseReward$2,
     ...selected,
-    ...description("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
     ...variableValue(20, 80, "SaaSquatch Points"),
   },
   {
     ...baseReward$2,
-    ...description("A very exclusive gift box"),
-    ...imageUrl("https://i.imgur.com/XuiJi4l.png"),
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
     ...fixedValue("30 SaaSquatch Points"),
   },
   {
     ...baseReward$2,
-    ...description("$50 Store credit"),
+    ...name("$50 Store credit"),
     ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
   {
     ...baseReward$2,
-    ...description("Variable amount of store credit"),
+    ...name("Variable amount of store credit"),
     ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
     ...variableValue(20, 100, "SaaSquatch Points"),
   },
   {
     ...baseReward$2,
     ...notEnoughPoints,
-    ...description("A very rare cactus"),
-    ...imageUrl("https://i.imgur.com/CvCdpXc.png"),
+    ...name("A very rare cactus"),
+    ...imageUrl("https://i.imgur.com/hhlF2Ey.png"),
     ...fixedValue("2000 SaaSquatch Points"),
   },
   {
     ...baseReward$2,
     ...usTax,
-    ...description("$1000 Store credit"),
-    ...imageUrl("https://i.imgur.com/I9FCh9Z.png"),
+    ...name("$1000 Store credit"),
+    ...imageUrl("https://i.imgur.com/y9HSls1.png"),
     ...fixedValue("2000 SaaSquatch Points"),
   },
   {
     ...baseReward$2,
     ...notEnoughPoints,
-    ...description("A holiday gift box"),
-    ...imageUrl("https://i.imgur.com/HBJS1WH.png"),
+    ...name("A holiday gift box"),
+    ...imageUrl("https://i.imgur.com/dWEdB3p.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
 ];
@@ -25627,142 +25973,3409 @@ const rewardExchange = {
   ...baseResponse(data),
 };
 const rewardExchangeSelected = {
-  ...baseResponse(data, {
+  ...baseResponse(data, "chooseReward", {
     ...baseReward$2,
     ...selected,
-    ...description("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
     ...variableValue(20, 80, "SaaSquatch Points"),
   }),
 };
-const test2 = {
-  states: {
-    content: {
-      text: {
-        buttonText: "Exchange Rewards",
-        ignored: true,
-      },
-    },
-    redeemStage: "chooseAmount",
-    amount: 0,
-    exchangeError: false,
-    loading: false,
-    selectedItem: {
-      key: "r4",
-      name: "Salmon Coins",
-      description: "Points for Salmon Coins",
-      imageUrl: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUWFRgWFRYYGRgZGh4cHBocHR4aHxwdGRwZHBwfHh4cIS4lHB4rHxoYJjgnKy8xNTU1GiQ7QD00Py40NTEBDAwMEA8QHhISHzQrJCs0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIAIABiQMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABAECAwUGBwj/xAA+EAABAwICBgYHBwQCAwAAAAABAAIRAyEEMQUSQVFhcQYTgZGhsQciMkJScvAUYoKSwdHhorLC8SMzFUNj/8QAGAEBAQEBAQAAAAAAAAAAAAAAAAECAwT/xAAfEQEBAQEBAQEAAwEBAAAAAAAAARECEiExE0FRYQP/2gAMAwEAAhEDEQA/APZkREBERAREQEREBERAREQEREBERAREQERY6jw0EkgACSTYADMk7AgvVjHgzBBixgzBXmfSjpqapNLDuLaeTqgs58Zhl/Vbx28BnA0Lj3UXNcx0G0tmxHwkW1tvLhks3qRZHryqtdonSjK7dZtnCzmzJaf1HFbFWXUERFQREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBFSVqdNafoYVoNaoAT7LBdzvlaLxxyG0oNlUqBoLnEAASSTAAFySTkF5H0z6WHEuNKiSKANx7JqkXl20MFoHfsAidKemVTFeo31KPwAgl0ZF7hY7IaLA39aBHNsIO0cv34eaCVSeBlcnblb/FqnYatxz3WLhw+FnHMrVMfx7/MjyCkMI5znx+Y7flCx1NajqNGaUdTIex2qRYRkRuj3h+y9D0Lp2nXETq1APWb5xv5ZjxXj9Ovt8dsdmXIHmVKw+OIg62rGWqQIINvWs1vZJWeZeVuV7gi5Xoj0j+0g03kGowSSMnNkCTYAOkjK17cOqXSXWBERUEREBERAREQEREBERAREQEREBERBRFjq1WtaXOcGtAkuJAAG8k2C5LS/TukyW0GGq74j6jO83PcAd6DslQFeI6Y6VYmvOvWcG/BS9RvIwZcODiV1vomonq69QWa57Wht82N1i6+ZIe0diD0JERAREQEREBERARFgxOJZTaX1HtY0ZucQAOZNkGdFxmkvSJg2SGa9Y5eo2G/mdEji2VzmO9JWIdalTp0xvcS93+IHcUHqyiYvH0qQmpUYwb3ua3+4rxTG9IsbV9vEVI3NPVjuZC1XUyST7RvfM85zQezYrptgGW68OO5jXP8AFojxWoxHpMw49ilVfxOowH+onwXmzcKdqudhrG0oOyr+k+qfYwzG/M9zvANatfX9ImOd7Ios5NJI/M4+S55lCQREFXvoaosJU0ScV0u0g+ZxL28GtYzxa2fFaKs173F73ue45uc4uceZcSStuyiI8+zmqfZNvDJNGlGGVww5W21BFh2eCubSMAxCmrjUCkruqK2v2dUNAxZTVazUdlJU7A6Rq0rs1J3vp06jvzPYXeKyCiQL5jzhUZhrXAngg2+H6c41lmmnx/42j+2FLZ6RcbtFA/gd+j1z4o8Fa2lJNoTTHV0/SVifeo0Ty1m+bipdL0nO9/DDm2p+hZ+q4p9A7B3rG7D7ldR6NR9JlA+1Qqj5Sx3m4KfR9IOCd7RqM+ZhP9msvKjQVr6B2Jo9oodLcC/LEsHzSz+8BbLDaRo1P+urTf8AK9rvIrwQUSrTSDtxummPohF4Dh8VXZ/11qrAPhe9o7gYUmp0kxzmln2mrB3EB35wNYd6uo9oxukqNETWqspg5a7mtnlJute3pbgSYGJp9pgd5svC6mHc5xcXFzjmXEknmTcqVo3Btc8Nq1RSZHt6jn8hqtuVLf8AFkfQVGs17Q5rg5pyIIIPIjNZFxnQgYXDsdTZjadUvdrBtqcWizC4mTtPALswVZUVREVBEWr0tpujh2k1HXiQwXc7k3ntMBBs1y+nOmFKjLaUVXjODDW/M7aeA3XIXHae6XVq8tE06RkBjbufwc7ad7R6oyOstA8SBrmBsYMvC7nclm0TdJ6Zq4l01Hl8GzR6rGn7rbxzu6+ajOpW9cwPhH6/RVGHdYcBJ7hYfVlewxlnvzPfkPBc63GsxNODkQBsi8cBGXYAvbui+jxQwtFgEHUDncXP9Z09pK8r6N4QV8XSY4Swv1nWMEMBeQTx1YjivbF1n4wIiKgiIgIoOkdJUaDdatUaxuzWMExsAzceAuuG016RjduFpz/9KgMfhYDPeRyQeh1KgaC5xAAuSTAA4k5LldJ9PsHSkNc6s7dTEt/OYaRyleZY/FVq/rYis525rnta0cmWaOwBR6VJvZs4q4mur0j6Q8U+RRYykN//AGO4GXANH5SuWxlWrWdr13ve7e8zHyjJo4CFIpU5dnEe7CzMpgkGO02gBTYIlHCNOWaq7CxnCmsLGky4H9O7MqSXMd7Jnz7Vf0a84Y7M1e3DAGTErOQcoVGAgXud6xeo1jC+iDsmLgHfCyNZa43LIAeCrqu4f6UvS4w06bRIBvtG76/VXhuYiwyWRtMzO+yv1Dv3qejEcuEScuSqy4BG0LK6mdpsVXqSs+lxHfRsdWATwVWstfwUjqztOfJWll4m5k5d6noxH1A4R5KoZsj+Fnbh4yt2BVFMzF8s7J6XGBzIyEo1ucgjmpXUcSqvpwJv5p6MRXU4KPZAsCeA4qUKMDWEmc8haMzKvFDinpMQxTtzWGphSQIMR4rZ9TxKtFDVMTmdt8k9JiA6lA9bZmVa2nrXGV4Wy6kn/SCieCejGt+z7xmqNw42dotmtmKBz3oaJ2Af7V0xrRQWB2GcTIIjzW2dhycx9cVUUjuWtRqeom8Kx1K4EEzt3dq2tXCuIgerfNXtoHIieJj9E1WndhQsuHxFWkJp1XsH3HOb4A3WxNI5kW7FjfhpvfMfUKWkS8J0xxzBPWB42B7GnxbB8Vs6HpHrCzsOxzvuuczwId5rROpDYIUX7MdbIRGe8/tmp7MbLSXS/F1zGv1TDbVpktJ5vnW7iBwWrNSZtebn6vzOfFVdRGcXG/gsRBDshzlX2YvNM5iBPvHyaNg4eG1YjTGwEnaTf67SFKaRffynyusVWmTcz2sJ7tdat2J/axur7zm8p1u5rLDvV9erAsCecADs/hVYHDIv7NRo8FHxTnfAT+L9LrEm1b+Oz9GGj9Z9XEOAloFNsTm71nk615jU/MV6UuX9HmC6vBMMQajnVD+Iw3+lrV1C7MiIiAuO9IHSKthWU20GEvqlw19XWDA3VyGRcS4RNrGxXYrnOk2lMTRNPqKTHtdOs5xIAgthoIyLpME2tkUHj+OOIc7rq7aznEj13tI5Aa1o3NFuCuwrdbWE6riLS3IjxFoyBXqjelDXtLK+FqesIcwalQXzBDi0kfhXKaVwNBjvUa4U3e44arqZ+66TLfEdsiejHLvwuIBa6wMga4aHsc0DIyQGk2sYNjvKtpawqOLWwwxbjAkwbiTPet7UoPp2JljvZeNvBw913gdig1KV5XK3LrUmzGLDTrtaTMmOU2/lS37ABbb/AAsOFoE1GQPeb5hSXsHblO1T18Xz9Ryxu5VwLTDzuj/L9JVXtUmizOMnF3c0GPM9y1OrSxjartiFiqAufVakUoP1hJEZrK6mSRBi97Z71cwZdir9d4WNXFdVXNEqx0ERvVW2Fgp6XyuLFY5h1gda0XEZ9queyYuREG31krnH+fruU9LimomoMz2LIFR0C5OXYI4p6MYxTOtMjVjLirnTcNF4tOXarmNMkmI2b+9Zm7Pr6/hPRjBTa7Ii+/YVke0xbPYs4CAJ6MYg3KyvaxXGYnM7BvVackXEHd2/68U9GMb6YIIOX6K3qwIHYJ+tyyUmOvr6udonLjO1XagsSMtvZCejGCjh2tsNu03klZQxYsSx9tRwF7yFlkNgE3yE7SrOk8mp9fXasLcOQ4nXJnJuwfWaz6xmIsRnbPkriP3VnR5Y9S/P/StbB+uav2fXFY2MDRAgBb1PK5zARBEqxrCTIJABiIF/4V7XAHNXdYO1X6mLKtEOBaQSCLqw4Yauq31Rsjv2rKao+vFKeHcSS1r3TsDSc+Q4KWUYxTsNvNW1mgA2mPFTv/H4g5Uan5CPNYq2isRBmg8j5Z8FPPRsatzgXECLfV9ywOpif45fXapr6DwdUtLTuIIPcVb1WrcxuG4fynMpsQyyPLb+gPkotRzQbhp5kDwICmVXjeQOYjucIBUWq8jcR94FvcW2K758xz36xlrfgj8MjwJUSs1v3B4f3BSw5o90s4tgjvb+yxYydWQ6RxA8wYWZ+rXqfo9x/WYNjSQTSJpmDsEFv9JA7CuqXlPotx5biKlLJr6etH3mERH4XOmNwXqy6siIiArHNBEG4KvRBp8XoNjrsJpncAHM7WnIfKWrVVKGKpWcwPZvpme9jr90rrEQcBUbQMyzVM3nWaAeAB1QeS1dbRjM2vjg6/iP2XpOJwTH+00ExEizo5i8cFrH9Gqcy2AeLWu8gFiytS44puHYy4cHOi0ZDZKgVMPORlegO0PUbZmpHzOb4AR4qK/RNfiB90yfF58li87+rOscTTwT5HqnmRAHG+alDDRyFu/+JK6N2BLTdpHF0yVKo4VgF4KvM35C2OKqtDZLnBvMxMhRnYpnuBzvlB8yt5pvo/TZrVWAu2lusZ7Jz5LRMqUzsaOcHzlZ65y/VnSprH4I+ZzR5lOsd8LOx7VIAaBIcR2D9WfqrqYJMes7dZpn8oXOyNzWClUJIBaR4/QUkMU+ngY4k5/sPFX/AGXZ9bFm81djWOaRECZsrw1T/syDDeaxjSG1nmq9XkpzMMq9QfBXE1DDFka3fkpXUHcqmgdmcJhqKykGiGgDkq6ql9QqUsKAIE773vxKmLqMGqrWKaMOrm4fbClVE1FaaUrYjDqvUKfVa80bz3KvUeS2LcNfKyzNw4GasqfGpOFJtcRe23f2LL9iO7gtoQR7LHu+Vrj5BafFaRfJaPVjOxkcxs7V2541z66g/CATrEfsoVUMBzJ2WvdYMRUnN2tO0u1e45FYX1CPasD8Q1f62+qe0Ld5iemdzm7bc7HslZcO9jXAlrXfdfrDuDSCe2QorfxAb7Fve2W94UzDwLWjgBHhY9wUsw/XUaG0i1zmsZh2NnMtgQNp9n9V1C0fR3AajNciC4WERDc9m+3gt4u/O59crm/FURFpEfE4Zjxqva1w3ET3blz2keh9N96bi0/C712nhJ9bvJ5LqUQeTaX6P1qMl7SGj32+s3tOwcHRwXPPBbmNXc5t2nmNy95IXM6W6H0Ksup/8Tz8Ilp5sy7oWbB5WwbQPxM/Vv8AEJUo6wkAO4tMH9j2Qttpbo5Xw51ns9Uf+xhJb2mJbycAOK1vWA3zO8eq79ncslj7rSnRrGNw+Mo1HEta18O1rQ14LHE2yAdO3Je7r54xFyYMjcQAe79oXsvQfSn2jCUy6demOrfOZLAIPa3VPMncuusujREQEREBERAREQEREFpaCIN1FqaPpu92OVvJTEQaitoVpye4c4P7LWV+i0/A7iRB7wupRZvMqy2OHf0OvIZB3tcP8lJo6EcwWYRvPtE9sldeiniL6rlRgnDNju4qx2F4fWxdakJeIeq5A0An2ZdaWDcO5WdQz4W9wWP4v+r7rlxhQs1LBt2roDhGfC3uT7Iz4fNanGJ6rmK1WgDAlxytsO6+SjPxLB7rwOQPkV02J0PRqTrNgxGsLOHbt5GQua0hoavSksHWM+7JcObMxzaT8oTrn5+Lz1/qjcVSPvgfN6v91ipjKQNxF1znXcOBvEcJH6iVJ0bpHq3TAc33mOEC+4gEA5XcvPLNyt38+N6KKuZQnIE8gt9hyxzQ5oaQdwH1KkQuv8Mv9se655mCecmHtt5rMNFvPwt8fJbtFqf+PKe61bNED3nk8gB5ypFLR7GmYk/eMxyGSmItTjmfkS21VRcXgqdQRUY10ZEi45HMHkpSLaOS0l0Qa6TRcWnc4m/4oJI+YOXLYvRVagfWa5g+JsBp5gkscTwIPBeqqhErN5laleTUmkH2Rzb/AMZ7Wmx71v8AQOB6yqJ9lvrOnbGw75MeK6itoOg6/VgH7stHcLHuUjBYFlIEMETcnMlSc1fXxMREW2BERAREQEREBc3pbodha8nV6t596nDZ5tjVPOJ4rpEQeU6U9H+Ibem5lYbB7Du5xj+rsW89HuiMThzVFZmoxwbAJBlwJuIOUE35dncopn1dVREVQREQEREBERAREQEREBERAREQEREBERAREQEREGuxuiqNW72An4hLXfmbBjhktFi+h+2nV5B4y/EyI7l1qLN5l/VlsaDo9oytQLmvc0sI2OJOtaDBYItO07Fv0RWTJhbqqIiqCIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIg//Z",
-      available: true,
-      unavailableReason: null,
-      unavailableReasonCode: null,
-      ruleType: "VARIABLE_CREDIT_REWARD",
-      sourceUnit: "POINT",
-      sourceValue: null,
-      prettySourceValue: null,
-      sourceMinValue: 1,
-      prettySourceMinValue: "1 Point",
-      sourceMaxValue: 100,
-      prettySourceMaxValue: "100 Points",
-      destinationMinValue: 1,
-      prettyDestinationMinValue: "1 Salmon Coin",
-      destinationMaxValue: 100,
-      prettyDestinationMaxValue: "100 Salmons",
-      globalRewardKey: null,
-      destinationUnit: "TESTUNIT",
-      steps: [
-        {
-          sourceValue: 1,
-          prettySourceValue: "1 Point",
-          destinationValue: 1,
-          prettyDestinationValue: "1 Salmon Coin",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 2,
-          prettySourceValue: "2 Points",
-          destinationValue: 2,
-          prettyDestinationValue: "2 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 3,
-          prettySourceValue: "3 Points",
-          destinationValue: 3,
-          prettyDestinationValue: "3 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 4,
-          prettySourceValue: "4 Points",
-          destinationValue: 4,
-          prettyDestinationValue: "4 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 5,
-          prettySourceValue: "5 Points",
-          destinationValue: 5,
-          prettyDestinationValue: "5 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-      ],
-    },
-    selectedStep: null,
-  },
-  data: {
-    exchangeList: null,
-  },
-  callbacks: {
-    exchangeReward: null,
-    resetState: null,
-    setStage: null,
-    setExchangeState: null,
-    refs: {
-      drawerRef: {},
-    },
-  },
-  refs: null,
+const baseStep = (dst, dstUnit, src, srcUnit, available = true) => ({
+  destinationValue: dst,
+  prettyDestinationValue: dstUnit + dst,
+  sourceValue: src,
+  prettySourceValue: src + " " + srcUnit,
+  available: available,
+  unavailableReasonCode: null,
+  unavailableReason: "",
+});
+const chooseAmountVariable = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward$2,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "SaaSquatch Points"),
+    steps: [
+      baseStep(20, "$", 40, "SaaSquatch Points"),
+      baseStep(30, "$", 60, "SaaSquatch Points"),
+      baseStep(40, "$", 80, "SaaSquatch Points"),
+      baseStep(50, "$", 100, "SaaSquatch Points"),
+      baseStep(60, "$", 120, "SaaSquatch Points"),
+    ],
+  }),
+};
+const chooseAmountFixed = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward$2,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+const confirmFixed = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward$2,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  }),
+};
+const confirmVariable = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward$2,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "SaaSquatch Points"),
+  }, baseStep(20, "$", 40, "SaaSquatch Points")),
+};
+const error$1 = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward$2,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "SaaSquatch Points"),
+  }, baseStep(20, "$", 40, "SaaSquatch Points"), true),
+};
+const success = {
+  ...baseResponse(data, "success", {
+    ...baseReward$2,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  }),
+};
+const loading = {
+  ...baseResponse(null, "chooseReward", null, null, false, true),
 };
 
-const RewardExchangeList_stories = {
-  title: "Components/Reward Exchange List",
-};
-const resizable$1 = {
-  width: "683px",
-  minWidth: "260px",
-  resize: "horizontal",
-  height: "fit-content",
-  overflow: "hidden",
-};
-const rewardExchange$1 = () => {
-  return (index.h("div", { style: resizable$1 },
-    index.h(RewardExchangeView, Object.assign({}, rewardExchange))));
-};
-const rewardExchangeSelected$1 = () => {
-  return (index.h("div", { style: resizable$1 },
-    index.h(RewardExchangeView, Object.assign({}, rewardExchangeSelected))));
-};
-const Default2 = () => {
-  return (index.h("div", { style: { ...resizable$1, height: "700px" } },
-    index.h(RewardExchangeView, Object.assign({}, test2))));
-};
+const RewardExchangeList_stories = {
+  title: "Components/Reward Exchange List",
+};
+const StoryBase = (props) => () => {
+  return index.h(Resizer, null,
+    index.h(RewardExchangeView, Object.assign({}, props)));
+};
+const ChooseReward = StoryBase(rewardExchange);
+const ChooseRewardSelected = StoryBase(rewardExchangeSelected);
+const ChooseAmount = StoryBase(chooseAmountFixed);
+const ChooseAmountVariable = StoryBase(chooseAmountVariable);
+const Confirm = StoryBase(confirmFixed);
+const ConfirmVariable = StoryBase(confirmVariable);
+const Error$3 = StoryBase(error$1);
+const Success$2 = StoryBase(success);
+const Loading$3 = StoryBase(loading);
+
+const RewardExchangeList = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': RewardExchangeList_stories,
+  ChooseReward: ChooseReward,
+  ChooseRewardSelected: ChooseRewardSelected,
+  ChooseAmount: ChooseAmount,
+  ChooseAmountVariable: ChooseAmountVariable,
+  Confirm: Confirm,
+  ConfirmVariable: ConfirmVariable,
+  Error: Error$3,
+  Success: Success$2,
+  Loading: Loading$3
+});
+
+var chroma = _extends.createCommonjsModule(function (module, exports) {
+/**
+ * chroma.js - JavaScript library for color conversions
+ *
+ * Copyright (c) 2011-2019, Gregor Aisch
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ * list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ * this list of conditions and the following disclaimer in the documentation
+ * and/or other materials provided with the distribution.
+ *
+ * 3. The name Gregor Aisch may not be used to endorse or promote products
+ * derived from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL GREGOR AISCH OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
+ * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+ * BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+ * EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * -------------------------------------------------------
+ *
+ * chroma.js includes colors from colorbrewer2.org, which are released under
+ * the following license:
+ *
+ * Copyright (c) 2002 Cynthia Brewer, Mark Harrower,
+ * and The Pennsylvania State University.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the License for the specific
+ * language governing permissions and limitations under the License.
+ *
+ * ------------------------------------------------------
+ *
+ * Named colors are taken from X11 Color Names.
+ * http://www.w3.org/TR/css3-color/#svg-color
+ *
+ * @preserve
+ */
+
+(function (global, factory) {
+     module.exports = factory() ;
+}(_extends.commonjsGlobal, (function () {
+    var limit = function (x, min, max) {
+        if ( min === void 0 ) min=0;
+        if ( max === void 0 ) max=1;
+
+        return x < min ? min : x > max ? max : x;
+    };
+
+    var clip_rgb = function (rgb) {
+        rgb._clipped = false;
+        rgb._unclipped = rgb.slice(0);
+        for (var i=0; i<=3; i++) {
+            if (i < 3) {
+                if (rgb[i] < 0 || rgb[i] > 255) { rgb._clipped = true; }
+                rgb[i] = limit(rgb[i], 0, 255);
+            } else if (i === 3) {
+                rgb[i] = limit(rgb[i], 0, 1);
+            }
+        }
+        return rgb;
+    };
+
+    // ported from jQuery's $.type
+    var classToType = {};
+    for (var i = 0, list = ['Boolean', 'Number', 'String', 'Function', 'Array', 'Date', 'RegExp', 'Undefined', 'Null']; i < list.length; i += 1) {
+        var name = list[i];
+
+        classToType[("[object " + name + "]")] = name.toLowerCase();
+    }
+    var type = function(obj) {
+        return classToType[Object.prototype.toString.call(obj)] || "object";
+    };
+
+    var unpack = function (args, keyOrder) {
+        if ( keyOrder === void 0 ) keyOrder=null;
+
+    	// if called with more than 3 arguments, we return the arguments
+        if (args.length >= 3) { return Array.prototype.slice.call(args); }
+        // with less than 3 args we check if first arg is object
+        // and use the keyOrder string to extract and sort properties
+    	if (type(args[0]) == 'object' && keyOrder) {
+    		return keyOrder.split('')
+    			.filter(function (k) { return args[0][k] !== undefined; })
+    			.map(function (k) { return args[0][k]; });
+    	}
+    	// otherwise we just return the first argument
+    	// (which we suppose is an array of args)
+        return args[0];
+    };
+
+    var last = function (args) {
+        if (args.length < 2) { return null; }
+        var l = args.length-1;
+        if (type(args[l]) == 'string') { return args[l].toLowerCase(); }
+        return null;
+    };
+
+    var PI = Math.PI;
+
+    var utils = {
+    	clip_rgb: clip_rgb,
+    	limit: limit,
+    	type: type,
+    	unpack: unpack,
+    	last: last,
+    	PI: PI,
+    	TWOPI: PI*2,
+    	PITHIRD: PI/3,
+    	DEG2RAD: PI / 180,
+    	RAD2DEG: 180 / PI
+    };
+
+    var input = {
+    	format: {},
+    	autodetect: []
+    };
+
+    var last$1 = utils.last;
+    var clip_rgb$1 = utils.clip_rgb;
+    var type$1 = utils.type;
+
+
+    var Color = function Color() {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var me = this;
+        if (type$1(args[0]) === 'object' &&
+            args[0].constructor &&
+            args[0].constructor === this.constructor) {
+            // the argument is already a Color instance
+            return args[0];
+        }
+
+        // last argument could be the mode
+        var mode = last$1(args);
+        var autodetect = false;
+
+        if (!mode) {
+            autodetect = true;
+            if (!input.sorted) {
+                input.autodetect = input.autodetect.sort(function (a,b) { return b.p - a.p; });
+                input.sorted = true;
+            }
+            // auto-detect format
+            for (var i = 0, list = input.autodetect; i < list.length; i += 1) {
+                var chk = list[i];
+
+                mode = chk.test.apply(chk, args);
+                if (mode) { break; }
+            }
+        }
+
+        if (input.format[mode]) {
+            var rgb = input.format[mode].apply(null, autodetect ? args : args.slice(0,-1));
+            me._rgb = clip_rgb$1(rgb);
+        } else {
+            throw new Error('unknown format: '+args);
+        }
+
+        // add alpha channel
+        if (me._rgb.length === 3) { me._rgb.push(1); }
+    };
+
+    Color.prototype.toString = function toString () {
+        if (type$1(this.hex) == 'function') { return this.hex(); }
+        return ("[" + (this._rgb.join(',')) + "]");
+    };
+
+    var Color_1 = Color;
+
+    var chroma = function () {
+    	var args = [], len = arguments.length;
+    	while ( len-- ) args[ len ] = arguments[ len ];
+
+    	return new (Function.prototype.bind.apply( chroma.Color, [ null ].concat( args) ));
+    };
+
+    chroma.Color = Color_1;
+    chroma.version = '2.1.2';
+
+    var chroma_1 = chroma;
+
+    var unpack$1 = utils.unpack;
+    var max = Math.max;
+
+    var rgb2cmyk = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var ref = unpack$1(args, 'rgb');
+        var r = ref[0];
+        var g = ref[1];
+        var b = ref[2];
+        r = r / 255;
+        g = g / 255;
+        b = b / 255;
+        var k = 1 - max(r,max(g,b));
+        var f = k < 1 ? 1 / (1-k) : 0;
+        var c = (1-r-k) * f;
+        var m = (1-g-k) * f;
+        var y = (1-b-k) * f;
+        return [c,m,y,k];
+    };
+
+    var rgb2cmyk_1 = rgb2cmyk;
+
+    var unpack$2 = utils.unpack;
+
+    var cmyk2rgb = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        args = unpack$2(args, 'cmyk');
+        var c = args[0];
+        var m = args[1];
+        var y = args[2];
+        var k = args[3];
+        var alpha = args.length > 4 ? args[4] : 1;
+        if (k === 1) { return [0,0,0,alpha]; }
+        return [
+            c >= 1 ? 0 : 255 * (1-c) * (1-k), // r
+            m >= 1 ? 0 : 255 * (1-m) * (1-k), // g
+            y >= 1 ? 0 : 255 * (1-y) * (1-k), // b
+            alpha
+        ];
+    };
+
+    var cmyk2rgb_1 = cmyk2rgb;
+
+    var unpack$3 = utils.unpack;
+    var type$2 = utils.type;
+
+
+
+    Color_1.prototype.cmyk = function() {
+        return rgb2cmyk_1(this._rgb);
+    };
+
+    chroma_1.cmyk = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['cmyk']) ));
+    };
+
+    input.format.cmyk = cmyk2rgb_1;
+
+    input.autodetect.push({
+        p: 2,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            args = unpack$3(args, 'cmyk');
+            if (type$2(args) === 'array' && args.length === 4) {
+                return 'cmyk';
+            }
+        }
+    });
+
+    var unpack$4 = utils.unpack;
+    var last$2 = utils.last;
+    var rnd = function (a) { return Math.round(a*100)/100; };
+
+    /*
+     * supported arguments:
+     * - hsl2css(h,s,l)
+     * - hsl2css(h,s,l,a)
+     * - hsl2css([h,s,l], mode)
+     * - hsl2css([h,s,l,a], mode)
+     * - hsl2css({h,s,l,a}, mode)
+     */
+    var hsl2css = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var hsla = unpack$4(args, 'hsla');
+        var mode = last$2(args) || 'lsa';
+        hsla[0] = rnd(hsla[0] || 0);
+        hsla[1] = rnd(hsla[1]*100) + '%';
+        hsla[2] = rnd(hsla[2]*100) + '%';
+        if (mode === 'hsla' || (hsla.length > 3 && hsla[3]<1)) {
+            hsla[3] = hsla.length > 3 ? hsla[3] : 1;
+            mode = 'hsla';
+        } else {
+            hsla.length = 3;
+        }
+        return (mode + "(" + (hsla.join(',')) + ")");
+    };
+
+    var hsl2css_1 = hsl2css;
+
+    var unpack$5 = utils.unpack;
+
+    /*
+     * supported arguments:
+     * - rgb2hsl(r,g,b)
+     * - rgb2hsl(r,g,b,a)
+     * - rgb2hsl([r,g,b])
+     * - rgb2hsl([r,g,b,a])
+     * - rgb2hsl({r,g,b,a})
+     */
+    var rgb2hsl = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        args = unpack$5(args, 'rgba');
+        var r = args[0];
+        var g = args[1];
+        var b = args[2];
+
+        r /= 255;
+        g /= 255;
+        b /= 255;
+
+        var min = Math.min(r, g, b);
+        var max = Math.max(r, g, b);
+
+        var l = (max + min) / 2;
+        var s, h;
+
+        if (max === min){
+            s = 0;
+            h = Number.NaN;
+        } else {
+            s = l < 0.5 ? (max - min) / (max + min) : (max - min) / (2 - max - min);
+        }
+
+        if (r == max) { h = (g - b) / (max - min); }
+        else if (g == max) { h = 2 + (b - r) / (max - min); }
+        else if (b == max) { h = 4 + (r - g) / (max - min); }
+
+        h *= 60;
+        if (h < 0) { h += 360; }
+        if (args.length>3 && args[3]!==undefined) { return [h,s,l,args[3]]; }
+        return [h,s,l];
+    };
+
+    var rgb2hsl_1 = rgb2hsl;
+
+    var unpack$6 = utils.unpack;
+    var last$3 = utils.last;
+
+
+    var round = Math.round;
+
+    /*
+     * supported arguments:
+     * - rgb2css(r,g,b)
+     * - rgb2css(r,g,b,a)
+     * - rgb2css([r,g,b], mode)
+     * - rgb2css([r,g,b,a], mode)
+     * - rgb2css({r,g,b,a}, mode)
+     */
+    var rgb2css = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var rgba = unpack$6(args, 'rgba');
+        var mode = last$3(args) || 'rgb';
+        if (mode.substr(0,3) == 'hsl') {
+            return hsl2css_1(rgb2hsl_1(rgba), mode);
+        }
+        rgba[0] = round(rgba[0]);
+        rgba[1] = round(rgba[1]);
+        rgba[2] = round(rgba[2]);
+        if (mode === 'rgba' || (rgba.length > 3 && rgba[3]<1)) {
+            rgba[3] = rgba.length > 3 ? rgba[3] : 1;
+            mode = 'rgba';
+        }
+        return (mode + "(" + (rgba.slice(0,mode==='rgb'?3:4).join(',')) + ")");
+    };
+
+    var rgb2css_1 = rgb2css;
+
+    var unpack$7 = utils.unpack;
+    var round$1 = Math.round;
+
+    var hsl2rgb = function () {
+        var assign;
+
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+        args = unpack$7(args, 'hsl');
+        var h = args[0];
+        var s = args[1];
+        var l = args[2];
+        var r,g,b;
+        if (s === 0) {
+            r = g = b = l*255;
+        } else {
+            var t3 = [0,0,0];
+            var c = [0,0,0];
+            var t2 = l < 0.5 ? l * (1+s) : l+s-l*s;
+            var t1 = 2 * l - t2;
+            var h_ = h / 360;
+            t3[0] = h_ + 1/3;
+            t3[1] = h_;
+            t3[2] = h_ - 1/3;
+            for (var i=0; i<3; i++) {
+                if (t3[i] < 0) { t3[i] += 1; }
+                if (t3[i] > 1) { t3[i] -= 1; }
+                if (6 * t3[i] < 1)
+                    { c[i] = t1 + (t2 - t1) * 6 * t3[i]; }
+                else if (2 * t3[i] < 1)
+                    { c[i] = t2; }
+                else if (3 * t3[i] < 2)
+                    { c[i] = t1 + (t2 - t1) * ((2 / 3) - t3[i]) * 6; }
+                else
+                    { c[i] = t1; }
+            }
+            (assign = [round$1(c[0]*255),round$1(c[1]*255),round$1(c[2]*255)], r = assign[0], g = assign[1], b = assign[2]);
+        }
+        if (args.length > 3) {
+            // keep alpha channel
+            return [r,g,b,args[3]];
+        }
+        return [r,g,b,1];
+    };
+
+    var hsl2rgb_1 = hsl2rgb;
+
+    var RE_RGB = /^rgb\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*\)$/;
+    var RE_RGBA = /^rgba\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*,\s*([01]|[01]?\.\d+)\)$/;
+    var RE_RGB_PCT = /^rgb\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;
+    var RE_RGBA_PCT = /^rgba\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;
+    var RE_HSL = /^hsl\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;
+    var RE_HSLA = /^hsla\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;
+
+    var round$2 = Math.round;
+
+    var css2rgb = function (css) {
+        css = css.toLowerCase().trim();
+        var m;
+
+        if (input.format.named) {
+            try {
+                return input.format.named(css);
+            } catch (e) {
+                // eslint-disable-next-line
+            }
+        }
+
+        // rgb(250,20,0)
+        if ((m = css.match(RE_RGB))) {
+            var rgb = m.slice(1,4);
+            for (var i=0; i<3; i++) {
+                rgb[i] = +rgb[i];
+            }
+            rgb[3] = 1;  // default alpha
+            return rgb;
+        }
+
+        // rgba(250,20,0,0.4)
+        if ((m = css.match(RE_RGBA))) {
+            var rgb$1 = m.slice(1,5);
+            for (var i$1=0; i$1<4; i$1++) {
+                rgb$1[i$1] = +rgb$1[i$1];
+            }
+            return rgb$1;
+        }
+
+        // rgb(100%,0%,0%)
+        if ((m = css.match(RE_RGB_PCT))) {
+            var rgb$2 = m.slice(1,4);
+            for (var i$2=0; i$2<3; i$2++) {
+                rgb$2[i$2] = round$2(rgb$2[i$2] * 2.55);
+            }
+            rgb$2[3] = 1;  // default alpha
+            return rgb$2;
+        }
+
+        // rgba(100%,0%,0%,0.4)
+        if ((m = css.match(RE_RGBA_PCT))) {
+            var rgb$3 = m.slice(1,5);
+            for (var i$3=0; i$3<3; i$3++) {
+                rgb$3[i$3] = round$2(rgb$3[i$3] * 2.55);
+            }
+            rgb$3[3] = +rgb$3[3];
+            return rgb$3;
+        }
+
+        // hsl(0,100%,50%)
+        if ((m = css.match(RE_HSL))) {
+            var hsl = m.slice(1,4);
+            hsl[1] *= 0.01;
+            hsl[2] *= 0.01;
+            var rgb$4 = hsl2rgb_1(hsl);
+            rgb$4[3] = 1;
+            return rgb$4;
+        }
+
+        // hsla(0,100%,50%,0.5)
+        if ((m = css.match(RE_HSLA))) {
+            var hsl$1 = m.slice(1,4);
+            hsl$1[1] *= 0.01;
+            hsl$1[2] *= 0.01;
+            var rgb$5 = hsl2rgb_1(hsl$1);
+            rgb$5[3] = +m[4];  // default alpha = 1
+            return rgb$5;
+        }
+    };
+
+    css2rgb.test = function (s) {
+        return RE_RGB.test(s) ||
+            RE_RGBA.test(s) ||
+            RE_RGB_PCT.test(s) ||
+            RE_RGBA_PCT.test(s) ||
+            RE_HSL.test(s) ||
+            RE_HSLA.test(s);
+    };
+
+    var css2rgb_1 = css2rgb;
+
+    var type$3 = utils.type;
+
+
+
+
+    Color_1.prototype.css = function(mode) {
+        return rgb2css_1(this._rgb, mode);
+    };
+
+    chroma_1.css = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['css']) ));
+    };
+
+    input.format.css = css2rgb_1;
+
+    input.autodetect.push({
+        p: 5,
+        test: function (h) {
+            var rest = [], len = arguments.length - 1;
+            while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+            if (!rest.length && type$3(h) === 'string' && css2rgb_1.test(h)) {
+                return 'css';
+            }
+        }
+    });
+
+    var unpack$8 = utils.unpack;
+
+    input.format.gl = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var rgb = unpack$8(args, 'rgba');
+        rgb[0] *= 255;
+        rgb[1] *= 255;
+        rgb[2] *= 255;
+        return rgb;
+    };
+
+    chroma_1.gl = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['gl']) ));
+    };
+
+    Color_1.prototype.gl = function() {
+        var rgb = this._rgb;
+        return [rgb[0]/255, rgb[1]/255, rgb[2]/255, rgb[3]];
+    };
+
+    var unpack$9 = utils.unpack;
+
+    var rgb2hcg = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var ref = unpack$9(args, 'rgb');
+        var r = ref[0];
+        var g = ref[1];
+        var b = ref[2];
+        var min = Math.min(r, g, b);
+        var max = Math.max(r, g, b);
+        var delta = max - min;
+        var c = delta * 100 / 255;
+        var _g = min / (255 - delta) * 100;
+        var h;
+        if (delta === 0) {
+            h = Number.NaN;
+        } else {
+            if (r === max) { h = (g - b) / delta; }
+            if (g === max) { h = 2+(b - r) / delta; }
+            if (b === max) { h = 4+(r - g) / delta; }
+            h *= 60;
+            if (h < 0) { h += 360; }
+        }
+        return [h, c, _g];
+    };
+
+    var rgb2hcg_1 = rgb2hcg;
+
+    var unpack$a = utils.unpack;
+    var floor = Math.floor;
+
+    /*
+     * this is basically just HSV with some minor tweaks
+     *
+     * hue.. [0..360]
+     * chroma .. [0..1]
+     * grayness .. [0..1]
+     */
+
+    var hcg2rgb = function () {
+        var assign, assign$1, assign$2, assign$3, assign$4, assign$5;
+
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+        args = unpack$a(args, 'hcg');
+        var h = args[0];
+        var c = args[1];
+        var _g = args[2];
+        var r,g,b;
+        _g = _g * 255;
+        var _c = c * 255;
+        if (c === 0) {
+            r = g = b = _g;
+        } else {
+            if (h === 360) { h = 0; }
+            if (h > 360) { h -= 360; }
+            if (h < 0) { h += 360; }
+            h /= 60;
+            var i = floor(h);
+            var f = h - i;
+            var p = _g * (1 - c);
+            var q = p + _c * (1 - f);
+            var t = p + _c * f;
+            var v = p + _c;
+            switch (i) {
+                case 0: (assign = [v, t, p], r = assign[0], g = assign[1], b = assign[2]); break
+                case 1: (assign$1 = [q, v, p], r = assign$1[0], g = assign$1[1], b = assign$1[2]); break
+                case 2: (assign$2 = [p, v, t], r = assign$2[0], g = assign$2[1], b = assign$2[2]); break
+                case 3: (assign$3 = [p, q, v], r = assign$3[0], g = assign$3[1], b = assign$3[2]); break
+                case 4: (assign$4 = [t, p, v], r = assign$4[0], g = assign$4[1], b = assign$4[2]); break
+                case 5: (assign$5 = [v, p, q], r = assign$5[0], g = assign$5[1], b = assign$5[2]); break
+            }
+        }
+        return [r, g, b, args.length > 3 ? args[3] : 1];
+    };
+
+    var hcg2rgb_1 = hcg2rgb;
+
+    var unpack$b = utils.unpack;
+    var type$4 = utils.type;
+
+
+
+
+
+
+    Color_1.prototype.hcg = function() {
+        return rgb2hcg_1(this._rgb);
+    };
+
+    chroma_1.hcg = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['hcg']) ));
+    };
+
+    input.format.hcg = hcg2rgb_1;
+
+    input.autodetect.push({
+        p: 1,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            args = unpack$b(args, 'hcg');
+            if (type$4(args) === 'array' && args.length === 3) {
+                return 'hcg';
+            }
+        }
+    });
+
+    var unpack$c = utils.unpack;
+    var last$4 = utils.last;
+    var round$3 = Math.round;
+
+    var rgb2hex = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var ref = unpack$c(args, 'rgba');
+        var r = ref[0];
+        var g = ref[1];
+        var b = ref[2];
+        var a = ref[3];
+        var mode = last$4(args) || 'auto';
+        if (a === undefined) { a = 1; }
+        if (mode === 'auto') {
+            mode = a < 1 ? 'rgba' : 'rgb';
+        }
+        r = round$3(r);
+        g = round$3(g);
+        b = round$3(b);
+        var u = r << 16 | g << 8 | b;
+        var str = "000000" + u.toString(16); //#.toUpperCase();
+        str = str.substr(str.length - 6);
+        var hxa = '0' + round$3(a * 255).toString(16);
+        hxa = hxa.substr(hxa.length - 2);
+        switch (mode.toLowerCase()) {
+            case 'rgba': return ("#" + str + hxa);
+            case 'argb': return ("#" + hxa + str);
+            default: return ("#" + str);
+        }
+    };
+
+    var rgb2hex_1 = rgb2hex;
+
+    var RE_HEX = /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    var RE_HEXA = /^#?([A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/;
+
+    var hex2rgb = function (hex) {
+        if (hex.match(RE_HEX)) {
+            // remove optional leading #
+            if (hex.length === 4 || hex.length === 7) {
+                hex = hex.substr(1);
+            }
+            // expand short-notation to full six-digit
+            if (hex.length === 3) {
+                hex = hex.split('');
+                hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+            }
+            var u = parseInt(hex, 16);
+            var r = u >> 16;
+            var g = u >> 8 & 0xFF;
+            var b = u & 0xFF;
+            return [r,g,b,1];
+        }
+
+        // match rgba hex format, eg #FF000077
+        if (hex.match(RE_HEXA)) {
+            if (hex.length === 5 || hex.length === 9) {
+                // remove optional leading #
+                hex = hex.substr(1);
+            }
+            // expand short-notation to full eight-digit
+            if (hex.length === 4) {
+                hex = hex.split('');
+                hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]+hex[3]+hex[3];
+            }
+            var u$1 = parseInt(hex, 16);
+            var r$1 = u$1 >> 24 & 0xFF;
+            var g$1 = u$1 >> 16 & 0xFF;
+            var b$1 = u$1 >> 8 & 0xFF;
+            var a = Math.round((u$1 & 0xFF) / 0xFF * 100) / 100;
+            return [r$1,g$1,b$1,a];
+        }
+
+        // we used to check for css colors here
+        // if _input.css? and rgb = _input.css hex
+        //     return rgb
+
+        throw new Error(("unknown hex color: " + hex));
+    };
+
+    var hex2rgb_1 = hex2rgb;
+
+    var type$5 = utils.type;
+
+
+
+
+    Color_1.prototype.hex = function(mode) {
+        return rgb2hex_1(this._rgb, mode);
+    };
+
+    chroma_1.hex = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['hex']) ));
+    };
+
+    input.format.hex = hex2rgb_1;
+    input.autodetect.push({
+        p: 4,
+        test: function (h) {
+            var rest = [], len = arguments.length - 1;
+            while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+            if (!rest.length && type$5(h) === 'string' && [3,4,5,6,7,8,9].indexOf(h.length) >= 0) {
+                return 'hex';
+            }
+        }
+    });
+
+    var unpack$d = utils.unpack;
+    var TWOPI = utils.TWOPI;
+    var min = Math.min;
+    var sqrt = Math.sqrt;
+    var acos = Math.acos;
+
+    var rgb2hsi = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        /*
+        borrowed from here:
+        http://hummer.stanford.edu/museinfo/doc/examples/humdrum/keyscape2/rgb2hsi.cpp
+        */
+        var ref = unpack$d(args, 'rgb');
+        var r = ref[0];
+        var g = ref[1];
+        var b = ref[2];
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        var h;
+        var min_ = min(r,g,b);
+        var i = (r+g+b) / 3;
+        var s = i > 0 ? 1 - min_/i : 0;
+        if (s === 0) {
+            h = NaN;
+        } else {
+            h = ((r-g)+(r-b)) / 2;
+            h /= sqrt((r-g)*(r-g) + (r-b)*(g-b));
+            h = acos(h);
+            if (b > g) {
+                h = TWOPI - h;
+            }
+            h /= TWOPI;
+        }
+        return [h*360,s,i];
+    };
+
+    var rgb2hsi_1 = rgb2hsi;
+
+    var unpack$e = utils.unpack;
+    var limit$1 = utils.limit;
+    var TWOPI$1 = utils.TWOPI;
+    var PITHIRD = utils.PITHIRD;
+    var cos = Math.cos;
+
+    /*
+     * hue [0..360]
+     * saturation [0..1]
+     * intensity [0..1]
+     */
+    var hsi2rgb = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        /*
+        borrowed from here:
+        http://hummer.stanford.edu/museinfo/doc/examples/humdrum/keyscape2/hsi2rgb.cpp
+        */
+        args = unpack$e(args, 'hsi');
+        var h = args[0];
+        var s = args[1];
+        var i = args[2];
+        var r,g,b;
+
+        if (isNaN(h)) { h = 0; }
+        if (isNaN(s)) { s = 0; }
+        // normalize hue
+        if (h > 360) { h -= 360; }
+        if (h < 0) { h += 360; }
+        h /= 360;
+        if (h < 1/3) {
+            b = (1-s)/3;
+            r = (1+s*cos(TWOPI$1*h)/cos(PITHIRD-TWOPI$1*h))/3;
+            g = 1 - (b+r);
+        } else if (h < 2/3) {
+            h -= 1/3;
+            r = (1-s)/3;
+            g = (1+s*cos(TWOPI$1*h)/cos(PITHIRD-TWOPI$1*h))/3;
+            b = 1 - (r+g);
+        } else {
+            h -= 2/3;
+            g = (1-s)/3;
+            b = (1+s*cos(TWOPI$1*h)/cos(PITHIRD-TWOPI$1*h))/3;
+            r = 1 - (g+b);
+        }
+        r = limit$1(i*r*3);
+        g = limit$1(i*g*3);
+        b = limit$1(i*b*3);
+        return [r*255, g*255, b*255, args.length > 3 ? args[3] : 1];
+    };
+
+    var hsi2rgb_1 = hsi2rgb;
+
+    var unpack$f = utils.unpack;
+    var type$6 = utils.type;
+
+
+
+
+
+
+    Color_1.prototype.hsi = function() {
+        return rgb2hsi_1(this._rgb);
+    };
+
+    chroma_1.hsi = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['hsi']) ));
+    };
+
+    input.format.hsi = hsi2rgb_1;
+
+    input.autodetect.push({
+        p: 2,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            args = unpack$f(args, 'hsi');
+            if (type$6(args) === 'array' && args.length === 3) {
+                return 'hsi';
+            }
+        }
+    });
+
+    var unpack$g = utils.unpack;
+    var type$7 = utils.type;
+
+
+
+
+
+
+    Color_1.prototype.hsl = function() {
+        return rgb2hsl_1(this._rgb);
+    };
+
+    chroma_1.hsl = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['hsl']) ));
+    };
+
+    input.format.hsl = hsl2rgb_1;
+
+    input.autodetect.push({
+        p: 2,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            args = unpack$g(args, 'hsl');
+            if (type$7(args) === 'array' && args.length === 3) {
+                return 'hsl';
+            }
+        }
+    });
+
+    var unpack$h = utils.unpack;
+    var min$1 = Math.min;
+    var max$1 = Math.max;
+
+    /*
+     * supported arguments:
+     * - rgb2hsv(r,g,b)
+     * - rgb2hsv([r,g,b])
+     * - rgb2hsv({r,g,b})
+     */
+    var rgb2hsl$1 = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        args = unpack$h(args, 'rgb');
+        var r = args[0];
+        var g = args[1];
+        var b = args[2];
+        var min_ = min$1(r, g, b);
+        var max_ = max$1(r, g, b);
+        var delta = max_ - min_;
+        var h,s,v;
+        v = max_ / 255.0;
+        if (max_ === 0) {
+            h = Number.NaN;
+            s = 0;
+        } else {
+            s = delta / max_;
+            if (r === max_) { h = (g - b) / delta; }
+            if (g === max_) { h = 2+(b - r) / delta; }
+            if (b === max_) { h = 4+(r - g) / delta; }
+            h *= 60;
+            if (h < 0) { h += 360; }
+        }
+        return [h, s, v]
+    };
+
+    var rgb2hsv = rgb2hsl$1;
+
+    var unpack$i = utils.unpack;
+    var floor$1 = Math.floor;
+
+    var hsv2rgb = function () {
+        var assign, assign$1, assign$2, assign$3, assign$4, assign$5;
+
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+        args = unpack$i(args, 'hsv');
+        var h = args[0];
+        var s = args[1];
+        var v = args[2];
+        var r,g,b;
+        v *= 255;
+        if (s === 0) {
+            r = g = b = v;
+        } else {
+            if (h === 360) { h = 0; }
+            if (h > 360) { h -= 360; }
+            if (h < 0) { h += 360; }
+            h /= 60;
+
+            var i = floor$1(h);
+            var f = h - i;
+            var p = v * (1 - s);
+            var q = v * (1 - s * f);
+            var t = v * (1 - s * (1 - f));
+
+            switch (i) {
+                case 0: (assign = [v, t, p], r = assign[0], g = assign[1], b = assign[2]); break
+                case 1: (assign$1 = [q, v, p], r = assign$1[0], g = assign$1[1], b = assign$1[2]); break
+                case 2: (assign$2 = [p, v, t], r = assign$2[0], g = assign$2[1], b = assign$2[2]); break
+                case 3: (assign$3 = [p, q, v], r = assign$3[0], g = assign$3[1], b = assign$3[2]); break
+                case 4: (assign$4 = [t, p, v], r = assign$4[0], g = assign$4[1], b = assign$4[2]); break
+                case 5: (assign$5 = [v, p, q], r = assign$5[0], g = assign$5[1], b = assign$5[2]); break
+            }
+        }
+        return [r,g,b,args.length > 3?args[3]:1];
+    };
+
+    var hsv2rgb_1 = hsv2rgb;
+
+    var unpack$j = utils.unpack;
+    var type$8 = utils.type;
+
+
+
+
+
+
+    Color_1.prototype.hsv = function() {
+        return rgb2hsv(this._rgb);
+    };
+
+    chroma_1.hsv = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['hsv']) ));
+    };
+
+    input.format.hsv = hsv2rgb_1;
+
+    input.autodetect.push({
+        p: 2,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            args = unpack$j(args, 'hsv');
+            if (type$8(args) === 'array' && args.length === 3) {
+                return 'hsv';
+            }
+        }
+    });
+
+    var labConstants = {
+        // Corresponds roughly to RGB brighter/darker
+        Kn: 18,
+
+        // D65 standard referent
+        Xn: 0.950470,
+        Yn: 1,
+        Zn: 1.088830,
+
+        t0: 0.137931034,  // 4 / 29
+        t1: 0.206896552,  // 6 / 29
+        t2: 0.12841855,   // 3 * t1 * t1
+        t3: 0.008856452,  // t1 * t1 * t1
+    };
+
+    var unpack$k = utils.unpack;
+    var pow = Math.pow;
+
+    var rgb2lab = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var ref = unpack$k(args, 'rgb');
+        var r = ref[0];
+        var g = ref[1];
+        var b = ref[2];
+        var ref$1 = rgb2xyz(r,g,b);
+        var x = ref$1[0];
+        var y = ref$1[1];
+        var z = ref$1[2];
+        var l = 116 * y - 16;
+        return [l < 0 ? 0 : l, 500 * (x - y), 200 * (y - z)];
+    };
+
+    var rgb_xyz = function (r) {
+        if ((r /= 255) <= 0.04045) { return r / 12.92; }
+        return pow((r + 0.055) / 1.055, 2.4);
+    };
+
+    var xyz_lab = function (t) {
+        if (t > labConstants.t3) { return pow(t, 1 / 3); }
+        return t / labConstants.t2 + labConstants.t0;
+    };
+
+    var rgb2xyz = function (r,g,b) {
+        r = rgb_xyz(r);
+        g = rgb_xyz(g);
+        b = rgb_xyz(b);
+        var x = xyz_lab((0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / labConstants.Xn);
+        var y = xyz_lab((0.2126729 * r + 0.7151522 * g + 0.0721750 * b) / labConstants.Yn);
+        var z = xyz_lab((0.0193339 * r + 0.1191920 * g + 0.9503041 * b) / labConstants.Zn);
+        return [x,y,z];
+    };
+
+    var rgb2lab_1 = rgb2lab;
+
+    var unpack$l = utils.unpack;
+    var pow$1 = Math.pow;
+
+    /*
+     * L* [0..100]
+     * a [-100..100]
+     * b [-100..100]
+     */
+    var lab2rgb = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        args = unpack$l(args, 'lab');
+        var l = args[0];
+        var a = args[1];
+        var b = args[2];
+        var x,y,z, r,g,b_;
+
+        y = (l + 16) / 116;
+        x = isNaN(a) ? y : y + a / 500;
+        z = isNaN(b) ? y : y - b / 200;
+
+        y = labConstants.Yn * lab_xyz(y);
+        x = labConstants.Xn * lab_xyz(x);
+        z = labConstants.Zn * lab_xyz(z);
+
+        r = xyz_rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z);  // D65 -> sRGB
+        g = xyz_rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z);
+        b_ = xyz_rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z);
+
+        return [r,g,b_,args.length > 3 ? args[3] : 1];
+    };
+
+    var xyz_rgb = function (r) {
+        return 255 * (r <= 0.00304 ? 12.92 * r : 1.055 * pow$1(r, 1 / 2.4) - 0.055)
+    };
+
+    var lab_xyz = function (t) {
+        return t > labConstants.t1 ? t * t * t : labConstants.t2 * (t - labConstants.t0)
+    };
+
+    var lab2rgb_1 = lab2rgb;
+
+    var unpack$m = utils.unpack;
+    var type$9 = utils.type;
+
+
+
+
+
+
+    Color_1.prototype.lab = function() {
+        return rgb2lab_1(this._rgb);
+    };
+
+    chroma_1.lab = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['lab']) ));
+    };
+
+    input.format.lab = lab2rgb_1;
+
+    input.autodetect.push({
+        p: 2,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            args = unpack$m(args, 'lab');
+            if (type$9(args) === 'array' && args.length === 3) {
+                return 'lab';
+            }
+        }
+    });
+
+    var unpack$n = utils.unpack;
+    var RAD2DEG = utils.RAD2DEG;
+    var sqrt$1 = Math.sqrt;
+    var atan2 = Math.atan2;
+    var round$4 = Math.round;
+
+    var lab2lch = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var ref = unpack$n(args, 'lab');
+        var l = ref[0];
+        var a = ref[1];
+        var b = ref[2];
+        var c = sqrt$1(a * a + b * b);
+        var h = (atan2(b, a) * RAD2DEG + 360) % 360;
+        if (round$4(c*10000) === 0) { h = Number.NaN; }
+        return [l, c, h];
+    };
+
+    var lab2lch_1 = lab2lch;
+
+    var unpack$o = utils.unpack;
+
+
+
+    var rgb2lch = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var ref = unpack$o(args, 'rgb');
+        var r = ref[0];
+        var g = ref[1];
+        var b = ref[2];
+        var ref$1 = rgb2lab_1(r,g,b);
+        var l = ref$1[0];
+        var a = ref$1[1];
+        var b_ = ref$1[2];
+        return lab2lch_1(l,a,b_);
+    };
+
+    var rgb2lch_1 = rgb2lch;
+
+    var unpack$p = utils.unpack;
+    var DEG2RAD = utils.DEG2RAD;
+    var sin = Math.sin;
+    var cos$1 = Math.cos;
+
+    var lch2lab = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        /*
+        Convert from a qualitative parameter h and a quantitative parameter l to a 24-bit pixel.
+        These formulas were invented by David Dalrymple to obtain maximum contrast without going
+        out of gamut if the parameters are in the range 0-1.
+
+        A saturation multiplier was added by Gregor Aisch
+        */
+        var ref = unpack$p(args, 'lch');
+        var l = ref[0];
+        var c = ref[1];
+        var h = ref[2];
+        if (isNaN(h)) { h = 0; }
+        h = h * DEG2RAD;
+        return [l, cos$1(h) * c, sin(h) * c]
+    };
+
+    var lch2lab_1 = lch2lab;
+
+    var unpack$q = utils.unpack;
+
+
+
+    var lch2rgb = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        args = unpack$q(args, 'lch');
+        var l = args[0];
+        var c = args[1];
+        var h = args[2];
+        var ref = lch2lab_1 (l,c,h);
+        var L = ref[0];
+        var a = ref[1];
+        var b_ = ref[2];
+        var ref$1 = lab2rgb_1 (L,a,b_);
+        var r = ref$1[0];
+        var g = ref$1[1];
+        var b = ref$1[2];
+        return [r, g, b, args.length > 3 ? args[3] : 1];
+    };
+
+    var lch2rgb_1 = lch2rgb;
+
+    var unpack$r = utils.unpack;
+
+
+    var hcl2rgb = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var hcl = unpack$r(args, 'hcl').reverse();
+        return lch2rgb_1.apply(void 0, hcl);
+    };
+
+    var hcl2rgb_1 = hcl2rgb;
+
+    var unpack$s = utils.unpack;
+    var type$a = utils.type;
+
+
+
+
+
+
+    Color_1.prototype.lch = function() { return rgb2lch_1(this._rgb); };
+    Color_1.prototype.hcl = function() { return rgb2lch_1(this._rgb).reverse(); };
+
+    chroma_1.lch = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['lch']) ));
+    };
+    chroma_1.hcl = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['hcl']) ));
+    };
+
+    input.format.lch = lch2rgb_1;
+    input.format.hcl = hcl2rgb_1;
+
+    ['lch','hcl'].forEach(function (m) { return input.autodetect.push({
+        p: 2,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            args = unpack$s(args, m);
+            if (type$a(args) === 'array' && args.length === 3) {
+                return m;
+            }
+        }
+    }); });
+
+    /**
+    	X11 color names
+
+    	http://www.w3.org/TR/css3-color/#svg-color
+    */
+
+    var w3cx11 = {
+        aliceblue: '#f0f8ff',
+        antiquewhite: '#faebd7',
+        aqua: '#00ffff',
+        aquamarine: '#7fffd4',
+        azure: '#f0ffff',
+        beige: '#f5f5dc',
+        bisque: '#ffe4c4',
+        black: '#000000',
+        blanchedalmond: '#ffebcd',
+        blue: '#0000ff',
+        blueviolet: '#8a2be2',
+        brown: '#a52a2a',
+        burlywood: '#deb887',
+        cadetblue: '#5f9ea0',
+        chartreuse: '#7fff00',
+        chocolate: '#d2691e',
+        coral: '#ff7f50',
+        cornflower: '#6495ed',
+        cornflowerblue: '#6495ed',
+        cornsilk: '#fff8dc',
+        crimson: '#dc143c',
+        cyan: '#00ffff',
+        darkblue: '#00008b',
+        darkcyan: '#008b8b',
+        darkgoldenrod: '#b8860b',
+        darkgray: '#a9a9a9',
+        darkgreen: '#006400',
+        darkgrey: '#a9a9a9',
+        darkkhaki: '#bdb76b',
+        darkmagenta: '#8b008b',
+        darkolivegreen: '#556b2f',
+        darkorange: '#ff8c00',
+        darkorchid: '#9932cc',
+        darkred: '#8b0000',
+        darksalmon: '#e9967a',
+        darkseagreen: '#8fbc8f',
+        darkslateblue: '#483d8b',
+        darkslategray: '#2f4f4f',
+        darkslategrey: '#2f4f4f',
+        darkturquoise: '#00ced1',
+        darkviolet: '#9400d3',
+        deeppink: '#ff1493',
+        deepskyblue: '#00bfff',
+        dimgray: '#696969',
+        dimgrey: '#696969',
+        dodgerblue: '#1e90ff',
+        firebrick: '#b22222',
+        floralwhite: '#fffaf0',
+        forestgreen: '#228b22',
+        fuchsia: '#ff00ff',
+        gainsboro: '#dcdcdc',
+        ghostwhite: '#f8f8ff',
+        gold: '#ffd700',
+        goldenrod: '#daa520',
+        gray: '#808080',
+        green: '#008000',
+        greenyellow: '#adff2f',
+        grey: '#808080',
+        honeydew: '#f0fff0',
+        hotpink: '#ff69b4',
+        indianred: '#cd5c5c',
+        indigo: '#4b0082',
+        ivory: '#fffff0',
+        khaki: '#f0e68c',
+        laserlemon: '#ffff54',
+        lavender: '#e6e6fa',
+        lavenderblush: '#fff0f5',
+        lawngreen: '#7cfc00',
+        lemonchiffon: '#fffacd',
+        lightblue: '#add8e6',
+        lightcoral: '#f08080',
+        lightcyan: '#e0ffff',
+        lightgoldenrod: '#fafad2',
+        lightgoldenrodyellow: '#fafad2',
+        lightgray: '#d3d3d3',
+        lightgreen: '#90ee90',
+        lightgrey: '#d3d3d3',
+        lightpink: '#ffb6c1',
+        lightsalmon: '#ffa07a',
+        lightseagreen: '#20b2aa',
+        lightskyblue: '#87cefa',
+        lightslategray: '#778899',
+        lightslategrey: '#778899',
+        lightsteelblue: '#b0c4de',
+        lightyellow: '#ffffe0',
+        lime: '#00ff00',
+        limegreen: '#32cd32',
+        linen: '#faf0e6',
+        magenta: '#ff00ff',
+        maroon: '#800000',
+        maroon2: '#7f0000',
+        maroon3: '#b03060',
+        mediumaquamarine: '#66cdaa',
+        mediumblue: '#0000cd',
+        mediumorchid: '#ba55d3',
+        mediumpurple: '#9370db',
+        mediumseagreen: '#3cb371',
+        mediumslateblue: '#7b68ee',
+        mediumspringgreen: '#00fa9a',
+        mediumturquoise: '#48d1cc',
+        mediumvioletred: '#c71585',
+        midnightblue: '#191970',
+        mintcream: '#f5fffa',
+        mistyrose: '#ffe4e1',
+        moccasin: '#ffe4b5',
+        navajowhite: '#ffdead',
+        navy: '#000080',
+        oldlace: '#fdf5e6',
+        olive: '#808000',
+        olivedrab: '#6b8e23',
+        orange: '#ffa500',
+        orangered: '#ff4500',
+        orchid: '#da70d6',
+        palegoldenrod: '#eee8aa',
+        palegreen: '#98fb98',
+        paleturquoise: '#afeeee',
+        palevioletred: '#db7093',
+        papayawhip: '#ffefd5',
+        peachpuff: '#ffdab9',
+        peru: '#cd853f',
+        pink: '#ffc0cb',
+        plum: '#dda0dd',
+        powderblue: '#b0e0e6',
+        purple: '#800080',
+        purple2: '#7f007f',
+        purple3: '#a020f0',
+        rebeccapurple: '#663399',
+        red: '#ff0000',
+        rosybrown: '#bc8f8f',
+        royalblue: '#4169e1',
+        saddlebrown: '#8b4513',
+        salmon: '#fa8072',
+        sandybrown: '#f4a460',
+        seagreen: '#2e8b57',
+        seashell: '#fff5ee',
+        sienna: '#a0522d',
+        silver: '#c0c0c0',
+        skyblue: '#87ceeb',
+        slateblue: '#6a5acd',
+        slategray: '#708090',
+        slategrey: '#708090',
+        snow: '#fffafa',
+        springgreen: '#00ff7f',
+        steelblue: '#4682b4',
+        tan: '#d2b48c',
+        teal: '#008080',
+        thistle: '#d8bfd8',
+        tomato: '#ff6347',
+        turquoise: '#40e0d0',
+        violet: '#ee82ee',
+        wheat: '#f5deb3',
+        white: '#ffffff',
+        whitesmoke: '#f5f5f5',
+        yellow: '#ffff00',
+        yellowgreen: '#9acd32'
+    };
+
+    var w3cx11_1 = w3cx11;
+
+    var type$b = utils.type;
+
+
+
+
+
+    Color_1.prototype.name = function() {
+        var hex = rgb2hex_1(this._rgb, 'rgb');
+        for (var i = 0, list = Object.keys(w3cx11_1); i < list.length; i += 1) {
+            var n = list[i];
+
+            if (w3cx11_1[n] === hex) { return n.toLowerCase(); }
+        }
+        return hex;
+    };
+
+    input.format.named = function (name) {
+        name = name.toLowerCase();
+        if (w3cx11_1[name]) { return hex2rgb_1(w3cx11_1[name]); }
+        throw new Error('unknown color name: '+name);
+    };
+
+    input.autodetect.push({
+        p: 5,
+        test: function (h) {
+            var rest = [], len = arguments.length - 1;
+            while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ];
+
+            if (!rest.length && type$b(h) === 'string' && w3cx11_1[h.toLowerCase()]) {
+                return 'named';
+            }
+        }
+    });
+
+    var unpack$t = utils.unpack;
+
+    var rgb2num = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var ref = unpack$t(args, 'rgb');
+        var r = ref[0];
+        var g = ref[1];
+        var b = ref[2];
+        return (r << 16) + (g << 8) + b;
+    };
+
+    var rgb2num_1 = rgb2num;
+
+    var type$c = utils.type;
+
+    var num2rgb = function (num) {
+        if (type$c(num) == "number" && num >= 0 && num <= 0xFFFFFF) {
+            var r = num >> 16;
+            var g = (num >> 8) & 0xFF;
+            var b = num & 0xFF;
+            return [r,g,b,1];
+        }
+        throw new Error("unknown num color: "+num);
+    };
+
+    var num2rgb_1 = num2rgb;
+
+    var type$d = utils.type;
+
+
+
+    Color_1.prototype.num = function() {
+        return rgb2num_1(this._rgb);
+    };
+
+    chroma_1.num = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['num']) ));
+    };
+
+    input.format.num = num2rgb_1;
+
+    input.autodetect.push({
+        p: 5,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            if (args.length === 1 && type$d(args[0]) === 'number' && args[0] >= 0 && args[0] <= 0xFFFFFF) {
+                return 'num';
+            }
+        }
+    });
+
+    var unpack$u = utils.unpack;
+    var type$e = utils.type;
+    var round$5 = Math.round;
+
+    Color_1.prototype.rgb = function(rnd) {
+        if ( rnd === void 0 ) rnd=true;
+
+        if (rnd === false) { return this._rgb.slice(0,3); }
+        return this._rgb.slice(0,3).map(round$5);
+    };
+
+    Color_1.prototype.rgba = function(rnd) {
+        if ( rnd === void 0 ) rnd=true;
+
+        return this._rgb.slice(0,4).map(function (v,i) {
+            return i<3 ? (rnd === false ? v : round$5(v)) : v;
+        });
+    };
+
+    chroma_1.rgb = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['rgb']) ));
+    };
+
+    input.format.rgb = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var rgba = unpack$u(args, 'rgba');
+        if (rgba[3] === undefined) { rgba[3] = 1; }
+        return rgba;
+    };
+
+    input.autodetect.push({
+        p: 3,
+        test: function () {
+            var args = [], len = arguments.length;
+            while ( len-- ) args[ len ] = arguments[ len ];
+
+            args = unpack$u(args, 'rgba');
+            if (type$e(args) === 'array' && (args.length === 3 ||
+                args.length === 4 && type$e(args[3]) == 'number' && args[3] >= 0 && args[3] <= 1)) {
+                return 'rgb';
+            }
+        }
+    });
+
+    /*
+     * Based on implementation by Neil Bartlett
+     * https://github.com/neilbartlett/color-temperature
+     */
+
+    var log = Math.log;
+
+    var temperature2rgb = function (kelvin) {
+        var temp = kelvin / 100;
+        var r,g,b;
+        if (temp < 66) {
+            r = 255;
+            g = -155.25485562709179 - 0.44596950469579133 * (g = temp-2) + 104.49216199393888 * log(g);
+            b = temp < 20 ? 0 : -254.76935184120902 + 0.8274096064007395 * (b = temp-10) + 115.67994401066147 * log(b);
+        } else {
+            r = 351.97690566805693 + 0.114206453784165 * (r = temp-55) - 40.25366309332127 * log(r);
+            g = 325.4494125711974 + 0.07943456536662342 * (g = temp-50) - 28.0852963507957 * log(g);
+            b = 255;
+        }
+        return [r,g,b,1];
+    };
+
+    var temperature2rgb_1 = temperature2rgb;
+
+    /*
+     * Based on implementation by Neil Bartlett
+     * https://github.com/neilbartlett/color-temperature
+     **/
+
+
+    var unpack$v = utils.unpack;
+    var round$6 = Math.round;
+
+    var rgb2temperature = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        var rgb = unpack$v(args, 'rgb');
+        var r = rgb[0], b = rgb[2];
+        var minTemp = 1000;
+        var maxTemp = 40000;
+        var eps = 0.4;
+        var temp;
+        while (maxTemp - minTemp > eps) {
+            temp = (maxTemp + minTemp) * 0.5;
+            var rgb$1 = temperature2rgb_1(temp);
+            if ((rgb$1[2] / rgb$1[0]) >= (b / r)) {
+                maxTemp = temp;
+            } else {
+                minTemp = temp;
+            }
+        }
+        return round$6(temp);
+    };
+
+    var rgb2temperature_1 = rgb2temperature;
+
+    Color_1.prototype.temp =
+    Color_1.prototype.kelvin =
+    Color_1.prototype.temperature = function() {
+        return rgb2temperature_1(this._rgb);
+    };
+
+    chroma_1.temp =
+    chroma_1.kelvin =
+    chroma_1.temperature = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        return new (Function.prototype.bind.apply( Color_1, [ null ].concat( args, ['temp']) ));
+    };
+
+    input.format.temp =
+    input.format.kelvin =
+    input.format.temperature = temperature2rgb_1;
+
+    var type$f = utils.type;
+
+    Color_1.prototype.alpha = function(a, mutate) {
+        if ( mutate === void 0 ) mutate=false;
+
+        if (a !== undefined && type$f(a) === 'number') {
+            if (mutate) {
+                this._rgb[3] = a;
+                return this;
+            }
+            return new Color_1([this._rgb[0], this._rgb[1], this._rgb[2], a], 'rgb');
+        }
+        return this._rgb[3];
+    };
+
+    Color_1.prototype.clipped = function() {
+        return this._rgb._clipped || false;
+    };
+
+    Color_1.prototype.darken = function(amount) {
+    	if ( amount === void 0 ) amount=1;
+
+    	var me = this;
+    	var lab = me.lab();
+    	lab[0] -= labConstants.Kn * amount;
+    	return new Color_1(lab, 'lab').alpha(me.alpha(), true);
+    };
+
+    Color_1.prototype.brighten = function(amount) {
+    	if ( amount === void 0 ) amount=1;
+
+    	return this.darken(-amount);
+    };
+
+    Color_1.prototype.darker = Color_1.prototype.darken;
+    Color_1.prototype.brighter = Color_1.prototype.brighten;
+
+    Color_1.prototype.get = function(mc) {
+        var ref = mc.split('.');
+        var mode = ref[0];
+        var channel = ref[1];
+        var src = this[mode]();
+        if (channel) {
+            var i = mode.indexOf(channel);
+            if (i > -1) { return src[i]; }
+            throw new Error(("unknown channel " + channel + " in mode " + mode));
+        } else {
+            return src;
+        }
+    };
+
+    var type$g = utils.type;
+    var pow$2 = Math.pow;
+
+    var EPS = 1e-7;
+    var MAX_ITER = 20;
+
+    Color_1.prototype.luminance = function(lum) {
+        if (lum !== undefined && type$g(lum) === 'number') {
+            if (lum === 0) {
+                // return pure black
+                return new Color_1([0,0,0,this._rgb[3]], 'rgb');
+            }
+            if (lum === 1) {
+                // return pure white
+                return new Color_1([255,255,255,this._rgb[3]], 'rgb');
+            }
+            // compute new color using...
+            var cur_lum = this.luminance();
+            var mode = 'rgb';
+            var max_iter = MAX_ITER;
+
+            var test = function (low, high) {
+                var mid = low.interpolate(high, 0.5, mode);
+                var lm = mid.luminance();
+                if (Math.abs(lum - lm) < EPS || !max_iter--) {
+                    // close enough
+                    return mid;
+                }
+                return lm > lum ? test(low, mid) : test(mid, high);
+            };
+
+            var rgb = (cur_lum > lum ? test(new Color_1([0,0,0]), this) : test(this, new Color_1([255,255,255]))).rgb();
+            return new Color_1(rgb.concat( [this._rgb[3]]));
+        }
+        return rgb2luminance.apply(void 0, (this._rgb).slice(0,3));
+    };
+
+
+    var rgb2luminance = function (r,g,b) {
+        // relative luminance
+        // see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+        r = luminance_x(r);
+        g = luminance_x(g);
+        b = luminance_x(b);
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    };
+
+    var luminance_x = function (x) {
+        x /= 255;
+        return x <= 0.03928 ? x/12.92 : pow$2((x+0.055)/1.055, 2.4);
+    };
+
+    var interpolator = {};
+
+    var type$h = utils.type;
+
+
+    var mix = function (col1, col2, f) {
+        if ( f === void 0 ) f=0.5;
+        var rest = [], len = arguments.length - 3;
+        while ( len-- > 0 ) rest[ len ] = arguments[ len + 3 ];
+
+        var mode = rest[0] || 'lrgb';
+        if (!interpolator[mode] && !rest.length) {
+            // fall back to the first supported mode
+            mode = Object.keys(interpolator)[0];
+        }
+        if (!interpolator[mode]) {
+            throw new Error(("interpolation mode " + mode + " is not defined"));
+        }
+        if (type$h(col1) !== 'object') { col1 = new Color_1(col1); }
+        if (type$h(col2) !== 'object') { col2 = new Color_1(col2); }
+        return interpolator[mode](col1, col2, f)
+            .alpha(col1.alpha() + f * (col2.alpha() - col1.alpha()));
+    };
+
+    Color_1.prototype.mix =
+    Color_1.prototype.interpolate = function(col2, f) {
+    	if ( f === void 0 ) f=0.5;
+    	var rest = [], len = arguments.length - 2;
+    	while ( len-- > 0 ) rest[ len ] = arguments[ len + 2 ];
+
+    	return mix.apply(void 0, [ this, col2, f ].concat( rest ));
+    };
+
+    Color_1.prototype.premultiply = function(mutate) {
+    	if ( mutate === void 0 ) mutate=false;
+
+    	var rgb = this._rgb;
+    	var a = rgb[3];
+    	if (mutate) {
+    		this._rgb = [rgb[0]*a, rgb[1]*a, rgb[2]*a, a];
+    		return this;
+    	} else {
+    		return new Color_1([rgb[0]*a, rgb[1]*a, rgb[2]*a, a], 'rgb');
+    	}
+    };
+
+    Color_1.prototype.saturate = function(amount) {
+    	if ( amount === void 0 ) amount=1;
+
+    	var me = this;
+    	var lch = me.lch();
+    	lch[1] += labConstants.Kn * amount;
+    	if (lch[1] < 0) { lch[1] = 0; }
+    	return new Color_1(lch, 'lch').alpha(me.alpha(), true);
+    };
+
+    Color_1.prototype.desaturate = function(amount) {
+    	if ( amount === void 0 ) amount=1;
+
+    	return this.saturate(-amount);
+    };
+
+    var type$i = utils.type;
+
+    Color_1.prototype.set = function(mc, value, mutate) {
+        if ( mutate === void 0 ) mutate=false;
+
+        var ref = mc.split('.');
+        var mode = ref[0];
+        var channel = ref[1];
+        var src = this[mode]();
+        if (channel) {
+            var i = mode.indexOf(channel);
+            if (i > -1) {
+                if (type$i(value) == 'string') {
+                    switch(value.charAt(0)) {
+                        case '+': src[i] += +value; break;
+                        case '-': src[i] += +value; break;
+                        case '*': src[i] *= +(value.substr(1)); break;
+                        case '/': src[i] /= +(value.substr(1)); break;
+                        default: src[i] = +value;
+                    }
+                } else if (type$i(value) === 'number') {
+                    src[i] = value;
+                } else {
+                    throw new Error("unsupported value for Color.set");
+                }
+                var out = new Color_1(src, mode);
+                if (mutate) {
+                    this._rgb = out._rgb;
+                    return this;
+                }
+                return out;
+            }
+            throw new Error(("unknown channel " + channel + " in mode " + mode));
+        } else {
+            return src;
+        }
+    };
+
+    var rgb$1 = function (col1, col2, f) {
+        var xyz0 = col1._rgb;
+        var xyz1 = col2._rgb;
+        return new Color_1(
+            xyz0[0] + f * (xyz1[0]-xyz0[0]),
+            xyz0[1] + f * (xyz1[1]-xyz0[1]),
+            xyz0[2] + f * (xyz1[2]-xyz0[2]),
+            'rgb'
+        )
+    };
+
+    // register interpolator
+    interpolator.rgb = rgb$1;
+
+    var sqrt$2 = Math.sqrt;
+    var pow$3 = Math.pow;
+
+    var lrgb = function (col1, col2, f) {
+        var ref = col1._rgb;
+        var x1 = ref[0];
+        var y1 = ref[1];
+        var z1 = ref[2];
+        var ref$1 = col2._rgb;
+        var x2 = ref$1[0];
+        var y2 = ref$1[1];
+        var z2 = ref$1[2];
+        return new Color_1(
+            sqrt$2(pow$3(x1,2) * (1-f) + pow$3(x2,2) * f),
+            sqrt$2(pow$3(y1,2) * (1-f) + pow$3(y2,2) * f),
+            sqrt$2(pow$3(z1,2) * (1-f) + pow$3(z2,2) * f),
+            'rgb'
+        )
+    };
+
+    // register interpolator
+    interpolator.lrgb = lrgb;
+
+    var lab$1 = function (col1, col2, f) {
+        var xyz0 = col1.lab();
+        var xyz1 = col2.lab();
+        return new Color_1(
+            xyz0[0] + f * (xyz1[0]-xyz0[0]),
+            xyz0[1] + f * (xyz1[1]-xyz0[1]),
+            xyz0[2] + f * (xyz1[2]-xyz0[2]),
+            'lab'
+        )
+    };
+
+    // register interpolator
+    interpolator.lab = lab$1;
+
+    var _hsx = function (col1, col2, f, m) {
+        var assign, assign$1;
+
+        var xyz0, xyz1;
+        if (m === 'hsl') {
+            xyz0 = col1.hsl();
+            xyz1 = col2.hsl();
+        } else if (m === 'hsv') {
+            xyz0 = col1.hsv();
+            xyz1 = col2.hsv();
+        } else if (m === 'hcg') {
+            xyz0 = col1.hcg();
+            xyz1 = col2.hcg();
+        } else if (m === 'hsi') {
+            xyz0 = col1.hsi();
+            xyz1 = col2.hsi();
+        } else if (m === 'lch' || m === 'hcl') {
+            m = 'hcl';
+            xyz0 = col1.hcl();
+            xyz1 = col2.hcl();
+        }
+
+        var hue0, hue1, sat0, sat1, lbv0, lbv1;
+        if (m.substr(0, 1) === 'h') {
+            (assign = xyz0, hue0 = assign[0], sat0 = assign[1], lbv0 = assign[2]);
+            (assign$1 = xyz1, hue1 = assign$1[0], sat1 = assign$1[1], lbv1 = assign$1[2]);
+        }
+
+        var sat, hue, lbv, dh;
+
+        if (!isNaN(hue0) && !isNaN(hue1)) {
+            // both colors have hue
+            if (hue1 > hue0 && hue1 - hue0 > 180) {
+                dh = hue1-(hue0+360);
+            } else if (hue1 < hue0 && hue0 - hue1 > 180) {
+                dh = hue1+360-hue0;
+            } else {
+                dh = hue1 - hue0;
+            }
+            hue = hue0 + f * dh;
+        } else if (!isNaN(hue0)) {
+            hue = hue0;
+            if ((lbv1 == 1 || lbv1 == 0) && m != 'hsv') { sat = sat0; }
+        } else if (!isNaN(hue1)) {
+            hue = hue1;
+            if ((lbv0 == 1 || lbv0 == 0) && m != 'hsv') { sat = sat1; }
+        } else {
+            hue = Number.NaN;
+        }
+
+        if (sat === undefined) { sat = sat0 + f * (sat1 - sat0); }
+        lbv = lbv0 + f * (lbv1-lbv0);
+        return new Color_1([hue, sat, lbv], m);
+    };
+
+    var lch$1 = function (col1, col2, f) {
+    	return _hsx(col1, col2, f, 'lch');
+    };
+
+    // register interpolator
+    interpolator.lch = lch$1;
+    interpolator.hcl = lch$1;
+
+    var num$1 = function (col1, col2, f) {
+        var c1 = col1.num();
+        var c2 = col2.num();
+        return new Color_1(c1 + f * (c2-c1), 'num')
+    };
+
+    // register interpolator
+    interpolator.num = num$1;
+
+    var hcg$1 = function (col1, col2, f) {
+    	return _hsx(col1, col2, f, 'hcg');
+    };
+
+    // register interpolator
+    interpolator.hcg = hcg$1;
+
+    var hsi$1 = function (col1, col2, f) {
+    	return _hsx(col1, col2, f, 'hsi');
+    };
+
+    // register interpolator
+    interpolator.hsi = hsi$1;
+
+    var hsl$1 = function (col1, col2, f) {
+    	return _hsx(col1, col2, f, 'hsl');
+    };
+
+    // register interpolator
+    interpolator.hsl = hsl$1;
+
+    var hsv$1 = function (col1, col2, f) {
+    	return _hsx(col1, col2, f, 'hsv');
+    };
+
+    // register interpolator
+    interpolator.hsv = hsv$1;
+
+    var clip_rgb$2 = utils.clip_rgb;
+    var pow$4 = Math.pow;
+    var sqrt$3 = Math.sqrt;
+    var PI$1 = Math.PI;
+    var cos$2 = Math.cos;
+    var sin$1 = Math.sin;
+    var atan2$1 = Math.atan2;
+
+    var average = function (colors, mode, weights) {
+        if ( mode === void 0 ) mode='lrgb';
+        if ( weights === void 0 ) weights=null;
+
+        var l = colors.length;
+        if (!weights) { weights = Array.from(new Array(l)).map(function () { return 1; }); }
+        // normalize weights
+        var k = l / weights.reduce(function(a, b) { return a + b; });
+        weights.forEach(function (w,i) { weights[i] *= k; });
+        // convert colors to Color objects
+        colors = colors.map(function (c) { return new Color_1(c); });
+        if (mode === 'lrgb') {
+            return _average_lrgb(colors, weights)
+        }
+        var first = colors.shift();
+        var xyz = first.get(mode);
+        var cnt = [];
+        var dx = 0;
+        var dy = 0;
+        // initial color
+        for (var i=0; i<xyz.length; i++) {
+            xyz[i] = (xyz[i] || 0) * weights[0];
+            cnt.push(isNaN(xyz[i]) ? 0 : weights[0]);
+            if (mode.charAt(i) === 'h' && !isNaN(xyz[i])) {
+                var A = xyz[i] / 180 * PI$1;
+                dx += cos$2(A) * weights[0];
+                dy += sin$1(A) * weights[0];
+            }
+        }
+
+        var alpha = first.alpha() * weights[0];
+        colors.forEach(function (c,ci) {
+            var xyz2 = c.get(mode);
+            alpha += c.alpha() * weights[ci+1];
+            for (var i=0; i<xyz.length; i++) {
+                if (!isNaN(xyz2[i])) {
+                    cnt[i] += weights[ci+1];
+                    if (mode.charAt(i) === 'h') {
+                        var A = xyz2[i] / 180 * PI$1;
+                        dx += cos$2(A) * weights[ci+1];
+                        dy += sin$1(A) * weights[ci+1];
+                    } else {
+                        xyz[i] += xyz2[i] * weights[ci+1];
+                    }
+                }
+            }
+        });
+
+        for (var i$1=0; i$1<xyz.length; i$1++) {
+            if (mode.charAt(i$1) === 'h') {
+                var A$1 = atan2$1(dy / cnt[i$1], dx / cnt[i$1]) / PI$1 * 180;
+                while (A$1 < 0) { A$1 += 360; }
+                while (A$1 >= 360) { A$1 -= 360; }
+                xyz[i$1] = A$1;
+            } else {
+                xyz[i$1] = xyz[i$1]/cnt[i$1];
+            }
+        }
+        alpha /= l;
+        return (new Color_1(xyz, mode)).alpha(alpha > 0.99999 ? 1 : alpha, true);
+    };
+
+
+    var _average_lrgb = function (colors, weights) {
+        var l = colors.length;
+        var xyz = [0,0,0,0];
+        for (var i=0; i < colors.length; i++) {
+            var col = colors[i];
+            var f = weights[i] / l;
+            var rgb = col._rgb;
+            xyz[0] += pow$4(rgb[0],2) * f;
+            xyz[1] += pow$4(rgb[1],2) * f;
+            xyz[2] += pow$4(rgb[2],2) * f;
+            xyz[3] += rgb[3] * f;
+        }
+        xyz[0] = sqrt$3(xyz[0]);
+        xyz[1] = sqrt$3(xyz[1]);
+        xyz[2] = sqrt$3(xyz[2]);
+        if (xyz[3] > 0.9999999) { xyz[3] = 1; }
+        return new Color_1(clip_rgb$2(xyz));
+    };
+
+    // minimal multi-purpose interface
+
+    // @requires utils color analyze
+
+
+    var type$j = utils.type;
+
+    var pow$5 = Math.pow;
+
+    var scale = function(colors) {
+
+        // constructor
+        var _mode = 'rgb';
+        var _nacol = chroma_1('#ccc');
+        var _spread = 0;
+        // const _fixed = false;
+        var _domain = [0, 1];
+        var _pos = [];
+        var _padding = [0,0];
+        var _classes = false;
+        var _colors = [];
+        var _out = false;
+        var _min = 0;
+        var _max = 1;
+        var _correctLightness = false;
+        var _colorCache = {};
+        var _useCache = true;
+        var _gamma = 1;
+
+        // private methods
+
+        var setColors = function(colors) {
+            colors = colors || ['#fff', '#000'];
+            if (colors && type$j(colors) === 'string' && chroma_1.brewer &&
+                chroma_1.brewer[colors.toLowerCase()]) {
+                colors = chroma_1.brewer[colors.toLowerCase()];
+            }
+            if (type$j(colors) === 'array') {
+                // handle single color
+                if (colors.length === 1) {
+                    colors = [colors[0], colors[0]];
+                }
+                // make a copy of the colors
+                colors = colors.slice(0);
+                // convert to chroma classes
+                for (var c=0; c<colors.length; c++) {
+                    colors[c] = chroma_1(colors[c]);
+                }
+                // auto-fill color position
+                _pos.length = 0;
+                for (var c$1=0; c$1<colors.length; c$1++) {
+                    _pos.push(c$1/(colors.length-1));
+                }
+            }
+            resetCache();
+            return _colors = colors;
+        };
+
+        var getClass = function(value) {
+            if (_classes != null) {
+                var n = _classes.length-1;
+                var i = 0;
+                while (i < n && value >= _classes[i]) {
+                    i++;
+                }
+                return i-1;
+            }
+            return 0;
+        };
+
+        var tMapLightness = function (t) { return t; };
+        var tMapDomain = function (t) { return t; };
+
+        // const classifyValue = function(value) {
+        //     let val = value;
+        //     if (_classes.length > 2) {
+        //         const n = _classes.length-1;
+        //         const i = getClass(value);
+        //         const minc = _classes[0] + ((_classes[1]-_classes[0]) * (0 + (_spread * 0.5)));  // center of 1st class
+        //         const maxc = _classes[n-1] + ((_classes[n]-_classes[n-1]) * (1 - (_spread * 0.5)));  // center of last class
+        //         val = _min + ((((_classes[i] + ((_classes[i+1] - _classes[i]) * 0.5)) - minc) / (maxc-minc)) * (_max - _min));
+        //     }
+        //     return val;
+        // };
+
+        var getColor = function(val, bypassMap) {
+            var col, t;
+            if (bypassMap == null) { bypassMap = false; }
+            if (isNaN(val) || (val === null)) { return _nacol; }
+            if (!bypassMap) {
+                if (_classes && (_classes.length > 2)) {
+                    // find the class
+                    var c = getClass(val);
+                    t = c / (_classes.length-2);
+                } else if (_max !== _min) {
+                    // just interpolate between min/max
+                    t = (val - _min) / (_max - _min);
+                } else {
+                    t = 1;
+                }
+            } else {
+                t = val;
+            }
+
+            // domain map
+            t = tMapDomain(t);
+
+            if (!bypassMap) {
+                t = tMapLightness(t);  // lightness correction
+            }
+
+            if (_gamma !== 1) { t = pow$5(t, _gamma); }
+
+            t = _padding[0] + (t * (1 - _padding[0] - _padding[1]));
+
+            t = Math.min(1, Math.max(0, t));
+
+            var k = Math.floor(t * 10000);
+
+            if (_useCache && _colorCache[k]) {
+                col = _colorCache[k];
+            } else {
+                if (type$j(_colors) === 'array') {
+                    //for i in [0.._pos.length-1]
+                    for (var i=0; i<_pos.length; i++) {
+                        var p = _pos[i];
+                        if (t <= p) {
+                            col = _colors[i];
+                            break;
+                        }
+                        if ((t >= p) && (i === (_pos.length-1))) {
+                            col = _colors[i];
+                            break;
+                        }
+                        if (t > p && t < _pos[i+1]) {
+                            t = (t-p)/(_pos[i+1]-p);
+                            col = chroma_1.interpolate(_colors[i], _colors[i+1], t, _mode);
+                            break;
+                        }
+                    }
+                } else if (type$j(_colors) === 'function') {
+                    col = _colors(t);
+                }
+                if (_useCache) { _colorCache[k] = col; }
+            }
+            return col;
+        };
+
+        var resetCache = function () { return _colorCache = {}; };
+
+        setColors(colors);
+
+        // public interface
+
+        var f = function(v) {
+            var c = chroma_1(getColor(v));
+            if (_out && c[_out]) { return c[_out](); } else { return c; }
+        };
+
+        f.classes = function(classes) {
+            if (classes != null) {
+                if (type$j(classes) === 'array') {
+                    _classes = classes;
+                    _domain = [classes[0], classes[classes.length-1]];
+                } else {
+                    var d = chroma_1.analyze(_domain);
+                    if (classes === 0) {
+                        _classes = [d.min, d.max];
+                    } else {
+                        _classes = chroma_1.limits(d, 'e', classes);
+                    }
+                }
+                return f;
+            }
+            return _classes;
+        };
+
+
+        f.domain = function(domain) {
+            if (!arguments.length) {
+                return _domain;
+            }
+            _min = domain[0];
+            _max = domain[domain.length-1];
+            _pos = [];
+            var k = _colors.length;
+            if ((domain.length === k) && (_min !== _max)) {
+                // update positions
+                for (var i = 0, list = Array.from(domain); i < list.length; i += 1) {
+                    var d = list[i];
+
+                  _pos.push((d-_min) / (_max-_min));
+                }
+            } else {
+                for (var c=0; c<k; c++) {
+                    _pos.push(c/(k-1));
+                }
+                if (domain.length > 2) {
+                    // set domain map
+                    var tOut = domain.map(function (d,i) { return i/(domain.length-1); });
+                    var tBreaks = domain.map(function (d) { return (d - _min) / (_max - _min); });
+                    if (!tBreaks.every(function (val, i) { return tOut[i] === val; })) {
+                        tMapDomain = function (t) {
+                            if (t <= 0 || t >= 1) { return t; }
+                            var i = 0;
+                            while (t >= tBreaks[i+1]) { i++; }
+                            var f = (t - tBreaks[i]) / (tBreaks[i+1] - tBreaks[i]);
+                            var out = tOut[i] + f * (tOut[i+1] - tOut[i]);
+                            return out;
+                        };
+                    }
+
+                }
+            }
+            _domain = [_min, _max];
+            return f;
+        };
+
+        f.mode = function(_m) {
+            if (!arguments.length) {
+                return _mode;
+            }
+            _mode = _m;
+            resetCache();
+            return f;
+        };
+
+        f.range = function(colors, _pos) {
+            setColors(colors);
+            return f;
+        };
+
+        f.out = function(_o) {
+            _out = _o;
+            return f;
+        };
+
+        f.spread = function(val) {
+            if (!arguments.length) {
+                return _spread;
+            }
+            _spread = val;
+            return f;
+        };
+
+        f.correctLightness = function(v) {
+            if (v == null) { v = true; }
+            _correctLightness = v;
+            resetCache();
+            if (_correctLightness) {
+                tMapLightness = function(t) {
+                    var L0 = getColor(0, true).lab()[0];
+                    var L1 = getColor(1, true).lab()[0];
+                    var pol = L0 > L1;
+                    var L_actual = getColor(t, true).lab()[0];
+                    var L_ideal = L0 + ((L1 - L0) * t);
+                    var L_diff = L_actual - L_ideal;
+                    var t0 = 0;
+                    var t1 = 1;
+                    var max_iter = 20;
+                    while ((Math.abs(L_diff) > 1e-2) && (max_iter-- > 0)) {
+                        (function() {
+                            if (pol) { L_diff *= -1; }
+                            if (L_diff < 0) {
+                                t0 = t;
+                                t += (t1 - t) * 0.5;
+                            } else {
+                                t1 = t;
+                                t += (t0 - t) * 0.5;
+                            }
+                            L_actual = getColor(t, true).lab()[0];
+                            return L_diff = L_actual - L_ideal;
+                        })();
+                    }
+                    return t;
+                };
+            } else {
+                tMapLightness = function (t) { return t; };
+            }
+            return f;
+        };
+
+        f.padding = function(p) {
+            if (p != null) {
+                if (type$j(p) === 'number') {
+                    p = [p,p];
+                }
+                _padding = p;
+                return f;
+            } else {
+                return _padding;
+            }
+        };
+
+        f.colors = function(numColors, out) {
+            // If no arguments are given, return the original colors that were provided
+            if (arguments.length < 2) { out = 'hex'; }
+            var result = [];
+
+            if (arguments.length === 0) {
+                result = _colors.slice(0);
+
+            } else if (numColors === 1) {
+                result = [f(0.5)];
+
+            } else if (numColors > 1) {
+                var dm = _domain[0];
+                var dd = _domain[1] - dm;
+                result = __range__(0, numColors, false).map(function (i) { return f( dm + ((i/(numColors-1)) * dd) ); });
+
+            } else { // returns all colors based on the defined classes
+                colors = [];
+                var samples = [];
+                if (_classes && (_classes.length > 2)) {
+                    for (var i = 1, end = _classes.length, asc = 1 <= end; asc ? i < end : i > end; asc ? i++ : i--) {
+                        samples.push((_classes[i-1]+_classes[i])*0.5);
+                    }
+                } else {
+                    samples = _domain;
+                }
+                result = samples.map(function (v) { return f(v); });
+            }
 
-const RewardExchangeList = /*#__PURE__*/Object.freeze({
+            if (chroma_1[out]) {
+                result = result.map(function (c) { return c[out](); });
+            }
+            return result;
+        };
+
+        f.cache = function(c) {
+            if (c != null) {
+                _useCache = c;
+                return f;
+            } else {
+                return _useCache;
+            }
+        };
+
+        f.gamma = function(g) {
+            if (g != null) {
+                _gamma = g;
+                return f;
+            } else {
+                return _gamma;
+            }
+        };
+
+        f.nodata = function(d) {
+            if (d != null) {
+                _nacol = chroma_1(d);
+                return f;
+            } else {
+                return _nacol;
+            }
+        };
+
+        return f;
+    };
+
+    function __range__(left, right, inclusive) {
+      var range = [];
+      var ascending = left < right;
+      var end = !inclusive ? right : ascending ? right + 1 : right - 1;
+      for (var i = left; ascending ? i < end : i > end; ascending ? i++ : i--) {
+        range.push(i);
+      }
+      return range;
+    }
+
+    //
+    // interpolates between a set of colors uzing a bezier spline
+    //
+
+    // @requires utils lab
+
+
+
+
+    var bezier = function(colors) {
+        var assign, assign$1, assign$2;
+
+        var I, lab0, lab1, lab2;
+        colors = colors.map(function (c) { return new Color_1(c); });
+        if (colors.length === 2) {
+            // linear interpolation
+            (assign = colors.map(function (c) { return c.lab(); }), lab0 = assign[0], lab1 = assign[1]);
+            I = function(t) {
+                var lab = ([0, 1, 2].map(function (i) { return lab0[i] + (t * (lab1[i] - lab0[i])); }));
+                return new Color_1(lab, 'lab');
+            };
+        } else if (colors.length === 3) {
+            // quadratic bezier interpolation
+            (assign$1 = colors.map(function (c) { return c.lab(); }), lab0 = assign$1[0], lab1 = assign$1[1], lab2 = assign$1[2]);
+            I = function(t) {
+                var lab = ([0, 1, 2].map(function (i) { return ((1-t)*(1-t) * lab0[i]) + (2 * (1-t) * t * lab1[i]) + (t * t * lab2[i]); }));
+                return new Color_1(lab, 'lab');
+            };
+        } else if (colors.length === 4) {
+            // cubic bezier interpolation
+            var lab3;
+            (assign$2 = colors.map(function (c) { return c.lab(); }), lab0 = assign$2[0], lab1 = assign$2[1], lab2 = assign$2[2], lab3 = assign$2[3]);
+            I = function(t) {
+                var lab = ([0, 1, 2].map(function (i) { return ((1-t)*(1-t)*(1-t) * lab0[i]) + (3 * (1-t) * (1-t) * t * lab1[i]) + (3 * (1-t) * t * t * lab2[i]) + (t*t*t * lab3[i]); }));
+                return new Color_1(lab, 'lab');
+            };
+        } else if (colors.length === 5) {
+            var I0 = bezier(colors.slice(0, 3));
+            var I1 = bezier(colors.slice(2, 5));
+            I = function(t) {
+                if (t < 0.5) {
+                    return I0(t*2);
+                } else {
+                    return I1((t-0.5)*2);
+                }
+            };
+        }
+        return I;
+    };
+
+    var bezier_1 = function (colors) {
+        var f = bezier(colors);
+        f.scale = function () { return scale(f); };
+        return f;
+    };
+
+    /*
+     * interpolates between a set of colors uzing a bezier spline
+     * blend mode formulas taken from http://www.venture-ware.com/kevin/coding/lets-learn-math-photoshop-blend-modes/
+     */
+
+
+
+
+    var blend = function (bottom, top, mode) {
+        if (!blend[mode]) {
+            throw new Error('unknown blend mode ' + mode);
+        }
+        return blend[mode](bottom, top);
+    };
+
+    var blend_f = function (f) { return function (bottom,top) {
+            var c0 = chroma_1(top).rgb();
+            var c1 = chroma_1(bottom).rgb();
+            return chroma_1.rgb(f(c0, c1));
+        }; };
+
+    var each = function (f) { return function (c0, c1) {
+            var out = [];
+            out[0] = f(c0[0], c1[0]);
+            out[1] = f(c0[1], c1[1]);
+            out[2] = f(c0[2], c1[2]);
+            return out;
+        }; };
+
+    var normal = function (a) { return a; };
+    var multiply = function (a,b) { return a * b / 255; };
+    var darken$1 = function (a,b) { return a > b ? b : a; };
+    var lighten = function (a,b) { return a > b ? a : b; };
+    var screen = function (a,b) { return 255 * (1 - (1-a/255) * (1-b/255)); };
+    var overlay = function (a,b) { return b < 128 ? 2 * a * b / 255 : 255 * (1 - 2 * (1 - a / 255 ) * ( 1 - b / 255 )); };
+    var burn = function (a,b) { return 255 * (1 - (1 - b / 255) / (a/255)); };
+    var dodge = function (a,b) {
+        if (a === 255) { return 255; }
+        a = 255 * (b / 255) / (1 - a / 255);
+        return a > 255 ? 255 : a
+    };
+
+    // # add = (a,b) ->
+    // #     if (a + b > 255) then 255 else a + b
+
+    blend.normal = blend_f(each(normal));
+    blend.multiply = blend_f(each(multiply));
+    blend.screen = blend_f(each(screen));
+    blend.overlay = blend_f(each(overlay));
+    blend.darken = blend_f(each(darken$1));
+    blend.lighten = blend_f(each(lighten));
+    blend.dodge = blend_f(each(dodge));
+    blend.burn = blend_f(each(burn));
+    // blend.add = blend_f(each(add));
+
+    var blend_1 = blend;
+
+    // cubehelix interpolation
+    // based on D.A. Green "A colour scheme for the display of astronomical intensity images"
+    // http://astron-soc.in/bulletin/11June/289392011.pdf
+
+    var type$k = utils.type;
+    var clip_rgb$3 = utils.clip_rgb;
+    var TWOPI$2 = utils.TWOPI;
+    var pow$6 = Math.pow;
+    var sin$2 = Math.sin;
+    var cos$3 = Math.cos;
+
+
+    var cubehelix = function(start, rotations, hue, gamma, lightness) {
+        if ( start === void 0 ) start=300;
+        if ( rotations === void 0 ) rotations=-1.5;
+        if ( hue === void 0 ) hue=1;
+        if ( gamma === void 0 ) gamma=1;
+        if ( lightness === void 0 ) lightness=[0,1];
+
+        var dh = 0, dl;
+        if (type$k(lightness) === 'array') {
+            dl = lightness[1] - lightness[0];
+        } else {
+            dl = 0;
+            lightness = [lightness, lightness];
+        }
+
+        var f = function(fract) {
+            var a = TWOPI$2 * (((start+120)/360) + (rotations * fract));
+            var l = pow$6(lightness[0] + (dl * fract), gamma);
+            var h = dh !== 0 ? hue[0] + (fract * dh) : hue;
+            var amp = (h * l * (1-l)) / 2;
+            var cos_a = cos$3(a);
+            var sin_a = sin$2(a);
+            var r = l + (amp * ((-0.14861 * cos_a) + (1.78277* sin_a)));
+            var g = l + (amp * ((-0.29227 * cos_a) - (0.90649* sin_a)));
+            var b = l + (amp * (+1.97294 * cos_a));
+            return chroma_1(clip_rgb$3([r*255,g*255,b*255,1]));
+        };
+
+        f.start = function(s) {
+            if ((s == null)) { return start; }
+            start = s;
+            return f;
+        };
+
+        f.rotations = function(r) {
+            if ((r == null)) { return rotations; }
+            rotations = r;
+            return f;
+        };
+
+        f.gamma = function(g) {
+            if ((g == null)) { return gamma; }
+            gamma = g;
+            return f;
+        };
+
+        f.hue = function(h) {
+            if ((h == null)) { return hue; }
+            hue = h;
+            if (type$k(hue) === 'array') {
+                dh = hue[1] - hue[0];
+                if (dh === 0) { hue = hue[1]; }
+            } else {
+                dh = 0;
+            }
+            return f;
+        };
+
+        f.lightness = function(h) {
+            if ((h == null)) { return lightness; }
+            if (type$k(h) === 'array') {
+                lightness = h;
+                dl = h[1] - h[0];
+            } else {
+                lightness = [h,h];
+                dl = 0;
+            }
+            return f;
+        };
+
+        f.scale = function () { return chroma_1.scale(f); };
+
+        f.hue(hue);
+
+        return f;
+    };
+
+    var digits = '0123456789abcdef';
+
+    var floor$2 = Math.floor;
+    var random = Math.random;
+
+    var random_1 = function () {
+        var code = '#';
+        for (var i=0; i<6; i++) {
+            code += digits.charAt(floor$2(random() * 16));
+        }
+        return new Color_1(code, 'hex');
+    };
+
+    var log$1 = Math.log;
+    var pow$7 = Math.pow;
+    var floor$3 = Math.floor;
+    var abs = Math.abs;
+
+
+    var analyze = function (data, key) {
+        if ( key === void 0 ) key=null;
+
+        var r = {
+            min: Number.MAX_VALUE,
+            max: Number.MAX_VALUE*-1,
+            sum: 0,
+            values: [],
+            count: 0
+        };
+        if (type(data) === 'object') {
+            data = Object.values(data);
+        }
+        data.forEach(function (val) {
+            if (key && type(val) === 'object') { val = val[key]; }
+            if (val !== undefined && val !== null && !isNaN(val)) {
+                r.values.push(val);
+                r.sum += val;
+                if (val < r.min) { r.min = val; }
+                if (val > r.max) { r.max = val; }
+                r.count += 1;
+            }
+        });
+
+        r.domain = [r.min, r.max];
+
+        r.limits = function (mode, num) { return limits(r, mode, num); };
+
+        return r;
+    };
+
+
+    var limits = function (data, mode, num) {
+        if ( mode === void 0 ) mode='equal';
+        if ( num === void 0 ) num=7;
+
+        if (type(data) == 'array') {
+            data = analyze(data);
+        }
+        var min = data.min;
+        var max = data.max;
+        var values = data.values.sort(function (a,b) { return a-b; });
+
+        if (num === 1) { return [min,max]; }
+
+        var limits = [];
+
+        if (mode.substr(0,1) === 'c') { // continuous
+            limits.push(min);
+            limits.push(max);
+        }
+
+        if (mode.substr(0,1) === 'e') { // equal interval
+            limits.push(min);
+            for (var i=1; i<num; i++) {
+                limits.push(min+((i/num)*(max-min)));
+            }
+            limits.push(max);
+        }
+
+        else if (mode.substr(0,1) === 'l') { // log scale
+            if (min <= 0) {
+                throw new Error('Logarithmic scales are only possible for values > 0');
+            }
+            var min_log = Math.LOG10E * log$1(min);
+            var max_log = Math.LOG10E * log$1(max);
+            limits.push(min);
+            for (var i$1=1; i$1<num; i$1++) {
+                limits.push(pow$7(10, min_log + ((i$1/num) * (max_log - min_log))));
+            }
+            limits.push(max);
+        }
+
+        else if (mode.substr(0,1) === 'q') { // quantile scale
+            limits.push(min);
+            for (var i$2=1; i$2<num; i$2++) {
+                var p = ((values.length-1) * i$2)/num;
+                var pb = floor$3(p);
+                if (pb === p) {
+                    limits.push(values[pb]);
+                } else { // p > pb
+                    var pr = p - pb;
+                    limits.push((values[pb]*(1-pr)) + (values[pb+1]*pr));
+                }
+            }
+            limits.push(max);
+
+        }
+
+        else if (mode.substr(0,1) === 'k') { // k-means clustering
+            /*
+            implementation based on
+            http://code.google.com/p/figue/source/browse/trunk/figue.js#336
+            simplified for 1-d input values
+            */
+            var cluster;
+            var n = values.length;
+            var assignments = new Array(n);
+            var clusterSizes = new Array(num);
+            var repeat = true;
+            var nb_iters = 0;
+            var centroids = null;
+
+            // get seed values
+            centroids = [];
+            centroids.push(min);
+            for (var i$3=1; i$3<num; i$3++) {
+                centroids.push(min + ((i$3/num) * (max-min)));
+            }
+            centroids.push(max);
+
+            while (repeat) {
+                // assignment step
+                for (var j=0; j<num; j++) {
+                    clusterSizes[j] = 0;
+                }
+                for (var i$4=0; i$4<n; i$4++) {
+                    var value = values[i$4];
+                    var mindist = Number.MAX_VALUE;
+                    var best = (void 0);
+                    for (var j$1=0; j$1<num; j$1++) {
+                        var dist = abs(centroids[j$1]-value);
+                        if (dist < mindist) {
+                            mindist = dist;
+                            best = j$1;
+                        }
+                        clusterSizes[best]++;
+                        assignments[i$4] = best;
+                    }
+                }
+
+                // update centroids step
+                var newCentroids = new Array(num);
+                for (var j$2=0; j$2<num; j$2++) {
+                    newCentroids[j$2] = null;
+                }
+                for (var i$5=0; i$5<n; i$5++) {
+                    cluster = assignments[i$5];
+                    if (newCentroids[cluster] === null) {
+                        newCentroids[cluster] = values[i$5];
+                    } else {
+                        newCentroids[cluster] += values[i$5];
+                    }
+                }
+                for (var j$3=0; j$3<num; j$3++) {
+                    newCentroids[j$3] *= 1/clusterSizes[j$3];
+                }
+
+                // check convergence
+                repeat = false;
+                for (var j$4=0; j$4<num; j$4++) {
+                    if (newCentroids[j$4] !== centroids[j$4]) {
+                        repeat = true;
+                        break;
+                    }
+                }
+
+                centroids = newCentroids;
+                nb_iters++;
+
+                if (nb_iters > 200) {
+                    repeat = false;
+                }
+            }
+
+            // finished k-means clustering
+            // the next part is borrowed from gabrielflor.it
+            var kClusters = {};
+            for (var j$5=0; j$5<num; j$5++) {
+                kClusters[j$5] = [];
+            }
+            for (var i$6=0; i$6<n; i$6++) {
+                cluster = assignments[i$6];
+                kClusters[cluster].push(values[i$6]);
+            }
+            var tmpKMeansBreaks = [];
+            for (var j$6=0; j$6<num; j$6++) {
+                tmpKMeansBreaks.push(kClusters[j$6][0]);
+                tmpKMeansBreaks.push(kClusters[j$6][kClusters[j$6].length-1]);
+            }
+            tmpKMeansBreaks = tmpKMeansBreaks.sort(function (a,b){ return a-b; });
+            limits.push(tmpKMeansBreaks[0]);
+            for (var i$7=1; i$7 < tmpKMeansBreaks.length; i$7+= 2) {
+                var v = tmpKMeansBreaks[i$7];
+                if (!isNaN(v) && (limits.indexOf(v) === -1)) {
+                    limits.push(v);
+                }
+            }
+        }
+        return limits;
+    };
+
+    var analyze_1 = {analyze: analyze, limits: limits};
+
+    var contrast = function (a, b) {
+        // WCAG contrast ratio
+        // see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+        a = new Color_1(a);
+        b = new Color_1(b);
+        var l1 = a.luminance();
+        var l2 = b.luminance();
+        return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
+    };
+
+    var sqrt$4 = Math.sqrt;
+    var atan2$2 = Math.atan2;
+    var abs$1 = Math.abs;
+    var cos$4 = Math.cos;
+    var PI$2 = Math.PI;
+
+    var deltaE = function(a, b, L, C) {
+        if ( L === void 0 ) L=1;
+        if ( C === void 0 ) C=1;
+
+        // Delta E (CMC)
+        // see http://www.brucelindbloom.com/index.html?Eqn_DeltaE_CMC.html
+        a = new Color_1(a);
+        b = new Color_1(b);
+        var ref = Array.from(a.lab());
+        var L1 = ref[0];
+        var a1 = ref[1];
+        var b1 = ref[2];
+        var ref$1 = Array.from(b.lab());
+        var L2 = ref$1[0];
+        var a2 = ref$1[1];
+        var b2 = ref$1[2];
+        var c1 = sqrt$4((a1 * a1) + (b1 * b1));
+        var c2 = sqrt$4((a2 * a2) + (b2 * b2));
+        var sl = L1 < 16.0 ? 0.511 : (0.040975 * L1) / (1.0 + (0.01765 * L1));
+        var sc = ((0.0638 * c1) / (1.0 + (0.0131 * c1))) + 0.638;
+        var h1 = c1 < 0.000001 ? 0.0 : (atan2$2(b1, a1) * 180.0) / PI$2;
+        while (h1 < 0) { h1 += 360; }
+        while (h1 >= 360) { h1 -= 360; }
+        var t = (h1 >= 164.0) && (h1 <= 345.0) ? (0.56 + abs$1(0.2 * cos$4((PI$2 * (h1 + 168.0)) / 180.0))) : (0.36 + abs$1(0.4 * cos$4((PI$2 * (h1 + 35.0)) / 180.0)));
+        var c4 = c1 * c1 * c1 * c1;
+        var f = sqrt$4(c4 / (c4 + 1900.0));
+        var sh = sc * (((f * t) + 1.0) - f);
+        var delL = L1 - L2;
+        var delC = c1 - c2;
+        var delA = a1 - a2;
+        var delB = b1 - b2;
+        var dH2 = ((delA * delA) + (delB * delB)) - (delC * delC);
+        var v1 = delL / (L * sl);
+        var v2 = delC / (C * sc);
+        var v3 = sh;
+        return sqrt$4((v1 * v1) + (v2 * v2) + (dH2 / (v3 * v3)));
+    };
+
+    // simple Euclidean distance
+    var distance = function(a, b, mode) {
+        if ( mode === void 0 ) mode='lab';
+
+        // Delta E (CIE 1976)
+        // see http://www.brucelindbloom.com/index.html?Equations.html
+        a = new Color_1(a);
+        b = new Color_1(b);
+        var l1 = a.get(mode);
+        var l2 = b.get(mode);
+        var sum_sq = 0;
+        for (var i in l1) {
+            var d = (l1[i] || 0) - (l2[i] || 0);
+            sum_sq += d*d;
+        }
+        return Math.sqrt(sum_sq);
+    };
+
+    var valid = function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        try {
+            new (Function.prototype.bind.apply( Color_1, [ null ].concat( args) ));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    };
+
+    // some pre-defined color scales:
+
+
+
+
+    var scales = {
+    	cool: function cool() { return scale([chroma_1.hsl(180,1,.9), chroma_1.hsl(250,.7,.4)]) },
+    	hot: function hot() { return scale(['#000','#f00','#ff0','#fff']).mode('rgb') }
+    };
+
+    /**
+        ColorBrewer colors for chroma.js
+
+        Copyright (c) 2002 Cynthia Brewer, Mark Harrower, and The
+        Pennsylvania State University.
+
+        Licensed under the Apache License, Version 2.0 (the "License");
+        you may not use this file except in compliance with the License.
+        You may obtain a copy of the License at
+        http://www.apache.org/licenses/LICENSE-2.0
+
+        Unless required by applicable law or agreed to in writing, software distributed
+        under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+        CONDITIONS OF ANY KIND, either express or implied. See the License for the
+        specific language governing permissions and limitations under the License.
+    */
+
+    var colorbrewer = {
+        // sequential
+        OrRd: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
+        PuBu: ['#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#045a8d', '#023858'],
+        BuPu: ['#f7fcfd', '#e0ecf4', '#bfd3e6', '#9ebcda', '#8c96c6', '#8c6bb1', '#88419d', '#810f7c', '#4d004b'],
+        Oranges: ['#fff5eb', '#fee6ce', '#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801', '#a63603', '#7f2704'],
+        BuGn: ['#f7fcfd', '#e5f5f9', '#ccece6', '#99d8c9', '#66c2a4', '#41ae76', '#238b45', '#006d2c', '#00441b'],
+        YlOrBr: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#993404', '#662506'],
+        YlGn: ['#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#006837', '#004529'],
+        Reds: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
+        RdPu: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
+        Greens: ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'],
+        YlGnBu: ['#ffffd9', '#edf8b1', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0', '#225ea8', '#253494', '#081d58'],
+        Purples: ['#fcfbfd', '#efedf5', '#dadaeb', '#bcbddc', '#9e9ac8', '#807dba', '#6a51a3', '#54278f', '#3f007d'],
+        GnBu: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081'],
+        Greys: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
+        YlOrRd: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
+        PuRd: ['#f7f4f9', '#e7e1ef', '#d4b9da', '#c994c7', '#df65b0', '#e7298a', '#ce1256', '#980043', '#67001f'],
+        Blues: ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'],
+        PuBuGn: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
+        Viridis: ['#440154', '#482777', '#3f4a8a', '#31678e', '#26838f', '#1f9d8a', '#6cce5a', '#b6de2b', '#fee825'],
+
+        // diverging
+
+        Spectral: ['#9e0142', '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2'],
+        RdYlGn: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', '#006837'],
+        RdBu: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
+        PiYG: ['#8e0152', '#c51b7d', '#de77ae', '#f1b6da', '#fde0ef', '#f7f7f7', '#e6f5d0', '#b8e186', '#7fbc41', '#4d9221', '#276419'],
+        PRGn: ['#40004b', '#762a83', '#9970ab', '#c2a5cf', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837', '#00441b'],
+        RdYlBu: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee090', '#ffffbf', '#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'],
+        BrBG: ['#543005', '#8c510a', '#bf812d', '#dfc27d', '#f6e8c3', '#f5f5f5', '#c7eae5', '#80cdc1', '#35978f', '#01665e', '#003c30'],
+        RdGy: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a'],
+        PuOr: ['#7f3b08', '#b35806', '#e08214', '#fdb863', '#fee0b6', '#f7f7f7', '#d8daeb', '#b2abd2', '#8073ac', '#542788', '#2d004b'],
+
+        // qualitative
+
+        Set2: ['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', '#e5c494', '#b3b3b3'],
+        Accent: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f', '#bf5b17', '#666666'],
+        Set1: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999'],
+        Set3: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'],
+        Dark2: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666'],
+        Paired: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'],
+        Pastel2: ['#b3e2cd', '#fdcdac', '#cbd5e8', '#f4cae4', '#e6f5c9', '#fff2ae', '#f1e2cc', '#cccccc'],
+        Pastel1: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd', '#fddaec', '#f2f2f2'],
+    };
+
+    // add lowercase aliases for case-insensitive matches
+    for (var i$1 = 0, list$1 = Object.keys(colorbrewer); i$1 < list$1.length; i$1 += 1) {
+        var key = list$1[i$1];
+
+        colorbrewer[key.toLowerCase()] = colorbrewer[key];
+    }
+
+    var colorbrewer_1 = colorbrewer;
+
+    // feel free to comment out anything to rollup
+    // a smaller chroma.js built
+
+    // io --> convert colors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    // operators --> modify existing Colors
+
+
+
+
+
+
+
+
+
+
+    // interpolators
+
+
+
+
+
+
+
+
+
+
+    // generators -- > create new colors
+    chroma_1.average = average;
+    chroma_1.bezier = bezier_1;
+    chroma_1.blend = blend_1;
+    chroma_1.cubehelix = cubehelix;
+    chroma_1.mix = chroma_1.interpolate = mix;
+    chroma_1.random = random_1;
+    chroma_1.scale = scale;
+
+    // other utility methods
+    chroma_1.analyze = analyze_1.analyze;
+    chroma_1.contrast = contrast;
+    chroma_1.deltaE = deltaE;
+    chroma_1.distance = distance;
+    chroma_1.limits = analyze_1.limits;
+    chroma_1.valid = valid;
+
+    // scale
+    chroma_1.scales = scales;
+
+    // colors
+    chroma_1.colors = w3cx11_1;
+    chroma_1.brewer = colorbrewer_1;
+
+    var chroma_js = chroma_1;
+
+    return chroma_js;
+
+})));
+});
+
+function autoColorScaleCss(color, name = "primary") {
+  if (!chroma.valid(color)) {
+    return;
+  }
+  const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  const hex = chroma(color).hex();
+  const scale = chroma
+    .scale([
+    chroma(hex).luminance(0.95),
+    chroma(hex).luminance(0.84),
+    chroma(hex).luminance(0.73),
+    chroma(hex).luminance(0.62),
+    chroma(hex).luminance(0.49),
+    chroma(hex).luminance(0.35),
+    chroma(hex).luminance(0.23),
+    chroma(hex).luminance(0.15),
+    chroma(hex).luminance(0.1),
+    chroma(hex).luminance(0.05),
+    chroma(hex).luminance(0.02),
+  ])
+    .colors(colorScale.length);
+  return scale
+    .map((color, index) => `--sl-color-${name}-${colorScale[index]}: ${chroma(color).hex()};`)
+    .join("\n");
+}
+
+/**
+ *
+ * Themes
+ *
+ * Export only valid CSS. Those will be injected into style tags.
+ *
+ * Useful links:
+ *  - https://brandcolors.net/
+ *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
+ *
+ */
+//
+const Default$b = `
+ // No CSS
+`;
+const Orangey = `
+:root{
+    ${autoColorScaleCss("orange")}
+}
+`;
+const Netflix = `
+:root{
+    ${autoColorScaleCss("#e50914")}
+}
+`;
+const SaaSquatchCorporate = `
+:root{
+    ${autoColorScaleCss("green")}
+    --sl-font-sans: Arial;
+}
+`;
+const NYTimes = `
+:root{
+    ${autoColorScaleCss("black")}
+    --sl-font-sans: Georgia, 'Times New Roman', serif;
+}
+`;
+
+const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': RewardExchangeList_stories,
-  rewardExchange: rewardExchange$1,
-  rewardExchangeSelected: rewardExchangeSelected$1,
-  Default2: Default2
+  Default: Default$b,
+  Orangey: Orangey,
+  Netflix: Netflix,
+  SaaSquatchCorporate: SaaSquatchCorporate,
+  NYTimes: NYTimes
 });
 
 function deepFreeze(obj) {
@@ -27235,7 +30848,7 @@ const seenDeprecations = {};
 /**
  * @param {string} message
  */
-const error$1 = (message) => {
+const error$2 = (message) => {
   console.error(message);
 };
 
@@ -27735,7 +31348,7 @@ const HLJS = function(hljs) {
 
     const language = getLanguage(languageName);
     if (!language) {
-      error$1(LANGUAGE_NOT_FOUND.replace("{}", languageName));
+      error$2(LANGUAGE_NOT_FOUND.replace("{}", languageName));
       throw new Error('Unknown language: "' + languageName + '"');
     }
 
@@ -28071,10 +31684,10 @@ const HLJS = function(hljs) {
     let lang = null;
     try {
       lang = languageDefinition(hljs);
-    } catch (error$1$1) {
-      error$1("Language definition for '{}' could not be registered.".replace("{}", languageName));
+    } catch (error$1) {
+      error$2("Language definition for '{}' could not be registered.".replace("{}", languageName));
       // hard or soft error
-      if (!SAFE_MODE) { throw error$1$1; } else { error$1(error$1$1); }
+      if (!SAFE_MODE) { throw error$1; } else { error$2(error$1); }
       // languages that have serious errors are replaced with essentially a
       // "plaintext" stand-in so that the code blocks will still get normal
       // css classes applied to them - and one bad language won't break the
@@ -28384,7 +31997,7 @@ const stories = [
   ReferralTableRewardsCell$1,
   UserName,
   PasswordField,
-  TaskCard$1,
+  TaskCard$2,
   PortalTemplates,
   ProgramMenu$1,
   PoweredByImg,
@@ -28395,7 +32008,7 @@ const stories = [
   RewardExchangeList,
   UseRewardExchangeList,
   UseTaskCard,
-  UseRewardsTable
+  UseRewardsTable,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {
@@ -28410,9 +32023,29 @@ const StencilStorybook = class {
       title: "Mint Components",
       addons: [CucumberAddon, ShadowViewAddon.ShadowViewAddon, HookStoryAddon],
     });
-    return (index.h(index.Host, { class: Style, onClick: {} }, children));
+    const [selectedTheme, setSelected] = _extends.useState("Default");
+    const [checkerboard, setCheckerboard] = _extends.useState(true);
+    const themes = Object.keys(Themes);
+    const theme = Themes[selectedTheme];
+    return (index.h(index.Host, { class: Style, onClick: {} }, index.h("div", { style: {
+        position: "absolute",
+        top: "0",
+        right: "0",
+        zIndex: "999999",
+      } }, "Branding:", index.h("select", { onChange: (e) => setSelected(e.target.value) }, themes.map((t) => (index.h("option", { selected: t === selectedTheme }, t)))), index.h("div", null, index.h("div", null)), index.h(ColorScale, null), index.h("br", null), index.h("input", { type: "checkbox", id: "checkerboard", onClick: () => setCheckerboard(!checkerboard), onChange: () => document.documentElement.style.setProperty("--checker-color-1", checkerboard ? "#ebebeb" : "#ffffff00") }), index.h("label", { htmlFor: "checkerboard" }, "Checkerboard?")), index.h("style", null, theme), index.h("style", null, ResizerStylesheet), children));
   }
-};
+};
+function ColorScale() {
+  return (index.h("span", null, index.h(ColorToken, null), index.h(ColorToken, { type: "success" }), index.h(ColorToken, { type: "warning" }), index.h(ColorToken, { type: "danger" }), index.h(ColorToken, { type: "neutral" })));
+}
+function ColorToken({ type = "primary" }) {
+  return (index.h("span", { style: {
+      background: `var(--sl-color-${type}-500)`,
+      width: "1em",
+      marginRight: "2px",
+      padding: "0 4px",
+    }, title: type }, type.charAt(0)));
+}
 
 const TableCell$1 = class {
   constructor(hostRef) {
@@ -28435,7 +32068,7 @@ const TableRow = class {
   }
 };
 
-const TaskCard$2 = class {
+const TaskCard$3 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
@@ -28459,6 +32092,10 @@ const TaskCard$2 = class {
      * @uiName Goal Repeatable
      */
     this.repeatable = false;
+    /**
+     * @uiName Repeat Amount (0 for no limit)
+     */
+    this.finite = 0;
     /**
      * @uiName Show Progress Bar
      */
@@ -28664,6 +32301,6 @@ exports.sqm_share_link = ShareLink;
 exports.sqm_stencilbook = StencilStorybook;
 exports.sqm_table_cell = TableCell$1;
 exports.sqm_table_row = TableRow;
-exports.sqm_task_card = TaskCard$2;
+exports.sqm_task_card = TaskCard$3;
 exports.sqm_text = Text;
 exports.sqm_user_name = UserName$1;