@sendoutcards/quantum-design-ui 1.7.99 → 1.8.0

package/dist/index.es.js

@@ -15210,9 +15210,9 @@ var Select = function (props) {
   var openOrCloseAndFocus = function (shouldOpen) {
     setIsOpen(shouldOpen);
     if (shouldOpen) {
-      if (currentSelection !== undefined) {
+      if (selectedOptionIndex !== undefined) {
         setTimeout(function () {
-          focusCurrentSelection(currentSelection);
+          focusCurrentSelection(selectedOptionIndex);
         }, 100);
       }
     }
@@ -15280,8 +15280,8 @@ var Select = function (props) {
     css: styles$v.selectBody(hocs, focusColor, selectHeight, selectWidth),
     onClick: function () {
       openOrCloseAndFocus(!isOpen);
-      if (isOpen && currentSelection !== selectedOptionIndex) {
-        applyCurrentSelection();
+      if (currentSelection !== selectedOptionIndex) {
+        isOpen ? applyCurrentSelection() : setCurrentSelection(selectedOptionIndex);
       }
     },
     borderRadius: "default",
@@ -17607,7 +17607,7 @@ var ArticleCard = function (_a) {
 };
 var templateObject_1$o;
 
-var _emotionSourceMap$n = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIGxpbmtDb2x1bW5Db250YWluZXI6IGNzcyh0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXCJdLCBbXCJcIl0pKSlcclxufTtcclxudmFyIHRlbXBsYXRlT2JqZWN0XzE7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */";
+var _emotionSourceMap$n = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIGxpbmtDb2x1bW5Db250YWluZXI6IGNzcyh0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXCJdLCBbXCJcIl0pKSksXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */";
 var styles$m = {
   linkColumnContainer: /*#__PURE__*/css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([";label:linkColumnContainer;" + _emotionSourceMap$n], [";label:linkColumnContainer;" + _emotionSourceMap$n])))
 };
@@ -18185,7 +18185,13 @@ var Banner = function (_a) {
     status = _a.status,
     children = _a.children,
     _b = _a.outlined,
-    outlined = _b === void 0 ? true : _b;
+    outlined = _b === void 0 ? true : _b,
+    onClose = _a.onClose;
+  var _c = useState(false),
+    isHovering = _c[0],
+    setIsHovering = _c[1];
+  var device = useDeviceSize().device;
+  var isMobile = device === 'xSmall' ? true : false;
   return jsx(Flex, {
     width: "100%",
     backgroundColor: {
@@ -18205,7 +18211,9 @@ var Banner = function (_a) {
     borderRadius: "default",
     justifyContent: "flex-start",
     alignItems: "center"
-  }, jsx(Flex, null, icon && jsx(Flex, {
+  }, jsx(Flex, {
+    width: "100%"
+  }, icon && jsx(Flex, {
     justifyContent: "center",
     alignItems: "center",
     inset: {
@@ -18215,17 +18223,45 @@ var Banner = function (_a) {
     name: icon,
     size: "small",
     primaryColor: outlined ? 'primaryBodyText' : 'inverseHeadingText'
-  })), message && jsx(Text, {
+  })), message && jsx(Flex, {
+    width: "100%"
+  }, jsx(Text, {
     content: message,
     color: outlined ? 'primaryBody' : 'inverseHeading',
     type: {
       xSmall: 'footnote',
       small: 'caption'
     }
-  })), jsx(Div, {
-    display: "flex",
+  }))), children && jsx(Flex, {
+    width: "100%",
     alignItems: "center"
-  }, children));
+  }, children), onClose && jsx(Flex, {
+    justifyContent: "flex-end",
+    alignItems: "center",
+    outset: {
+      right: isMobile ? 'x0' : 'x2',
+      left: 'x4'
+    },
+    onHoverStart: function () {
+      return setIsHovering(true);
+    },
+    onHoverEnd: function () {
+      return setIsHovering(false);
+    }
+  }, jsx(Flex, {
+    onClick: onClose,
+    width: "40px",
+    height: "40px",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer",
+    backgroundColor: isHovering ? 'foreground' : undefined,
+    borderRadius: "default"
+  }, jsx(Icon, {
+    primaryColor: "default",
+    size: "xSmall",
+    name: "close"
+  }))));
 };
 
 var _emotionSourceMap2$a = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJYSIsImZpbGUiOiJzdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gXCJ0c2xpYlwiO1xyXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcclxuZXhwb3J0IGRlZmF1bHQge1xyXG4gICAgY2lyY2xlTWVudUNvbnRhaW5lcjogY3NzKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gICAgY3Vyc29yOiBwb2ludGVyO1xcbiAgICA+IGRpdiA+IHN2ZyB7XFxuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjUpO1xcbiAgICB9XFxuICBcIl0sIFtcIlxcbiAgICBjdXJzb3I6IHBvaW50ZXI7XFxuICAgID4gZGl2ID4gc3ZnIHtcXG4gICAgICB0cmFuc2Zvcm06IHNjYWxlKDEuNSk7XFxuICAgIH1cXG4gIFwiXSkpKSxcclxuICAgIHRyaWdnZXI6IGNzcyh0ZW1wbGF0ZU9iamVjdF8yIHx8ICh0ZW1wbGF0ZU9iamVjdF8yID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICAgIGRpc3BsYXk6IG5vbmU7XFxuICBcIl0sIFtcIlxcbiAgICBkaXNwbGF5OiBub25lO1xcbiAgXCJdKSkpLFxyXG59O1xyXG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */";
@@ -22612,6 +22648,148 @@ var ComparisonIncludesList = function (_a) {
   }))));
 };
 
