@razorpay/blade 5.4.3 → 5.5.0

package/build/components/index.web.js

@@ -4128,6 +4128,35 @@ var ChevronUpIcon = function ChevronUpIcon(_ref) {
   });
 };
 
+var ClockIcon = function ClockIcon(_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: "M13 6a1 1 0 1 0-2 0v6a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V6Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1ZM3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z",
+      fill: iconColor
+    })]
+  });
+};
+
 var CloseIcon = function CloseIcon(_ref) {
   var size = _ref.size,
       color = _ref.color;
@@ -4647,6 +4676,30 @@ var SlashIcon = function SlashIcon(_ref) {
   });
 };
 
+var BankIcon = function BankIcon(_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, {
+      d: "M5.105 10.429a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1H5.105Zm6.316 0a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1H11.42ZM2 22a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-1.143a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1V22Zm15.737-11.571a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1h-1.158Zm-5.273-9.186a1 1 0 0 0-.928 0l-9 4.714A1 1 0 0 0 2 6.843v.49a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-.49a1 1 0 0 0-.536-.886l-9-4.714Z",
+      fill: iconColor
+    })
+  });
+};
+
 var TrashIcon = function TrashIcon(_ref) {
   var size = _ref.size,
       color = _ref.color;
@@ -5043,6 +5096,162 @@ var MailIcon = function MailIcon(_ref) {
   });
 };
 
+var BookIcon = function BookIcon(_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: "M21 2a1 1 0 0 0-1-1H6.5A3.5 3.5 0 0 0 3 4.5v15A3.5 3.5 0 0 0 6.5 23H20a1 1 0 0 0 1-1V2ZM5 4.5A1.5 1.5 0 0 1 6.5 3H19v13H6.5c-.537 0-1.045.12-1.5.337V4.5Zm0 15A1.5 1.5 0 0 0 6.5 21H19v-3H6.5A1.5 1.5 0 0 0 5 19.5Z",
+      fill: iconColor
+    })
+  });
+};
+
+var SettlementsIcon = function SettlementsIcon(_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,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: /*#__PURE__*/jsx(Path, {
+      d: "m22.763 7.879-7.797 9.697c-.097.118-.22.216-.362.29a1.283 1.283 0 0 1-.461.134h-.11c-.293 0-.575-.099-.79-.276l-3.58-2.957-2.054 2.582a1.059 1.059 0 0 1-.357.302c-.142.075-.302.12-.467.132h-.11c-.29.004-.57-.095-.779-.276l-4.502-3.705a1.01 1.01 0 0 1-.281-.321.906.906 0 0 1-.036-.798.984.984 0 0 1 .25-.34 1.09 1.09 0 0 1 .358-.252 1.2 1.2 0 0 1 1.268.193l3.558 2.907 7.006-8.742c.083-.115.192-.213.32-.288a1.22 1.22 0 0 1 .877-.13c.148.035.286.097.406.182.13.075.241.173.326.289a.928.928 0 0 1 .166.383.887.887 0 0 1-.022.41.95.95 0 0 1-.207.367l-4.392 5.41 2.833 2.346 7.072-8.752a1.05 1.05 0 0 1 .322-.286 1.22 1.22 0 0 1 .876-.124c.148.035.286.098.405.184.129.074.238.172.322.287a.93.93 0 0 1 .164.38.887.887 0 0 1-.02.407.949.949 0 0 1-.202.365Z",
+      fill: iconColor
+    })
+  });
+};
+
+var ShuffleIcon = function ShuffleIcon(_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,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: /*#__PURE__*/jsx(Path, {
+      d: "M14 3a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V5.414L3.707 20.707a1 1 0 0 1-1.414-1.414L17.586 4H15a1 1 0 0 1-1-1ZM21 16a1 1 0 1 0-2 0v2.586l-4.293-4.293a1 1 0 0 0-1.414 1.414L17.586 20H15a1 1 0 1 0 0 2h5a1 1 0 0 0 1-1v-5ZM3.707 3.293a1 1 0 0 0-1.414 1.414l5 5a1 1 0 0 0 1.414-1.414l-5-5Z",
+      fill: iconColor
+    })
+  });
+};
+
+var TagIcon = function TagIcon(_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,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [/*#__PURE__*/jsx(Path, {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M1 2a1 1 0 0 1 1-1h10a1 1 0 0 1 .707.293L21.3 9.885a3 3 0 0 1 0 4.23l-.002.002-7.17 7.17a3.001 3.001 0 0 1-4.244 0l-8.59-8.58A1 1 0 0 1 1 12V2Zm2 1v8.585l8.297 8.287v.001a1 1 0 0 0 1.415 0l7.169-7.168a1 1 0 0 0 0-1.41L11.586 3H3Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M10 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z",
+      fill: iconColor
+    })]
+  });
+};
+
+var UserIcon = function UserIcon(_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,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [/*#__PURE__*/jsx(Path, {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10ZM9 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z",
+      fill: iconColor
+    }), /*#__PURE__*/jsx(Path, {
+      d: "M8 14a5 5 0 0 0-5 5v2a1 1 0 1 0 2 0v-2a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v2a1 1 0 1 0 2 0v-2a5 5 0 0 0-5-5H8Z",
+      fill: iconColor
+    })]
+  });
+};
+
+var TransactionsIcon = function TransactionsIcon(_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,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: /*#__PURE__*/jsx(Path, {
+      d: "M6.24 12.03a.878.878 0 0 1 .26.623.898.898 0 0 1-.249.627.85.85 0 0 1-.61.257.833.833 0 0 1-.606-.268L1.25 9.377a.869.869 0 0 1-.107-.134c-.014-.022-.024-.044-.036-.067a.853.853 0 0 1-.042-.084.843.843 0 0 1-.027-.087c-.007-.026-.017-.05-.022-.076a.91.91 0 0 1 0-.343c.005-.026.015-.05.022-.075a.812.812 0 0 1 .027-.087.91.91 0 0 1 .042-.085c.012-.022.022-.043.036-.066a.895.895 0 0 1 .107-.135l3.785-3.892a.84.84 0 0 1 .6-.246.84.84 0 0 1 .595.257.89.89 0 0 1 .01 1.228L3.91 7.883h9.715a.84.84 0 0 1 .602.256c.16.164.25.387.25.62 0 .232-.09.455-.25.62a.84.84 0 0 1-.602.256H3.909l2.332 2.395Zm16.617 3.674c.014-.022.024-.044.035-.067a.896.896 0 0 0 .043-.084.806.806 0 0 0 .027-.088c.007-.024.017-.049.022-.074a.912.912 0 0 0 0-.344c-.005-.026-.015-.05-.022-.075a.836.836 0 0 0-.027-.088.843.843 0 0 0-.043-.083c-.011-.023-.021-.044-.035-.067a.87.87 0 0 0-.107-.134l-3.785-3.893a.84.84 0 0 0-1.195.011.889.889 0 0 0-.25.612.89.89 0 0 0 .24.616l2.33 2.397h-9.715a.84.84 0 0 0-.602.257.889.889 0 0 0-.25.62c0 .232.09.455.25.62a.84.84 0 0 0 .602.256h9.716l-2.332 2.397a.877.877 0 0 0-.26.623.898.898 0 0 0 .25.627.85.85 0 0 0 .61.257.833.833 0 0 0 .605-.267l3.786-3.893a.894.894 0 0 0 .107-.134v-.002Z",
+      fill: iconColor
+    })
+  });
+};
+
 function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -5517,7 +5726,16 @@ var getTextProps = function getTextProps(_ref) {
       props.fontSize = 75;
       props.lineHeight = 's';
     }
