@sendoutcards/quantum-design-ui 1.7.57 → 1.7.60

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",
@@ -22100,18 +22122,24 @@ 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;
 var UpsaleDialog = function (_a) {
+  var _b;
+
   var title = _a.title,
       description = _a.description,
       checkoutTitle = _a.checkoutTitle,
@@ -22127,26 +22155,26 @@ var UpsaleDialog = function (_a) {
       insetOverride = _a.insetOverride,
       maxWidth = _a.maxWidth,
       maxHeight = _a.maxHeight,
-      _b = _a.zIndex,
-      zIndex = _b === void 0 ? SOC_FRONT_Z_INDEX : _b,
+      _c = _a.zIndex,
+      zIndex = _c === void 0 ? SOC_FRONT_Z_INDEX : _c,
       //Soc-frontend
   successComponent = _a.successComponent,
       upsaleContentTitle = _a.upsaleContentTitle,
-      _c = _a.sponsorId,
-      sponsorId = _c === void 0 ? '9070' : _c,
+      _d = _a.sponsorId,
+      sponsorId = _d === void 0 ? '9070' : _d,
       extraLink = _a.extraLink,
       defaultNumOptionsShown = _a.defaultNumOptionsShown,
       submitAction = _a.submitAction,
       acceptSelectedAction = _a.acceptSelectedAction;
 
-  var _d = React.useState(false),
-      shouldShowCheckoutView = _d[0],
-      setShouldShowCheckoutView = _d[1];
+  var _e = React.useState(false),
+      shouldShowCheckoutView = _e[0],
+      setShouldShowCheckoutView = _e[1];
 
-  var _e = useResizeObserver(),
-      ref = _e.ref,
-      width = _e.width,
-      height = _e.height;
+  var _f = useResizeObserver(),
+      ref = _f.ref,
+      width = _f.width,
+      height = _f.height;
 
   var dialogFooterHeight = '170px';
   var device = useWindowSize().width;
@@ -22161,11 +22189,8 @@ var UpsaleDialog = function (_a) {
   var activeSelectedOption = findOption(selectedOption);
 
   var handleOnClick = function () {
-    if (acceptSelectedAction) {
-      acceptSelectedAction.onClick();
-    } else {
-      setShouldShowCheckoutView(true);
-    }
+    setShouldShowCheckoutView(true);
+    acceptSelectedAction === null || acceptSelectedAction === void 0 ? void 0 : acceptSelectedAction.onClick();
   };
 
   return jsx(Dialog, {
@@ -22263,7 +22288,7 @@ var UpsaleDialog = function (_a) {
   }, jsx(Button, {
     type: 'primary',
     size: "large",
-    title: acceptSelectedAction ? acceptSelectedAction.title : 'Continue to Checkout',
+    title: (_b = acceptSelectedAction === null || acceptSelectedAction === void 0 ? void 0 : acceptSelectedAction.title) !== null && _b !== void 0 ? _b : 'Continue to Checkout',
     disabled: !selectedOption.length,
     onClick: handleOnClick
   }))), !isMobile && jsx(Div, {
@@ -22738,23 +22763,19 @@ var ComparisonItem = function (_a) {
   })));
 };
 
-var UploadButton = function (_a) {
-  var title = _a.title,
-      onUpload = _a.onUpload,
-      backgroundColor = _a.backgroundColor,
-      _b = _a.width,
-      width = _b === void 0 ? '160px' : _b,
-      _c = _a.height,
-      height = _c === void 0 ? '40px' : _c,
-      _d = _a.boxShadow,
-      boxShadow = _d === void 0 ? 'mediumLight' : _d,
-      _e = _a.borderRadius,
-      borderRadius = _e === void 0 ? 'medium' : _e;
+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 _f = useState(),
-      preview = _f[0],
-      setPreview = _f[1];
+  var _a = useState(),
+      preview = _a[0],
+      setPreview = _a[1];
 
   var handleUpload = function (event) {
     event.preventDefault();
@@ -22779,6 +22800,13 @@ var UploadButton = function (_a) {
     }
   };
 
+  useImperativeHandle(ref, function () {
+    return {
+      clearPreview: function () {
+        setPreview(null);
+      }
+    };
+  });
   return jsx(Flex, {
     backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'foreground',
     boxShadow: boxShadow,
@@ -22827,13 +22855,13 @@ var UploadButton = function (_a) {
     backgroundSize: "cover"
   })), jsx(Text, {
     type: "caption",
-    content: !preview ? 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 = {
@@ -23670,8 +23698,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,
@@ -23697,7 +23728,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,6 +1,9 @@
-import { 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 = {
     onUpload: (upload: File | null) => void;
     title: string;
@@ -10,4 +13,4 @@ export declare type UploadButtonProps = {
     boxShadow?: Shadows;
     borderRadius?: BorderRadius;
 };
-export declare const UploadButton: FC<UploadButtonProps>;
+export declare const UploadButton: React.ForwardRefExoticComponent<UploadButtonProps & React.RefAttributes<unknown>>;

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.57",
+  "version": "1.7.60",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",