@razorpay/blade 10.14.6 → 10.15.0

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,
@@ -19472,8 +19484,6 @@ var Carousel = function Carousel(_ref4) {
 
   // Sync the indicators with scroll
   React__default.useEffect(function () {
-    // do not sync indicators on desktop, we are already in sync because we can only use the next/prev buttons
-    if (!isMobile) return;
     var carouselContainer = containerRef.current;
     if (!carouselContainer) return;
     var handleScroll = debounce$2(function () {
@@ -22456,7 +22466,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,
@@ -22568,7 +22578,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)]
       })
     })]
   }));