@sendoutcards/quantum-design-ui 1.6.5 → 1.6.9

package/dist/index.es.js

@@ -8,7 +8,7 @@ import LazyLoad from 'react-lazyload';
 import useResizeObserver from 'use-resize-observer';
 import ContentLoader from 'react-content-loader';
 import InfiniteScroll from 'react-infinite-scroller';
-import { Page as Page$1 } from 'framer';
+import { Page as Page$1, AnimatePresence as AnimatePresence$1 } from 'framer';
 import { HexColorPicker } from 'react-colorful';
 import { EyeDropper } from 'react-eyedrop';
 
@@ -10990,22 +10990,7 @@ var Text = function (_a) {
 };
 
 var mapSizeType = function (size, sizeMap) {
-  switch (size) {
-    case 'xSmall':
-      return sizeMap.xSmall;
-
-    case 'small':
-      return sizeMap.small;
-
-    case 'medium':
-      return sizeMap.medium;
-
-    case 'large':
-      return sizeMap.large;
-
-    case 'xLarge':
-      return sizeMap.xLarge;
-  }
+  return sizeMap[size];
 };
 
 var computeTextTypeFromIconLinkSize = function (size) {
@@ -11324,9 +11309,33 @@ var styles$H = {
 };
 var templateObject_1$J;
 
+var convertTextColorToIconColor = function (textColor) {
+  switch (textColor) {
+    case 'primaryBody':
+      return 'primaryBodyText';
+
+    case 'primaryHeading':
+      return 'primaryHeadingText';
+
+    case 'inverseBody':
+      return 'inverseBodyText';
+
+    case 'inverseHeading':
+      return 'inverseHeadingText';
+
+    default:
+      return textColor;
+  }
+};
+
 var Badge = function (_a) {
   var item = _a.item,
-      backgroundColor = _a.backgroundColor;
+      backgroundColor = _a.backgroundColor,
+      icon = _a.icon,
+      _b = _a.size,
+      size = _b === void 0 ? 'small' : _b,
+      _c = _a.color,
+      color = _c === void 0 ? 'inverseBody' : _c;
 
   var parseItem = function (item) {
     var toInt = parseInt(item);
@@ -11352,9 +11361,21 @@ var Badge = function (_a) {
       horizontal: 'x_5'
     } : 'x0',
     borderRadius: "small"
-  }, jsx(Text, {
+  }, icon && jsx(Div, {
+    alignItems: "center",
+    style: {
+      lineHeight: 0
+    },
+    inset: {
+      right: 'x1'
+    }
+  }, jsx(Icon, {
+    name: icon,
+    primaryColor: convertTextColorToIconColor(color),
+    size: size
+  })), jsx(Text, {
     type: "footnote",
-    color: "inverseBody",
+    color: color,
     weight: 'semiBold'
   }, parseItem(item)));
 };
@@ -11401,12 +11422,12 @@ var Bar = function (_a) {
   });
 };
 
-var _emotionSourceMap2$r = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJd0QiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIGZsZXhTdHlsZXM6IGZ1bmN0aW9uIChnZW5lcmF0ZWRTdHlsZXMpIHsgcmV0dXJuIGNzcyh0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIFwiLCBcIlxcbiAgICBmb250LXNpemU6IGluaGVyaXQ7XFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICBcIl0sIFtcIlxcbiAgICBcIiwgXCJcXG4gICAgZm9udC1zaXplOiBpbmhlcml0O1xcbiAgICBkaXNwbGF5OiBmbGV4O1xcbiAgXCJdKSksIGdlbmVyYXRlZFN0eWxlcyk7IH0sXHJcbiAgICBmbGV4SXRlbVN0eWxlczogZnVuY3Rpb24gKGdlbmVyYXRlZFN0eWxlcykgeyByZXR1cm4gY3NzKHRlbXBsYXRlT2JqZWN0XzIgfHwgKHRlbXBsYXRlT2JqZWN0XzIgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgXCIsIFwiXFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgXCJdLCBbXCJcXG4gICAgXCIsIFwiXFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgXCJdKSksIGdlbmVyYXRlZFN0eWxlcyk7IH0sXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xLCB0ZW1wbGF0ZU9iamVjdF8yO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */";
+var _emotionSourceMap2$r = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJd0QiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIGZsZXhTdHlsZXM6IGZ1bmN0aW9uIChnZW5lcmF0ZWRTdHlsZXMpIHsgcmV0dXJuIGNzcyh0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIFwiLCBcIlxcbiAgICBmb250LXNpemU6IGluaGVyaXQ7XFxuICBcIl0sIFtcIlxcbiAgICBcIiwgXCJcXG4gICAgZm9udC1zaXplOiBpbmhlcml0O1xcbiAgXCJdKSksIGdlbmVyYXRlZFN0eWxlcyk7IH0sXHJcbiAgICBmbGV4SXRlbVN0eWxlczogZnVuY3Rpb24gKGdlbmVyYXRlZFN0eWxlcykgeyByZXR1cm4gY3NzKHRlbXBsYXRlT2JqZWN0XzIgfHwgKHRlbXBsYXRlT2JqZWN0XzIgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgXCIsIFwiXFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgXCJdLCBbXCJcXG4gICAgXCIsIFwiXFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgXCJdKSksIGdlbmVyYXRlZFN0eWxlcyk7IH0sXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xLCB0ZW1wbGF0ZU9iamVjdF8yO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */";
 