+
+    if (size === 'xsmall') {
+      props.fontSize = 25;
+      props.lineHeight = 's';
+    }
   } else if (variant === 'caption') {
+    if (size === 'xsmall') {
+      throw new Error("[Blade: Text]: size cannot be 'xsmall' when variant is 'caption'");
+    }
+
     if (size === 'small') {
       throw new Error("[Blade: Text]: size cannot be 'small' when variant is 'caption'");
     }
@@ -6009,7 +6227,7 @@ var getColor = function getColor(_ref) {
   } else if (contrast == 'low') {
     return get_1(theme.colors, 'brand.gray.700.lowContrast');
   } else {
-    return get_1(theme.colors, 'brand.gray.400.lowContrast');
+    return get_1(theme.colors, 'brand.gray.700.highContrast');
   }
 };
 
@@ -6976,6 +7194,20 @@ var Badge = function Badge(_ref2) {
       iconColor = _getColorProps.iconColor,
       textColor = _getColorProps.textColor;
 
+  var badgeTextSizes = {
+    small: {
+      variant: 'body',
+      size: 'xsmall'
+    },
+    medium: {
+      variant: 'body',
+      size: 'small'
+    },
+    large: {
+      variant: 'body',
+      size: 'small'
+    }
+  };
   return /*#__PURE__*/jsx(StyledBadge, _objectSpread$p(_objectSpread$p({
     backgroundColor: backgroundColor,
     size: size
@@ -6997,12 +7229,7 @@ var Badge = function Badge(_ref2) {
           color: iconColor,
           size: iconSize[size]
         })
-      }) : null, /*#__PURE__*/jsx(Text, _objectSpread$p(_objectSpread$p({}, size === 'small' ? {
-        variant: 'caption'
-      } : {
-        variant: 'body',
-        size: 'small'
-      }), {}, {
+      }) : null, /*#__PURE__*/jsx(Text, _objectSpread$p(_objectSpread$p({}, badgeTextSizes[size]), {}, {
         type: "normal",
         weight: fontWeight,
         truncateAfterLines: 1,
@@ -7291,9 +7518,10 @@ var Counter = function Counter(_ref2) {
       backgroundColor = _getColorProps.backgroundColor,
       textColor = _getColorProps.textColor;
 
-  var textSizes = {
+  var counterTextSizes = {
     small: {
-      variant: 'caption'
+      variant: 'body',
+      size: 'xsmall'
     },
     medium: {
       variant: 'body',
@@ -7319,7 +7547,7 @@ var Counter = function Counter(_ref2) {
       alignItems: "center",
       overflow: "hidden"
     }, metaAttribute(MetaConstants.Component, MetaConstants.Counter)), {}, {
-      children: /*#__PURE__*/jsx(Text, _objectSpread$k(_objectSpread$k({}, textSizes[size]), {}, {
+      children: /*#__PURE__*/jsx(Text, _objectSpread$k(_objectSpread$k({}, counterTextSizes[size]), {}, {
         type: "normal",
         weight: "regular",
         truncateAfterLines: 1,
@@ -9722,8 +9950,6 @@ var isReactNative$2 = function isReactNative(_textInputRef) {
 };
 
 var TextInput = function TextInput(_ref2) {
-  var _Boolean;
-
   var label = _ref2.label,
       _ref2$labelPosition = _ref2.labelPosition,
       labelPosition = _ref2$labelPosition === void 0 ? 'top' : _ref2$labelPosition,
@@ -9735,6 +9961,7 @@ var TextInput = function TextInput(_ref2) {
       value = _ref2.value,
       maxCharacters = _ref2.maxCharacters,
       _onChange = _ref2.onChange,
+      onFocus = _ref2.onFocus,
       onBlur = _ref2.onBlur,
       isDisabled = _ref2.isDisabled,
       necessityIndicator = _ref2.necessityIndicator,
@@ -9754,11 +9981,15 @@ var TextInput = function TextInput(_ref2) {
       autoCompleteSuggestionType = _ref2.autoCompleteSuggestionType;
   var textInputRef = React__default.useRef(null);
 
-  var _useState = useState((_Boolean = Boolean(defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)) !== null && _Boolean !== void 0 ? _Boolean : false),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       shouldShowClearButton = _useState2[0],
       setShouldShowClearButton = _useState2[1];
 
+  React__default.useEffect(function () {
+    setShouldShowClearButton(Boolean(showClearButton && (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)));
+  }, [showClearButton, defaultValue, value]);
+
   var renderInteractionElement = function renderInteractionElement() {
     if (isLoading) {
       return /*#__PURE__*/jsx(Spinner, {
@@ -9826,6 +10057,7 @@ var TextInput = function TextInput(_ref2) {
         value: value
       });
     },
+    onFocus: onFocus,
     onBlur: onBlur,
     isDisabled: isDisabled,
     necessityIndicator: necessityIndicator,
@@ -9975,8 +10207,9 @@ var TextArea = function TextArea(_ref) {
       isDisabled = _ref.isDisabled,
       isRequired = _ref.isRequired,
       name = _ref.name,
-      onBlur = _ref.onBlur,
       _onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
       placeholder = _ref.placeholder,
       value = _ref.value,
       maxCharacters = _ref.maxCharacters,
@@ -9987,11 +10220,15 @@ var TextArea = function TextArea(_ref) {
       numberOfLines = _ref$numberOfLines === void 0 ? 2 : _ref$numberOfLines;
   var inputRef = React__default.useRef(null);
 
-  var _React$useState = React__default.useState(Boolean(showClearButton && ((value === null || value === void 0 ? void 0 : value.length) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length)))),
+  var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       shouldShowClearButton = _React$useState2[0],
       setShouldShowClearButton = _React$useState2[1];
 
+  React__default.useEffect(function () {
+    setShouldShowClearButton(Boolean(showClearButton && ((value === null || value === void 0 ? void 0 : value.length) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length))));
+  }, [showClearButton, defaultValue, value]);
+
   var renderInteractionElement = function renderInteractionElement() {
     if (shouldShowClearButton) {
       return /*#__PURE__*/jsx(Box, {
@@ -10043,7 +10280,6 @@ var TextArea = function TextArea(_ref) {
     isRequired: isRequired,
     name: name,
     maxCharacters: maxCharacters,
-    onBlur: onBlur,
     placeholder: placeholder,
     interactionElement: renderInteractionElement(),
     defaultValue: defaultValue,
@@ -10068,6 +10304,8 @@ var TextArea = function TextArea(_ref) {
         value: value
       });
     },
+    onFocus: onFocus,
+    onBlur: onBlur,
     trailingFooterSlot: function trailingFooterSlot(value) {
       var _value$length;
 
@@ -11636,5 +11874,5 @@ var SkipNavContent = function SkipNavContent(_ref3) {
   }, testID('skipnav-content')), metaAttribute(MetaConstants.Component, MetaConstants.SkipNav)));
 };
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, Card, CardBody, CardFooter, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, ComponentIds, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, Indicator, InfoIcon, Link, LinkIcon, LockIcon, MailIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, ProgressBar, 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 };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BankIcon, BladeProvider, BookIcon, Button, Card, CardBody, CardFooter, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, CloseIcon, Code, ComponentIds, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, Indicator, InfoIcon, Link, LinkIcon, LockIcon, MailIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, ProgressBar, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SettingsIcon, SettlementsIcon, ShuffleIcon, SkipNavContent, SkipNavLink, SlashIcon, Spinner, TagIcon, Text, TextArea, TextInput, Title, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UserIcon, UsersIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
 //# sourceMappingURL=index.web.js.map