+var ImageGrid = function (_a) {
+  var images = _a.images,
+    width = _a.width,
+    _b = _a.borderRadius,
+    borderRadius = _b === void 0 ? '8px' : _b,
+    _c = _a.gap,
+    gap = _c === void 0 ? '10px' : _c;
+  var imageStyles = {
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    borderRadius: borderRadius
+  };
+  return jsx(Div, {
+    position: "relative",
+    overflow: "hidden",
+    width: "100%",
+    height: "100%"
+  }, jsx(Flex, {
+    width: width,
+    height: "100%",
+    columnGap: gap,
+    rowGap: gap,
+    position: "absolute",
+    transform: "translate(-50%, -50%)",
+    top: "50%",
+    left: "50%"
+  }, jsx(Flex, {
+    id: "left_column",
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    columnGap: gap
+  }, jsx(Flex, {
+    flexDirection: "column",
+    width: "100%",
+    flexGrow: 1,
+    rowGap: gap
+  }, jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.leftColumn.topLeft,
+    style: imageStyles
+  }), jsx(Flex, {
+    id: "bottom_image",
+    width: "100%",
+    flexGrow: 2
+  }, jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.leftColumn.bottomLeft,
+    style: imageStyles
+  }))), jsx(Flex, {
+    flexDirection: "column",
+    width: "100%",
+    flexGrow: 1,
+    rowGap: gap
+  }, jsx(Flex, {
+    flexGrow: 2,
+    backgroundImage: images.leftColumn.topRight,
+    style: imageStyles
+  }), jsx(Flex, {
+    id: "bottom_image",
+    width: "100%",
+    flexGrow: 1
+  }, jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.leftColumn.bottomRight,
+    style: imageStyles
+  })))), jsx(Flex, {
+    id: "center_column",
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center" // Add this line
+    ,
+    flexDirection: "column",
+    rowGap: gap
+  }, jsx(Flex, {
+    id: "center_top_images",
+    width: "100%",
+    flexGrow: 1,
+    columnGap: gap
+  }, jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.centerColumn.topLeft,
+    style: imageStyles
+  }), jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.centerColumn.topRight,
+    style: imageStyles
+  })), jsx(Flex, {
+    id: "bottom_image",
+    width: "100%",
+    flexGrow: 2
+  }, jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.centerColumn.mainImage,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "cover",
+    backgroundPosition: "center top",
+    borderRadius: borderRadius
+  }))), jsx(Flex, {
+    id: "right_column",
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    columnGap: gap
+  }, jsx(Flex, {
+    flexDirection: "column",
+    width: "100%",
+    flexGrow: 1,
+    rowGap: gap
+  }, jsx(Flex, {
+    flexGrow: 2,
+    backgroundImage: images.rightColumn.topLeft,
+    style: imageStyles
+  }), jsx(Flex, {
+    id: "bottom_image",
+    width: "100%",
+    flexGrow: 1
+  }, jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.rightColumn.bottomLeft,
+    style: imageStyles
+  }))), jsx(Flex, {
+    flexDirection: "column",
+    width: "100%",
+    flexGrow: 1,
+    rowGap: gap
+  }, jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.rightColumn.topRight,
+    style: imageStyles
+  }), jsx(Flex, {
+    id: "bottom_image",
+    width: "100%",
+    flexGrow: 2
+  }, jsx(Flex, {
+    flexGrow: 1,
+    backgroundImage: images.rightColumn.bottomRight,
+    style: imageStyles
+  }))))));
+};
+
 var QuantitySlider = function (_a) {
   var quantity = _a.quantity,
     min = _a.min,
@@ -24463,7 +24641,7 @@ var UpsaleDialog = function (_a) {
     outlined: true,
     hover: true,
     size: "medium",
-    title: "Send a Free Postcard",
+    title: "Send a Free Card",
     onClick: function () {
       return window.open("https://www.sendoutcards.com/" + sponsorId + "/send/");
     }
@@ -24496,4 +24674,4 @@ var useColorSwatch = function () {
   };
 };
 
-export { Accordion, AccordionBody, AccordionHeading, AccountMenu, AffiliateShareWidget, Anchor, AnimatedCheckMark, AnimatedGrid, ArticleCard, Aside, Avatar, AwardCard, AwardGroupLabel, Badge, Banner, Bar, BlockQuote, BulkSend, Button, ButtonWithMenu, Capsule, Card, CardEntryDialog, CardQuantitySlider, Checkbox, Circle, CircleMenu, Clipboard, CloseButton, ColorOption, ColorThumbnail, ComparisonIncludesList, ComparisonItem, ConfigurationCard, ConfirmDialog, Content, ContentPusher, ContextBar, CountdownTimer, Dialog, DisplayCard, Div, DownloadButton, DragBar, DragBox, Drawer, DropDownMenu, ExpandedAwardCard, FeatureAnnouncement, FeatureBadge, Flex, Grid, GridItem, HStack, Icon, IconLink, Image$1 as Image, ImageThumbnail, ImageUploadWidget, ImageUploader, IncrementSetting, InfiniteScroller, InfoBlock, Input, InviteCard, LinkColumn, List, ListItem, Loader, LoadingSpinner, Logo, MasonryGrid, Menu, MenuItem, MenuSection, Navigation, NavigationPill, Option, OrderCard, Overlay, Page, PaperTypeModal, PhoneInput, Pill, PinInput, PricingTile, Progress, PromotionWidget, QDSChrome, QuantitySlider, QuantumColorPicker, QuantumThemeWrapper, QuickLink, RadioOptionCard, RadioOptionList, ReleaseNote, ReleaseNoteDialog, RevealingContent, RowItem, Scrollable, ScrollingIndicator, Section, Select, SelectableCard, SelectableList, Separator, SettingInput, Sheet, Sidebar, Slider, SnapPoint, Spacer, Span, Sphere, StackedCards, StaticNavigation, Stepper, Stoplight, SubNavigation, SubscriptionUpsaleDialog, Tab, Table, TableRow, Tabs, Text, TitledList, Todo, Toggle, Tooltip, Transition, UploadButton, UpsaleDialog, UpsaleSheet, UserCard, UserCardLoader, VStack, VideoPlayer, Zoom, entities$6 as bellaCadaeuxTheme, entities$5 as blue42Theme, getSize, entities$7 as greenerStillTheme, entities$4 as promptingUTheme, entities as promptingsTheme, entities$1 as sendOutCardsTheme, entities$8 as sendogoTheme, entities$3 as streamMarketingTheme, entities$2 as streamVATheme, useColorSwatch };
+export { Accordion, AccordionBody, AccordionHeading, AccountMenu, AffiliateShareWidget, Anchor, AnimatedCheckMark, AnimatedGrid, ArticleCard, Aside, Avatar, AwardCard, AwardGroupLabel, Badge, Banner, Bar, BlockQuote, BulkSend, Button, ButtonWithMenu, Capsule, Card, CardEntryDialog, CardQuantitySlider, Checkbox, Circle, CircleMenu, Clipboard, CloseButton, ColorOption, ColorThumbnail, ComparisonIncludesList, ComparisonItem, ConfigurationCard, ConfirmDialog, Content, ContentPusher, ContextBar, CountdownTimer, Dialog, DisplayCard, Div, DownloadButton, DragBar, DragBox, Drawer, DropDownMenu, ExpandedAwardCard, FeatureAnnouncement, FeatureBadge, Flex, Grid, GridItem, HStack, Icon, IconLink, Image$1 as Image, ImageGrid, ImageThumbnail, ImageUploadWidget, ImageUploader, IncrementSetting, InfiniteScroller, InfoBlock, Input, InviteCard, LinkColumn, List, ListItem, Loader, LoadingSpinner, Logo, MasonryGrid, Menu, MenuItem, MenuSection, Navigation, NavigationPill, Option, OrderCard, Overlay, Page, PaperTypeModal, PhoneInput, Pill, PinInput, PricingTile, Progress, PromotionWidget, QDSChrome, QuantitySlider, QuantumColorPicker, QuantumThemeWrapper, QuickLink, RadioOptionCard, RadioOptionList, ReleaseNote, ReleaseNoteDialog, RevealingContent, RowItem, Scrollable, ScrollingIndicator, Section, Select, SelectableCard, SelectableList, Separator, SettingInput, Sheet, Sidebar, Slider, SnapPoint, Spacer, Span, Sphere, StackedCards, StaticNavigation, Stepper, Stoplight, SubNavigation, SubscriptionUpsaleDialog, Tab, Table, TableRow, Tabs, Text, TitledList, Todo, Toggle, Tooltip, Transition, UploadButton, UpsaleDialog, UpsaleSheet, UserCard, UserCardLoader, VStack, VideoPlayer, Zoom, entities$6 as bellaCadaeuxTheme, entities$5 as blue42Theme, getSize, entities$7 as greenerStillTheme, entities$4 as promptingUTheme, entities as promptingsTheme, entities$1 as sendOutCardsTheme, entities$8 as sendogoTheme, entities$3 as streamMarketingTheme, entities$2 as streamVATheme, useColorSwatch };

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

@@ -43,3 +43,4 @@ export * from "../organisms/imageUploader/imageUploader";
 export * from "../organisms/imageUploadWidget/imageUploadWidget";
 export * from "../organisms/configurationCard/configurationCard";
 export * from "../organisms/comparisonIncludesList/comparisonIncludesList";
+export * from "../organisms/imageGrid/imageGrid";

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

@@ -6,6 +6,7 @@ export declare type BannerProps = {
     status: StatusType;
     outlined?: boolean;
     children?: React.ReactNode;
+    onClose?: () => void;
 };
 export declare type StatusType = 'success' | 'warning' | 'danger';
-export declare const Banner: ({ icon, message, status, children, outlined, }: BannerProps) => JSX.Element;
+export declare const Banner: ({ icon, message, status, children, outlined, onClose, }: BannerProps) => JSX.Element;

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

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+export declare type ImageGridProps = {
+    images: {
+        leftColumn: {
+            topLeft: string;
+            bottomLeft: string;
+            topRight: string;
+            bottomRight: string;
+        };
+        centerColumn: {
+            topLeft: string;
+            topRight: string;
+            mainImage: string;
+        };
+        rightColumn: {
+            topLeft: string;
+            bottomLeft: string;
+            topRight: string;
+            bottomRight: string;
+        };
+    };
+    width: string;
+    borderRadius?: string;
+    gap?: string;
+};
+export declare const ImageGrid: FC<ImageGridProps>;

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

@@ -1,5 +1,8 @@
+import { Story } from '@storybook/react/types-6-0';
+import { BannerProps } from "../../exports/organisms";
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
 export default _default;
+export declare const DismissibleBanner: Story<BannerProps>;
 export declare const Success: any;
 export declare const Warning: any;
 export declare const Danger: any;

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

@@ -0,0 +1,5 @@
+import { ImageGridProps } from "../../exports/organisms";
+import { Story } from '@storybook/react/types-6-0';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const StoryName: Story<ImageGridProps>;

package/package.json

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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { HOCBaseProps } from "../../helpers/hoc-types/hocBasePropTypes";
-import { HOCMotionProps } from "../../helpers/hoc-types/hocMotionTypes";
-export declare type DivProps = {
-    children?: React.ReactNode;
-    outsideClick?: () => void;
-    clickElementBypass?: string;
-} & HOCBaseProps & HOCMotionProps;
-export declare const Companion: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    outsideClick?: (() => void) | undefined;
-    clickElementBypass?: string | undefined;
-} & HOCBaseProps & {
-    className?: string | undefined;
-    motionKey?: string | number | undefined;
-    id?: string | undefined;
-} & import("framer-motion").MotionProps & React.RefAttributes<HTMLDivElement>>;

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

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