@razorpay/blade 10.2.1 → 10.3.0

package/build/components/index.d.ts

@@ -713,10 +713,8 @@ type PickCSSByPlatform<T extends keyof React__default.CSSProperties | keyof View
 }>;
 
 type BladeElementRef = Platform.Select<{
-  web:
-    | Pick<HTMLElement, 'focus' | 'scrollIntoView' | 'getBoundingClientRect' | 'clientHeight'>
-    | Pick<View, 'focus'>;
-  native: React__default.MutableRefObject<any>;
+  web: HTMLElement;
+  native: View;
 }>;
 
 declare type ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;
@@ -8215,13 +8213,13 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         readonly l?: csstype.Property.Border<string | number> | undefined;
         readonly xl?: csstype.Property.Border<string | number> | undefined;
     } | undefined;
-    backgroundColor: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.focus" | "action.background.primary.hover" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.focus" | "action.background.secondary.hover" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.focus" | "action.background.tertiary.hover" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | {
-        readonly base?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.focus" | "action.background.primary.hover" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.focus" | "action.background.secondary.hover" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.focus" | "action.background.tertiary.hover" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
-        readonly xs?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.focus" | "action.background.primary.hover" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.focus" | "action.background.secondary.hover" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.focus" | "action.background.tertiary.hover" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
-        readonly s?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.focus" | "action.background.primary.hover" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.focus" | "action.background.secondary.hover" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.focus" | "action.background.tertiary.hover" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
-        readonly m?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.focus" | "action.background.primary.hover" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.focus" | "action.background.secondary.hover" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.focus" | "action.background.tertiary.hover" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
-        readonly l?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.focus" | "action.background.primary.hover" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.focus" | "action.background.secondary.hover" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.focus" | "action.background.tertiary.hover" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
-        readonly xl?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.focus" | "action.background.primary.hover" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.focus" | "action.background.secondary.hover" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.focus" | "action.background.tertiary.hover" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
+    backgroundColor: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | {
+        readonly base?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
+        readonly xs?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
+        readonly s?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
+        readonly m?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
+        readonly l?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
+        readonly xl?: (string & Record<never, never>) | "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" | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.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" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.primary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.secondary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | "action.background.tertiary.disabled" | "transparent" | undefined;
     };
     lineHeight: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;

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

@@ -14970,33 +14970,55 @@ var SelectorSupportText = function SelectorSupportText(_ref) {
   });
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function assignRef(ref, value) {
+  if (ref == null) return;
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+  try {
+    ref.current = value;
+  } catch (error) {
+    throwBladeError({
+      moduleName: 'useMergeRefs',
+      message: "Cannot assign value '".concat(value, "' to ref '").concat(ref, "'")
+    });
+  }
+}
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (node) {
+    refs.forEach(function (ref) {
+      assignRef(ref, node);
+    });
+  };
+}
+
 /**
- * A hook which only exposes the properties of html input element via imparative hook
+ * Merged two or more refs into a single ref callback.
+ *
+ * Usage:
+ * ```ts
+ * const internalRef = React.useRef()
+ * const ref = useMergeRefs(incomingRef, internalRef);
+ * ```
+ *
  *
- * It avoids exposing other native properties of HTMLElement
- * like `style` `classList` to avoid unintended usage of refs.
+ * Taken from ChakraUI:
+ * https://github.com/chakra-ui/chakra-ui/blob/f3c4a492e5636d2745b438d10794fa4e7999b6de/packages/hooks/use-merge-refs/src/index.ts#L31
  */
