@razorpay/blade 10.14.7 → 10.15.1

package/build/components/index.d.ts

@@ -1359,7 +1359,7 @@ declare type CommonBoxVisualProps = MakeObjectResponsive<{
     borderTopRightRadius: keyof Border['radius'];
     borderBottomRightRadius: keyof Border['radius'];
     borderBottomLeftRadius: keyof Border['radius'];
-} & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat' | 'pointerEvents'> & {
+} & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat' | 'pointerEvents' | 'opacity' | 'visibility' | 'transform' | 'transformOrigin' | 'clipPath'> & {
     /**
      * Sets the elevation for Box
      *
@@ -2667,6 +2667,22 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
         readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
         readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
     };
+    clipPath?: csstype.Property.ClipPath | {
+        readonly base?: csstype.Property.ClipPath | undefined;
+        readonly xs?: csstype.Property.ClipPath | undefined;
+        readonly s?: csstype.Property.ClipPath | undefined;
+        readonly m?: csstype.Property.ClipPath | undefined;
+        readonly l?: csstype.Property.ClipPath | undefined;
+        readonly xl?: csstype.Property.ClipPath | undefined;
+    } | undefined;
+    opacity?: csstype.Property.Opacity | {
+        readonly base?: csstype.Property.Opacity | undefined;
+        readonly xs?: csstype.Property.Opacity | undefined;
+        readonly s?: csstype.Property.Opacity | undefined;
+        readonly m?: csstype.Property.Opacity | undefined;
+        readonly l?: csstype.Property.Opacity | undefined;
+        readonly xl?: csstype.Property.Opacity | undefined;
+    } | undefined;
     pointerEvents?: csstype.Property.PointerEvents | {
         readonly base?: csstype.Property.PointerEvents | undefined;
         readonly xs?: csstype.Property.PointerEvents | undefined;
@@ -2675,6 +2691,30 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
         readonly l?: csstype.Property.PointerEvents | undefined;
         readonly xl?: csstype.Property.PointerEvents | undefined;
     } | undefined;
+    transform?: csstype.Property.Transform | {
+        readonly base?: csstype.Property.Transform | undefined;
+        readonly xs?: csstype.Property.Transform | undefined;
+        readonly s?: csstype.Property.Transform | undefined;
+        readonly m?: csstype.Property.Transform | undefined;
+        readonly l?: csstype.Property.Transform | undefined;
+        readonly xl?: csstype.Property.Transform | undefined;
+    } | undefined;
+    transformOrigin?: csstype.Property.TransformOrigin<string | number> | {
+        readonly base?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xs?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly s?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly m?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly l?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xl?: csstype.Property.TransformOrigin<string | number> | undefined;
+    } | undefined;
+    visibility?: csstype.Property.Visibility | {
+        readonly base?: csstype.Property.Visibility | undefined;
+        readonly xs?: csstype.Property.Visibility | undefined;
+        readonly s?: csstype.Property.Visibility | undefined;
+        readonly m?: csstype.Property.Visibility | undefined;
+        readonly l?: csstype.Property.Visibility | undefined;
+        readonly xl?: csstype.Property.Visibility | undefined;
+    } | undefined;
     backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
         readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
         readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;
@@ -2716,41 +2756,6 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
         readonly xl?: "platform-web" | undefined;
     } | undefined;
 } & MakeObjectResponsive<{
-    /**
-     * ## Box
-     *
-     * Box is the basic Layout component.
-     *
-     *
-     * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
-     *
-     *  Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.
-     *
-     * ----
-     *
-     * ### Usage
-     *
-     * ```jsx
-     * <Box display="flex">
-     * ```
-    
-     * #### Responsive Props
-     *
-     * ```jsx
-     * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
-     * ```
-     *
-     * #### Margin and Padding Shorthands
-     *
-     * ```jsx
-     * <Box padding={["spacing.3", "spacing.10"]} />
-     * ```
-     *
-     * ---
-     *
-     * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
-     *
-     */
     backgroundColor: "brand.primary.300" | "brand.primary.400" | "brand.primary.500" | "brand.primary.600" | "brand.primary.700" | "brand.primary.800" | "brand.secondary.500" | "brand.gray.200.lowContrast" | "brand.gray.200.highContrast" | "brand.gray.300.lowContrast" | "brand.gray.300.highContrast" | "brand.gray.400.lowContrast" | "brand.gray.400.highContrast" | "brand.gray.500.lowContrast" | "brand.gray.500.highContrast" | "brand.gray.600.lowContrast" | "brand.gray.600.highContrast" | "brand.gray.700.lowContrast" | "brand.gray.700.highContrast" | "brand.gray.a50.lowContrast" | "brand.gray.a50.highContrast" | "brand.gray.a100.lowContrast" | "brand.gray.a100.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "transparent";
 }, "backgroundColor"> & {
     as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
@@ -7922,6 +7927,22 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
         readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
     };
