@razorpay/blade 4.0.0 → 5.0.1

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),
@@ -4274,6 +4274,39 @@ var EyeOffIcon = function EyeOffIcon(_ref) {
   });
 };
 
+var FileTextIcon = function FileTextIcon(_ref) {
+  var size = _ref.size,
+      color = _ref.color;
+
+  var _useIconProps = useIconProps({
+    size: size,
+    color: color
+  }),
+      height = _useIconProps.height,
+      width = _useIconProps.width,
+      iconColor = _useIconProps.iconColor;
+
+  return /*#__PURE__*/jsxs(Svg, {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: [/*#__PURE__*/jsx(Path, {
+      d: "M5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H13C13.5523 13 14 12.5523 14 12C14 11.4477 13.5523 11 13 11H5Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M4 16C4 15.4477 4.44772 15 5 15H13C13.5523 15 14 15.4477 14 16C14 16.5523 13.5523 17 13 17H5C4.44772 17 4 16.5523 4 16Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M5 7C4.44772 7 4 7.44772 4 8C4 8.55229 4.44772 9 5 9H7C7.55228 9 8 8.55229 8 8C8 7.44772 7.55228 7 7 7H5Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M0 3C0 1.34315 1.34315 0 3 0H11C11.2652 0 11.5196 0.105357 11.7071 0.292893L17.7071 6.29289C17.8946 6.48043 18 6.73478 18 7V19C18 20.6569 16.6569 22 15 22H3C1.34315 22 0 20.6569 0 19V3ZM3 2C2.44772 2 2 2.44772 2 3V19C2 19.5523 2.44772 20 3 20H15C15.5523 20 16 19.5523 16 19V8H11C10.4477 8 10 7.55228 10 7V2H3ZM12 3.41421L14.5858 6H12V3.41421Z",
+      fill: iconColor
+    })]
+  });
+};
+
 var HistoryIcon = function HistoryIcon(_ref) {
   var size = _ref.size,
       color = _ref.color;
@@ -4385,6 +4418,32 @@ var LinkIcon = function LinkIcon(_ref) {
   });
 };
 
+var LockIcon = function LockIcon(_ref) {
+  var size = _ref.size,
+      color = _ref.color;
+
+  var _useIconProps = useIconProps({
+    size: size,
+    color: color
+  }),
+      height = _useIconProps.height,
+      width = _useIconProps.width,
+      iconColor = _useIconProps.iconColor;
+
+  return /*#__PURE__*/jsx(Svg, {
+    height: height,
+    width: width,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: /*#__PURE__*/jsx(Path, {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6 10V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V10H19C20.6569 10 22 11.3431 22 13V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V13C2 11.3431 3.34315 10 5 10H6ZM8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V10H8V7ZM5 12C4.44772 12 4 12.4477 4 13V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V13C20 12.4477 19.5523 12 19 12H5Z",
+      fill: iconColor
+    })
+  });
+};
+
 var PauseIcon = function PauseIcon(_ref) {
   var size = _ref.size,
       color = _ref.color;
@@ -4485,6 +4544,59 @@ var SearchIcon = function SearchIcon(_ref) {
   });
 };
 
