@sendoutcards/quantum-design-ui 1.7.5 → 1.7.9

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

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

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

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

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

@@ -5,13 +5,13 @@ export declare type IconColors = keyof typeof entities.icons.colors;
 export declare type orientation = 'up' | 'down' | 'left' | 'right';
 export declare type SVGProps = {
     size: LiteralUnion<SizeType> | number;
-    primaryColor: IconColors;
-    secondaryColor?: IconColors;
+    primaryColor: LiteralUnion<IconColors>;
+    secondaryColor?: LiteralUnion<IconColors>;
     onClick?: () => void;
     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' | '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';
+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' | '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';
 export declare type IconProps = {
     name: IconType;
 } & Omit<SVGProps, 'entity'>;

package/dist/src/customThemes/sendOutCards/entities.d.ts

@@ -231,40 +231,47 @@ declare const buttons: {
             borderRadius: 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;
+    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;
+        };
     };
 };
 declare const inputs: {
@@ -702,40 +709,47 @@ export declare const entities: {
                 borderRadius: 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;
+        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;
+            };
         };
     };
     inputs: {

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

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

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

@@ -37,4 +37,6 @@ export * from "../organisms/radioOptionList/radioOptionList";
 export * from "../organisms/inviteCard/inviteCard";
 export * from "../organisms/promotionWidget/promotionWidget";
 export * from "../organisms/featureAnnouncement/featureAnnouncement";
+export * from "../organisms/settingInput/settingInput";
 export * from "../organisms/releaseNote/releaseNote";
+export * from "../organisms/imageUploader/imageUploader";

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

@@ -11,7 +11,7 @@ export declare type HOCBaseProps = {
     borderStyle?: BorderStyleDirection | BorderStyles;
     borderColor?: ColorSelection | LiteralUnion<HOCColorKeys>;
     backgroundColor?: BackgroundColor;
-    color?: TextColor;
+    color?: LiteralUnion<TextColor>;
     boxShadow?: Shadows;
     height?: Height;
     width?: Width;

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

@@ -2,5 +2,5 @@ import { IconsEntity } from "../../theme/theming/entities";
 import { SizeType } from "../../types/global";
 import { IconColors } from "../../exports/atoms";
 import { LiteralUnion } from '../hoc-types/entityValueTypes';
-export declare const getIconColor: (color: IconColors, entity: IconsEntity) => string | undefined;
+export declare const getIconColor: (color: LiteralUnion<IconColors>, entity: IconsEntity) => any;
 export declare const getIconSize: (size: LiteralUnion<SizeType> | number, entity: IconsEntity) => any;

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

@@ -180,6 +180,48 @@ 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;
+            };
+        };
         boxShadow: (shadow: "dark" | "mediumDark" | "mediumLight" | "light" | "xLight", color?: string | undefined, reverseOffset?: boolean | undefined) => string;
         borderSize: string;
         outlinedBackgroundColor: string;
