@sendoutcards/quantum-design-ui 1.7.48 → 1.7.49

package/dist/index.es.js

@@ -13789,6 +13789,10 @@ var Input = function (_a) {
     ref: inputWrapperRef,
     onFocus: function () {
       setIsFocused(true);
+    },
+    style: {
+      // opacity: 0.3,
+      backgroundColor: message ? "" + hocs.colors.swatches[message.type]._1000 : ''
     }
   }, icon && jsx(Span, {
     css: styles$w.iconContainer,
@@ -13898,6 +13902,13 @@ var Input = function (_a) {
       border: inputs.text.borderWidth + " solid " + hocs.colors.swatches[focusColor].base,
       transition: 'border 0.3s'
     }
+  }), message && jsx(Div, {
+    id: "outerglow",
+    css: styles$w.outerglow(inputs, width, height, isFullWidth),
+    style: {
+      border: inputs.text.borderWidth + " solid " + hocs.colors.swatches[message.type].base,
+      transition: 'border 0.3s'
+    }
   })), message && jsx(HStack, {
     gap: "x_5",
     justify: "flex-start"
@@ -14320,7 +14331,10 @@ var Select = function (props) {
     borderRadius: "default",
     backgroundColor: isHover || isOpen ? 'foreground' : 'background',
     boxShadow: isHover || isOpen ? inputs.select.boxShadow : 'none',
-    tabIndex: 0
+    tabIndex: 0,
+    style: {
+      border: message ? inputs.text.borderWidth + " solid " + hocs.colors.swatches[message.type].base : ''
+    }
   }, jsx("div", {
     css: styles$u.activeOption(alignment)
   }, selectedOptionIndex !== undefined ? jsx("div", null, props.type === 'text' ? jsx(OptionContent, {
@@ -19890,7 +19904,9 @@ var PricingTile = function (_a) {
       children = _a.children,
       _h = _a.hasShadow,
       hasShadow = _h === void 0 ? true : _h,
-      disclaimer = _a.disclaimer;
+      disclaimer = _a.disclaimer,
+      _j = _a.isSelected,
+      isSelected = _j === void 0 ? false : _j;
   var hocs = useEntities().hocs;
 
   var getIconColorFromAccentColor = function (accentColor) {
@@ -19938,9 +19954,9 @@ var PricingTile = function (_a) {
 
   var featureTextColor = isFeatured ? featuredItemStyles.textColor === 'white' ? 'inverseBody' : 'primaryBody' : textColor === 'white' ? 'inverseBody' : 'primaryBody';
 
-  var _j = useState(false),
-      isDisclaimerOpen = _j[0],
-      setDisclaimerOpen = _j[1];
+  var _k = useState(false),
+      isDisclaimerOpen = _k[0],
+      setDisclaimerOpen = _k[1];
 
   return jsx(Flex, {
     inset: "x5",
@@ -19948,10 +19964,16 @@ var PricingTile = function (_a) {
     width: "100%",
     position: "relative",
     height: "fit-content",
+    borderStyle: 'solid',
+    borderColor: isSelected ? {
+      swatch: 'success',
+      shade: 'base'
+    } : 'transparent',
+    borderWidth: 'default',
     borderRadius: "default",
     boxShadow: hasShadow ? 'mediumLight' : '',
     flexDirection: "column",
-    justifyContent: "center",
+    justifyContent: "flex-start",
     alignItems: "center",
     minWidth: {
       xSmall: '100%',
@@ -19974,44 +19996,39 @@ var PricingTile = function (_a) {
   }, jsx(Flex, {
     justifyContent: billingInterval ? 'space-between' : 'flex-start',
     width: "100%",
-    alignContent: "center"
-  }, jsx(Text, {
-    type: {
-      xSmall: 'body',
-      medium: 'largeBody'
-    },
-    color: isFeatured ? featuredItemStyles.accentColor : accentColor
-  }, title), billingInterval && jsx(Flex, {
-    height: "100%"
-  }, jsx(Spacer, {
-    orientation: "horizontal",
-    space: "x2"
-  }), jsx(Flex, {
-    borderRadius: "circle",
-    alignItems: "center",
-    height: "fit-content",
-    backgroundColor: backgroundColor !== 'inverseBody' && backgroundColor !== 'inverseHeading' || isFeatured ? '#FFFFFF44' : undefined,
-    boxShadow: !isFeatured ? 'light' : undefined,
-    inset: {
-      vertical: 'x_5',
-      horizontal: 'x2'
-    }
+    alignContent: "flex-start"
+  }, isSelected && jsx(Div, {
+    right: "x1",
+    position: "absolute",
+    top: "x1"
+  }, jsx(AnimatedCheckMark, {
+    color: "accent"
+  })), jsx(VStack, {
+    gap: "x2"
   }, jsx(Text, {
     type: {
-      xSmall: 'caption',
-      medium: 'body'
+      xSmall: 'subtitle',
+      medium: 'title'
     },
+    color: isFeatured ? featuredItemStyles.accentColor : accentColor,
+    weight: "bold",
+    content: title
+  }), jsx(Text, {
+    lineHeight: 1.5,
+    type: "caption",
     color: featureTextColor
-  }, billingInterval)))), jsx(Flex, {
+  }, description !== null && description !== void 0 ? description : children), jsx(Flex, {
     width: "100%",
     alignItems: "center"
   }, jsx(Text, {
     type: {
-      xSmall: 'title',
-      medium: 'heroTitle'
+      xSmall: 'subtitle',
+      medium: 'title'
     },
-    color: featureTextColor
-  }, price), priceSubtext && jsx(React.Fragment, null, jsx(Spacer, {
+    color: featureTextColor,
+    weight: "bold",
+    content: price
+  }), priceSubtext && jsx(React.Fragment, null, jsx(Spacer, {
     space: "x2",
     orientation: "horizontal"
   }), jsx(Flex, {
@@ -20022,13 +20039,28 @@ var PricingTile = function (_a) {
       medium: 'caption'
     },
     color: featureTextColor
-  }, priceSubtext)))), jsx(Flex, null, jsx(Text, {
+  }, priceSubtext))))), billingInterval && jsx(Flex, {
+    height: "100%"
+  }, jsx(Spacer, {
+    orientation: "horizontal",
+    space: "x2"
+  }), jsx(Flex, {
+    borderRadius: "circle",
+    alignItems: "center",
+    height: "fit-content",
+    backgroundColor: backgroundColor !== 'inverseBody' && backgroundColor !== 'inverseHeading' || isFeatured ? '#FFFFFF44' : undefined,
+    boxShadow: !isFeatured ? 'light' : undefined,
+    inset: {
+      vertical: 'x_5',
+      horizontal: 'x2'
+    }
+  }, jsx(Text, {
     type: {
       xSmall: 'caption',
       medium: 'body'
     },
     color: featureTextColor
-  }, description !== null && description !== void 0 ? description : children))), jsx(Flex, {
+  }, billingInterval))))), jsx(Flex, {
     width: "100%"
   }, jsx(VStack, {
     gap: 'x2'
@@ -20098,6 +20130,7 @@ var PricingTile = function (_a) {
     title: primaryAction.text,
     size: "medium",
     onClick: primaryAction.onClick,
+    disabled: primaryAction.isDisabled,
     type: getButtonTypeFromAccentColor(isFeatured ? featuredItemStyles.accentColor : accentColor),
     textColorOverride: primaryAction.shouldTextMatchBackground && isFeatured ? featuredItemStyles.backgroundColor : primaryAction.shouldTextMatchBackground ? backgroundColor : undefined
   })), secondaryAction && jsx(Flex, {
@@ -20105,7 +20138,7 @@ var PricingTile = function (_a) {
     alignItems: 'center'
   }, jsx(Anchor, {
     title: secondaryAction.text,
-    onClick: secondaryAction.onClick,
+    onClick: secondaryAction.isDisabled ? undefined : secondaryAction.onClick,
     color: secondaryAction.shouldTextMatchBackground && isFeatured ? featuredItemStyles.backgroundColor : secondaryAction.shouldTextMatchBackground ? backgroundColor : undefined,
     isDecorated: true,
     target: '_blank'
@@ -20142,10 +20175,12 @@ var PricingTile = function (_a) {
     }
   }, jsx(Text, {
     type: 'title',
-    weight: 'bold'
-  }, disclaimer.termsTitle), jsx(Text, {
-    type: 'body'
-  }, disclaimer.termsDescription), jsx(Div, {
+    weight: 'bold',
+    content: disclaimer.termsTitle
+  }), jsx(Text, {
+    type: 'body',
+    content: disclaimer.termsDescription
+  }), jsx(Div, {
     outset: {
       top: 'auto'
     },

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

@@ -5,6 +5,7 @@ declare type ActionType = {
     text: string;
     onClick: () => void;
     shouldTextMatchBackground?: boolean;
+    isDisabled?: boolean;
 };
 declare type FeaturedItemStyleType = {
     backgroundColor: PricingTileColorType;
@@ -38,6 +39,7 @@ export declare type PricingTileProps = {
     billingInterval?: string;
     hasShadow?: boolean;
     disclaimer?: Disclaimer;
+    isSelected?: boolean;
 };
 export declare const PricingTile: FC<PricingTileProps>;
 export {};

package/package.json

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