-var _emotionSourceMap$H = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0QiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIGZsZXhTdHlsZXM6IGZ1bmN0aW9uIChnZW5lcmF0ZWRTdHlsZXMpIHsgcmV0dXJuIGNzcyh0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIFwiLCBcIlxcbiAgICBmb250LXNpemU6IGluaGVyaXQ7XFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICBcIl0sIFtcIlxcbiAgICBcIiwgXCJcXG4gICAgZm9udC1zaXplOiBpbmhlcml0O1xcbiAgICBkaXNwbGF5OiBmbGV4O1xcbiAgXCJdKSksIGdlbmVyYXRlZFN0eWxlcyk7IH0sXHJcbiAgICBmbGV4SXRlbVN0eWxlczogZnVuY3Rpb24gKGdlbmVyYXRlZFN0eWxlcykgeyByZXR1cm4gY3NzKHRlbXBsYXRlT2JqZWN0XzIgfHwgKHRlbXBsYXRlT2JqZWN0XzIgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgXCIsIFwiXFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgXCJdLCBbXCJcXG4gICAgXCIsIFwiXFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgXCJdKSksIGdlbmVyYXRlZFN0eWxlcyk7IH0sXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xLCB0ZW1wbGF0ZU9iamVjdF8yO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */";
+var _emotionSourceMap$H = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0QiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIGZsZXhTdHlsZXM6IGZ1bmN0aW9uIChnZW5lcmF0ZWRTdHlsZXMpIHsgcmV0dXJuIGNzcyh0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIFwiLCBcIlxcbiAgICBmb250LXNpemU6IGluaGVyaXQ7XFxuICBcIl0sIFtcIlxcbiAgICBcIiwgXCJcXG4gICAgZm9udC1zaXplOiBpbmhlcml0O1xcbiAgXCJdKSksIGdlbmVyYXRlZFN0eWxlcyk7IH0sXHJcbiAgICBmbGV4SXRlbVN0eWxlczogZnVuY3Rpb24gKGdlbmVyYXRlZFN0eWxlcykgeyByZXR1cm4gY3NzKHRlbXBsYXRlT2JqZWN0XzIgfHwgKHRlbXBsYXRlT2JqZWN0XzIgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgXCIsIFwiXFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgXCJdLCBbXCJcXG4gICAgXCIsIFwiXFxuICAgIGRpc3BsYXk6IGZsZXg7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgXCJdKSksIGdlbmVyYXRlZFN0eWxlcyk7IH0sXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xLCB0ZW1wbGF0ZU9iamVjdF8yO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */";
 var styles$F = {
   flexStyles: function (generatedStyles) {
-    return /*#__PURE__*/css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    ", "\n    font-size: inherit;\n    display: flex;\n  " + _emotionSourceMap$H], ["\n    ", "\n    font-size: inherit;\n    display: flex;\n  " + _emotionSourceMap$H])), generatedStyles);
+    return /*#__PURE__*/css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    ", "\n    font-size: inherit;\n  " + _emotionSourceMap$H], ["\n    ", "\n    font-size: inherit;\n  " + _emotionSourceMap$H])), generatedStyles);
   },
   flexItemStyles: function (generatedStyles) {
     return /*#__PURE__*/css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n    ", "\n    display: flex;\n    width: 100%;\n  " + _emotionSourceMap2$r], ["\n    ", "\n    display: flex;\n    width: 100%;\n  " + _emotionSourceMap2$r])), generatedStyles);
@@ -11416,12 +11437,19 @@ var templateObject_1$H, templateObject_2$r;
 
 var Flex = function (props) {
   var entities = useEntities();
-  var generatedDivStyles = generateStyles(props, entities);
+
+  var _a = props.display,
+      display = _a === void 0 ? 'flex' : _a,
+      rest = __rest(props, ["display"]);
+
+  var generatedDivStyles = generateStyles(__assign({
+    display: display
+  }, rest), entities);
   var ref = useRef(null);
   useOutsideClick(ref, function () {
     props.outsideClick && props.outsideClick();
   });
-  return jsx(motion.main, _extends({}, props, {
+  return jsx(motion.main, _extends({}, rest, {
     ref: ref,
     onClick: props.onMouseEvent ? function (e) {
       var _a;
@@ -11690,7 +11718,8 @@ var Tooltip = function (_a) {
       direction = _a.direction,
       _b = _a.background,
       background = _b === void 0 ? 'light' : _b,
-      repositionTooltip = _a.repositionTooltip;
+      repositionTooltip = _a.repositionTooltip,
+      zIndex = _a.zIndex;
   var tooltip = useEntities().tooltip;
   var backgroundColor = background === 'light' ? tooltip.lightBackgroundColor : tooltip.darkBackgroundColor ? tooltip.darkBackgroundColor : tooltip.lightBackgroundColor; // TODO this is because the dark bg color is set from a color swatch which can alter through the theme, come up with fix when colors get sorted out
 
@@ -11701,7 +11730,8 @@ var Tooltip = function (_a) {
       vertical: 'x_5',
       horizontal: 'x1'
     },
-    boxShadow: tooltip.boxShadow
+    boxShadow: tooltip.boxShadow,
+    zIndex: zIndex
   }, jsx(Text, {
     type: "footnote",
     color: background === 'light' ? 'primaryBody' : 'inverseBody',
@@ -12080,7 +12110,8 @@ var Overlay = function (_a) {
       exit = _a.exit,
       variants = _a.variants,
       transition = _a.transition,
-      motionKey = _a.motionKey;
+      motionKey = _a.motionKey,
+      position = _a.position;
   var hocs = useEntities().hocs;
   return jsx(Div, {
     motionKey: motionKey,
@@ -12093,7 +12124,7 @@ var Overlay = function (_a) {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    position: "fixed",
+    position: position !== null && position !== void 0 ? position : 'fixed',
     top: "0",
     left: "0",
     width: "100%",
@@ -16018,13 +16049,9 @@ var DownloadButton = function (_a) {
 var StackedCards = function (_a) {
   var size = _a.size,
       _b = _a.stackCount,
-      stackCount = _b === void 0 ? 7 : _b,
+      stackCount = _b === void 0 ? 3 : _b,
       children = _a.children;
   var stackCountArr = Array.from(Array(stackCount).keys());
-  var cardPositionStyles = {
-    position: 'absolute',
-    transformOrigin: 'center top'
-  };
 
   var getDimensionsFromSize = function () {
     if (typeof size === 'object') {
@@ -16054,217 +16081,98 @@ var StackedCards = function (_a) {
 
   return jsx(Flex, {
     position: "relative",
-    justifyContent: 'center',
-    alignContent: "center"
+    justifyContent: 'flex-start',
+    alignContent: "center",
+    width: getDimensionsFromSize().width + stackCountArr.length * 8 + "px",
+    height: getDimensionsFromSize().height + "px"
   }, stackCountArr.map(function (_, index) {
-    var offset = 11 - stackCountArr.length;
-    return jsx(Card, _extends({
+    index += 1;
+    return jsx(Card, {
       key: index,
       backgroundColor: "foreground",
-      style: {
-        padding: 0
-      },
       width: getDimensionsFromSize().width + "px",
       height: getDimensionsFromSize().height + "px",
-      transform: "scale(" + (index + offset) / 10 + ") translate(100%, -50%)"
-    }, cardPositionStyles), index === stackCountArr.length - 1 && children);
+      style: {
+        scale: 1 - index / 10,
+        translateY: '-50%'
+      },
+      position: "absolute",
+      left: index * 8 + "px",
+      top: '50%',
+      boxShadow: "mediumLight",
+      zIndex: stackCountArr.length - index
+    }, index === stackCountArr.length - 1 && children);
   }));
 };
 
 var ConfigurationCard = function (_a) {
-  var _b = _a.graphic,
-      graphic = _b === void 0 ? 'addressed' : _b,
-      _c = _a.title,
-      title = _c === void 0 ? 'Blank Envelopes' : _c,
-      _d = _a.description,
-      description = _d === void 0 ? 'Address and send yourself' : _d,
-      _e = _a.cost,
-      cost = _e === void 0 ? 0.29 : _e,
+  var graphic = _a.graphic,
+      title = _a.title,
+      description = _a.description,
+      cost = _a.cost,
       isSelected = _a.isSelected,
       onSelect = _a.onSelect,
-      _f = _a.layout,
-      layout = _f === void 0 ? 'horizontal' : _f,
-      configurationId = _a.configurationId;
-
-  var handleIsSelected = function () {
-    onSelect(configurationId);
-  };
-
-  return jsx(Flex, {
-    onClick: handleIsSelected,
+      _b = _a.layout,
+      layout = _b === void 0 ? 'horizontal' : _b,
+      configurationId = _a.configurationId,
+      itemPriceTitle = _a.itemPriceTitle;
+  var hasNoGraphic = graphic !== 'none';
+  return jsx(Card, {
+    onClick: function () {
+      return onSelect(configurationId);
+    },
     width: layout === 'horizontal' ? '100%' : 'initial',
     flexDirection: layout === 'vertical' ? 'column' : 'row',
-    position: "relative"
-  }, isSelected && jsx(Div, {
-    right: "x1",
-    position: "absolute",
-    top: "x1"
-  }, jsx(AnimatedCheckMark, null)), jsx(Div, {
+    position: "relative",
+    boxShadow: "mediumDark",
+    backgroundColor: graphic === 'none' ? 'background' : 'foreground',
+    cursor: "pointer",
+    inset: {
+      vertical: 'x4',
+      horizontal: 'x1'
+    },
+    borderWidth: "default",
+    borderRadius: "default",
     borderStyle: "solid",
     borderColor: isSelected ? {
       swatch: 'success',
       shade: 'base'
     } : 'transparent',
-    borderWidth: "default",
-    borderRadius: "default",
-    width: "100%",
-    height: "100%",
-    boxShadow: "mediumDark",
-    inset: {
-      left: 'x2',
-      vertical: 'x4'
-    }
-  }, jsx(Flex, {
-    justifyContent: "space-between",
-    height: "100%"
-  }, jsx(HStack, {
-    justify: "flex-start",
-    gap: "x3"
+    minWidth: "420px"
   }, jsx(Div, {
-    height: "100%"
-  }, jsx(Card, {
-    width: "75px",
-    height: "50px"
-  }, graphic)), jsx(Div, null, jsx(Text, {
-    weight: "bold",
-    type: "largeBody"
-  }, title, jsx(Text, {
-    type: "footnote"
-  }, description)))), jsx(Div, {
-    outset: "x2",
-    position: "relative",
-    justifyContent: "flex-end"
-  }, cost && jsx(Div, {
-    width: "100%"
-  }, jsx(Text, {
-    type: "caption"
-  }, "$", cost, " per envelope"))))));
-};
-
-var QuantitySlider = function (_a) {
-  var quantity = _a.quantity,
-      min = _a.min,
-      max = _a.max,
-      setQuantity = _a.setQuantity,
-      salePrice = _a.salePrice,
-      unitPrice = _a.unitPrice,
-      sliderFill = _a.sliderFill,
-      quantityDescription = _a.quantityDescription,
-      width = _a.width;
-  return jsx(Div, null, jsx(Text, {
-    type: "subtitle",
-    weight: "bold",
-    color: "primaryHeading",
-    content: quantity + " " + quantityDescription,
-    alignment: "center",
-    style: {
-      letterSpacing: '1px'
-    }
-  }), salePrice ? jsx(React.Fragment, null, jsx(Text, {
-    type: "caption",
-    color: "primaryHeading",
-    content: "Sale",
-    alignment: "center",
-    style: {
-      letterSpacing: '1px'
-    }
-  }), jsx(Flex, {
-    justifyContent: "center"
-  }, jsx(Spacer, {
-    orientation: "horizontal",
-    space: "x1"
-  }), jsx(Text, {
-    type: "caption",
-    color: "primaryHeading",
-    weight: "semiBold",
-    content: "$" + (unitPrice === null || unitPrice === void 0 ? void 0 : unitPrice.toFixed(2)),
-    isStrikeThrough: true,
-    alignment: "center",
-    style: {
-      letterSpacing: '1px'
-    }
-  }), jsx(Spacer, {
-    orientation: "horizontal",
-    space: "x1"
+    right: "x1",
+    position: "absolute",
+    top: "x1"
+  }, isSelected && hasNoGraphic ? jsx(AnimatedCheckMark, null) : (graphic === 'none' && !isSelected || isSelected) && jsx(Icon, {
+    name: "information",
+    size: "small",
+    primaryColor: "secondaryBrand"
+  })), jsx(Flex, {
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    flexDirection: layout === 'horizontal' ? 'row' : 'column'
+  }, jsx(StackedCards, {
+    size: "small",
+    stackCount: 3
   }), jsx(Text, {
-    type: "largeBody",
-    color: "danger",
     weight: "bold",
-    content: "$" + salePrice.toFixed(2) + " /each",
-    style: {
-      letterSpacing: '1px'
-    }
-  }))) : jsx(Text, {
-    type: "body",
-    color: "primaryHeading",
-    weight: "semiBold",
-    content: "$" + (unitPrice === null || unitPrice === void 0 ? void 0 : unitPrice.toFixed(2)) + " /each",
-    alignment: "center",
-    style: {
-      letterSpacing: '1px'
-    }
-  }), jsx(Slider, {
-    min: min,
-    max: max,
-    value: quantity,
-    setValue: function (quantity) {
-      return setQuantity(quantity);
-    },
-    width: width,
-    activeColor: sliderFill
-  }));
-};
-
-var FeatureBadge = function (_a) {
-  var title = _a.title,
-      backgroundColor = _a.backgroundColor,
-      iconColor = _a.iconColor,
-      textColor = _a.textColor,
-      size = _a.size,
-      icon = _a.icon,
-      onClick = _a.onClick;
-  return jsx(Flex, {
-    backgroundColor: backgroundColor ? {
-      swatch: backgroundColor,
-      shade: 'base'
-    } : {
-      swatch: 'success',
-      shade: 'base'
-    },
-    inset: icon ? {
-      left: 'x1',
-      vertical: 'x1',
-      right: 'x2'
-    } : 'x2',
-    borderRadius: "medium",
-    style: {
-      display: 'inline-flex'
-    },
-    justifyContent: "flex-start",
-    alignItems: "center",
-    onClick: onClick,
-    cursor: onClick ? 'pointer' : 'initial'
-  }, icon && jsx(Div, {
-    alignItems: "center",
-    style: {
-      lineHeight: 0
+    type: {
+      xSmall: 'body',
+      medium: 'largeBody'
     },
-    inset: {
-      right: 'x1'
-    }
-  }, jsx(Icon, {
-    name: icon,
-    primaryColor: iconColor !== null && iconColor !== void 0 ? iconColor : 'inverseHeadingText',
-    size: size !== null && size !== void 0 ? size : 'small'
-  })), jsx(Text, {
-    style: {
-      lineHeight: 0,
-      letterSpacing: 0.5
+    whiteSpace: "nowrap"
+  }, title, jsx(Text, {
+    type: {
+      xSmall: 'footnote',
+      medium: 'caption'
     },
-    type: "caption",
-    color: textColor !== null && textColor !== void 0 ? textColor : 'inverseHeading',
-    weight: "bold"
-  }, title));
+    whiteSpace: "nowrap"
+  }, description)), cost && jsx(Text, {
+    type: "footnote",
+    whiteSpace: "nowrap",
+    content: " $" + (typeof cost === 'number' ? "" + cost.toFixed(2) : cost) + " " + itemPriceTitle
+  })));
 };
 
 var _emotionSourceMap2$a = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHVzZXJDYXJkQ29udGFpbmVyOiBjc3ModGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICBkaXNwbGF5OiBmbGV4O1xcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XFxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XFxuICBcIl0sIFtcIlxcbiAgICBkaXNwbGF5OiBmbGV4O1xcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XFxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XFxuICBcIl0pKSksXHJcbiAgICB1c2VySW5mb0NvbnRhaW5lcjogY3NzKHRlbXBsYXRlT2JqZWN0XzIgfHwgKHRlbXBsYXRlT2JqZWN0XzIgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xcbiAgXCJdLCBbXCJcXG4gICAgcGFkZGluZy1sZWZ0OiAxNnB4O1xcbiAgXCJdKSkpLFxyXG59O1xyXG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */";
@@ -18474,6 +18382,7 @@ var Pill = function (_a) {
       items = _a.items,
       _b = _a.flexDirection,
       flexDirection = _b === void 0 ? 'row' : _b,
+      boxShadow = _a.boxShadow,
       children = _a.children;
 
   var _c = useState(-1),
@@ -18498,7 +18407,8 @@ var Pill = function (_a) {
     inset: {
       horizontal: 'x1'
     },
-    flexDirection: flexDirection
+    flexDirection: flexDirection,
+    boxShadow: boxShadow
   }, children, jsx(Flex, {
     flexDirection: "row"
   }, items.map(function (item, index) {
@@ -20184,14 +20094,16 @@ var PromotionWidget = function (_a) {
       _c = _a.width,
       width = _c === void 0 ? '100%' : _c,
       type = _a.type,
-      buttonSize = _a.buttonSize;
+      children = _a.children,
+      _d = _a.backgroundColor,
+      backgroundColor = _d === void 0 ? 'background' : _d;
   var widget = useEntities().widget;
   var widgetProperties = widget[type];
   return jsx(Card, {
     display: "flex",
     justifyItems: "start",
     borderRadius: "default",
-    backgroundColor: "background",
+    backgroundColor: backgroundColor,
     inset: "x4",
     width: width,
     minWidth: minWidth
@@ -20217,13 +20129,152 @@ var PromotionWidget = function (_a) {
     type: "caption"
   }, description)), jsx(Flex, {
     justifyContent: "flex-start"
-  }, jsx(Button, {
-    type: type,
+  }, primaryAction && jsx(Button, {
+    type: "success",
     onClick: function () {
       return primaryAction.onClick();
+    }
+  }, primaryAction.title), children)));
+};
+
+var QuantitySlider = function (_a) {
+  var quantity = _a.quantity,
+      min = _a.min,
+      max = _a.max,
+      setQuantity = _a.setQuantity,
+      salePrice = _a.salePrice,
+      unitPrice = _a.unitPrice,
+      sliderFill = _a.sliderFill,
+      quantityDescription = _a.quantityDescription,
+      width = _a.width,
+      hasIncrement = _a.hasIncrement;
+  return jsx(Flex, {
+    justifyContent: "center",
+    flexDirection: "column"
+  }, jsx(Text, {
+    type: "subtitle",
+    weight: "bold",
+    color: "primaryHeading",
+    content: quantity + " " + quantityDescription,
+    alignment: "center",
+    style: {
+      letterSpacing: '1px'
+    }
+  }), salePrice ? jsx(React.Fragment, null, jsx(Text, {
+    type: "caption",
+    color: "primaryHeading",
+    content: "Sale",
+    alignment: "center",
+    style: {
+      letterSpacing: '1px'
+    }
+  }), jsx(Flex, {
+    justifyContent: "center"
+  }, jsx(Spacer, {
+    orientation: "horizontal",
+    space: "x1"
+  }), jsx(Text, {
+    type: "caption",
+    color: "primaryHeading",
+    weight: "semiBold",
+    content: "$" + (unitPrice === null || unitPrice === void 0 ? void 0 : unitPrice.toFixed(2)),
+    isStrikeThrough: true,
+    alignment: "center",
+    style: {
+      letterSpacing: '1px'
+    }
+  }), jsx(Spacer, {
+    orientation: "horizontal",
+    space: "x1"
+  }), jsx(Text, {
+    type: "largeBody",
+    color: "danger",
+    weight: "bold",
+    content: "$" + salePrice.toFixed(2) + " /each",
+    style: {
+      letterSpacing: '1px'
+    }
+  }))) : jsx(Text, {
+    type: "body",
+    color: "primaryHeading",
+    weight: "semiBold",
+    content: "$" + (unitPrice === null || unitPrice === void 0 ? void 0 : unitPrice.toFixed(2)) + " /each",
+    alignment: "center",
+    style: {
+      letterSpacing: '1px'
+    }
+  }), hasIncrement ? jsx(Div, {
+    width: "370px"
+  }, jsx(Spacer, {
+    orientation: "vertical",
+    space: "x2"
+  }), jsx(IncrementSetting, {
+    title: "",
+    min: min,
+    max: max,
+    value: quantity,
+    layout: "inline",
+    setValue: function (quantity) {
+      return setQuantity(quantity);
+    },
+    activeColor: sliderFill,
+    inputWidth: width
+  })) : jsx(Slider, {
+    min: min,
+    max: max,
+    value: quantity,
+    setValue: function (quantity) {
+      return setQuantity(quantity);
+    },
+    width: width,
+    activeColor: sliderFill
+  }));
+};
+
+var FeatureBadge = function (_a) {
+  var title = _a.title,
+      _b = _a.backgroundColor,
+      backgroundColor = _b === void 0 ? 'success' : _b,
+      _c = _a.color,
+      color = _c === void 0 ? 'inverseBody' : _c,
+      size = _a.size,
+      icon = _a.icon,
+      onClick = _a.onClick;
+  var hocs = useEntities().hocs;
+  return jsx(Flex, {
+    backgroundColor: hocs.colors.swatches[backgroundColor].base,
+    inset: icon ? {
+      left: 'x1',
+      vertical: 'x1',
+      right: 'x2'
+    } : 'x2',
+    borderRadius: "medium",
+    display: "inline-flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'initial'
+  }, icon && jsx(Div, {
+    alignItems: "center",
+    style: {
+      lineHeight: 0
     },
-    size: buttonSize
-  }, primaryAction.title))));
+    inset: {
+      right: 'x1'
+    }
+  }, jsx(Icon, {
+    name: icon,
+    primaryColor: convertTextColorToIconColor(color),
+    size: size !== null && size !== void 0 ? size : 'small'
+  })), jsx(Text, {
+    style: {
+      lineHeight: 0,
+      letterSpacing: 0.5
+    },
+    type: "caption",
+    color: color,
+    weight: "bold"
+  }, title));
 };
 
 var _emotionSourceMap = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHRodW1ibmFpbENvbnRhaW5lcjogY3NzKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcIl0sIFtcIlwiXSkpKSxcclxufTtcclxudmFyIHRlbXBsYXRlT2JqZWN0XzE7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */";
@@ -20578,10 +20629,7 @@ var AffiliateShareWidget = function (_a) {
     title: "Share the $97 Postcard Program",
     type: "secondary",
     description: "",
-    primaryAction: {
-      onClick: function () {},
-      title: 'Action Title'
-    }
+    backgroundColor: "foreground"
   }, jsx(Clipboard, {
     copyText: shareLink
   }));
@@ -20599,16 +20647,14 @@ var BulkSend = function (_a) {
       salePrice = _a.salePrice,
       title = _a.title,
       description = _a.description,
-      configurationListTitle = _a.configurationListTitle,
-      configurationListSubtitle = _a.configurationListSubtitle,
-      configurationListTag = _a.configurationListTag,
-      configurationList = _a.configurationList,
-      activeConfigurationId = _a.activeConfigurationId,
-      setActiveConfigurationId = _a.setActiveConfigurationId,
+      configurationSections = _a.configurationSections,
       isActive = _a.isActive,
       setIsActive = _a.setIsActive,
       addDialog = _a.addDialog,
-      removeDialog = _a.removeDialog;
+      removeDialog = _a.removeDialog,
+      hasIncrement = _a.hasIncrement,
+      isConfigurable = _a.isConfigurable,
+      disableMessage = _a.disableMessage;
 
   var _b = React.useState(false),
       isAddDialogOpen = _b[0],
@@ -20619,7 +20665,9 @@ var BulkSend = function (_a) {
       setIsRemoveDialogOpen = _c[1];
 
   var clearBulkOption = function () {
-    setActiveConfigurationId('');
+    configurationSections.forEach(function (section) {
+      return section.setActiveConfigurationId('');
+    });
     setIsActive(false);
   };
 
@@ -20631,6 +20679,14 @@ var BulkSend = function (_a) {
     setIsAddDialogOpen(true);
   };
 
+  var overlayVariants = {
+    open: {
+      opacity: 0.5
+    },
+    closed: {
+      opacity: 0
+    }
+  };
   return jsx(Flex, {
     inset: "x3",
     flexDirection: {
@@ -20645,14 +20701,17 @@ var BulkSend = function (_a) {
       title: addDialog.accept.title,
       onClick: function () {
         setIsActive(true);
-        setIsAddDialogOpen(false);
+        setIsAddDialogOpen(!isAddDialogOpen);
         addDialog.accept.onClick();
       }
     },
     decline: {
       title: 'Cancel',
       onClick: function () {
-        setIsAddDialogOpen(false);
+        var _a;
+
+        setIsAddDialogOpen(!isAddDialogOpen);
+        (_a = addDialog.decline) === null || _a === void 0 ? void 0 : _a.onClick();
       }
     },
     requireScroll: false
@@ -20665,13 +20724,16 @@ var BulkSend = function (_a) {
       onClick: function () {
         clearBulkOption();
         removeDialog.accept.onClick();
-        setIsRemoveDialogOpen(false);
+        setIsRemoveDialogOpen(!isRemoveDialogOpen);
       }
     },
     decline: {
       title: 'Cancel',
       onClick: function () {
-        return setIsRemoveDialogOpen(false);
+        var _a;
+
+        (_a = removeDialog.decline) === null || _a === void 0 ? void 0 : _a.onClick();
+        setIsRemoveDialogOpen(!isRemoveDialogOpen);
       }
     },
     requireScroll: false
@@ -20691,39 +20753,41 @@ var BulkSend = function (_a) {
       xSmall: 2,
       medium: 0
     }
-  }, jsx(Div, {
+  }, jsx(AnimatePresence$1, null, !isConfigurable && jsx(Overlay, {
+    variants: overlayVariants,
+    initial: 'closed',
+    animate: !isConfigurable ? 'open' : 'closed',
+    exit: 'closed',
+    zIndex: 1
+  })), jsx(Div, {
     outset: {
       bottom: 'x3'
-    }
-  }, jsx(Text, {
-    type: {
-      xSmall: 'largeBody',
-      medium: 'subtitle',
-      large: 'title'
     },
-    weight: "bold",
-    color: "primaryHeading",
-    content: title
-  }), jsx(Text, {
-    type: {
-      xSmall: 'caption',
-      medium: 'body',
-      large: 'largeBody'
+    position: "relative"
+  }, jsx(AnimatePresence$1, null, !isConfigurable && jsx(Flex, {
+    position: "absolute",
+    top: "-32px",
+    initial: {
+      opacity: 0
     },
-    content: description
-  })), isActive && jsx(Flex, {
-    flexDirection: "column",
-    maxWidth: "450px"
-  }, jsx(Div, {
-    outset: {
-      bottom: 'x3'
+    animate: !isConfigurable ? {
+      opacity: 1
+    } : {
+      opacity: 0
+    },
+    exit: {
+      opacity: 0
+    },
+    transition: {
+      delay: 0.3,
+      duration: 0.3
     }
-  }, configurationListTag && jsx(Text, {
-    type: "caption",
-    color: "secondaryBrand",
-    weight: "semiBold",
-    content: configurationListTag
-  }), jsx(Text, {
+  }, jsx(Tooltip, {
+    title: disableMessage,
+    direction: "bottom",
+    background: "light",
+    zIndex: 2
+  }))), jsx(Text, {
     type: {
       xSmall: 'largeBody',
       medium: 'subtitle',
@@ -20731,35 +20795,72 @@ var BulkSend = function (_a) {
     },
     weight: "bold",
     color: "primaryHeading",
-    content: configurationListTitle,
-    lineHeight: 1.4,
-    outset: {
-      bottom: 'x1'
-    }
+    content: title
   }), jsx(Text, {
     type: {
       xSmall: 'caption',
       medium: 'body',
       large: 'largeBody'
     },
-    content: configurationListSubtitle
-  })), configurationList.map(function (config, index) {
-    return jsx(React.Fragment, null, jsx(ConfigurationCard, {
-      key: index,
-      graphic: config.graphicType,
-      title: config.configurationTitle,
-      configurationId: config.configurationId,
-      description: config.configurationDescription,
-      onSelect: function () {
-        setActiveConfigurationId(config.configurationId);
+    content: description
+  })), isActive && isConfigurable ? jsx(React.Fragment, null, configurationSections.map(function (section, index) {
+    return jsx(React.Fragment, null, jsx(Flex, {
+      flexDirection: "column",
+      maxWidth: "480px",
+      key: index
+    }, jsx(Div, {
+      outset: {
+        bottom: 'x3'
+      }
+    }, section.tag && jsx(Text, {
+      type: "caption",
+      color: "secondaryBrand",
+      weight: "semiBold",
+      content: section.tag
+    }), jsx(Text, {
+      type: {
+        xSmall: 'largeBody',
+        medium: 'subtitle',
+        large: 'title'
       },
-      isSelected: config.configurationId === activeConfigurationId,
-      cost: config.configurationPrice
-    }), jsx(Spacer, {
-      orientation: "vertical",
-      space: "x2"
-    }));
-  }))), jsx(Flex, {
+      weight: "bold",
+      color: "primaryHeading",
+      content: section.title,
+      lineHeight: 1.4,
+      outset: {
+        bottom: 'x1'
+      }
+    }), jsx(Text, {
+      type: {
+        xSmall: 'caption',
+        medium: 'body',
+        large: 'largeBody'
+      },
+      content: section.description
+    })), jsx(VStack, {
+      gap: "x1"
+    }, section.configurationList.map(function (config, index) {
+      return jsx(ConfigurationCard, {
+        key: index,
+        graphic: config.graphicType,
+        title: config.configurationTitle,
+        configurationId: config.configurationId,
+        description: config.configurationDescription,
+        onSelect: function () {
+          section.setActiveConfigurationId(config.configurationId);
+        },
+        isSelected: false,
+        cost: config.configurationPrice,
+        itemPriceTitle: config.configurationItemPriceTitle
+      });
+    })), index !== configurationSections.length - 1 && jsx(Div, {
+      outset: {
+        vertical: 'x2'
+      }
+    }, jsx(Separator, {
+      orientation: "horizontal"
+    }))));
+  })) : !isConfigurable && undefined), jsx(Flex, {
     width: {
       xSmall: '100%',
       medium: '50%'
@@ -20771,7 +20872,7 @@ var BulkSend = function (_a) {
       xSmall: 1,
       medium: 0
     }
-  }, jsx(Flex, null, jsx(QuantitySlider, {
+  }, jsx(QuantitySlider, {
     unitPrice: unitPrice,
     salePrice: salePrice,
     quantityDescription: quantityDescription,
@@ -20782,8 +20883,9 @@ var BulkSend = function (_a) {
     setQuantity: function (quantity) {
       return setQuantity(quantity);
     },
-    sliderFill: sliderFill
-  })), jsx(Flex, {
+    sliderFill: sliderFill,
+    hasIncrement: hasIncrement
+  }), jsx(Flex, {
     outset: {
       top: 'x4'
     }
@@ -20791,7 +20893,7 @@ var BulkSend = function (_a) {
     type: "secondary",
     size: "medium",
     title: isActive ? 'Remove Bulk Option' : 'Add Bulk Option',
-    onClick: isActive ? handleSetRemoveDialog : handleSetAddDialog,
+    onClick: isActive && isConfigurable ? handleSetRemoveDialog : !isConfigurable ? undefined : handleSetAddDialog,
     fullWidth: true,
     outlined: true
   }))));

package/dist/src/atoms/badge/badge.d.ts

@@ -1,7 +1,13 @@
 import { FC } from 'react';
+import { TextColor } from "../typography/text";
 import { BackgroundColor } from "../../helpers/hoc-types/hocBaseUnion";
+import { IconType } from '../iconography/types';
+import { SizeType } from "../../types/global";
 export declare type BadgeProps = {
     item: string;
     backgroundColor?: BackgroundColor;
+    icon?: IconType;
+    size?: SizeType;
+    color?: TextColor;
 };
 export declare const Badge: FC<BadgeProps>;

package/dist/src/helpers/hoc-types/cssValueTypes.d.ts

@@ -1,6 +1,6 @@
 export declare type BorderStyles = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'initial' | 'inherit';
 export declare type Cursor = 'pointer' | 'auto' | 'text' | 'zoom-out' | 'zoom-in' | 'initial' | 'inherit' | 'move' | 'row-resize' | 'col-resize' | 'nesw-resize' | 'nwse-resize' | 'not-allowed';
-export declare type Display = 'relative' | 'absolute' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none' | 'contents';
+export declare type Display = 'relative' | 'absolute' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none' | 'contents' | 'inline-flex';
 export declare type Position = 'absolute' | 'fixed' | 'sticky' | 'relative' | 'static';
 declare type FlexBaseValues = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
 export declare type CSSGridBaseValues = 'start' | 'end' | 'space-evenly' | 'center';

package/dist/src/helpers/style-functions/convertTextColorToIconColor.d.ts

@@ -0,0 +1,3 @@
+import { TextColor } from "../../atoms/typography/text";
+import { IconColors } from "../../exports/atoms";
+export declare const convertTextColorToIconColor: (textColor: TextColor) => IconColors;

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 export declare type ConfigurationCardProps = {
-    graphic: 'blank' | 'addressed' | 'withStamp';
+    graphic: 'blank' | 'addressed' | 'withStamp' | 'none';
     title: string;
     description: string;
     cost?: number | string;
@@ -8,5 +8,6 @@ export declare type ConfigurationCardProps = {
     onSelect: (configurationId: string) => void;
     layout?: 'horizontal' | 'vertical';
     configurationId: string;
+    itemPriceTitle?: string;
 };
 export declare const ConfigurationCard: FC<ConfigurationCardProps>;

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

@@ -1,14 +1,13 @@
 import { FC } from 'react';
 import { TextColor } from "../../atoms/typography/text";
 import { SizeType } from "../../types/global";
-import { IconColors, IconType } from "../../exports/atoms";
+import { IconType } from "../../exports/atoms";
 import { HOCSwatchColorKeys } from "../../helpers/hoc-types/entityValueTypes";
 export declare type FeatureBadgeProps = {
     title: string;
     backgroundColor?: HOCSwatchColorKeys;
     icon?: IconType;
-    iconColor?: IconColors;
-    textColor?: TextColor;
+    color?: TextColor;
     size?: SizeType;
     onClick?: () => void;
 };

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

@@ -1,6 +1,9 @@
 import { FC } from 'react';
 import { HOCMotionProps } from "../../helpers/hoc-types/hocMotionTypes";
+import { Responsive } from "../../helpers/hoc-types/entityValueTypes";
+import { Position } from "../../helpers/hoc-types/cssValueTypes";
 export declare type OverlayPropTypes = {
     zIndex?: number;
+    position?: Responsive<Position> | Position;
 } & HOCMotionProps;
 export declare const Overlay: FC<OverlayPropTypes>;

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

@@ -10,5 +10,6 @@ export declare type QuantitySliderProps = {
     unitPrice: number;
     quantityDescription?: string;
     width: number;
+    hasIncrement?: boolean;
 };
 export declare const QuantitySlider: FC<QuantitySliderProps>;

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

@@ -5,6 +5,7 @@ export declare type TooltipProps = {
     direction: DirectionType;
     background?: ColorModeType;
     repositionTooltip?: boolean;
+    zIndex?: number;
 };
 export declare type DirectionType = 'left' | 'right' | 'top' | 'bottom';
 export declare const Tooltip: FC<TooltipProps>;

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

@@ -1,9 +1,11 @@
 import { FC } from 'react';
 import { IconType, IconColors, orientation } from "../../exports/atoms";
+import { Shadows } from "../../helpers/hoc-types/entityValueTypes";
 export declare type PillProps = {
     title?: string;
     items: PillItemsType[];
     flexDirection?: 'row' | 'row-reverse';
+    boxShadow?: Shadows;
 };
 export declare type PillItemsType = {
     title: string;

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

@@ -1,10 +1,12 @@
 import { FC } from 'react';
 import { SizeType, ThemeMode } from "../../types/global";
+import { BackgroundColor } from "../../helpers/hoc-types/hocBaseUnion";
 export declare type PromotionWidgetProps = {
     title: string;
     description: string;
     capsuleTitle: string;
-    primaryAction: {
+    backgroundColor?: BackgroundColor;
+    primaryAction?: {
         onClick: () => void;
         title: string;
     };

package/dist/src/portfolios/soc/components/bulkSend/bulkSend.d.ts

@@ -1,12 +1,21 @@
 import { FC } from 'react';
 import { SliderProgressColor } from "../../../../exports/molecules";
 import { ConfirmDialogProps } from "../../../../exports/organisms";
+export declare type ConfigurationOptionSection = {
+    title: string;
+    description: string;
+    tag?: string;
+    activeConfigurationId: string;
+    setActiveConfigurationId: (configurationId: string) => void;
+    configurationList: ConfigurationListOption[];
+};
 declare type ConfigurationListOption = {
-    graphicType: 'blank' | 'addressed' | 'withStamp';
+    graphicType: 'blank' | 'addressed' | 'withStamp' | 'none';
     configurationId: string;
     configurationTitle: string;
     configurationDescription: string;
     configurationPrice?: number;
+    configurationItemPriceTitle?: string;
 };
 export declare type BulkSendProps = {
     quantity: number;
@@ -16,21 +25,19 @@ export declare type BulkSendProps = {
     maxQuantity: number;
     sliderFill: SliderProgressColor;
     sliderWidth: number;
-    activeConfigurationId: string;
-    setActiveConfigurationId: (activeConfigurationId: string) => void;
     unitPrice: number;
     salePrice?: number;
     title: string;
     description: string;
-    configurationListTitle: string;
-    configurationListSubtitle: string;
-    configurationListTag?: string;
-    configurationList: ConfigurationListOption[];
+    configurationSections: ConfigurationOptionSection[];
     isDisabled?: boolean;
     isActive: boolean;
     setIsActive: (isActive: boolean) => void;
     addDialog?: ConfirmDialogProps;
     removeDialog?: ConfirmDialogProps;
+    hasIncrement?: boolean;
+    isConfigurable?: boolean;
+    disableMessage: string;
 };
 export declare const BulkSend: FC<BulkSendProps>;
 export {};

package/dist/src/stories/molecules/ConfigurationCard.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react/types-6-0';
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;
 export declare const ConfigurationCardWithCallback: any;
+export declare const ConfigurationInfoCard: any;

package/dist/src/stories/molecules/Slider.stories.d.ts

@@ -2,5 +2,4 @@ import { SliderProps } from "../../exports/molecules";
 import { Meta, Story } from '@storybook/react/types-6-0';
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;
-export declare const Left: Story<SliderProps>;
-export declare const Center: Story<SliderProps>;
+export declare const Primary: Story<SliderProps>;

package/package.json

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