@sendoutcards/quantum-design-ui 1.7.65 → 1.7.68

package/dist/index.es.js

@@ -12353,41 +12353,6 @@ var Capsule = function (_a) {
   }));
 };
 
-var ColorThumbnail = function (_a) {
-  var backgroundColor = _a.backgroundColor,
-      isSelected = _a.isSelected,
-      onSelect = _a.onSelect,
-      _b = _a.thumbnailSize,
-      thumbnailSize = _b === void 0 ? '32px' : _b,
-      outset = _a.outset,
-      _c = _a.isRounded,
-      isRounded = _c === void 0 ? false : _c;
-  var selectedThumbnailSize = "calc(" + thumbnailSize + " / 2.75)";
-  return jsx(Flex, {
-    onClick: function () {
-      return onSelect(backgroundColor);
-    },
-    backgroundColor: backgroundColor,
-    whileHover: {
-      scale: 1.2
-    },
-    cursor: "pointer",
-    borderRadius: isRounded ? 'circle' : 'small',
-    width: thumbnailSize,
-    height: thumbnailSize,
-    minWidth: thumbnailSize,
-    outset: outset,
-    justifyContent: "center",
-    alignItems: "center"
-  }, isSelected && jsx(Div, {
-    backgroundColor: "foreground",
-    width: selectedThumbnailSize,
-    height: selectedThumbnailSize,
-    borderRadius: isRounded ? 'circle' : '3px',
-    boxShadow: "mediumLight"
-  }));
-};
-
 var computeButtonSizeProperties = function (size, sizeMap) {
   return mapSizeType(size, sizeMap);
 };