+var SettingsIcon = function SettingsIcon(_ref) {
+  var size = _ref.size,
+      color = _ref.color;
+
+  var _useIconProps = useIconProps({
+    size: size,
+    color: color
+  }),
+      height = _useIconProps.height,
+      width = _useIconProps.width,
+      iconColor = _useIconProps.iconColor;
+
+  return /*#__PURE__*/jsxs(Svg, {
+    height: height,
+    width: width,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: [/*#__PURE__*/jsx(Path, {
+      d: "M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M12 2C11.4477 2 11 2.44772 11 3V3.17399C10.9958 4.2302 10.3647 5.18306 9.39393 5.59914C9.30943 5.63535 9.22054 5.65966 9.1298 5.67154C8.18476 6.00287 7.12514 5.77346 6.40073 5.06486L6.39285 5.05715L6.33289 4.99711C6.14533 4.80933 5.89041 4.70343 5.625 4.70343C5.35959 4.70343 5.10507 4.80894 4.9175 4.99671L4.91671 4.9975C4.72894 5.18507 4.62343 5.43959 4.62343 5.705C4.62343 5.97041 4.72894 6.22493 4.91671 6.4125L4.98491 6.48069C5.73506 7.24758 5.94813 8.39018 5.52745 9.37478C5.14428 10.3797 4.19067 11.0545 3.11338 11.0797L3.09 11.08H3C2.44772 11.08 2 11.5277 2 12.08C2 12.6323 2.44772 13.08 3 13.08H3.17399C4.22841 13.0842 5.17982 13.7131 5.59701 14.6811C6.03158 15.6711 5.82114 16.8261 5.06486 17.5993L5.05715 17.6071L4.99711 17.6671C4.80933 17.8547 4.70343 18.1096 4.70343 18.375C4.70343 18.6404 4.80894 18.8949 4.99671 19.0825L4.9975 19.0833C5.18507 19.2711 5.43959 19.3766 5.705 19.3766C5.97041 19.3766 6.22493 19.2711 6.4125 19.0833L6.48069 19.0151C7.24757 18.2649 8.39018 18.0519 9.37477 18.4725C10.3797 18.8557 11.0545 19.8093 11.0797 20.8866L11.08 20.91V21C11.08 21.5523 11.5277 22 12.08 22C12.6323 22 13.08 21.5523 13.08 21V20.83L13.08 20.826C13.0842 19.7716 13.7132 18.8201 14.6812 18.4029C15.6712 17.9684 16.8261 18.1789 17.5993 18.9351L17.6071 18.9428L17.6671 19.0029C17.8547 19.1907 18.1096 19.2966 18.375 19.2966C18.6404 19.2966 18.8949 19.1911 19.0825 19.0033L19.0833 19.0025C19.2711 18.8149 19.3766 18.5604 19.3766 18.295C19.3766 18.0296 19.2711 17.7751 19.0833 17.5875L19.0151 17.5193C18.2588 16.7462 18.0484 15.5912 18.4829 14.6012C18.9001 13.6332 19.8516 13.0042 20.906 13L20.91 13L21 13C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H20.83L20.826 11C19.7698 10.9958 18.8169 10.3647 18.4009 9.39393C18.3646 9.30943 18.3403 9.22054 18.3285 9.1298C17.9971 8.18476 18.2265 7.12514 18.9351 6.40073L18.9428 6.39285L19.0029 6.3329C19.1907 6.14533 19.2966 5.89041 19.2966 5.625C19.2966 5.35959 19.1911 5.10507 19.0033 4.9175L19.0025 4.91671C18.8149 4.72894 18.5604 4.62343 18.295 4.62343C18.0296 4.62343 17.7751 4.72894 17.5875 4.91671L17.5193 4.98491C16.7462 5.74119 15.5911 5.95158 14.6011 5.51701C13.6331 5.09982 13.0042 4.14841 13 3.09399L13 3.09V3C13 2.44772 12.5523 2 12 2ZM9 3C9 1.34315 10.3431 0 12 0C13.6569 0 15 1.34315 15 3V3.0875C15.0016 3.34598 15.1563 3.579 15.3939 3.68086L15.4038 3.68508C15.6456 3.7918 15.9277 3.74149 16.1177 3.55811L16.1725 3.50329C16.7352 2.93996 17.4988 2.62343 18.295 2.62343C19.0912 2.62343 19.8548 2.93996 20.4175 3.50329C20.9803 4.06592 21.2966 4.82914 21.2966 5.625C21.2966 6.42104 20.9802 7.18444 20.4171 7.7471L20.3619 7.80231C20.1785 7.99225 20.1281 8.27444 20.2349 8.51624C20.2631 8.58029 20.2845 8.64696 20.2988 8.71513C20.4175 8.88998 20.6161 8.99864 20.8325 9H21C22.6569 9 24 10.3431 24 12C24 13.6569 22.6569 15 21 15H20.9125C20.654 15.0016 20.421 15.1563 20.3191 15.3939L20.3149 15.4038C20.2082 15.6456 20.2585 15.9277 20.4419 16.1177L20.4967 16.1725C21.0598 16.7352 21.3766 17.499 21.3766 18.295C21.3766 19.091 21.0602 19.8544 20.4971 20.4171C19.9344 20.9802 19.171 21.2966 18.375 21.2966C17.579 21.2966 16.8156 20.9802 16.2529 20.4171L16.1977 20.3619C16.0077 20.1785 15.7256 20.1282 15.4838 20.2349L15.474 20.2392C15.2363 20.3411 15.0816 20.574 15.08 20.8325V21C15.08 22.6569 13.7369 24 12.08 24C10.4231 24 9.08 22.6569 9.08 21V20.9244C9.07021 20.6612 8.90248 20.4296 8.65482 20.3385C8.63505 20.3313 8.61551 20.3234 8.59624 20.3149C8.35443 20.2081 8.07224 20.2585 7.8823 20.4419L7.8275 20.4967C7.26483 21.0598 6.50105 21.3766 5.705 21.3766C4.90914 21.3766 4.14592 21.0603 3.58329 20.4975C3.01996 19.9348 2.70343 19.1712 2.70343 18.375C2.70343 17.5788 3.01996 16.8152 3.58329 16.2525L3.63811 16.1977C3.82149 16.0077 3.87185 15.7256 3.76514 15.4838L3.76081 15.474C3.65895 15.2363 3.42598 15.0816 3.1675 15.08H3C1.34315 15.08 0 13.7369 0 12.08C0 10.4231 1.34315 9.08 3 9.08H3.07565C3.33875 9.07021 3.57038 8.90248 3.66146 8.65482C3.66874 8.63505 3.67663 8.61551 3.68514 8.59624C3.79185 8.35444 3.74149 8.07225 3.5581 7.88231L3.50329 7.8275C2.93996 7.2648 2.62343 6.50123 2.62343 5.705C2.62343 4.90896 2.93981 4.14556 3.50289 3.58289C4.06556 3.01981 4.82896 2.70343 5.625 2.70343C6.42123 2.70343 7.1848 3.01996 7.7475 3.58329L7.80231 3.6381C7.99225 3.82149 8.27444 3.87185 8.51624 3.76514C8.5803 3.73687 8.64697 3.71548 8.71514 3.70121C8.88999 3.58253 8.99864 3.38394 9 3.1675V3Z",
+      fill: iconColor
+    })]
+  });
+};
+
+var SlashIcon = function SlashIcon(_ref) {
+  var size = _ref.size,
+      color = _ref.color;
+
+  var _useIconProps = useIconProps({
+    size: size,
+    color: color
+  }),
+      height = _useIconProps.height,
+      width = _useIconProps.width,
+      iconColor = _useIconProps.iconColor;
+
+  return /*#__PURE__*/jsx(Svg, {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: /*#__PURE__*/jsx(Path, {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM6.38231 4.9681C7.92199 3.73647 9.87499 3 12 3C16.9706 3 21 7.02944 21 12C21 14.125 20.2635 16.078 19.0319 17.6177L6.38231 4.9681ZM4.9681 6.38231C3.73647 7.92199 3 9.87499 3 12C3 16.9706 7.02944 21 12 21C14.125 21 16.078 20.2635 17.6177 19.0319L4.9681 6.38231Z",
+      fill: iconColor
+    })
+  });
+};
+
 var TrashIcon = function TrashIcon(_ref) {
   var size = _ref.size,
       color = _ref.color;
@@ -4763,6 +4875,39 @@ var TrendingDownIcon = function TrendingDownIcon(_ref) {
   });
 };
 
