@sendoutcards/quantum-design-ui 1.7.56 → 1.7.59

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useMemo, useRef, useLayoutEffect, useContext } from 'react';
+import React, { useEffect, useCallback, useState, useMemo, useRef, useLayoutEffect, useContext, useImperativeHandle } from 'react';
 import { ThemeProvider, useTheme } from 'emotion-theming';
 import { jsx, Global, css } from '@emotion/core';
 import Color$1 from 'color';
@@ -10699,6 +10699,28 @@ var SquareCheck = function (_a) {
   }));
 };
 
+var UserTag = function (_a) {
+  var primaryColor = _a.primaryColor,
+      onClick = _a.onClick,
+      size = _a.size,
+      entity = _a.entity;
+  return jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: getIconSize(size, entity),
+    height: getIconSize(size, entity),
+    onClick: onClick && function () {
+      return onClick();
+    },
+    viewBox: "0 0 24 24"
+  }, jsx("path", {
+    d: "M 12 22.75 C 11.3 22.75 10.59 22.48 10.06 21.95 L 8.35 20.26 C 7.93 19.84 7.35 19.61 6.76 19.61 L 6 19.61 C 3.93 19.61 2.25 17.94 2.25 15.89 L 2.25 4.98 C 2.25 2.93 3.93 1.26 6 1.26 L 18 1.26 C 20.07 1.26 21.75 2.93 21.75 4.98 L 21.75 15.89 C 21.75 17.94 20.07 19.61 18 19.61 L 17.24 19.61 C 16.646 19.613 16.076 19.846 15.65 20.26 L 13.94 21.95 C 13.41 22.48 12.7 22.75 12 22.75 Z M 6 2.75 C 4.76 2.75 3.75 3.75 3.75 4.97 L 3.75 15.88 C 3.75 17.11 4.76 18.1 6 18.1 L 6.76 18.1 C 7.75 18.1 8.71 18.5 9.41 19.19 L 11.12 20.88 C 11.61 21.36 12.4 21.36 12.89 20.88 L 14.6 19.19 C 15.3 18.5 16.26 18.1 17.25 18.1 L 18 18.1 C 19.24 18.1 20.25 17.1 20.25 15.88 L 20.25 4.97 C 20.25 3.74 19.24 2.75 18 2.75 Z",
+    fill: getIconColor(primaryColor, entity)
+  }), jsx("path", {
+    d: "M 12 10.75 C 10.3 10.75 8.92 9.37 8.92 7.67 C 8.963 6 10.329 4.667 12 4.667 C 13.671 4.667 15.037 6 15.08 7.67 C 15.08 9.37 13.7 10.75 12 10.75 Z M 12 6.09 C 11.13 6.09 10.42 6.8 10.42 7.67 C 10.42 8.54 11.13 9.25 12 9.25 C 12.87 9.25 13.58 8.54 13.58 7.67 C 13.58 6.8 12.87 6.09 12 6.09 Z M 16 16.41 C 15.59 16.41 15.25 16.07 15.25 15.66 C 15.25 14.28 13.79 13.15 12 13.15 C 10.21 13.15 8.75 14.28 8.75 15.66 C 8.75 16.07 8.41 16.41 8 16.41 C 7.59 16.41 7.25 16.07 7.25 15.66 C 7.25 13.45 9.38 11.65 12 11.65 C 14.62 11.65 16.75 13.45 16.75 15.66 C 16.75 16.07 16.41 16.41 16 16.41 Z",
+    fill: getIconColor(primaryColor, entity)
+  }));
+};
+
 var Icon = function (_a) {
   var primaryColor = _a.primaryColor,
       secondaryColor = _a.secondaryColor,
@@ -11072,6 +11094,9 @@ var Icon = function (_a) {
 
     case 'squareCheck':
       return jsx(SquareCheck, props);
+
+    case 'userTag':
+      return jsx(UserTag, props);
   }
 };
 
