@razorpay/blade 3.5.3 → 3.6.0

package/build/components/index.web.js

@@ -5377,7 +5377,7 @@ var CodeContainer = /*#__PURE__*/styled(Box).withConfig({
   var padding = "".concat(makeSpace(props.theme.spacing[0]), " ").concat(makeSpace(props.theme.spacing[2]));
   return {
     padding: padding,
-    backgroundColor: props.theme.colors.brand.gray[400],
+    backgroundColor: props.theme.colors.brand.gray[400].lowContrast,
     borderRadius: props.theme.border.radius.medium,
     display: isPlatformWeb ? 'inline-block' : undefined,
     // Removing the line height of container to remove extra surrounding space in background
@@ -5775,9 +5775,9 @@ var getColor = function getColor(_ref) {
   if (intent) {
     return get_1(theme.colors, "feedback.".concat(intent, ".action.icon.primary.disabled.").concat(contrast, "Contrast"));
   } else if (contrast == 'low') {
-    return get_1(theme.colors, 'brand.gray.700');
+    return get_1(theme.colors, 'brand.gray.700.lowContrast');
   } else {
-    return get_1(theme.colors, 'brand.gray.400');
+    return get_1(theme.colors, 'brand.gray.400.lowContrast');
   }
 };
 
@@ -6770,6 +6770,29 @@ var Button = function Button(_ref) {
   }));
 };
 
+var Counter = function Counter(_ref) {
+  var value = _ref.value,
+      max = _ref.max,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'neutral' : _ref$intent,
+      _ref$contrast = _ref.contrast,
+      contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size;
+  var content = "".concat(value);
+
+  if (max && value > max) {
+    content = "".concat(max, "+");
+  }
+
+  return /*#__PURE__*/jsx(Badge, {
+    size: size,
+    variant: intent,
+    contrast: contrast,
+    children: content
+  });
+};
+
 /**
  * Checks if `value` is `undefined`.
  *
@@ -6832,7 +6855,7 @@ var checkboxIconColors = {
     "default": {
       border: {
         checked: 'colors.brand.primary.500',
-        unchecked: 'colors.brand.gray.500'
+        unchecked: 'colors.brand.gray.500.lowContrast'
       },
       background: {
         checked: 'colors.brand.primary.500',
@@ -6842,10 +6865,10 @@ var checkboxIconColors = {
     disabled: {
       border: {
         checked: 'transparent',
-        unchecked: 'colors.brand.gray.a100'
+        unchecked: 'colors.brand.gray.a100.lowContrast'
       },
       background: {
-        checked: 'colors.brand.gray.a100',
+        checked: 'colors.brand.gray.a100.lowContrast',
         unchecked: 'transparent'
       }
     },
@@ -7001,8 +7024,8 @@ var CheckboxIcon = function CheckboxIcon(_ref3) {
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
 
-  var defaultIconColor = get_1(theme, 'colors.brand.gray.200');
-  var disabledIconColor = get_1(theme, 'colors.brand.gray.500');
+  var defaultIconColor = get_1(theme, 'colors.brand.gray.200.lowContrast');
+  var disabledIconColor = get_1(theme, 'colors.brand.gray.500.lowContrast');
   var iconColor = isDisabled ? disabledIconColor : defaultIconColor;
   return /*#__PURE__*/jsxs(CheckboxIconWrapper, {
     size: size,
@@ -7543,11 +7566,11 @@ var variants = {
   "default": {
     background: {
       checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.a50'
+      unchecked: 'colors.brand.gray.a50.lowContrast'
     },
     border: {
       checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.500'
+      unchecked: 'colors.brand.gray.500.lowContrast'
     }
   }
 };
@@ -8146,11 +8169,11 @@ var getInputBackgroundAndBorderStyles = function getInputBackgroundAndBorderStyl
       isDisabled = _ref.isDisabled,
       validationState = _ref.validationState;
   // normal state
-  var backgroundColor = theme.colors.brand.gray[200];
-  var borderBottomColor = theme.colors.brand.gray[400]; //hoverState
+  var backgroundColor = theme.colors.brand.gray[200].lowContrast;
+  var borderBottomColor = theme.colors.brand.gray[400].lowContrast; //hoverState
 
   if (isHovered) {
-    backgroundColor = theme.colors.brand.gray[300];
+    backgroundColor = theme.colors.brand.gray[300].lowContrast;
   } // focused state
 
 
@@ -8160,8 +8183,8 @@ var getInputBackgroundAndBorderStyles = function getInputBackgroundAndBorderStyl
 
 
   if (isDisabled) {
-    backgroundColor = theme.colors.brand.gray[200];
-    borderBottomColor = theme.colors.brand.gray[300];
+    backgroundColor = theme.colors.brand.gray[200].lowContrast;
+    borderBottomColor = theme.colors.brand.gray[300].lowContrast;
   } // validation state
 
 
@@ -9726,12 +9749,12 @@ var radioIconColors = {
   variants: {
     "default": {
       dot: {
-        checked: 'colors.brand.gray.200',
-        unchecked: 'colors.brand.gray.200'
+        checked: 'colors.brand.gray.200.lowContrast',
+        unchecked: 'colors.brand.gray.200.lowContrast'
       },
       border: {
         checked: 'colors.brand.primary.500',
-        unchecked: 'colors.brand.gray.500'
+        unchecked: 'colors.brand.gray.500.lowContrast'
       },
       background: {
         checked: 'colors.brand.primary.500',
@@ -9740,22 +9763,22 @@ var radioIconColors = {
     },
     disabled: {
       dot: {
-        checked: 'colors.brand.gray.200',
-        unchecked: 'colors.brand.gray.200'
+        checked: 'colors.brand.gray.200.lowContrast',
+        unchecked: 'colors.brand.gray.200.lowContrast'
       },
       border: {
         checked: 'transparent',
-        unchecked: 'colors.brand.gray.a100'
+        unchecked: 'colors.brand.gray.a100.lowContrast'
       },
       background: {
-        checked: 'colors.brand.gray.a100',
+        checked: 'colors.brand.gray.a100.lowContrast',
         unchecked: 'transparent'
       }
     },
     negative: {
       dot: {
-        checked: 'colors.brand.gray.200',
-        unchecked: 'colors.brand.gray.200'
+        checked: 'colors.brand.gray.200.lowContrast',
+        unchecked: 'colors.brand.gray.200.lowContrast'
       },
       border: {
         checked: 'colors.feedback.border.negative.highContrast',
@@ -10350,5 +10373,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, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, 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, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, 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 };
 //# sourceMappingURL=index.web.js.map