@sendoutcards/quantum-design-ui 1.7.36 → 1.7.40

package/dist/index.es.js

@@ -13975,7 +13975,9 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
       closeButtonId = props.closeButtonId,
       insetOverride = props.insetOverride,
       height = props.height,
-      children = props.children;
+      children = props.children,
+      _c = props.shouldScroll,
+      shouldScroll = _c === void 0 ? false : _c;
   return jsx(AnimatePresence, null, isOpen && jsx(Overlay, {
     variants: overlayVariants,
     animate: isOpen ? 'open' : 'closed',
@@ -14000,10 +14002,16 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
     maxHeight: maxHeight,
     width: isFullScreen ? '100%' : undefined,
     height: isFullScreen ? 'calc(100vh - 16px )' : height
+  }, shouldScroll ? jsx(Div, {
+    height: 'calc(100vh - 32px)',
+    overflowY: "auto"
   }, children, onClose && jsx(CloseButton, {
     id: closeButtonId,
     onClose: onClose
-  }))));
+  })) : jsx(React.Fragment, null, children, onClose && jsx(CloseButton, {
+    id: closeButtonId,
+    onClose: onClose
+  })))));
 });
 
 var _emotionSourceMap5$2 = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZMEMiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHNlbGVjdENvbnRhaW5lcjogY3NzKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgZGlzcGxheTogZmxleDtcXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XFxuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XFxuICBcIl0sIFtcIlxcbiAgICBkaXNwbGF5OiBmbGV4O1xcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gICAgd2lkdGg6IDEwMCU7XFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcXG4gIFwiXSkpKSxcclxuICAgIHNlbGVjdEJvZHk6IGZ1bmN0aW9uIChzZWxlY3RIZWlnaHQsIHNlbGVjdFdpZHRoKSB7IHJldHVybiBjc3ModGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICBjdXJzb3I6IHBvaW50ZXI7XFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XFxuICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcXG4gICAgaGVpZ2h0OiBcIiwgXCI7XFxuICAgIHdpZHRoOiBcIiwgXCI7XFxuICAgIHBhZGRpbmc6IDBweCA4cHg7XFxuICAgIGJvcmRlcjogbm9uZTtcXG4gICAgb3V0bGluZTogbm9uZTtcXG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcXG4gIFwiXSwgW1wiXFxuICAgIGN1cnNvcjogcG9pbnRlcjtcXG4gICAgZGlzcGxheTogZmxleDtcXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcXG4gICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xcbiAgICBoZWlnaHQ6IFwiLCBcIjtcXG4gICAgd2lkdGg6IFwiLCBcIjtcXG4gICAgcGFkZGluZzogMHB4IDhweDtcXG4gICAgYm9yZGVyOiBub25lO1xcbiAgICBvdXRsaW5lOiBub25lO1xcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xcbiAgXCJdKSksIFwiXCIgKyAoc2VsZWN0SGVpZ2h0IHx8ICc1MHB4JyksIFwiXCIgKyAoc2VsZWN0V2lkdGggfHwgJ2F1dG8nKSk7IH0sXHJcbiAgICBzZWxlY3REcm9wZG93bkNvbnRlbnRzOiBmdW5jdGlvbiAobWF4SGVpZ2h0KSB7IHJldHVybiBjc3ModGVtcGxhdGVPYmplY3RfMyB8fCAodGVtcGxhdGVPYmplY3RfMyA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICBtYXgtaGVpZ2h0OiBcIiwgXCI7XFxuICAgIG92ZXJmbG93LXk6IGF1dG87XFxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gICAgbGVmdDogNTAlO1xcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XFxuICBcIl0sIFtcIlxcbiAgICBtYXgtaGVpZ2h0OiBcIiwgXCI7XFxuICAgIG92ZXJmbG93LXk6IGF1dG87XFxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gICAgbGVmdDogNTAlO1xcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XFxuICBcIl0pKSwgXCJcIiArIG1heEhlaWdodCB8fCAnMjI2cHgnKTsgfSxcclxuICAgIGFjdGl2ZU9wdGlvbjogZnVuY3Rpb24gKGFsaWdubWVudCkgeyByZXR1cm4gY3NzKHRlbXBsYXRlT2JqZWN0XzQgfHwgKHRlbXBsYXRlT2JqZWN0XzQgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgd2lkdGg6IDEwMCU7XFxuICAgIGhlaWdodDogMTAwJTtcXG4gICAgZGlzcGxheTogZmxleDtcXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcXG4gICAganVzdGlmeS1jb250ZW50OiBcIiwgXCI7XFxuICBcIl0sIFtcIlxcbiAgICB3aWR0aDogMTAwJTtcXG4gICAgaGVpZ2h0OiAxMDAlO1xcbiAgICBkaXNwbGF5OiBmbGV4O1xcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IFwiLFxyXG4gICAgICAgIFwiO1xcbiAgXCJdKSksIGFsaWdubWVudCA9PT0gJ2xlZnQnXHJcbiAgICAgICAgPyAnZmxleC1zdGFydCdcclxuICAgICAgICA6IGFsaWdubWVudCA9PT0gJ3JpZ2h0J1xyXG4gICAgICAgICAgICA/ICdmbGV4LWVuZCdcclxuICAgICAgICAgICAgOiAnY2VudGVyJyk7IH0sXHJcbiAgICBvcHRpb246IGZ1bmN0aW9uIChhbGlnbm1lbnQpIHsgcmV0dXJuIGNzcyh0ZW1wbGF0ZU9iamVjdF81IHx8ICh0ZW1wbGF0ZU9iamVjdF81ID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBwYWRkaW5nOiAxMnB4O1xcbiAgICBib3JkZXI6IG5vbmU7XFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIGp1c3RpZnktY29udGVudDogXCIsIFwiO1xcbiAgICBvdXRsaW5lOiBub25lO1xcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xcbiAgICBjdXJzb3I6IHBvaW50ZXI7XFxuICAgIGZvbnQtc2l6ZTogaW5oZXJpdDtcXG4gIFwiXSwgW1wiXFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBwYWRkaW5nOiAxMnB4O1xcbiAgICBib3JkZXI6IG5vbmU7XFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIGp1c3RpZnktY29udGVudDogXCIsXHJcbiAgICAgICAgXCI7XFxuICAgIG91dGxpbmU6IG5vbmU7XFxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XFxuICAgIGN1cnNvcjogcG9pbnRlcjtcXG4gICAgZm9udC1zaXplOiBpbmhlcml0O1xcbiAgXCJdKSksIGFsaWdubWVudCA9PT0gJ2xlZnQnXHJcbiAgICAgICAgPyAnZmxleC1zdGFydCdcclxuICAgICAgICA6IGFsaWdubWVudCA9PT0gJ3JpZ2h0J1xyXG4gICAgICAgICAgICA/ICdmbGV4LWVuZCdcclxuICAgICAgICAgICAgOiAnY2VudGVyJyk7IH0sXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xLCB0ZW1wbGF0ZU9iamVjdF8yLCB0ZW1wbGF0ZU9iamVjdF8zLCB0ZW1wbGF0ZU9iamVjdF80LCB0ZW1wbGF0ZU9iamVjdF81O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */";