@@ -17496,7 +17521,8 @@ var Banner = function (_a) {
       children = _a.children,
       _b = _a.outlined,
       outlined = _b === void 0 ? true : _b;
-  return jsx(Div, {
+  return jsx(Flex, {
+    width: "100%",
     backgroundColor: {
       swatch: status === 'success' ? 'success' : status === 'warning' ? 'warning' : 'danger',
       shade: outlined ? '_1000' : 'base'
@@ -17507,23 +17533,19 @@ var Banner = function (_a) {
       swatch: status === 'success' ? 'success' : status === 'warning' ? 'warning' : 'danger',
       shade: 'base'
     } : undefined,
-    width: "100%",
     inset: {
       vertical: 'x2',
       horizontal: 'x1'
     },
     borderRadius: "default",
-    display: "flex",
-    justifyContent: "space-between"
-  }, jsx(Div, {
-    display: 'flex'
-  }, icon && jsx(Span, {
-    inset: {
-      right: 'x1'
-    },
-    display: "flex",
-    justifyContent: "center",
+    justifyContent: "flex-start",
     alignItems: "center"
+  }, jsx(Flex, null, icon && jsx(Flex, {
+    justifyContent: "center",
+    alignItems: "center",
+    inset: {
+      horizontal: 'x1'
+    }
   }, jsx(Icon, {
     name: icon,
     size: "small",
@@ -21290,6 +21312,7 @@ var PromotionWidget = function (_a) {
       capsuleTitle = _a.capsuleTitle,
       description = _a.description,
       primaryAction = _a.primaryAction,
+      secondaryAction = _a.secondaryAction,
       _b = _a.minWidth,
       minWidth = _b === void 0 ? '320px' : _b,
       _c = _a.width,
@@ -21335,7 +21358,17 @@ var PromotionWidget = function (_a) {
     onClick: function () {
       return primaryAction.onClick();
     }
-  }, primaryAction.title), children)));
+  }, primaryAction.title), secondaryAction && jsx(Flex, {
+    alignItems: "center",
+    inset: {
+      left: 'x3'
+    }
+  }, jsx(Anchor, {
+    href: secondaryAction.href,
+    title: secondaryAction.title,
+    size: 'small',
+    color: 'primaryBody'
+  })), children)));
 };
 
 var FeatureAnnouncement = function (_a) {
@@ -22089,14 +22122,18 @@ var UpsaleOptions = function (_a) {
     size: "small",
     color: "primaryBody",
     outset: "0 auto"
-  }), submitAction && jsx(Button, {
+  }), submitAction && jsx(Flex, {
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  }, jsx(Button, {
     title: submitAction.title,
     type: submitAction.type,
     onClick: submitAction.onClick,
     fullWidth: submitAction.isFullWidth,
     disabled: submitAction.isDisabled,
     size: "large"
-  }))));
+  })))));
 };
 
 var SOC_FRONT_Z_INDEX = 103;
@@ -22727,25 +22764,51 @@ var ComparisonItem = function (_a) {
   })));
 };
 
