@razorpay/blade 10.13.1 → 10.14.0

package/build/components/index.d.ts

@@ -369,23 +369,46 @@ declare type ActionStatesWithContrast = {
     active: ColorContrast;
     disabled: ColorContrast;
 };
+declare type ActionStatesWithLowContrast = {
+    default: Pick<ColorContrast, 'lowContrast'>;
+    hover: Pick<ColorContrast, 'lowContrast'>;
+    focus: Pick<ColorContrast, 'lowContrast'>;
+    active: Pick<ColorContrast, 'lowContrast'>;
+    disabled: Pick<ColorContrast, 'lowContrast'>;
+};
 declare type ActionVariants = {
     primary: ActionStates;
     secondary: ActionStates;
     tertiary: ActionStates;
     link: LinkActionStates;
 };
-declare type ActionVariantsWithContrast = {
-    primary: ActionStatesWithContrast;
-    secondary: ActionStatesWithContrast;
-    tertiary: ActionStatesWithContrast;
-    link: ActionStatesWithContrast;
-};
 declare type FeedbackActions = {
-    background: Pick<ActionVariantsWithContrast, 'primary'>;
-    border: Pick<ActionVariantsWithContrast, 'primary'>;
-    text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
-    icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+    action: {
+        background: {
+            primary: ActionStatesWithContrast;
+            secondary: ActionStatesWithLowContrast;
+        };
+        border: {
+            primary: ActionStatesWithContrast;
+            secondary: ActionStatesWithLowContrast;
+        };
+        text: {
+            link: ActionStatesWithContrast;
+            primary: ActionStatesWithContrast;
+            secondary: ActionStatesWithLowContrast;
+        };
+        icon: {
+            link: ActionStatesWithContrast;
+            primary: ActionStatesWithContrast;
+            secondary: ActionStatesWithLowContrast;
+        };
+    };
+};
+declare type WhiteColors = {
+    background: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;
+    border: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;
+    text: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;
+    icon: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;
 };
 declare type Colors = {
     brand: {
@@ -398,21 +421,11 @@ declare type Colors = {
         border: Record<Feedback, ColorContrast>;
         text: Record<Feedback, ColorContrast>;
         icon: Record<Feedback, ColorContrast>;
-        positive: {
-            action: FeedbackActions;
-        };
-        negative: {
-            action: FeedbackActions;
-        };
-        information: {
-            action: FeedbackActions;
-        };
-        notice: {
-            action: FeedbackActions;
-        };
-        neutral: {
-            action: FeedbackActions;
-        };
+        positive: FeedbackActions;
+        negative: FeedbackActions;
+        information: FeedbackActions;
+        notice: FeedbackActions;
+        neutral: FeedbackActions;
     };
     surface: {
         background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
@@ -421,6 +434,8 @@ declare type Colors = {
         action: {
             icon: ActionStatesWithContrast;
         };
+        overlay: Record<'background', Record<400 | 800, string>>;
+        popup: Record<'background', string>;
     };
     overlay: Record<'background', string>;
     action: {
@@ -443,6 +458,12 @@ declare type Colors = {
             blue: ColorContrast;
         };
     };
+    static: {
+        white: string;
+    };
+    white: {
+        action: WhiteColors;
+    };
 };
 declare type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 declare type ThemeTokens = {
@@ -1971,12 +1992,13 @@ declare type ActionIconColors = `action.icon.${DotNotationColorStringToken<Theme
 declare type TextIconColors = `surface.text.${DotNotationColorStringToken<Theme['colors']['surface']['text']>}`;
 declare type SurfaceActionIconColors = `surface.action.icon.${DotNotationColorStringToken<Theme['colors']['surface']['action']['icon']>}`;
 declare type BadgeIconColors = `badge.icon.${DotNotationColorStringToken<Theme['colors']['badge']['icon']>}`;
+declare type WhiteIconColors = `white.action.icon.${DotNotationColorStringToken<Theme['colors']['white']['action']['icon']>}`;
 declare type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
 declare type IconProps = {
     /**
      * Color token (not to be confused with actual hsla value)
      */
-    color?: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
+    color?: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | WhiteIconColors | 'currentColor';
     size?: IconSize;
 } & StyledPropsBlade;
 declare type IconComponent = React.ComponentType<IconProps>;
@@ -1988,11 +2010,18 @@ declare type BadgeProps = {
      */
     children: StringChildrenType;
     /**
-     * Sets the variant of the badge.
+     * This prop is deprecated in favor of `color`.
      *
+     * @deprecated Use the `color` prop instead
      * @default 'neutral'
      */
     variant?: Feedback | 'blue';
+    /**
+     * Sets the color of the badge.
+     *
+     * @default 'neutral'
+     */
+    color?: Feedback | 'default';
     /**
      * Sets the contrast of the badge.
      *
@@ -2018,7 +2047,7 @@ declare type BadgeProps = {
      */
     fontWeight?: 'regular' | 'bold';
 } & TestID & StyledPropsBlade;
-declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, ...styledProps }: BadgeProps) => ReactElement;
+declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, color, testID, ...styledProps }: BadgeProps) => ReactElement;
 
 declare type ActionListItemProps = {
     title: string;
@@ -2164,11 +2193,16 @@ declare type AlertProps = {
      */
     isFullWidth?: boolean;
     /**
-     * Sets the color tone
+     * This prop is deprecated in favor of the `color` prop.
      *
+     * @deprecated Use `color` instead
      * @default neutral
      */
     intent?: Feedback;
+    /**
+     * Sets the color tone
+     */
+    color?: Feedback;
     /**
      * Renders a primary action button and a secondary action link button
      */
@@ -2183,7 +2217,7 @@ declare type AlertProps = {
         secondary?: SecondaryAction;
     };
 } & TestID & StyledPropsBlade;
-declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
+declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, color, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
 
 declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps & MarginProps & {
     width: SpacingValueType | {
@@ -3074,11 +3108,12 @@ declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotat
 declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme['colors']['surface']['text']>}`;
 declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme['colors']['action']['text']>}`;
 declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme['colors']['badge']['text']>}`;
+declare type WhiteTextColors = `white.action.text.${DotNotationColorStringToken<Theme['colors']['white']['action']['text']>}`;
 declare type BrandPrimaryColors = `brand.primary.${keyof Theme['colors']['brand']['primary']}`;
 declare type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div';
 declare type BaseTextProps = {
     id?: string;
-    color?: BrandPrimaryColors | ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
+    color?: BrandPrimaryColors | ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | WhiteTextColors | BadgeTextColors;
     fontFamily?: keyof Theme['typography']['fonts']['family'];
     fontSize?: keyof Theme['typography']['fonts']['size'];
     fontWeight?: keyof Theme['typography']['fonts']['weight'];
@@ -3104,8 +3139,7 @@ declare type BaseTextProps = {
 declare type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
 declare type BaseLinkCommonProps = {
-    intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
-    contrast?: 'low' | 'high';
+    color?: 'default' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
     icon?: IconComponent;
     iconPosition?: 'left' | 'right';
     onClick?: (event: SyntheticEvent) => void;
@@ -3170,6 +3204,7 @@ declare type BaseLinkProps = BaseLinkAnchorVariantProps | BaseLinkButtonVariantP
 declare type LinkCommonProps = {
     variant?: 'anchor' | 'button';
     icon?: IconComponent;
+    color?: 'default' | 'white' | 'neutral';
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
     onClick?: (event: SyntheticEvent) => void;
@@ -3261,8 +3296,7 @@ declare type BaseButtonCommonProps = {
     isLoading?: boolean;
     accessibilityProps?: Partial<AccessibilityProps>;
     variant?: 'primary' | 'secondary' | 'tertiary';
-    contrast?: 'low' | 'high';
-    intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
+    color?: 'default' | 'white' | 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
 } & TestID & StyledPropsBlade & BladeCommonEvents;
 declare type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
     icon?: undefined;
@@ -3292,6 +3326,7 @@ declare type ButtonCommonProps = {
      */
     rel?: BaseButtonProps['rel'];
     variant?: 'primary' | 'secondary' | 'tertiary';
+    color?: 'default' | 'white' | 'positive' | 'negative';
     size?: 'xsmall' | 'small' | 'medium' | 'large';
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
@@ -3332,18 +3367,25 @@ declare type CounterProps = {
      */
     max?: number;
     /**
-     * Sets the intent of the counter.
+     * This prop is deprecated in favor of `color`.
      *
      * @default 'neutral'
-     * @deprecated Use `variant` instead
+     * @deprecated Use `color` instead
      */
     intent?: Feedback;
     /**
-     * Sets the variant of the counter.
+     * This prop is deprecated in favor of `color`.
      *
      * @default 'neutral'
+     * @deprecated Use `color` instead
      */
     variant?: Feedback | 'blue';
+    /**
+     * Sets the color of the counter.
+     *
+     * @default 'neutral'
+     */
+    color?: Feedback | 'default';
     /**
      * Sets the contrast of the counter.
      *
@@ -3357,7 +3399,7 @@ declare type CounterProps = {
      */
     size?: 'small' | 'medium' | 'large';
 } & TestID & StyledPropsBlade;
-declare const Counter: ({ value, max, intent, variant, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
+declare const Counter: ({ value, max, intent, variant, color, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
 
 declare const validAsValues$3: readonly ["span", "h1", "h2", "h3", "h4", "h5", "h6"];
 declare type TitleProps = {
@@ -4338,10 +4380,16 @@ declare type ChipProps = {
      */
     icon?: IconComponent;
     /**
-     * Sets the Chip's visual intent
+     * This is deprecated in favor of the `color` prop.
      *
+     *  @deprecated Use the `color` prop instead.
      */
     intent?: 'positive' | 'negative' | 'none';
+    /**
+     * Sets the Chip's visual color.
+     *
+     */
+    color?: 'positive' | 'negative' | 'default';
     /**
      * If `true`, the Chip will be disabled
      *
@@ -4410,17 +4458,24 @@ declare type ChipGroupProps = {
      */
     value?: string | string[];
     /**
-     * Sets the ChipGroups's visual intent, it will propagate down to all the Chips
+     * This is deprecated in favor of the `color` prop.
      *
      * @default "none"
+     * @deprecated Use the `color` prop instead.
      */
     intent?: 'positive' | 'negative' | 'none';
+    /**
+     * Sets the ChipGroups's visual color, it will propagate down to all the Chips
+     *
+     */
+    color?: 'positive' | 'negative' | 'default';
 } & TestID & StyledPropsBlade;
 
 declare const Chip: React__default.ForwardRefExoticComponent<{
     children: StringChildrenType;
     icon?: IconComponent | undefined;
     intent?: "none" | "negative" | "positive" | undefined;
+    color?: "negative" | "positive" | "default" | undefined;
     isDisabled?: boolean | undefined;
     value?: string | undefined;
 } & TestID & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
@@ -4716,7 +4771,7 @@ declare const Chip: React__default.ForwardRefExoticComponent<{
     } | undefined;
 }, "display">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
 
-declare const ChipGroup: ({ accessibilityLabel, children, isDisabled, name, defaultValue, onChange, value, size, intent, testID, selectionType, ...styledProps }: ChipGroupProps) => React__default.ReactElement;
+declare const ChipGroup: ({ accessibilityLabel, children, isDisabled, name, defaultValue, onChange, value, size, intent, color, testID, selectionType, ...styledProps }: ChipGroupProps) => React__default.ReactElement;
 
 declare type DividerProps = {
     /**
@@ -6275,7 +6330,12 @@ declare type RadioGroupProps = {
 declare const RadioGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
 
 declare type BaseSpinnerProps = {
-    intent?: Feedback;
+    /**
+     * Sets the color of the spinner.
+     *
+     * @default 'default'
+     */
+    color?: 'default' | 'white' | Feedback;
     /**
      * Sets the label of the spinner.
      *
@@ -6288,8 +6348,9 @@ declare type BaseSpinnerProps = {
      */
     labelPosition?: 'right' | 'bottom';
     /**
-     * Sets the contrast of the spinner.
+     * This is deprecated in favor of the `color` prop.
      *
+     * @deprecated Use `color="white"` for high contrast and `color="default"` for low contrast
      * @default 'low'
      */
     contrast?: ColorContrastTypes;
@@ -6306,8 +6367,15 @@ declare type BaseSpinnerProps = {
     accessibilityLabel: string;
 } & TestID & StyledPropsBlade;
 
-declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'>;
-declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
+declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'> & {
+    /**
+     * Sets the color of the spinner.
+     *
+     * @default 'default'
+     */
+    color?: 'default' | 'white';
+};
+declare const Spinner: ({ label, labelPosition, accessibilityLabel, color, contrast, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
 
 declare type SkipNavLinkProps = {
     id?: string;