@razorpay/blade 4.0.0 → 5.0.0

package/build/components/index.web.js

@@ -3617,7 +3617,7 @@ var getCommonStyles = function getCommonStyles(props) {
   var feedbackColors = theme.colors.feedback;
   return {
     background: feedbackColors.background[intent][contrastType],
-    padding: "".concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[5])),
+    padding: isBorderless ? "".concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[5])) : "".concat(makeSpace(theme.spacing[3]), " ").concat(makeSpace(theme.spacing[3]), " ").concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[3])),
     borderRadius: makeBorderSize(isBorderless ? theme.border.radius.none : theme.border.radius.medium),
     borderColor: feedbackColors.border[intent][contrastType],
     borderWidth: makeBorderSize(isBorderless ? theme.border.width.none : theme.border.width.thin),
@@ -6454,7 +6454,8 @@ var CloseButtonWrapper = isReactNative$3 ? Box : Fragment;
 var intentIconMap = {
   positive: CheckCircleIcon,
   negative: AlertTriangleIcon,
-  information: AlertTriangleIcon,
+  information: InfoIcon,
+  neutral: InfoIcon,
   notice: AlertTriangleIcon$1
 };
 
@@ -6469,7 +6470,7 @@ var Alert = function Alert(_ref) {
       _ref$isFullWidth = _ref.isFullWidth,
       isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
       _ref$intent = _ref.intent,
-      intent = _ref$intent === void 0 ? 'information' : _ref$intent,
+      intent = _ref$intent === void 0 ? 'neutral' : _ref$intent,
       _ref$isBorderless = _ref.isBorderless,
       isBorderless = _ref$isBorderless === void 0 ? false : _ref$isBorderless,
       actions = _ref.actions;
@@ -6484,31 +6485,46 @@ var Alert = function Alert(_ref) {
       setIsVisible = _useState2[1];
 
   var contrastType = "".concat(contrast, "Contrast");
+  var iconSize = isBorderless ? 'large' : 'medium';
+  var textSize = isBorderless ? 'medium' : 'small';
   var Icon = intentIconMap[intent];
 
-  var icon = /*#__PURE__*/jsx(Icon, {
-    color: "feedback.icon.".concat(intent, ".").concat(contrastType),
-    size: "large"
+  var icon = /*#__PURE__*/jsx(Box, {
+    marginTop: "spacing.1",
+    display: "flex",
+    children: /*#__PURE__*/jsx(Icon, {
+      color: "feedback.icon.".concat(intent, ".").concat(contrastType),
+      size: iconSize
+    })
   });
 
   var _title = title ? /*#__PURE__*/jsx(Box, {
     marginBottom: "spacing.2",
-    children: /*#__PURE__*/jsx(Heading, {
+    children: isBorderless ? /*#__PURE__*/jsx(Heading, {
       size: "small",
       contrast: contrast,
       children: title
+    }) : /*#__PURE__*/jsx(Text, {
+      weight: "bold",
+      contrast: contrast,
+      children: title
     })
   }) : null;
 
-  var _description = /*#__PURE__*/jsx(Text, {
-    contrast: contrast,
-    children: description
+  var _description = /*#__PURE__*/jsx(Box, {
+    marginTop: title || isReactNative$3 ? 'spacing.0' : 'spacing.1',
+    children: /*#__PURE__*/jsx(Text, {
+      size: textSize,
+      contrast: contrast,
+      children: description
+    })
   });
 
   var primaryAction = actions !== null && actions !== void 0 && actions.primary ? /*#__PURE__*/jsx(Box, {
     marginRight: "spacing.5",
     display: isReactNative$3 ? 'flex' : 'inline-flex',
     children: /*#__PURE__*/jsx(BaseButton, {
+      size: textSize,
       onClick: actions.primary.onClick,
       intent: intent,
       contrast: contrast,
@@ -6533,6 +6549,7 @@ var Alert = function Alert(_ref) {
 
   var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(SecondaryActionWrapper, {
     children: /*#__PURE__*/jsx(BaseLink, _objectSpread$l(_objectSpread$l({
+      size: textSize,
       contrast: contrast,
       intent: intent
     }, secondaryActionParams), {}, {
@@ -6560,7 +6577,7 @@ var Alert = function Alert(_ref) {
       accessibilityLabel: "Dismiss alert",
       onClick: onClickDismiss,
       contrast: contrast,
-      size: "large",
+      size: iconSize,
       icon: CloseIcon
     })
   }) : null;
@@ -6583,7 +6600,7 @@ var Alert = function Alert(_ref) {
   }, a11yProps), {}, {
     children: [icon, /*#__PURE__*/jsxs(Box, {
       flex: 1,
-      paddingLeft: "spacing.4",
+      paddingLeft: isBorderless ? 'spacing.4' : 'spacing.3',
       paddingRight: "spacing.2",
       children: [_title, _description, _actions]
     }), closeButton]
@@ -9000,6 +9017,13 @@ var getKeyboardAndAutocompleteProps = function getKeyboardAndAutocompleteProps(_
     keyboardAndAutocompleteProps.type = 'text';
   }
 
+  if (type === 'search') {
+    /* when input type:search is provided at that time browser adds a weird close button which collides with our clear button and then we have 2 clear buttons
+     * source: https://github.com/razorpay/blade/issues/857#issue-1457367160
+     */
+    keyboardAndAutocompleteProps.type = 'text';
+  }
+
   return keyboardAndAutocompleteProps;
 }; // need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists
 // eslint-disable-next-line @typescript-eslint/no-explicit-any