-var UploadButton = function (_a) {
-  var title = _a.title,
-      onUpload = _a.onUpload,
-      _b = _a.hasUpload,
-      hasUpload = _b === void 0 ? false : _b,
-      backgroundColor = _a.backgroundColor,
-      indicator = _a.indicator,
-      _c = _a.width,
-      width = _c === void 0 ? '160px' : _c,
-      _d = _a.height,
-      height = _d === void 0 ? '40px' : _d,
-      _e = _a.boxShadow,
-      boxShadow = _e === void 0 ? 'mediumLight' : _e,
-      _f = _a.borderRadius,
-      borderRadius = _f === void 0 ? 'medium' : _f;
+var UploadButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onUpload = props.onUpload,
+      title = props.title,
+      width = props.width,
+      height = props.height,
+      boxShadow = props.boxShadow,
+      borderRadius = props.borderRadius,
+      backgroundColor = props.backgroundColor;
+  var inputRef = useRef(null);
+
+  var _a = useState(),
+      preview = _a[0],
+      setPreview = _a[1];
+
+  var handleUpload = function (event) {
+    event.preventDefault();
+
+    if (event.target.files == null) {
+      return;
+    }
+
+    var file = event.target.files[0];
+
+    if (!!onUpload) {
+      onUpload(file);
+      var reader_1 = new FileReader();
+
+      reader_1.onloadend = function () {
+        setPreview(reader_1.result);
+      };
+
+      reader_1.readAsDataURL(file);
+    } else {
+      setPreview(null);
+    }
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      clearPreview: function () {
+        setPreview(null);
+      }
+    };
+  });
   return jsx(Flex, {
-    onClick: function () {
-      return onUpload(hasUpload);
-    },
     backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'foreground',
     boxShadow: boxShadow,
     borderRadius: borderRadius,
@@ -22753,8 +22816,21 @@ var UploadButton = function (_a) {
     height: height,
     alignItems: "center",
     inset: "x_5",
-    cursor: "pointer"
-  }, jsx(Div, {
+    cursor: "pointer",
+    onClick: function () {
+      var _a;
+
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }
+  }, jsx("input", {
+    type: "file",
+    accept: "image/*",
+    style: {
+      display: 'none'
+    },
+    ref: inputRef,
+    onChange: handleUpload
+  }), jsx(Div, {
     width: "35px",
     height: "35px",
     display: "flex",
@@ -22765,20 +22841,28 @@ var UploadButton = function (_a) {
     borderStyle: "solid",
     borderColor: "gray",
     borderWidth: "thin",
-    inset: !hasUpload ? 'x_5' : 'x0'
-  }, !hasUpload ? jsx(Icon, {
+    inset: !preview ? 'x_5' : 'x0'
+  }, !preview ? jsx(Icon, {
     name: "upload",
     size: "xSmall",
     primaryColor: "primaryHeadingText"
-  }) : indicator), jsx(Text, {
+  }) : jsx(Image$1, {
+    width: "35px",
+    height: "35px",
+    isActive: true,
+    image: {
+      url: preview
+    },
+    backgroundSize: "cover"
+  })), jsx(Text, {
     type: "caption",
-    content: !hasUpload ? title : 'Uploading...',
+    content: title,
     color: "primaryHeading",
     inset: {
       left: 'x1'
     }
   }));
-};
+});
 
 var _emotionSourceMap$1 = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHRodW1ibmFpbENvbnRhaW5lcjogY3NzKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcIl0sIFtcIlwiXSkpKSxcclxufTtcclxudmFyIHRlbXBsYXRlT2JqZWN0XzE7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */";
 var styles$1 = {
@@ -23117,6 +23201,10 @@ var AffiliateUpsalePromotionWidget = function (_a) {
       title: getContent(type).buttonTitle,
       onClick: getContent(type).buttonOnclick
     },
+    secondaryAction: {
+      title: 'Learn More',
+      href: 'https://streamvirtualassistant.com/'
+    },
     capsuleTitle: "New",
     width: width,
     minWidth: minWidth,
@@ -23611,8 +23699,11 @@ var SubscriptionUpsaleDialog = function (_a) {
       insetOverride = _a.insetOverride,
       handleSelectedOption = _a.handleSelectedOption,
       sponsorId = _a.sponsorId;
+      _a.upsaleContent;
+      var rest = __rest(_a, ["title", "description", "checkoutTitle", "checkoutDescription", "selectableOptions", "upsaleContentTitle", "isOpen", "setIsDialogOpen", "optionFormLocation", "children", "selectedOption", "removeSelectedOption", "successComponent", "insetOverride", "handleSelectedOption", "sponsorId", "upsaleContent"]);
+
   var device = useWindowSize().width;
-  return jsx("div", null, jsx(UpsaleDialog, {
+  return jsx("div", null, jsx(UpsaleDialog, _extends({
     sponsorId: sponsorId,
     title: title,
     description: description,
@@ -23638,7 +23729,7 @@ var SubscriptionUpsaleDialog = function (_a) {
     successComponent: successComponent,
     insetOverride: insetOverride,
     maxWidth: '1500px'
-  }, children));
+  }, rest), children));
 };
 
 var useColorSwatch = function () {

package/dist/src/atoms/iconography/icons/usertag.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SVGProps } from '../types/index';
+export declare const UserTag: FC<SVGProps>;

package/dist/src/atoms/iconography/types/index.d.ts

@@ -11,7 +11,7 @@ export declare type SVGProps = {
     entity: IconsEntity;
     orientation?: orientation;
 };
-export declare type IconType = 'catalog' | 'socLogo' | 'campaigns' | 'gift' | 'plus' | 'minus' | 'tenDoor' | 'rightChevron' | 'close' | 'award' | 'contact' | 'multipleUsers2x' | 'multipleUsers3x' | 'information' | 'hamburger' | 'leftChevron' | 'chevron' | 'information' | 'filterBy' | 'groups' | 'idCard' | 'plusSquare' | 'star' | 'search' | 'cart' | 'priceTag' | 'layer' | 'loading' | 'play' | 'lock' | 'user' | 'noUsers' | 'add' | 'check' | 'exclamation' | 'envelope' | 'userSuccess' | 'image' | 'imageSwap' | 'text' | 'color' | 'template' | 'redo' | 'undo' | 'copy' | 'drag' | 'delete' | 'crop' | 'alignLeft' | 'alignRight' | 'alignCenter' | 'allPanel' | 'fullBleed' | 'fullBleedLandscape' | 'fullBleedPortrait' | 'sliderHorizontal' | 'sliderVertical' | 'cropRotate' | 'frame' | 'cut' | 'wand' | 'layerAdd' | 'layerRemove' | 'layerDisabled' | 'signature' | 'shadows' | 'rotateLeft' | 'rotateRight' | 'colorPalette' | 'dropper' | 'textBox' | 'fontSize' | 'flipHorizontal' | 'flipVertical' | 'filter' | 'brightness' | 'aText' | 'frameWidth' | 'frameHeight' | 'layerUp' | 'layerDown' | 'capitalizedText' | 'uppercaseText' | 'lowercaseText' | 'fullBleedImage' | 'fullBleedText' | 'panelMode' | 'viewPanels' | 'rotate' | 'view' | 'replaceImage' | 'quotation' | 'facebook' | 'instagram' | 'twitter' | 'linkedIn' | 'youtube' | 'pinterest' | 'visible' | 'invisible' | 'elementIcon' | 'complete' | 'download' | 'closeCircle' | 'backgroundSettings' | 'upload' | 'stickers' | 'clearPanel' | 'viewCarousel' | 'viewSinglePanel' | 'editorText' | 'layout' | 'background' | 'save' | 'signaturePen' | 'size' | 'variable' | 'imageUpload' | 'squareCheck';
+export declare type IconType = 'catalog' | 'socLogo' | 'campaigns' | 'gift' | 'plus' | 'minus' | 'tenDoor' | 'rightChevron' | 'close' | 'award' | 'contact' | 'multipleUsers2x' | 'multipleUsers3x' | 'information' | 'hamburger' | 'leftChevron' | 'chevron' | 'information' | 'filterBy' | 'groups' | 'idCard' | 'plusSquare' | 'star' | 'search' | 'cart' | 'priceTag' | 'layer' | 'loading' | 'play' | 'lock' | 'user' | 'noUsers' | 'add' | 'check' | 'exclamation' | 'envelope' | 'userSuccess' | 'image' | 'imageSwap' | 'text' | 'color' | 'template' | 'redo' | 'undo' | 'copy' | 'drag' | 'delete' | 'crop' | 'alignLeft' | 'alignRight' | 'alignCenter' | 'allPanel' | 'fullBleed' | 'fullBleedLandscape' | 'fullBleedPortrait' | 'sliderHorizontal' | 'sliderVertical' | 'cropRotate' | 'frame' | 'cut' | 'wand' | 'layerAdd' | 'layerRemove' | 'layerDisabled' | 'signature' | 'shadows' | 'rotateLeft' | 'rotateRight' | 'colorPalette' | 'dropper' | 'textBox' | 'fontSize' | 'flipHorizontal' | 'flipVertical' | 'filter' | 'brightness' | 'aText' | 'frameWidth' | 'frameHeight' | 'layerUp' | 'layerDown' | 'capitalizedText' | 'uppercaseText' | 'lowercaseText' | 'fullBleedImage' | 'fullBleedText' | 'panelMode' | 'viewPanels' | 'rotate' | 'view' | 'replaceImage' | 'quotation' | 'facebook' | 'instagram' | 'twitter' | 'linkedIn' | 'youtube' | 'pinterest' | 'visible' | 'invisible' | 'elementIcon' | 'complete' | 'download' | 'closeCircle' | 'backgroundSettings' | 'upload' | 'stickers' | 'clearPanel' | 'viewCarousel' | 'viewSinglePanel' | 'editorText' | 'layout' | 'background' | 'save' | 'signaturePen' | 'size' | 'variable' | 'imageUpload' | 'squareCheck' | 'userTag';
 export declare type IconProps = {
     name: IconType;
 } & Omit<SVGProps, 'entity'>;

package/dist/src/molecules/select/components/option.d.ts

@@ -31,21 +31,21 @@ export declare const Option: React.ForwardRefExoticComponent<({
     alignment?: "left" | "center" | "right" | undefined;
     onClick?: ((id: number) => void) | undefined;
     isSelected: boolean;
-    graphic?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | undefined;
-    icon?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | undefined;
+    graphic?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | "userTag" | undefined;
+    icon?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | "userTag" | undefined;
     id: number;
 } & TextLabelProps & React.RefAttributes<HTMLDivElement>) | ({
     alignment?: "left" | "center" | "right" | undefined;
     onClick?: ((id: number) => void) | undefined;
     isSelected: boolean;
-    graphic?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | undefined;
-    icon?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | undefined;
+    graphic?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | "userTag" | undefined;
+    icon?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | "userTag" | undefined;
     id: number;
 } & IconLabelProps & React.RefAttributes<HTMLDivElement>) | ({
     alignment?: "left" | "center" | "right" | undefined;
     onClick?: ((id: number) => void) | undefined;
     isSelected: boolean;
-    graphic?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | undefined;
-    icon?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | undefined;
+    graphic?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | "userTag" | undefined;
+    icon?: "catalog" | "socLogo" | "campaigns" | "gift" | "plus" | "minus" | "tenDoor" | "rightChevron" | "close" | "award" | "contact" | "multipleUsers2x" | "multipleUsers3x" | "information" | "hamburger" | "leftChevron" | "chevron" | "filterBy" | "groups" | "idCard" | "plusSquare" | "star" | "search" | "cart" | "priceTag" | "layer" | "loading" | "play" | "lock" | "user" | "noUsers" | "add" | "check" | "exclamation" | "envelope" | "userSuccess" | "image" | "imageSwap" | "text" | "color" | "template" | "redo" | "undo" | "copy" | "drag" | "delete" | "crop" | "alignLeft" | "alignRight" | "alignCenter" | "allPanel" | "fullBleed" | "fullBleedLandscape" | "fullBleedPortrait" | "sliderHorizontal" | "sliderVertical" | "cropRotate" | "frame" | "cut" | "wand" | "layerAdd" | "layerRemove" | "layerDisabled" | "signature" | "shadows" | "rotateLeft" | "rotateRight" | "colorPalette" | "dropper" | "textBox" | "fontSize" | "flipHorizontal" | "flipVertical" | "filter" | "brightness" | "aText" | "frameWidth" | "frameHeight" | "layerUp" | "layerDown" | "capitalizedText" | "uppercaseText" | "lowercaseText" | "fullBleedImage" | "fullBleedText" | "panelMode" | "viewPanels" | "rotate" | "view" | "replaceImage" | "quotation" | "facebook" | "instagram" | "twitter" | "linkedIn" | "youtube" | "pinterest" | "visible" | "invisible" | "elementIcon" | "complete" | "download" | "closeCircle" | "backgroundSettings" | "upload" | "stickers" | "clearPanel" | "viewCarousel" | "viewSinglePanel" | "editorText" | "layout" | "background" | "save" | "signaturePen" | "size" | "variable" | "imageUpload" | "squareCheck" | "userTag" | undefined;
     id: number;
 } & IconTextLabelProps & React.RefAttributes<HTMLDivElement>)>;

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

@@ -1,15 +1,16 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { BackgroundColor, Width, Height, BorderRadius } from "../../helpers/hoc-types/hocBaseUnion";
 import { Shadows } from "../../helpers/hoc-types/entityValueTypes";
+export declare type UploadButtonRef = {
+    clearPreview: () => void;
+};
 export declare type UploadButtonProps = {
-    hasUpload: boolean;
-    onUpload: (hasUpload: boolean) => void;
+    onUpload: (upload: File | null) => void;
     title: string;
     backgroundColor?: BackgroundColor;
-    indicator: React.ReactNode;
     width?: Width;
     height?: Height;
     boxShadow?: Shadows;
     borderRadius?: BorderRadius;
 };
-export declare const UploadButton: FC<UploadButtonProps>;
+export declare const UploadButton: React.ForwardRefExoticComponent<UploadButtonProps & React.RefAttributes<unknown>>;

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

@@ -10,6 +10,10 @@ export declare type PromotionWidgetProps = {
         onClick: () => void;
         title: string;
     };
+    secondaryAction?: {
+        href: string;
+        title: string;
+    };
     minWidth?: string;
     width?: string;
     type: ThemeMode;

package/dist/src/stories/atoms/Icons.stories.d.ts

@@ -100,6 +100,7 @@ export declare const Text: any;
 export declare const TextBox: any;
 export declare const Twitter: any;
 export declare const Undo: any;
+export declare const UserTag: any;
 export declare const Upload: any;
 export declare const UppercaseText: any;
 export declare const User: any;

package/package.json

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