+    clipPath?: csstype.Property.ClipPath | {
+        readonly base?: csstype.Property.ClipPath | undefined;
+        readonly xs?: csstype.Property.ClipPath | undefined;
+        readonly s?: csstype.Property.ClipPath | undefined;
+        readonly m?: csstype.Property.ClipPath | undefined;
+        readonly l?: csstype.Property.ClipPath | undefined;
+        readonly xl?: csstype.Property.ClipPath | undefined;
+    } | undefined;
+    opacity?: csstype.Property.Opacity | {
+        readonly base?: csstype.Property.Opacity | undefined;
+        readonly xs?: csstype.Property.Opacity | undefined;
+        readonly s?: csstype.Property.Opacity | undefined;
+        readonly m?: csstype.Property.Opacity | undefined;
+        readonly l?: csstype.Property.Opacity | undefined;
+        readonly xl?: csstype.Property.Opacity | undefined;
+    } | undefined;
     pointerEvents?: csstype.Property.PointerEvents | {
         readonly base?: csstype.Property.PointerEvents | undefined;
         readonly xs?: csstype.Property.PointerEvents | undefined;
@@ -7930,6 +7951,30 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         readonly l?: csstype.Property.PointerEvents | undefined;
         readonly xl?: csstype.Property.PointerEvents | undefined;
     } | undefined;
+    transform?: csstype.Property.Transform | {
+        readonly base?: csstype.Property.Transform | undefined;
+        readonly xs?: csstype.Property.Transform | undefined;
+        readonly s?: csstype.Property.Transform | undefined;
+        readonly m?: csstype.Property.Transform | undefined;
+        readonly l?: csstype.Property.Transform | undefined;
+        readonly xl?: csstype.Property.Transform | undefined;
+    } | undefined;
+    transformOrigin?: csstype.Property.TransformOrigin<string | number> | {
+        readonly base?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xs?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly s?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly m?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly l?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xl?: csstype.Property.TransformOrigin<string | number> | undefined;
+    } | undefined;
+    visibility?: csstype.Property.Visibility | {
+        readonly base?: csstype.Property.Visibility | undefined;
+        readonly xs?: csstype.Property.Visibility | undefined;
+        readonly s?: csstype.Property.Visibility | undefined;
+        readonly m?: csstype.Property.Visibility | undefined;
+        readonly l?: csstype.Property.Visibility | undefined;
+        readonly xl?: csstype.Property.Visibility | undefined;
+    } | undefined;
     backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
         readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
         readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;

package/build/components/index.development.web.js