@@ -19711,20 +19676,20 @@ var DropperIcon = function (props) {
 };
 
 var QuantumColorPicker = function (_a) {
+  var _b, _c, _d;
+
   var color = _a.color,
       onChange = _a.onChange,
       convertedColorCallback = _a.convertedColorCallback,
-      _b = _a.convertedColorType,
-      convertedColorType = _b === void 0 ? 'hex' : _b,
-      _c = _a.showEyeDropper,
-      showEyeDropper = _c === void 0 ? false : _c,
-      palettes = _a.palettes,
-      _d = _a.paletteTitle,
-      paletteTitle = _d === void 0 ? 'Presets' : _d;
+      _e = _a.convertedColorType,
+      convertedColorType = _e === void 0 ? 'hex' : _e,
+      _f = _a.showEyeDropper,
+      showEyeDropper = _f === void 0 ? false : _f,
+      palette = _a.palette;
 
-  var _e = useResizeObserver(),
-      ref = _e.ref,
-      width = _e.width;
+  var _g = useResizeObserver(),
+      ref = _g.ref,
+      width = _g.width;
 
   var formattedHexValue = function (value) {
     return value.startsWith('#') ? value : "#" + value;
@@ -19757,6 +19722,7 @@ var QuantumColorPicker = function (_a) {
     }
   };
 
+  var paletteArray = (_b = palette === null || palette === void 0 ? void 0 : palette.colors) !== null && _b !== void 0 ? _b : Array.from(Array((_c = palette === null || palette === void 0 ? void 0 : palette.count) !== null && _c !== void 0 ? _c : 12));
   return jsx(Div, {
     inset: "x2",
     display: "flex",
@@ -19794,11 +19760,11 @@ var QuantumColorPicker = function (_a) {
       return handleOnChange(formattedHexValue(value));
     },
     type: "text"
-  })), palettes && jsx(React.Fragment, null, jsx(Spacer, {
+  })), (palette && palette.colors || (palette === null || palette === void 0 ? void 0 : palette.isLoading)) && jsx(React.Fragment, null, jsx(Spacer, {
     space: "x1"
   }), jsx(Text, {
     type: "caption",
-    content: paletteTitle,
+    content: (_d = palette.title) !== null && _d !== void 0 ? _d : 'Presets',
     color: "primaryBody",
     lineHeight: 1.2,
     inset: {
@@ -19812,13 +19778,17 @@ var QuantumColorPicker = function (_a) {
     width: "100%",
     justifyContent: "flex-start",
     flexWrap: 'wrap',
-    alignItems: "center"
-  }, palettes.map(function (palette, index) {
+    alignItems: "center",
+    inset: {
+      bottom: '6px'
+    }
+  }, paletteArray.map(function (paletteColor, index) {
     return jsx(ColorThumbnail, {
       key: index,
       isRounded: true,
-      backgroundColor: palette,
-      isSelected: palette === color,
+      isLoading: palette.isLoading,
+      backgroundColor: paletteColor,
+      isSelected: paletteColor === color,
       onSelect: function (value) {
         handleOnChange(formattedHexValue(value));
       },
@@ -20203,7 +20173,9 @@ var PricingTile = function (_a) {
       hasShadow = _h === void 0 ? true : _h,
       disclaimer = _a.disclaimer,
       _j = _a.isSelected,
-      isSelected = _j === void 0 ? false : _j;
+      isSelected = _j === void 0 ? false : _j,
+      _k = _a.isFullLength,
+      isFullLength = _k === void 0 ? false : _k;
   var hocs = useEntities().hocs;
 
   var getIconColorFromAccentColor = function (accentColor) {
@@ -20251,16 +20223,17 @@ var PricingTile = function (_a) {
 
   var featureTextColor = isFeatured ? featuredItemStyles.textColor === 'white' ? 'inverseBody' : 'primaryBody' : textColor === 'white' ? 'inverseBody' : 'primaryBody';
 
-  var _k = useState(false),
-      isDisclaimerOpen = _k[0],
-      setDisclaimerOpen = _k[1];
+  var _l = useState(false),
+      isDisclaimerOpen = _l[0],
+      setDisclaimerOpen = _l[1];
 
   return jsx(Flex, {
+    id: "pricingTileContainerQDS",
     inset: "x5",
     backgroundColor: isFeatured ? hocs.textColors[featuredItemStyles.backgroundColor] : hocs.textColors[backgroundColor],
     width: "100%",
     position: "relative",
-    height: "fit-content",
+    height: isFullLength ? 'auto' : 'fit-content',
     borderStyle: 'solid',
     borderColor: isSelected ? {
       swatch: 'success',
@@ -20713,7 +20686,7 @@ var MobileView = function (_a) {
     setOpenSection(false);
   };
 
-  var section = links[currentSection];
+  var section = links ? links[currentSection] : undefined;
 
   var isLinkType = function (valueToCheck) {
     var link = valueToCheck;
@@ -20737,7 +20710,7 @@ var MobileView = function (_a) {
           width: "100%"
         }, jsx(VStack, {
           gap: "x0"
-        }, links.map(function (item, i) {
+        }, links && links.map(function (item, i) {
           return isLinkType(item) ? jsx(Anchor, _extends({
             inset: {
               horizontal: 'x3'
@@ -20779,7 +20752,7 @@ var MobileView = function (_a) {
     }
   }, jsx(Div, {
     width: "100%"
-  }, !isLinkType(section) && jsx(React.Fragment, null, jsx(Div, {
+  }, section && !isLinkType(section) && jsx(React.Fragment, null, jsx(Div, {
     cursor: "pointer",
     display: "flex",
     width: "100%",
@@ -20906,24 +20879,24 @@ var StaticNavigation = function (_a) {
       horizontal: 'x3'
     },
     zIndex: zIndex
-  }, isMobile && jsx(Div, null, jsx(IconLink, {
+  }, links && isMobile && jsx(Div, null, jsx(IconLink, {
     size: isOpen ? 'xSmall' : 'small',
     icon: isOpen ? 'close' : 'hamburger',
     onClick: function () {
       return setIsOpen(!isOpen);
     }
-  })), jsx(Logo, {
+  })), !links && !isMobile && jsx("div", null), jsx(Logo, {
     brand: logo.brand,
     href: logo.href,
     onClick: logo.onClick,
     color: logo.color,
     width: isMobile ? '130px' : '200px'
-  }), !isMobile && jsx(Flex, {
+  }), links && !isMobile && jsx(Flex, {
     height: "100%",
     width: "100%",
     alignItems: "center",
     justifyContent: "center"
-  }, links.map(function (link, index) {
+  }, links && links.map(function (link, index) {
     return jsx(Div, {
       inset: {
         horizontal: size === 'large' ? 'x1' : 'x2'
@@ -20969,7 +20942,7 @@ var StaticNavigation = function (_a) {
   }, jsx(Div, {
     outset: "x3",
     ref: ref
-  }, links.map(function (link, index) {
+  }, links && links.map(function (link, index) {
     return selectedTab === index && jsx(HStack, {
       key: index,
       gap: "x9",
@@ -21010,7 +20983,7 @@ var StaticNavigation = function (_a) {
         subLinkColor: column.linkColor ? column.linkColor : 'primaryBody'
       })));
     }));
-  })))), isMobile && jsx(Div, {
+  })))), links && isMobile && jsx(Div, {
     height: "calc(100% - " + drawerOffset + "px)",
     position: "fixed",
     left: "0px",
@@ -22740,6 +22713,67 @@ var UploadButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var templateObject_1$2, templateObject_2, templateObject_3;
 
+var ColorThumbnailLoader = function (_a) {
+  var diameter = _a.diameter,
+      outset = _a.outset;
+  var radius = diameter / 2;
+  return jsx(Flex, {
+    outset: outset
+  }, jsx(Loader, {
+    width: diameter,
+    height: diameter
+  }, jsx("circle", {
+    cy: radius,
+    cx: radius,
+    r: radius
+  })));
+};
+
+var ColorThumbnail = function (_a) {
+  var backgroundColor = _a.backgroundColor,
+      isSelected = _a.isSelected,
+      onSelect = _a.onSelect,
+      _b = _a.thumbnailSize,
+      thumbnailSize = _b === void 0 ? 32 : _b,
+      outset = _a.outset,
+      _c = _a.isRounded,
+      isRounded = _c === void 0 ? false : _c,
+      _d = _a.isLoading,
+      isLoading = _d === void 0 ? false : _d;
+  var selectedThumbnailSize = "calc(" + thumbnailSize + " / 2.75)";
+
+  if (isLoading) {
+    return jsx(ColorThumbnailLoader, {
+      diameter: thumbnailSize,
+      outset: outset
+    });
+  }
+
+  return jsx(Flex, {
+    onClick: function () {
+      return onSelect(backgroundColor);
+    },
+    backgroundColor: backgroundColor,
+    whileHover: {
+      scale: 1.2
+    },
+    cursor: "pointer",
+    borderRadius: isRounded ? 'circle' : 'small',
+    width: thumbnailSize + "px",
+    height: thumbnailSize + "px",
+    minWidth: thumbnailSize + "px",
+    outset: outset,
+    justifyContent: "center",
+    alignItems: "center"
+  }, isSelected && jsx(Div, {
+    backgroundColor: "foreground",
+    width: selectedThumbnailSize,
+    height: selectedThumbnailSize,
+    borderRadius: isRounded ? 'circle' : '3px',
+    boxShadow: "mediumLight"
+  }));
+};
+
 var _emotionSourceMap$1 = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHRodW1ibmFpbENvbnRhaW5lcjogY3NzKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcIl0sIFtcIlwiXSkpKSxcclxufTtcclxudmFyIHRlbXBsYXRlT2JqZWN0XzE7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */";
 var styles$1 = {
   thumbnailContainer: /*#__PURE__*/css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([";label:thumbnailContainer;" + _emotionSourceMap$1], [";label:thumbnailContainer;" + _emotionSourceMap$1])))

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

@@ -4,8 +4,9 @@ export declare type ColorThumbnailProps = {
     backgroundColor: string;
     isSelected: boolean;
     isRounded?: boolean;
-    thumbnailSize?: string;
+    thumbnailSize?: number;
     outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
     onSelect: (fill: string) => void;
+    isLoading?: boolean;
 };
 export declare const ColorThumbnail: FC<ColorThumbnailProps>;

package/dist/src/atoms/colorThumbnail/loaders/colorThumbnailLoader.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { HOCSpacingKeys, SpacingDirection, LiteralUnion } from "../../../helpers/hoc-types/entityValueTypes";
+declare type ColorThumbnailLoaderProps = {
+    diameter: number;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+};
+export declare const ColorThumbnailLoader: FC<ColorThumbnailLoaderProps>;
+export {};

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

@@ -40,6 +40,7 @@ export declare type PricingTileProps = {
     hasShadow?: boolean;
     disclaimer?: Disclaimer;
     isSelected?: boolean;
+    isFullLength?: boolean;
 };
 export declare const PricingTile: FC<PricingTileProps>;
 export {};

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

@@ -10,7 +10,11 @@ export declare type QuantumColorPickerProps = {
     convertedColorCallback?: (color: ConvertedColorType) => void;
     convertedColorType?: 'hex' | 'rgb' | 'hsl';
     showEyeDropper?: boolean;
-    palettes?: QuantumHex[];
-    paletteTitle?: string;
+    palette?: {
+        title?: string;
+        colors: QuantumHex[];
+        isLoading?: boolean;
+        count?: number;
+    };
 };
 export declare const QuantumColorPicker: FC<QuantumColorPickerProps>;

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

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { DropdownLink, Link } from '../staticNavigation';
 declare type MobileViewProps = {
     isOpen: boolean;
-    links: (DropdownLink | Link)[];
+    links?: (DropdownLink | Link)[];
     toggle: () => void;
 };
 export declare const MobileView: FC<MobileViewProps>;

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

@@ -28,7 +28,7 @@ export declare type StaticNavigationProps = {
         onClick?: () => void;
     };
     accountSection?: React.ReactNode;
-    links: (DropdownLink | Link)[];
+    links?: (DropdownLink | Link)[];
     zIndex?: number;
     openValueOverride?: number;
     drawerOffset?: number;

package/package.json

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