@sendoutcards/quantum-design-ui 1.7.15 → 1.7.16

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

@@ -59,3 +59,4 @@ export * from "../molecules/quantitySlider/quantitySlider";
 export * from "../molecules/featureBadge/featureBadge";
 export * from "../molecules/titledList/titledList";
 export * from "../molecules/imageThumbnail/imageThumbnail";
+export * from "../molecules/displayCard/displayCard";

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

@@ -40,3 +40,4 @@ export * from "../organisms/featureAnnouncement/featureAnnouncement";
 export * from "../organisms/settingInput/settingInput";
 export * from "../organisms/releaseNote/releaseNote";
 export * from "../organisms/imageUploader/imageUploader";
+export * from "../organisms/imageUploadWidget/imageUploadWidget";

package/dist/src/hooks/useEntities.d.ts

@@ -180,47 +180,45 @@ export declare const useEntities: () => {
         x9: string;
     };
     buttons: {
-        types: {
-            primary: {
-                backgroundColor: string;
-                fontColor: string;
-                fontFamily: string;
-            };
-            secondary: {
-                backgroundColor: string;
-                fontColor: string;
-                fontFamily: string;
-            };
-            warning: {
-                backgroundColor: string;
-                fontColor: string;
-                fontFamily: string;
-            };
-            success: {
-                backgroundColor: string;
-                fontColor: string;
-                fontFamily: string;
-            };
-            danger: {
-                backgroundColor: string;
-                fontColor: string;
-                fontFamily: string;
-            };
-            shadow: {
-                backgroundColor: string;
-                fontColor: string;
-                fontFamily: string;
-            };
-            accent: {
-                backgroundColor: string;
-                fontColor: string;
-                fontFamily: string;
-            };
-            smoke: {
-                backgroundColor: string;
-                fontColor: string;
-                fontFamily: string;
-            };
+        primary: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        secondary: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        warning: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        success: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        danger: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        shadow: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        accent: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        smoke: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
         };
         boxShadow: (shadow: "dark" | "mediumDark" | "mediumLight" | "light" | "xLight", color?: string | undefined, reverseOffset?: boolean | undefined) => string;
         borderSize: string;
@@ -446,6 +444,8 @@ export declare const useEntities: () => {
         borderRadius: string;
         boxShadow: string;
         bottomDirectionShadow: string;
+        hoverBoxShadow: string;
+        hoverBottomDirectionShadow: string;
         defaultInset: string;
     };
     sheet: {

package/dist/src/hooks/useLongPress.d.ts

@@ -0,0 +1,10 @@
+export declare const useLongPress: (onLongPress: (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => void, onLongPressEnd: (event: React.MouseEvent<HTMLInputElement> | React.TouchEvent<HTMLInputElement>) => void, onClick: () => void, { isPreventDefault, delay }?: {
+    isPreventDefault?: boolean | undefined;
+    delay?: number | undefined;
+}) => {
+    onMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onTouchStart: (e: React.TouchEvent<HTMLInputElement>) => void;
+    onMouseUp: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onMouseLeave: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onTouchEnd: (e: React.TouchEvent<HTMLInputElement>) => void;
+};

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

@@ -1,9 +1,10 @@
 import { FC } from 'react';
-import { TextColor } from "../../atoms/typography/text";
+import { TextColor, WeightType } from "../../atoms/typography/text";
 import { SizeType, OnMouseEvent, ThemeMode } from "../../types/global";
 import { entities } from "../../theme/theming/entities";
-import { IconType } from "../../exports/atoms";
+import { IconType, IconColors } from "../../exports/atoms";
 import { DirectionType } from '../tooltip/tooltip';
+import { LiteralUnion } from "../../helpers/hoc-types/entityValueTypes";
 export declare type ButtonType = ThemeMode | 'smoke';
 export declare type ButtonProps = {
     title?: string;
@@ -19,7 +20,11 @@ export declare type ButtonProps = {
     disabledCaption?: string;
     disabledDirection?: DirectionType;
     id?: string;
-    icon?: IconType;
+    icon?: {
+        name: IconType;
+        fill?: LiteralUnion<IconColors>;
+    };
+    fontWeight?: WeightType;
 };
 export declare type ButtonStyle = typeof entities.buttons.primary;
 export declare const Button: FC<ButtonProps>;

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

@@ -1,8 +1,8 @@
-import { ButtonsEntity } from "../../theme/theming/entities";
+import { ButtonsEntity, Entities, TextEntity } from "../../theme/theming/entities";
 import { SizeType } from "../../types/global";
 import { ButtonType, ButtonStyle } from './button';
 declare const _default: {
-    buttonStyles: (type: ButtonType, buttonStyle: ButtonStyle, buttonEntity: ButtonsEntity, size: SizeType, hover?: boolean | undefined, outlined?: boolean | undefined, fullWidth?: boolean | undefined) => import("@emotion/utils").SerializedStyles;
-    buttonTitle: (buttonEntity: ButtonsEntity, size: SizeType) => import("@emotion/utils").SerializedStyles;
+    buttonStyles: (type: ButtonType, buttonStyle: ButtonStyle, entities: Entities, size: SizeType, hover?: boolean | undefined, outlined?: boolean | undefined, fullWidth?: boolean | undefined) => import("@emotion/utils").SerializedStyles;
+    buttonTitle: (type: ButtonType, buttonEntity: ButtonsEntity, size: SizeType, textEntity: TextEntity, fontWeight?: "thin" | "regular" | "semiBold" | "bold" | "extraBold" | undefined) => import("@emotion/utils").SerializedStyles;
 };
 export default _default;

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare type DisplayCardProps = {
+    title: string;
+    description: string;
+};
+export declare const DisplayCard: FC<DisplayCardProps>;

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

@@ -1,4 +1,6 @@
 import { FC } from 'react';
+import { AnimationControls, TargetAndTransition, VariantLabels, Target } from 'framer-motion';
+declare type FramerAnimation = AnimationControls | TargetAndTransition | VariantLabels | boolean;
 export declare type GridProps = {
     columnSize: number;
     rowSize: number;
@@ -7,5 +9,9 @@ export declare type GridProps = {
     height?: string;
     overflow?: string;
     isDense?: boolean;
+    animate?: FramerAnimation;
+    initial?: boolean | Target | VariantLabels;
+    exit?: TargetAndTransition | VariantLabels;
 };
 export declare const Grid: FC<GridProps>;
+export {};

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

@@ -4,5 +4,6 @@ export declare type ImageThumbnailProps = {
     width: number;
     height: number;
     onRemove?: () => void;
+    uploadProgress: number;
 };
 export declare const ImageThumbnail: FC<ImageThumbnailProps>;

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" | "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" | 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" | "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" | 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" | 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" | 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" | "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" | 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" | "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" | 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" | 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" | 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" | "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" | 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" | "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" | 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" | 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" | undefined;
     id: number;
 } & IconTextLabelProps & React.RefAttributes<HTMLDivElement>)>;

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

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { AcceptedFiles, RejectedFiles } from '../imageUploader/imageUploader';
+export declare type UserImage = {
+    url: string;
+    isHorizontal: boolean;
+};
+export declare type ImageUploadWidgetProps = {
+    title: string;
+    maxHeight?: string;
+    onClose: () => void;
+    onFinished: () => void;
+    isOpen: () => void;
+    onUpload: (files: {
+        accepted: AcceptedFiles;
+        rejected: RejectedFiles;
+    }, fileList?: FileList | null) => void;
+    hasMultiUpload?: boolean;
+    userImages?: UserImage[];
+    x: number;
+    y: number;
+    dataLength?: number;
+    loadMore?: () => void;
+    hasMore?: boolean;
+    endMessage?: string;
+};
+export declare const ImageUploadWidget: FC<ImageUploadWidgetProps>;

package/dist/src/organisms/imageUploadWidget/styles.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    stickersContainer: import("@emotion/react").SerializedStyles;
+};
+export default _default;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { FileRejection } from 'react-dropzone';
+import { BackgroundColor } from "../../helpers/hoc-types/hocBaseUnion";
 declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
 export declare type ImageUploaderProps = {
     onUpload: (files: {
@@ -11,6 +12,7 @@ export declare type ImageUploaderProps = {
     maxFileSize?: number;
     maxAcceptedFiles?: number;
     uploadTitle?: string;
+    backgroundColor?: BackgroundColor;
 };
 export declare type AcceptedFiles = File[];
 export declare type RejectedFiles = FileRejection[];

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

@@ -0,0 +1,5 @@
+import { DisplayCardProps } 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 Primary: Story<DisplayCardProps>;

package/dist/src/stories/organisms/ImageUploadWidget.stories.d.ts

@@ -0,0 +1,5 @@
+import { ImageUploadWidgetProps } from "../../exports/organisms";
+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 StoryName: Story<ImageUploadWidgetProps>;

package/dist/src/theme/theming/entities.d.ts

@@ -444,6 +444,8 @@ declare const drawer: {
     borderRadius: string;
     boxShadow: string;
     bottomDirectionShadow: string;
+    hoverBoxShadow: string;
+    hoverBottomDirectionShadow: string;
     defaultInset: string;
 };
 declare const navigation: {
@@ -928,6 +930,8 @@ export declare const entities: {
         borderRadius: string;
         boxShadow: string;
         bottomDirectionShadow: string;
+        hoverBoxShadow: string;
+        hoverBottomDirectionShadow: string;
         defaultInset: string;
     };
     sheet: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.7.15",
+  "version": "1.7.16",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
@@ -59,6 +59,7 @@
     "react-content-loader": "^5.1.1",
     "react-dropzone": "^11.4.2",
     "react-eyedrop": "^5.1.3",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "^1.2.4",
     "react-lazyload": "^3.1.1",
     "react-use-dimensions": "^1.2.1",