@@ -2937,7 +2937,7 @@ var getAllProps = function getAllProps(props, breakpoint) {
   var hasBorderLeft = props.borderLeft || props.borderLeftColor || props.borderLeftWidth;
   var hasBorderTop = props.borderTop || props.borderTopColor || props.borderTopWidth;
   var hasBorderBottom = props.borderBottom || props.borderBottomColor || props.borderBottomWidth;
-  return _objectSpread$6h(_objectSpread$6h({
+  return _objectSpread$6h(_objectSpread$6h(_objectSpread$6h({
     display: getResponsiveValue(props.display, breakpoint),
     overflow: getResponsiveValue(props.overflow, breakpoint),
     overflowX: getResponsiveValue(props.overflowX, breakpoint),
@@ -3038,9 +3038,15 @@ var getAllProps = function getAllProps(props, breakpoint) {
     touchAction: getResponsiveValue(props.touchAction, breakpoint),
     userSelect: getResponsiveValue(props.userSelect, breakpoint),
     pointerEvents: getResponsiveValue(props.pointerEvents),
-    opacity: getResponsiveValue(props.opacity, breakpoint)
+    opacity: getResponsiveValue(props.opacity, breakpoint),
+    visibility: getResponsiveValue(props.visibility, breakpoint)
   }, !isReactNative$4() && {
     boxShadow: getElevationValue(props.elevation, props.theme, breakpoint)
+  }), {}, {
+    // Polygon support
+    transform: getResponsiveValue(props.transform, breakpoint),
+    transformOrigin: getResponsiveValue(props.transformOrigin, breakpoint),
+    clipPath: getResponsiveValue(props.clipPath, breakpoint)
   });
 };
 
@@ -3698,6 +3704,8 @@ var makeBoxProps = function makeBoxProps(props) {
     backgroundOrigin: props.backgroundOrigin,
     backgroundRepeat: props.backgroundRepeat,
     elevation: props.elevation,
+    opacity: props.opacity,
+    visibility: props.visibility,
     // Border
     borderWidth: props.borderWidth,
     borderColor: props.borderColor,
@@ -3714,6 +3722,10 @@ var makeBoxProps = function makeBoxProps(props) {
     borderTopRightRadius: props.borderTopRightRadius,
     borderBottomRightRadius: props.borderBottomRightRadius,
     borderBottomLeftRadius: props.borderBottomLeftRadius,
+    // Polygon Support
+    transform: props.transform,
+    transformOrigin: props.transformOrigin,
+    clipPath: props.clipPath,
     // callbacks
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
@@ -16194,15 +16206,15 @@ var MAX_WIDTH$2 = size[584];
 var getCommonStyles = function getCommonStyles(props) {
   var theme = props.theme,
     contrastType = props.contrastType,
-    intent = props.intent,
+    color = props.color,
     isFullWidth = props.isFullWidth,
     isDesktop = props.isDesktop;
   var feedbackColors = theme.colors.feedback;
   return {
-    background: feedbackColors.background[intent][contrastType],
+    background: feedbackColors.background[color][contrastType],
     padding: isFullWidth ? "".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(isFullWidth ? theme.border.radius.none : theme.border.radius.medium),
-    borderColor: feedbackColors.border[intent][contrastType],
+    borderColor: feedbackColors.border[color][contrastType],
     borderWidth: makeBorderSize(isFullWidth ? theme.border.width.none : theme.border.width.thin),
     borderStyle: 'solid',
     display: 'flex',
@@ -17485,7 +17497,8 @@ var Alert = function Alert(_ref) {
   var contrastType = "".concat(contrast, "Contrast");
   var iconSize = isFullWidth ? 'large' : 'medium';
   var textSize = isFullWidth ? 'medium' : 'small';
-  var Icon = intentIconMap[intent];
+  var alertColor = color !== null && color !== void 0 ? color : intent;
+  var Icon = intentIconMap[alertColor];
   var iconOffset = 'spacing.1';
 
   // certain special cases below needs special care for near perfect alignment
@@ -17510,7 +17523,7 @@ var Alert = function Alert(_ref) {
     marginTop: iconOffset,
     display: "flex",
     children: /*#__PURE__*/jsx(Icon, {
-      color: "feedback.icon.".concat(intent, ".").concat(contrastType),
+      color: "feedback.icon.".concat(alertColor, ".").concat(contrastType),
       size: iconSize
     })
   });
@@ -17543,7 +17556,7 @@ var Alert = function Alert(_ref) {
     children: /*#__PURE__*/jsx(BaseButton, {
       size: textSize,
       onClick: actions.primary.onClick,
-      color: color || intent,
+      color: alertColor,
       variant: contrast === 'high' ? 'primary' : 'secondary',
       children: actions.primary.text
     })
@@ -17568,7 +17581,7 @@ var Alert = function Alert(_ref) {
     display: isReactNative$3 ? castNativeType('flex') : castWebType('inline-flex'),
     children: /*#__PURE__*/jsx(BaseLink, _objectSpread$1j(_objectSpread$1j({
       size: textSize,
-      color: contrast === 'high' ? 'white' : intent
+      color: contrast === 'high' ? 'white' : alertColor
     }, secondaryActionParams), {}, {
       children: actions.secondary.text
     }))
@@ -17604,8 +17617,8 @@ var Alert = function Alert(_ref) {
   }) : null;
   var a11yProps = makeAccessible(_objectSpread$1j({
     // React Native doesn't has status as role
-    role: isReactNative$3 || intent === 'negative' || intent === 'notice' ? 'alert' : 'status'
-  }, intent === 'notice' && {
+    role: isReactNative$3 || alertColor === 'negative' || alertColor === 'notice' ? 'alert' : 'status'
+  }, alertColor === 'notice' && {
     liveRegion: 'polite'
   }));
   if (!isVisible) {
@@ -17616,7 +17629,7 @@ var Alert = function Alert(_ref) {
     testID: testID
   })), getStyledProps(styledProps)), {}, {
     children: /*#__PURE__*/jsxs(StyledAlert, {
-      intent: intent,
+      color: alertColor,
       contrastType: contrastType,
       isFullWidth: isFullWidth,
       isDesktop: isDesktop,
@@ -22454,7 +22467,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
           id: labelId,
           htmlFor: inputId,
           children: label
-        }), trailingHeaderSlot === null || trailingHeaderSlot === void 0 ? void 0 : trailingHeaderSlot(inputValue)]
+        }), trailingHeaderSlot === null || trailingHeaderSlot === void 0 ? void 0 : trailingHeaderSlot(value !== null && value !== void 0 ? value : inputValue)]
       }), /*#__PURE__*/jsxs(BaseInputWrapper, {
         isDropdownTrigger: isDropdownTrigger,
         isTextArea: isTextArea,
@@ -22566,7 +22579,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
           helpTextId: helpTextId,
           errorTextId: errorTextId,
           successTextId: successTextId
-        }), trailingFooterSlot === null || trailingFooterSlot === void 0 ? void 0 : trailingFooterSlot(inputValue)]
+        }), trailingFooterSlot === null || trailingFooterSlot === void 0 ? void 0 : trailingFooterSlot(value !== null && value !== void 0 ? value : inputValue)]
       })
     })]
   }));