-var useBladeInnerRef = function useBladeInnerRef(targetRef, handlers) {
-  var innerRef = React__default.useRef(null);
-  React__default.useImperativeHandle(targetRef, function () {
-    var element = innerRef.current;
-    return {
-      focus: function focus(opts) {
-        var _element$focus;
-        return handlers !== null && handlers !== void 0 && handlers.onFocus ? handlers.onFocus(opts) : element === null || element === void 0 ? void 0 : (_element$focus = element.focus) === null || _element$focus === void 0 ? void 0 : _element$focus.call(element, opts);
-      },
-      scrollIntoView: function scrollIntoView(opts) {
-        var _element$scrollIntoVi;
-        return element === null || element === void 0 ? void 0 : (_element$scrollIntoVi = element.scrollIntoView) === null || _element$scrollIntoVi === void 0 ? void 0 : _element$scrollIntoVi.call(element, opts);
-      },
-      getBoundingClientRect: function getBoundingClientRect() {
-        return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
-      },
-      clientHeight: element.clientHeight
-    };
-  }, [innerRef, handlers]);
-  return innerRef;
-};
+function useMergeRefs() {
+  for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    refs[_key2] = arguments[_key2];
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(function () {
+    return mergeRefs.apply(void 0, refs);
+  }, refs);
+}
 
 function ownKeys$1n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -15051,7 +15073,10 @@ var _SelectorInput = function _SelectorInput(_ref3, ref) {
     hoverTokens = _ref3.hoverTokens,
     tabIndex = _ref3.tabIndex,
     accessibilityLabel = _ref3.accessibilityLabel;
-  var inputRef = useBladeInnerRef(ref);
+  // merging both refs because inputProps.ref needs to have access to indeterminate state
+  // to be able to set the mixed value via setMixed() function
+  // TODO: replace with a generic `mergeRefs()` util if we do this in other places
+  var mergedRef = useMergeRefs(ref, inputProps.ref);
   return /*#__PURE__*/jsx(StyledInput, _objectSpread$1m(_objectSpread$1m(_objectSpread$1m({
     id: id,
     isChecked: isChecked,
@@ -15062,13 +15087,7 @@ var _SelectorInput = function _SelectorInput(_ref3, ref) {
   }, inputProps), makeAccessible({
     label: accessibilityLabel
   })), {}, {
-    // merging both refs because inputProps.ref needs to have access to indeterminate state
-    // to be able to set the mixed value via setMixed() function
-    // TODO: replace with a generic `mergeRefs()` util if we do this in other places
-    ref: function ref(value) {
-      inputProps.ref.current = value;
-      inputRef.current = value;
-    }
+    ref: mergedRef
   }));
 };
 var SelectorInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SelectorInput), {
@@ -21261,7 +21280,8 @@ var _TextInput = function _TextInput(_ref2, ref) {
     autoCapitalize = _ref2.autoCapitalize,
     testID = _ref2.testID,
     styledProps = _objectWithoutProperties$1(_ref2, _excluded$h);
-  var textInputRef = useBladeInnerRef(ref);
+  var textInputRef = React__default.useRef(null);
+  var mergedRef = useMergeRefs(ref, textInputRef);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     shouldShowClearButton = _useState2[0],
@@ -21304,7 +21324,7 @@ var _TextInput = function _TextInput(_ref2, ref) {
   return /*#__PURE__*/jsx(BaseInput, _objectSpread$I(_objectSpread$I({
     id: "textinput",
     componentName: MetaConstants.TextInput,
-    ref: textInputRef,
+    ref: mergedRef,
     label: label,
     accessibilityLabel: accessibilityLabel,
     hideLabelText: !Boolean(label),
@@ -21406,7 +21426,6 @@ var _PasswordInput = function _PasswordInput(_ref, ref) {
     autoCompleteSuggestionType = _ref.autoCompleteSuggestionType,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$g);
-  var inputRef = useBladeInnerRef(ref);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isRevealed = _React$useState2[0],
@@ -21441,7 +21460,7 @@ var _PasswordInput = function _PasswordInput(_ref, ref) {
     }) : null;
   };
   return /*#__PURE__*/jsx(BaseInput, _objectSpread$H({
-    ref: inputRef,
+    ref: ref,
     componentName: MetaConstants.PasswordInput,
     id: "password-field",
     label: label,
@@ -21517,7 +21536,8 @@ var _TextArea = function _TextArea(_ref, ref) {
     numberOfLines = _ref$numberOfLines === void 0 ? 2 : _ref$numberOfLines,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$f);
-  var inputRef = useBladeInnerRef(ref);
+  var inputRef = React__default.useRef(null);
+  var mergedRef = useMergeRefs(ref, inputRef);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     shouldShowClearButton = _React$useState2[0],
@@ -21560,7 +21580,7 @@ var _TextArea = function _TextArea(_ref, ref) {
     id: "textarea",
     componentName: MetaConstants.TextArea,
     autoFocus: autoFocus,
-    ref: inputRef,
+    ref: mergedRef,
     label: label,
     accessibilityLabel: accessibilityLabel,
     hideLabelText: !Boolean(label),
@@ -21989,12 +22009,6 @@ var _SelectInput = function _SelectInput(props, ref) {
     setIsControlled = _useDropdown.setIsControlled,
     selectionType = _useDropdown.selectionType,
     selectedIndices = _useDropdown.selectedIndices;
-  var inputRef = useBladeInnerRef(ref, {
-    onFocus: function onFocus(opts) {
-      var _triggererRef$current;
-      (_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus(opts);
-    }
-  });
   var icon = props.icon;
     props.onChange;
     props.defaultValue;
@@ -22085,7 +22099,11 @@ var _SelectInput = function _SelectInput(props, ref) {
     position: "relative",
     children: [!isReactNative$4() ? /*#__PURE__*/jsx(VisuallyHidden, {
       children: /*#__PURE__*/jsx("input", {
-        ref: inputRef,
+        onFocus: function onFocus() {
+          var _triggererRef$current;
+          (_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus();
+        },
+        ref: ref,
         tabIndex: -1,
         required: props.isRequired,
         name: props.name,