@@ -14443,16 +14451,20 @@ var Checkbox = function (_a) {
   }))));
 };
 
-var _emotionSourceMap$s = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHNjcm9sbGFibGVDb250YWluZXI6IGNzcyh0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIDo6LXdlYmtpdC1zY3JvbGxiYXIge1xcbiAgICAgIGRpc3BsYXk6IG5vbmU7XFxuICAgIH1cXG4gICAgc2Nyb2xsYmFyLXdpZHRoOiBub25lO1xcbiAgXCJdLCBbXCJcXG4gICAgOjotd2Via2l0LXNjcm9sbGJhciB7XFxuICAgICAgZGlzcGxheTogbm9uZTtcXG4gICAgfVxcbiAgICBzY3JvbGxiYXItd2lkdGg6IG5vbmU7XFxuICBcIl0pKSksXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */";
+var _emotionSourceMap$s = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMEQiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHNjcm9sbGFibGVDb250YWluZXI6IGZ1bmN0aW9uIChoYXNTY3JvbGxCYXIpIHsgcmV0dXJuIGNzcyh0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIDo6LXdlYmtpdC1zY3JvbGxiYXIge1xcbiAgICAgIGRpc3BsYXk6IFwiLCBcIjtcXG4gICAgfVxcbiAgXCJdLCBbXCJcXG4gICAgOjotd2Via2l0LXNjcm9sbGJhciB7XFxuICAgICAgZGlzcGxheTogXCIsIFwiO1xcbiAgICB9XFxuICBcIl0pKSwgaGFzU2Nyb2xsQmFyID8gJ2F1dG8nIDogJ25vbmUnKTsgfSxcclxufTtcclxudmFyIHRlbXBsYXRlT2JqZWN0XzE7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */";
 var styles$r = {
-  scrollableContainer: /*#__PURE__*/css(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    ::-webkit-scrollbar {\n      display: none;\n    }\n    scrollbar-width: none;\n  ;label:scrollableContainer;" + _emotionSourceMap$s], ["\n    ::-webkit-scrollbar {\n      display: none;\n    }\n    scrollbar-width: none;\n  ;label:scrollableContainer;" + _emotionSourceMap$s])))
+  scrollableContainer: function (hasScrollBar) {
+    return /*#__PURE__*/css(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    ::-webkit-scrollbar {\n      display: ", ";\n    }\n  " + _emotionSourceMap$s], ["\n    ::-webkit-scrollbar {\n      display: ", ";\n    }\n  " + _emotionSourceMap$s])), hasScrollBar ? 'auto' : 'none');
+  }
 };
 var templateObject_1$s;
 
 var Scrollable = function (_a) {
   var maxHeight = _a.maxHeight,
       onChange = _a.onChange,
-      children = _a.children;
+      children = _a.children,
+      _b = _a.hasScrollBar,
+      hasScrollBar = _b === void 0 ? true : _b;
   var ref = useRef(null);
   var elementScroll = useElementScroll(ref);
   var scrollYProgress = (process.env.NODE_ENV === 'test' ? {
@@ -14481,7 +14493,7 @@ var Scrollable = function (_a) {
       bottom: 'x2'
     },
     overflow: "auto",
-    css: styles$r.scrollableContainer
+    css: styles$r.scrollableContainer(hasScrollBar)
   }, children);
 };
 
@@ -17593,7 +17605,9 @@ var templateObject_1$e, templateObject_2$5;
 
 var AccordionContent = function (_a) {
   var children = _a.children,
-      onAnimationComplete = _a.onAnimationComplete;
+      onAnimationComplete = _a.onAnimationComplete,
+      _b = _a.inset,
+      inset = _b === void 0 ? 'x2_5' : _b;
   return jsx(Div, {
     key: "content",
     initial: "collapsed",
@@ -17617,7 +17631,7 @@ var AccordionContent = function (_a) {
     css: styles$e.accordionBody,
     onAnimationComplete: onAnimationComplete
   }, jsx(Flex, {
-    inset: "x2_5",
+    inset: inset !== null && inset !== void 0 ? inset : inset,
     justifyContent: "flex-start",
     alignItems: "center",
     variants: {
@@ -17659,8 +17673,9 @@ var AccordionHeading = function (_a) {
   var children = _a.children,
       eventKey = _a.eventKey,
       headingSize = _a.headingSize,
-      hasArrows = _a.hasArrows,
-      onHeadingClick = _a.onHeadingClick;
+      onHeadingClick = _a.onHeadingClick,
+      _b = _a.arrowLocation,
+      arrowLocation = _b === void 0 ? 'right' : _b;
   var context = useContext(AccordionContext);
   var isActive = context.activeIndexes.some(function (i) {
     return i === eventKey;
@@ -17703,8 +17718,9 @@ var AccordionHeading = function (_a) {
     cursor: "pointer",
     inset: "x1_5",
     position: "relative",
-    zIndex: 5
-  }, hasArrows && jsx(Span, {
+    zIndex: 5,
+    flexDirection: arrowLocation === 'left' ? 'row' : 'row-reverse'
+  }, arrowLocation !== 'none' && jsx(Span, {
     cursor: "pointer",
     display: "flex",
     justifyContent: "center",
@@ -17733,11 +17749,15 @@ var Accordion = function (_a) {
       _d = _a.isExclusive,
       isExclusive = _d === void 0 ? false : _d,
       background = _a.background,
-      _e = _a.hasArrows,
-      hasArrows = _e === void 0 ? true : _e,
-      _f = _a.isHeadingBackgroundInverse,
-      isHeadingBackgroundInverse = _f === void 0 ? false : _f,
-      stateOverride = _a.stateOverride;
+      _e = _a.isHeadingBackgroundInverse,
+      isHeadingBackgroundInverse = _e === void 0 ? false : _e,
+      stateOverride = _a.stateOverride,
+      _f = _a.inset,
+      inset = _f === void 0 ? {
+    vertical: 'x2',
+    horizontal: 'x1'
+  } : _f,
+      arrowLocation = _a.arrowLocation;
   var defaultActiveIndexes = isExclusive ? defaultActiveKeys ? [defaultActiveKeys[0]] : [-1] : defaultActiveKeys ? __spreadArrays(defaultActiveKeys) : [-1];
 
   var _g = useState(defaultActiveIndexes),
@@ -17753,10 +17773,7 @@ var Accordion = function (_a) {
   return jsx(Div, {
     backgroundColor: background,
     borderRadius: "medium",
-    inset: {
-      vertical: 'x2',
-      horizontal: 'x1'
-    }
+    inset: inset
   }, jsx(AccordionContext.Provider, {
     value: {
       activeIndexes: (_b = stateOverride === null || stateOverride === void 0 ? void 0 : stateOverride.activeIndexes) !== null && _b !== void 0 ? _b : activeIndexes,
@@ -17770,7 +17787,7 @@ var Accordion = function (_a) {
       css: styles$e.accordionContainer
     }, jsx(AccordionHeading, {
       eventKey: section.key,
-      hasArrows: hasArrows,
+      arrowLocation: arrowLocation,
       isBackgroundInverse: isHeadingBackgroundInverse,
       onHeadingClick: section.onHeadingClick
     }, section.heading), jsx(AccordionBody, {
@@ -21521,15 +21538,8 @@ var UpsaleOptions = function (_a) {
       removeSelectedOption = _a.removeSelectedOption,
       showCheckoutView = _a.showCheckoutView,
       handleShouldShowCheckoutView = _a.handleShouldShowCheckoutView,
-      children = _a.children;
-
-  var findOption = function (selectedOption) {
-    return selectableOptions.filter(function (option) {
-      return option.optionId === selectedOption;
-    });
-  };
-
-  var activeSelectedOption = findOption(selectedOption);
+      children = _a.children,
+      activeSelectedOption = _a.activeSelectedOption;
   var shouldShowCheckoutScreen = selectedOption && showCheckoutView;
   return jsx(Div, {
     height: "100%",
@@ -21537,6 +21547,9 @@ var UpsaleOptions = function (_a) {
     width: "100%"
   }, jsx(Div, null, shouldShowCheckoutScreen && // Back Button
   jsx(Div, {
+    outset: {
+      top: 'x4'
+    },
     position: "relative",
     bottom: "25px",
     right: "7px",
@@ -21568,33 +21581,21 @@ var UpsaleOptions = function (_a) {
     space: "x2"
   })), jsx(VStack, {
     gap: "x2"
-  }, shouldShowCheckoutScreen ? jsx(Div, null, jsx(RadioOptionCard, _extends({}, activeSelectedOption[0], {
+  }, shouldShowCheckoutScreen && activeSelectedOption ? jsx(Div, null, jsx(RadioOptionCard, _extends({}, activeSelectedOption, {
     isSelected: true
   })), children) : jsx(VStack, {
     gap: "x2"
   }, selectableOptions.map(function (option, index) {
+    var _a;
+
     return jsx(RadioOptionCard, _extends({}, option, {
       key: index,
       onSelect: function () {
         return handleSelectedOption(option.optionId);
       },
-      isSelected: activeSelectedOption && selectedOption === option.optionId
+      isSelected: (_a = (activeSelectedOption && selectedOption) === option.optionId) !== null && _a !== void 0 ? _a : false
     }));
-  }))), !shouldShowCheckoutScreen && jsx(Flex, {
-    width: '100%',
-    justifyContent: "center",
-    alignItems: "center",
-    style: {
-      margin: '1.5rem auto'
-    }
-  }, jsx(Button, {
-    size: "large",
-    title: "Continue to Checkout",
-    disabled: !activeSelectedOption.length,
-    onClick: function () {
-      return handleShouldShowCheckoutView(!!activeSelectedOption.length);
-    }
-  }))));
+  })))));
 };
 
 var SOC_FRONT_Z_INDEX = 103;
@@ -21604,14 +21605,10 @@ var UpsaleDialog = function (_a) {
       checkoutTitle = _a.checkoutTitle,
       checkoutDescription = _a.checkoutDescription,
       selectableOptions = _a.selectableOptions,
-      numSelectableOptionsShown = _a.numSelectableOptionsShown,
       isOpen = _a.isOpen,
       setIsDialogOpen = _a.setIsDialogOpen,
-      _b = _a.optionFormLocation,
-      optionFormLocation = _b === void 0 ? 'right' : _b,
       submitAction = _a.submitAction,
       upsaleContent = _a.upsaleContent,
-      extraLink = _a.extraLink,
       children = _a.children,
       selectedOption = _a.selectedOption,
       handleSelectedOption = _a.handleSelectedOption,
@@ -21619,10 +21616,13 @@ var UpsaleDialog = function (_a) {
       insetOverride = _a.insetOverride,
       maxWidth = _a.maxWidth,
       maxHeight = _a.maxHeight,
-      _c = _a.zIndex,
-      zIndex = _c === void 0 ? SOC_FRONT_Z_INDEX : _c,
+      _b = _a.zIndex,
+      zIndex = _b === void 0 ? SOC_FRONT_Z_INDEX : _b,
       //Soc-frontend
-  successComponent = _a.successComponent;
+  successComponent = _a.successComponent,
+      upsaleContentTitle = _a.upsaleContentTitle,
+      _c = _a.sponsorId,
+      sponsorId = _c === void 0 ? '9070' : _c;
 
   var _d = React.useState(false),
       shouldShowCheckoutView = _d[0],
@@ -21636,6 +21636,14 @@ var UpsaleDialog = function (_a) {
   var dialogFooterHeight = '170px';
   var device = useWindowSize().width;
   var isMobile = device <= 910;
+
+  var findOption = function (selectedOption) {
+    return selectableOptions.filter(function (option) {
+      return option.optionId === selectedOption;
+    });
+  };
+
+  var activeSelectedOption = findOption(selectedOption);
   return jsx(Dialog, {
     ref: ref,
     isOpen: isOpen,
@@ -21646,7 +21654,8 @@ var UpsaleDialog = function (_a) {
     insetOverride: insetOverride,
     maxWidth: maxWidth,
     maxHeight: maxHeight,
-    height: isMobile ? 'unset' : '80%'
+    height: isMobile ? 'unset' : '80%',
+    shouldScroll: true
   }, successComponent ? jsx(Flex, {
     width: width + "px",
     height: height + "px",
@@ -21688,17 +21697,17 @@ var UpsaleDialog = function (_a) {
     overflowY: "hidden",
     flexDirection: isMobile ? 'column' : 'row'
   }, jsx(Flex, {
+    flexWrap: "wrap",
     inset: {
       top: 'x3',
       horizontal: 'x3'
     },
     overflowY: "auto",
     width: isMobile ? '100%' : 'calc(50% - 12px)',
-    order: optionFormLocation === 'left' && !isMobile ? 1 : isMobile ? 1 : 3
+    order: 3
   }, jsx(UpsaleOptions, {
     selectableOptions: selectableOptions,
     selectedOption: selectedOption,
-    submitAction: submitAction,
     handleSelectedOption: function (optionId) {
       return handleSelectedOption(optionId);
     },
@@ -21707,23 +21716,74 @@ var UpsaleDialog = function (_a) {
     handleShouldShowCheckoutView: function (value) {
       return setShouldShowCheckoutView(value);
     },
-    extraLink: extraLink,
-    numSelectableOptionsShown: numSelectableOptionsShown
-  }, children)), !isMobile && jsx(Div, {
+    activeSelectedOption: activeSelectedOption[0]
+  }, children), jsx(Flex, {
+    justifyContent: "center",
+    position: isMobile ? 'fixed' : 'relative',
+    bottom: isMobile ? '0' : 'unset',
+    height: "100px",
+    alignItems: "center",
+    width: "100%",
+    backgroundColor: isMobile ? 'foreground' : undefined,
+    boxShadow: isMobile ? 'mediumDark' : undefined,
+    zIndex: SOC_FRONT_Z_INDEX,
+    left: "0"
+  }, jsx(Button, {
+    type: shouldShowCheckoutView && submitAction.type ? submitAction.type : 'primary',
+    size: "large",
+    title: shouldShowCheckoutView ? submitAction.title : 'Continue to Checkout',
+    disabled: shouldShowCheckoutView ? submitAction.isDisabled : !selectedOption.length,
+    onClick: shouldShowCheckoutView && submitAction ? function () {
+      return submitAction.onClick();
+    } : function () {
+      return setShouldShowCheckoutView(true);
+    }
+  }))), !isMobile && jsx(Div, {
     width: "x3",
     order: 2
   }), jsx(Flex, {
     overflowY: "auto",
     width: isMobile ? '100%' : 'calc(50% - 12px)',
-    order: optionFormLocation === 'left' && !isMobile ? 3 : isMobile ? 3 : 1
-  }, upsaleContent))), jsx(Div, {
+    order: 1
+  }, jsx(Div, {
+    width: "100%"
+  }, jsx(Accordion, {
+    defaultActiveKeys: [1],
+    arrowLocation: "right",
+    background: "background",
+    inset: "x0",
+    isExclusive: true,
+    sections: [{
+      body: jsx(React.Fragment, null, upsaleContent),
+      heading: jsx(Div, {
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, jsx(Text, {
+        weight: "bold",
+        type: "caption",
+        content: upsaleContentTitle
+      }), jsx(Div, {
+        width: "34px",
+        height: "34px",
+        borderRadius: "small",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        outset: {
+          right: 'x2'
+        }
+      })),
+      key: 1
+    }]
+  }))))), jsx(Div, {
     backgroundColor: "foreground",
     width: device <= 1367 ? '100%' : 'calc(100% - 10rem)',
-    position: "absolute",
-    inset: {
+    position: isMobile ? 'relative' : 'absolute',
+    bottom: isMobile ? dialogFooterHeight : 'x0',
+    inset: isMobile ? 'x1' : {
       bottom: 'x4'
     },
-    bottom: '0px',
     left: "50%",
     transform: "translateX(-50%)"
   }, jsx(Separator, {
@@ -21744,7 +21804,7 @@ var UpsaleDialog = function (_a) {
     size: "medium",
     title: "Send a Free Postcard",
     onClick: function () {
-      return console.log('Send user to https://www.sendoutcards.com/<affiliateID>/send/');
+      return window.open("https://www.sendoutcards.com/" + sponsorId + "/send/");
     }
   })))));
 };
@@ -21754,7 +21814,7 @@ var ComparisonIncludesList = function (_a) {
       isMinified = _a.isMinified;
   return jsx(Card, {
     backgroundColor: "background",
-    inset: '3rem'
+    inset: '1.5rem'
   }, jsx(Div, {
     width: "100%"
   }, jsx(VStack, {
@@ -22898,27 +22958,27 @@ var PaperTypeModal = function (_a) {
 };
 
 var comparisonItems37 = [{
+  title: '30 Monthly Card Sends (includes both Heartfelt and System Sends)',
+  description: '$1.75 for each additional card over 30. Postage not included on any card sends',
+  isIncluded: true
+}, {
   title: 'Contact Manager',
   description: 'Keep track of birthdays, special occasions, reminders, include notes if you choose, and get a history of every card sent.',
   isIncluded: true
 }, {
-  title: 'UNLIMITED Photo Postcards!',
+  title: 'Unlimited Photo Postcards',
   description: 'Send Unlimited 4x6 postcards - stamps included, mailed out when you hit SEND!',
   isIncluded: false
 }, {
-  title: 'UNLIMITED Heartfelt Prompting Cards!',
+  title: 'Unlimited Heartfelt Prompting cards',
   description: 'Send unlimited 5x7 greeting cards, stamps included. Mailed for you. Immediately!',
   isIncluded: false
 }, {
-  title: '30 Automated Card sends!',
-  description: 'Our Automated sending process does all the work for you, schedule, send to one or multiple people, even take advantage of our drip campaign feature!',
-  isIncluded: false
-}, {
-  title: '30% off gifts',
+  title: '20% off gifts',
   description: '',
-  isIncluded: false
+  isIncluded: true
 }, {
-  title: '30% shipping',
+  title: '30% off shipping',
   description: '',
   isIncluded: false
 }];
@@ -22943,7 +23003,7 @@ var comparisonItems97 = [{
   description: '',
   isIncluded: true
 }, {
-  title: '30% shipping',
+  title: '30% off shipping',
   description: '',
   isIncluded: true
 }];
@@ -22954,21 +23014,22 @@ var SubscriptionUpsaleDialog = function (_a) {
       checkoutTitle = _a.checkoutTitle,
       checkoutDescription = _a.checkoutDescription,
       selectableOptions = _a.selectableOptions,
-      numSelectableOptionsShown = _a.numSelectableOptionsShown,
+      upsaleContentTitle = _a.upsaleContentTitle,
       isOpen = _a.isOpen,
       setIsDialogOpen = _a.setIsDialogOpen,
       _b = _a.optionFormLocation,
       optionFormLocation = _b === void 0 ? 'right' : _b,
       submitAction = _a.submitAction,
-      extraLink = _a.extraLink,
       children = _a.children,
       selectedOption = _a.selectedOption,
       removeSelectedOption = _a.removeSelectedOption,
       successComponent = _a.successComponent,
       insetOverride = _a.insetOverride,
-      handleSelectedOption = _a.handleSelectedOption;
+      handleSelectedOption = _a.handleSelectedOption,
+      sponsorId = _a.sponsorId;
   var device = useWindowSize().width;
   return jsx("div", null, jsx(UpsaleDialog, {
+    sponsorId: sponsorId,
     title: title,
     description: description,
     checkoutTitle: checkoutTitle,
@@ -22980,8 +23041,7 @@ var SubscriptionUpsaleDialog = function (_a) {
     },
     submitAction: submitAction,
     removeSelectedOption: removeSelectedOption,
-    extraLink: extraLink,
-    numSelectableOptionsShown: numSelectableOptionsShown,
+    upsaleContentTitle: upsaleContentTitle,
     upsaleContent: jsx(ComparisonIncludesList, {
       isMinified: device <= 1017,
       items: selectedOption === '324132' //this is the item code for the 37 subscription

package/dist/src/molecules/dialog/dialog.d.ts

@@ -11,6 +11,7 @@ export declare type DialogProps = {
     closeButtonId?: string;
     insetOverride?: HOCSpacingKeys;
     height?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    shouldScroll?: boolean;
 };
 export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
     children: React.ReactNode;

package/dist/src/molecules/scrollable/scrollable.d.ts

@@ -2,5 +2,6 @@ import { FC } from 'react';
 export declare type ScrollableProps = {
     maxHeight?: number;
     onChange?: (progress: number) => void;
+    hasScrollBar?: boolean;
 };
 export declare const Scrollable: FC<ScrollableProps>;

package/dist/src/molecules/scrollable/styles.d.ts

@@ -1,4 +1,4 @@
 declare const _default: {
-    scrollableContainer: import("@emotion/utils").SerializedStyles;
+    scrollableContainer: (hasScrollBar?: boolean | undefined) => import("@emotion/utils").SerializedStyles;
 };
 export default _default;

package/dist/src/organisms/accordion/accordion.d.ts

@@ -1,17 +1,19 @@
 import React, { FC } from 'react';
+import { HOCSpacingKeys } from "../../helpers/hoc-types/entityValueTypes";
 export declare type AccordionProps = {
     defaultActiveKeys?: (number | string)[];
     isExclusive?: boolean;
     sections: AccordionSection[];
     background?: 'background' | 'foreground';
     isHeadingBackgroundInverse?: boolean;
-    hasArrows?: boolean;
+    arrowLocation?: 'right' | 'left';
     /** Make sure duplicate keys are not created in the state if you are overriding */
     /** TODO - Handle duplicate case in QDS and remove them  */
     stateOverride?: {
         activeIndexes: (string | number)[];
         setActiveIndexes: (activeIndexes: (string | number)[]) => void;
     };
+    inset?: HOCSpacingKeys;
 };
 export declare type AccordionSection = {
     key: number | string;

package/dist/src/organisms/accordion/components/accordionHeading.d.ts

@@ -4,7 +4,7 @@ export declare type AccordionHeadingProps = {
     eventKey: number | string;
     headingSize?: SizeType;
     background?: 'background' | 'foreground';
-    hasArrows: boolean;
+    arrowLocation?: 'right' | 'left' | 'none';
     isBackgroundInverse?: boolean;
     onHeadingClick?: () => void;
 };

package/dist/src/organisms/upsaleDialog/upsaleDialog.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { OptionSubmitType } from "../../exports/organisms";
+import { ButtonType } from "../../exports/molecules";
 import { UpsaleOptionsType } from './upsaleOptions';
 import { Responsive, LiteralUnion, HOCSpacingKeys } from "../../helpers/hoc-types/entityValueTypes";
 export declare type UpsaleDialogProps = {
@@ -7,7 +7,12 @@ export declare type UpsaleDialogProps = {
     description: string;
     checkoutTitle: string;
     checkoutDescription: string;
-    submitAction: OptionSubmitType;
+    submitAction: {
+        title: string;
+        isDisabled: boolean;
+        onClick: () => void;
+        type?: ButtonType;
+    };
     upsaleContent: React.ReactNode;
     optionFormLocation?: 'right' | 'left';
     isOpen: boolean;
@@ -19,5 +24,7 @@ export declare type UpsaleDialogProps = {
     zIndex?: number;
     insetOverride?: HOCSpacingKeys;
     successComponent?: React.ReactNode;
+    upsaleContentTitle?: string;
+    sponsorId?: string;
 } & UpsaleOptionsType;
 export declare const UpsaleDialog: FC<UpsaleDialogProps>;

package/dist/src/organisms/upsaleDialog/upsaleOptions.d.ts

@@ -1,25 +1,17 @@
 import React, { FC } from 'react';
-import { OptionSubmitType } from "../../exports/organisms";
 export declare type UpsaleOptionType = {
     title: string;
     subtitle?: string;
     optionId: string;
     isFeatured?: boolean;
 };
-declare type ExtraLinkType = {
-    title: string;
-    onClick?: () => void;
-    href?: string;
-};
 export declare type UpsaleOptionsType = {
     selectableOptions: UpsaleOptionType[];
     selectedOption: string;
     handleSelectedOption: (optionId: string) => void;
     removeSelectedOption: () => void;
-    submitAction: OptionSubmitType;
-    extraLink?: ExtraLinkType;
-    numSelectableOptionsShown?: number;
     children: React.ReactNode;
+    activeSelectedOption?: UpsaleOptionType;
 };
 declare type UpsaleOptionsProps = UpsaleOptionsType & {
     showCheckoutView: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.7.36",
+  "version": "1.7.40",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",