@@ -231,41 +273,6 @@ export declare const useEntities: () => {
                 borderRadius: 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;
-        };
     };
     inputs: {
         checkbox: {

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

@@ -1,9 +1,10 @@
 import { FC } from 'react';
 import { TextColor } from "../../atoms/typography/text";
-import { SizeType, OnMouseEvent, ThemeMode } from "../../types/global";
+import { SizeType, OnMouseEvent } from "../../types/global";
 import { entities } from "../../theme/theming/entities";
+import { IconType } from "../../exports/atoms";
 import { DirectionType } from '../tooltip/tooltip';
-export declare type ButtonType = ThemeMode;
+export declare type ButtonType = keyof typeof entities.buttons.types;
 export declare type ButtonProps = {
     title?: string;
     type?: ButtonType;
@@ -18,6 +19,7 @@ export declare type ButtonProps = {
     disabledCaption?: string;
     disabledDirection?: DirectionType;
     id?: string;
+    icon?: IconType;
 };
-export declare type ButtonStyle = typeof entities.buttons.primary;
+export declare type ButtonStyle = typeof entities.buttons.types.primary;
 export declare const Button: FC<ButtonProps>;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export declare type ImageThumbnailProps = {
+    url: string;
+    width: number;
+    height: number;
+    onRemove?: () => void;
+};
+export declare const ImageThumbnail: FC<ImageThumbnailProps>;

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

@@ -3,6 +3,6 @@ export declare type StackedCardHeadProps = {
     cardImage?: string;
     cardOrientation?: 'vertical' | 'horizontal';
     quantity: number;
-    quantityDescription?: string;
+    quantityDescription: string;
 };
 export declare const StackedCardHead: FC<StackedCardHeadProps>;

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

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { FileRejection } from 'react-dropzone';
+declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
+export declare type ImageUploaderProps = {
+    onUpload: (files: {
+        accepted: File[];
+        rejected: FileRejection[];
+    }) => void;
+    acceptedFiles: AcceptedFileType[];
+    hasMultiupload?: boolean;
+    maxFileSize?: number;
+    maxAcceptedFiles?: number;
+    uploadTitle?: string;
+};
+export declare const ImageUploader: (props: ImageUploaderProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export declare type SettingInputProps = {
+    value: string | null;
+    settingsType: 'color' | 'image';
+    inactiveTitle: string;
+    onRemove: () => void;
+    onClick?: () => void;
+    onMouseEvent?: () => void;
+};
+export declare const SettingInput: FC<SettingInputProps>;

package/dist/src/organisms/staticNavigation/components/navigationLink.d.ts

@@ -1,10 +1,12 @@
 import { FC } from 'react';
+import { Target } from "../../..";
 import { TextColor } from "../../../atoms/typography/text";
 declare type NavigationLinkProps = {
     title: string;
     isActive: boolean;
     linkTitleColor?: TextColor;
     href?: string;
+    target?: Target;
 };
 export declare const NavigationLink: FC<NavigationLinkProps>;
 export {};

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

@@ -1,11 +1,13 @@
 import React, { FC } from 'react';
 import { TextColor, IconType } from "../../exports/atoms";
 import { BrandTypes, LogoColorTypes } from "../../exports/molecules";
+export declare type Target = '_self' | '_blank' | '_parent' | '_top' | undefined;
 export declare type Link = {
     title: string;
     href: string;
     onClick?: () => void;
     icon?: IconType;
+    target?: Target;
 };
 export declare type LinkColumnType = {
     title: string;

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

@@ -3,6 +3,6 @@ import { QuantitySliderProps } from "../../../../exports/molecules";
 export declare type CardQuantitySliderProps = {
     cardImage?: string;
     cardOrientation?: 'vertical' | 'horizontal';
-    quantityDescription?: string;
+    quantityDescription: string;
 } & QuantitySliderProps;
 export declare const CardQuantitySlider: FC<CardQuantitySliderProps>;

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

@@ -85,6 +85,7 @@ export declare const SliderHorizontal: any;
 export declare const SliderVertical: any;
 export declare const SOCLogo: any;
 export declare const Star: any;
+export declare const Stickers: any;
 export declare const Template: any;
 export declare const TenDoor: any;
 export declare const Text: any;

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

@@ -9,4 +9,5 @@ export declare const DangerButton: any;
 export declare const ShadowButton: any;
 export declare const AccentButton: any;
 export declare const OutlinedButton: any;
+export declare const SmokeButton: any;
 export declare const DisabledButton: any;

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

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

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

@@ -0,0 +1,5 @@
+import { ImageUploaderProps } 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<ImageUploaderProps>;

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

@@ -0,0 +1,7 @@
+import { SettingInputProps } 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 ColorSettings: Story<SettingInputProps>;
+export declare const ImageSetting: any;
+export declare const ColorSetting: any;