@razorpay/blade 12.110.0 → 12.119.1

package/build/types/tokens/index.d.ts

@@ -600,6 +600,10 @@ type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>
     faint: string;
     strong: string;
 };
+type SurfacePrimaryEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
 type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
 type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
@@ -651,8 +655,8 @@ type Colors = {
     interactive: {
         background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
         border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
-        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        text: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
         background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
@@ -663,9 +667,10 @@ type Colors = {
     surface: {
         background: {
             gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
-            primary: SubtleOrIntenseEmphasis;
+            primary: SurfacePrimaryEmphasis;
             sea: SubtleOrIntenseEmphasis;
             cloud: SubtleOrIntenseEmphasis;
+            accent: Pick<Emphasis, 'intense'>;
         };
         border: {
             gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;
@@ -708,6 +713,8 @@ type ThemeTokens = {
 
 declare const bladeTheme: ThemeTokens;
 
+declare const bladeNeutralTheme: ThemeTokens;
+
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<number | string, unknown> ? DeepPartial<T[P]> : T[P];
 };
@@ -1098,4 +1105,4 @@ type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
 /** offset-x | offset-y | blur-radius | spread-radius | color, offset-x | offset-y | blur-radius | spread-radius | color */
 declare const elevation: ElevationWithColorModes;
 
-export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };
+export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeNeutralTheme, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };

package/build/types/tokens/index.native.d.ts

@@ -600,6 +600,10 @@ type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>
     faint: string;
     strong: string;
 };
+type SurfacePrimaryEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
 type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
 type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
@@ -651,8 +655,8 @@ type Colors = {
     interactive: {
         background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
         border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
-        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        text: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
         background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
@@ -663,9 +667,10 @@ type Colors = {
     surface: {
         background: {
             gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
-            primary: SubtleOrIntenseEmphasis;
+            primary: SurfacePrimaryEmphasis;
             sea: SubtleOrIntenseEmphasis;
             cloud: SubtleOrIntenseEmphasis;
+            accent: Pick<Emphasis, 'intense'>;
         };
         border: {
             gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;
@@ -708,6 +713,8 @@ type ThemeTokens = {
 
 declare const bladeTheme: ThemeTokens;
 
+declare const bladeNeutralTheme: ThemeTokens;
+
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<number | string, unknown> ? DeepPartial<T[P]> : T[P];
 };
@@ -1097,4 +1104,4 @@ type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
 
 declare const elevation: ElevationWithColorModes;
 
-export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };
+export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeNeutralTheme, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };

package/build/types/utils/index.d.ts

@@ -553,6 +553,10 @@ type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>
     faint: string;
     strong: string;
 };
+type SurfacePrimaryEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
 type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
 type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
@@ -604,8 +608,8 @@ type Colors = {
     interactive: {
         background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
         border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
-        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        text: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
         background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
@@ -616,9 +620,10 @@ type Colors = {
     surface: {
         background: {
             gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
-            primary: SubtleOrIntenseEmphasis;
+            primary: SurfacePrimaryEmphasis;
             sea: SubtleOrIntenseEmphasis;
             cloud: SubtleOrIntenseEmphasis;
+            accent: Pick<Emphasis, 'intense'>;
         };
         border: {
             gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;

package/build/types/utils/index.native.d.ts

@@ -553,6 +553,10 @@ type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>
     faint: string;
     strong: string;
 };
+type SurfacePrimaryEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
 type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
 type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
@@ -604,8 +608,8 @@ type Colors = {
     interactive: {
         background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
         border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
-        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        text: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary' | 'onNeutral', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
         background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
@@ -616,9 +620,10 @@ type Colors = {
     surface: {
         background: {
             gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
-            primary: SubtleOrIntenseEmphasis;
+            primary: SurfacePrimaryEmphasis;
             sea: SubtleOrIntenseEmphasis;
             cloud: SubtleOrIntenseEmphasis;
+            accent: Pick<Emphasis, 'intense'>;
         };
         border: {
             gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.110.0",
+  "version": "12.119.1",
   "license": "MIT",
   "engines": {
     "node": ">=20"
@@ -286,7 +286,7 @@
     "react-router-dom": "5.3.4",
     "react-scripts": "5.0.1",
     "react-test-renderer": "18.2.0",
-    "rollup": "3.29.5",
+    "rollup": "3.30.0",
     "rollup-plugin-dts": "5.3.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "size-limit": "11.2.0",

package/build/lib/web/development/components/AnimateInteractions/useFocusWithin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocusWithin.js","sources":["../../../../../../src/components/AnimateInteractions/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype FocusWithinHandlers = {\n  onFocusWithin?: () => void;\n  onBlurWithin?: () => void;\n};\n\nexport const useFocusWithin = <T extends HTMLElement>(\n  ref: React.RefObject<T>,\n  { onFocusWithin, onBlurWithin }: FocusWithinHandlers,\n): void => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const handleFocusIn = (): void => {\n      onFocusWithin?.();\n    };\n\n    const handleFocusOut = (event: FocusEvent): void => {\n      // Ensure that focus is not still within the container\n      if (element && !element.contains(event.relatedTarget as Node)) {\n        onBlurWithin?.();\n      }\n    };\n\n    element.addEventListener('focusin', handleFocusIn);\n    element.addEventListener('focusout', handleFocusOut);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      element.removeEventListener('focusin', handleFocusIn);\n      element.removeEventListener('focusout', handleFocusOut);\n    };\n  }, [ref, onFocusWithin, onBlurWithin]);\n};\n"],"names":["useFocusWithin","ref","_ref","onFocusWithin","onBlurWithin","useEffect","element","current","handleFocusIn","handleFocusOut","event","contains","relatedTarget","addEventListener","removeEventListener"],"mappings":";;AAOO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CACzBC,GAAuB,EAAAC,IAAA,EAEd;AAAA,EAAA,IADPC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY,CAAA;AAE7BC,EAAAA,SAAS,CAAC,YAAM;AACd,IAAA,IAAMC,OAAO,GAAGL,GAAG,CAACM,OAAO,CAAA;IAC3B,IAAI,CAACD,OAAO,EAAE,OAAA;AAEd,IAAA,IAAME,aAAa,GAAG,SAAhBA,aAAaA,GAAe;AAChCL,MAAAA,aAAa,KAAbA,IAAAA,IAAAA,aAAa,KAAbA,KAAAA,CAAAA,IAAAA,aAAa,EAAI,CAAA;KAClB,CAAA;AAED,IAAA,IAAMM,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAAiB,EAAW;AAClD;MACA,IAAIJ,OAAO,IAAI,CAACA,OAAO,CAACK,QAAQ,CAACD,KAAK,CAACE,aAAqB,CAAC,EAAE;AAC7DR,QAAAA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,KAAZA,KAAAA,CAAAA,IAAAA,YAAY,EAAI,CAAA;AAClB,OAAA;KACD,CAAA;AAEDE,IAAAA,OAAO,CAACO,gBAAgB,CAAC,SAAS,EAAEL,aAAa,CAAC,CAAA;AAClDF,IAAAA,OAAO,CAACO,gBAAgB,CAAC,UAAU,EAAEJ,cAAc,CAAC,CAAA;;AAEpD;AACA,IAAA,OAAO,YAAM;AACXH,MAAAA,OAAO,CAACQ,mBAAmB,CAAC,SAAS,EAAEN,aAAa,CAAC,CAAA;AACrDF,MAAAA,OAAO,CAACQ,mBAAmB,CAAC,UAAU,EAAEL,cAAc,CAAC,CAAA;KACxD,CAAA;GACF,EAAE,CAACR,GAAG,EAAEE,aAAa,EAAEC,YAAY,CAAC,CAAC,CAAA;AACxC;;;;"}

package/build/lib/web/production/components/AnimateInteractions/useFocusWithin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocusWithin.js","sources":["../../../../../../src/components/AnimateInteractions/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype FocusWithinHandlers = {\n  onFocusWithin?: () => void;\n  onBlurWithin?: () => void;\n};\n\nexport const useFocusWithin = <T extends HTMLElement>(\n  ref: React.RefObject<T>,\n  { onFocusWithin, onBlurWithin }: FocusWithinHandlers,\n): void => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const handleFocusIn = (): void => {\n      onFocusWithin?.();\n    };\n\n    const handleFocusOut = (event: FocusEvent): void => {\n      // Ensure that focus is not still within the container\n      if (element && !element.contains(event.relatedTarget as Node)) {\n        onBlurWithin?.();\n      }\n    };\n\n    element.addEventListener('focusin', handleFocusIn);\n    element.addEventListener('focusout', handleFocusOut);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      element.removeEventListener('focusin', handleFocusIn);\n      element.removeEventListener('focusout', handleFocusOut);\n    };\n  }, [ref, onFocusWithin, onBlurWithin]);\n};\n"],"names":["useFocusWithin","ref","_ref","onFocusWithin","onBlurWithin","useEffect","element","current","handleFocusIn","handleFocusOut","event","contains","relatedTarget","addEventListener","removeEventListener"],"mappings":";;AAOO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CACzBC,GAAuB,EAAAC,IAAA,EAEd;AAAA,EAAA,IADPC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY,CAAA;AAE7BC,EAAAA,SAAS,CAAC,YAAM;AACd,IAAA,IAAMC,OAAO,GAAGL,GAAG,CAACM,OAAO,CAAA;IAC3B,IAAI,CAACD,OAAO,EAAE,OAAA;AAEd,IAAA,IAAME,aAAa,GAAG,SAAhBA,aAAaA,GAAe;AAChCL,MAAAA,aAAa,KAAbA,IAAAA,IAAAA,aAAa,KAAbA,KAAAA,CAAAA,IAAAA,aAAa,EAAI,CAAA;KAClB,CAAA;AAED,IAAA,IAAMM,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAAiB,EAAW;AAClD;MACA,IAAIJ,OAAO,IAAI,CAACA,OAAO,CAACK,QAAQ,CAACD,KAAK,CAACE,aAAqB,CAAC,EAAE;AAC7DR,QAAAA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,KAAZA,KAAAA,CAAAA,IAAAA,YAAY,EAAI,CAAA;AAClB,OAAA;KACD,CAAA;AAEDE,IAAAA,OAAO,CAACO,gBAAgB,CAAC,SAAS,EAAEL,aAAa,CAAC,CAAA;AAClDF,IAAAA,OAAO,CAACO,gBAAgB,CAAC,UAAU,EAAEJ,cAAc,CAAC,CAAA;;AAEpD;AACA,IAAA,OAAO,YAAM;AACXH,MAAAA,OAAO,CAACQ,mBAAmB,CAAC,SAAS,EAAEN,aAAa,CAAC,CAAA;AACrDF,MAAAA,OAAO,CAACQ,mBAAmB,CAAC,UAAU,EAAEL,cAAc,CAAC,CAAA;KACxD,CAAA;GACF,EAAE,CAACR,GAAG,EAAEE,aAAa,EAAEC,YAAY,CAAC,CAAC,CAAA;AACxC;;;;"}