+var UsersIcon = function UsersIcon(_ref) {
+  var size = _ref.size,
+      color = _ref.color;
+
+  var _useIconProps = useIconProps({
+    size: size,
+    color: color
+  }),
+      height = _useIconProps.height,
+      width = _useIconProps.width,
+      iconColor = _useIconProps.iconColor;
+
+  return /*#__PURE__*/jsxs(Svg, {
+    height: height,
+    width: width,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: [/*#__PURE__*/jsx(Path, {
+      d: "M9 0C6.23858 0 4 2.23858 4 5C4 7.76142 6.23858 10 9 10C11.7614 10 14 7.76142 14 5C14 2.23858 11.7614 0 9 0ZM6 5C6 3.34315 7.34315 2 9 2C10.6569 2 12 3.34315 12 5C12 6.65685 10.6569 8 9 8C7.34315 8 6 6.65685 6 5Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M5 12C2.23858 12 0 14.2386 0 17V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V17C2 15.3431 3.34315 14 5 14H13C14.6569 14 16 15.3431 16 17V19C16 19.5523 16.4477 20 17 20C17.5523 20 18 19.5523 18 19V17C18 14.2386 15.7614 12 13 12H5Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M19.0318 12.88C19.1698 12.3453 19.7153 12.0237 20.25 12.1618C22.4562 12.7314 23.9983 14.7207 24 16.9993V19C24 19.5523 23.5523 20 23 20C22.4477 20 22 19.5523 22 19V17.0007C21.9988 15.6337 21.0737 14.44 19.75 14.0982C19.2153 13.9602 18.8937 13.4148 19.0318 12.88Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M16.248 0.161251C15.713 0.0242632 15.1682 0.346936 15.0312 0.881962C14.8943 1.41699 15.2169 1.96176 15.752 2.09875C17.0794 2.43863 18.0078 3.63474 18.0078 5.005C18.0078 6.37526 17.0794 7.57137 15.752 7.91125C15.2169 8.04824 14.8943 8.59301 15.0312 9.12804C15.1682 9.66307 15.713 9.98574 16.248 9.84875C18.4604 9.28229 20.0078 7.28876 20.0078 5.005C20.0078 2.72124 18.4604 0.727714 16.248 0.161251Z",
+      fill: iconColor
+    })]
+  });
+};
+
 var HelpCircleIcon = function HelpCircleIcon(_ref) {
   var size = _ref.size,
       color = _ref.color;
@@ -6454,7 +6599,8 @@ var CloseButtonWrapper = isReactNative$3 ? Box : Fragment;
 var intentIconMap = {
   positive: CheckCircleIcon,
   negative: AlertTriangleIcon,
-  information: AlertTriangleIcon,
+  information: InfoIcon,
+  neutral: InfoIcon,
   notice: AlertTriangleIcon$1
 };
 
@@ -6469,7 +6615,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 +6630,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 +6694,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 +6722,7 @@ var Alert = function Alert(_ref) {
       accessibilityLabel: "Dismiss alert",
       onClick: onClickDismiss,
       contrast: contrast,
-      size: "large",
+      size: iconSize,
       icon: CloseIcon
     })
   }) : null;
@@ -6583,7 +6745,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 +9162,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
@@ -10554,5 +10723,5 @@ var SkipNavContent = function SkipNavContent(_ref3) {
   }, testID('skipnav-content')));
 };
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, Indicator, InfoIcon, Link, LinkIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, Indicator, InfoIcon, Link, LinkIcon, LockIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, UsersIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
 //# sourceMappingURL=index.web.js.map