@razorpay/blade 9.6.0 → 9.7.0

package/build/components/index.native.d.ts

@@ -1417,6 +1417,7 @@ type BaseBoxVisualProps$1 = MakeObjectResponsive$1<
       | BackgroundColorString$1<'surface'>
       | BackgroundColorString$1<'action'>
       | BrandColorString$1
+      | 'transparent'
       | (string & Record<never, never>);
     lineHeight: SpacingValueType$1;
     touchAction: CSSObject['touchAction'];
@@ -1434,7 +1435,7 @@ type BaseBoxVisualProps$1 = MakeObjectResponsive$1<
 
 // Visual props that are specific to Box
 type BoxVisualProps$1 = MakeObjectResponsive$1<{
-  backgroundColor: BackgroundColorString$1<'surface'> | BrandColorString$1;
+  backgroundColor: BackgroundColorString$1<'surface'> | BrandColorString$1 | 'transparent';
 }> & {
   // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object
   // styled-components do not support passing `as` prop as an object
@@ -2662,13 +2663,13 @@ declare type CommonBoxVisualProps = MakeObjectResponsive<{
     elevation?: keyof Elevation;
 }>;
 declare type BaseBoxVisualProps = MakeObjectResponsive<{
-    backgroundColor: BackgroundColorString<'feedback'> | BackgroundColorString<'surface'> | BackgroundColorString<'action'> | BrandColorString | (string & Record<never, never>);
+    backgroundColor: BackgroundColorString<'feedback'> | BackgroundColorString<'surface'> | BackgroundColorString<'action'> | BrandColorString | 'transparent' | (string & Record<never, never>);
     lineHeight: SpacingValueType;
     touchAction: CSSObject['touchAction'];
     userSelect: CSSObject['userSelect'];
 } & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents'>>;
 declare type BoxVisualProps = MakeObjectResponsive<{
-    backgroundColor: BackgroundColorString<'surface'> | BrandColorString;
+    backgroundColor: BackgroundColorString<'surface'> | BrandColorString | 'transparent';
 }> & {
     as: BoxAsType;
 };
@@ -3025,7 +3026,7 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
         readonly xl?: "platform-native" | undefined;
     } | undefined;
 } & MakeObjectResponsive<{
-    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";
+    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";
 } & {

package/build/components/index.native.js

@@ -3,32 +3,19 @@ import * as React from 'react';
 import React__default, { useMemo, useCallback, useState, useEffect, useRef, createContext, useContext, Fragment as Fragment$1, Children, cloneElement, forwardRef } from 'react';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import '@floating-ui/react';
-import { Platform, Appearance, SectionList, TouchableOpacity, View, Image, Pressable, Linking, AccessibilityInfo, Dimensions, Keyboard, findNodeHandle, StyleSheet, Modal as Modal$1 } from 'react-native';
-import Animated, { Easing, Keyframe, useSharedValue, useAnimatedStyle, withTiming, withRepeat, cancelAnimation, interpolate, withSequence, withDelay, interpolateColor, useDerivedValue, runOnJS } from 'react-native-reanimated';
+import { Appearance, Platform, SectionList, TouchableOpacity, View, Image, Pressable, Linking, AccessibilityInfo, Dimensions, Keyboard, findNodeHandle, StyleSheet, Modal as Modal$1 } from 'react-native';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import GorhomBottomSheet, { BottomSheetSectionList, BottomSheetScrollView, BottomSheetBackdrop as BottomSheetBackdrop$1, BottomSheetFooter as BottomSheetFooter$1 } from '@gorhom/bottom-sheet';
 import styled, { ThemeProvider } from 'styled-components/native';
+import Animated, { Easing, Keyframe, useSharedValue, useAnimatedStyle, withTiming, withRepeat, cancelAnimation, interpolate, withSequence, withDelay, interpolateColor, useDerivedValue, runOnJS } from 'react-native-reanimated';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { PortalProvider, PortalHost, Portal } from '@gorhom/portal';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ClipPath as ClipPath$1, Circle as Circle$1, Defs as Defs$1, G as G$1, Path as Path$1, Rect as Rect$1, Svg as Svg$1 } from 'react-native-svg';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useFloating, shift, flip, offset, arrow } from '@floating-ui/react-native';
 
-var breakpoints={base:0,xs:320,s:480,m:768,l:1024,xl:1200};
-
-var fontFamily={text:'Lato',code:Platform.OS==='ios'?'Courier':'monospace'};
-
-var fontWeight={regular:400,bold:700};({onDesktop:{fonts:{family:_extends({},fontFamily),size:{10:9,25:10,50:11,75:12,100:14,200:16,300:18,400:20,500:22,600:24,700:28,800:32,900:36,1000:40},weight:_extends({},fontWeight)},lineHeights:{0:0,25:14,50:16,75:18,100:20,200:24,300:24,400:28,500:32,600:40,700:40,800:48}},onMobile:{fonts:{family:_extends({},fontFamily),size:{10:9,25:10,50:11,75:12,100:14,200:16,300:16,400:18,500:20,600:20,700:24,800:28,900:32,1000:32},weight:_extends({},fontWeight)},lineHeights:{0:0,25:14,50:16,75:18,100:20,200:20,300:24,400:24,500:28,600:32,700:40,800:40}}});
-
-var makeBezier=function makeBezier(x1,y1,x2,y2){return Easing.bezier(x1,y1,x2,y2);};
-
-({standard:{attentive:makeBezier(0.5,0,0.3,1.5),effective:makeBezier(0.3,0,0.2,1),revealing:makeBezier(0.5,0,0,1),wary:makeBezier(1,0.5,0,0.5)},entrance:{attentive:makeBezier(0.5,0,0.3,1.5),effective:makeBezier(0,0,0.2,1),revealing:makeBezier(0,0,0,1)},exit:{attentive:makeBezier(0.7,0,0.5,1),effective:makeBezier(0.17,0,1,1),revealing:makeBezier(0.5,0,1,1)}});
-
-var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,8:8,10:10,12:12,16:16,18:18,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,56:56,100:100,120:120,140:140,160:160,200:200,300:300,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
-
 var componentIds$1={DropdownOverlay:'DropdownOverlay',Dropdown:'Dropdown',triggers:{SelectInput:'SelectInput',DropdownButton:'DropdownButton',DropdownLink:'DropdownLink'}};var SelectActions={Close:'Close',CloseSelect:'CloseSelect',First:'First',Last:'Last',Next:'Next',Open:'Open',PageDown:'PageDown',PageUp:'PageUp',Previous:'Previous',Select:'Select',Type:'Type'};function filterOptions(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:[];var filter=arguments.length>1?arguments[1]:undefined;var exclude=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];return options.filter(function(option){var matches=option.toLowerCase().startsWith(filter.toLowerCase());return matches&&!exclude.includes(option);});}function getActionFromKey(e,isOpen){if(!e){return undefined;}var altKey=e.altKey,ctrlKey=e.ctrlKey,metaKey=e.metaKey;var key='';if('key'in e){key=e.key;}var openKeys=['ArrowDown','ArrowUp','Enter',' '];if(!key)return undefined;if(!isOpen&&key&&openKeys.includes(key)){return SelectActions.Open;}if(key==='Home'){return SelectActions.First;}if(key==='End'){return SelectActions.Last;}if(key==='Backspace'||key==='Clear'||key.length===1&&key!==' '&&!altKey&&!ctrlKey&&!metaKey){return SelectActions.Type;}if(isOpen){if(key==='ArrowUp'&&altKey){return SelectActions.CloseSelect;}else if(key==='ArrowDown'&&!altKey){return SelectActions.Next;}else if(key==='ArrowUp'){return SelectActions.Previous;}else if(key==='PageUp'){return SelectActions.PageUp;}else if(key==='PageDown'){return SelectActions.PageDown;}else if(key==='Escape'){return SelectActions.Close;}else if(key==='Enter'||key===' '){return SelectActions.CloseSelect;}}return undefined;}function getIndexByLetter(options,filter){var startIndex=arguments.length>2&&arguments[2]!==undefined?arguments[2]:0;var orderedOptions=[].concat(_toConsumableArray(options.slice(startIndex)),_toConsumableArray(options.slice(0,startIndex)));var firstMatch=filterOptions(orderedOptions,filter)[0];var allSameLetter=function allSameLetter(array){return array.every(function(letter){return letter===array[0];});};if(firstMatch){return options.indexOf(firstMatch);}else if(allSameLetter(filter.split(''))){var matches=filterOptions(orderedOptions,filter[0]);return options.indexOf(matches[0]);}else {return -1;}}function getUpdatedIndex(currentIndex,maxIndex,action){var pageSize=10;switch(action){case SelectActions.First:return 0;case SelectActions.Last:return maxIndex;case SelectActions.Previous:return Math.max(0,currentIndex-1);case SelectActions.Next:return Math.min(maxIndex,currentIndex+1);case SelectActions.PageUp:return Math.max(0,currentIndex-pageSize);case SelectActions.PageDown:return Math.min(maxIndex,currentIndex+pageSize);default:return currentIndex;}}function isElementVisibleOnScreen(element){var bounding=element.getBoundingClientRect();return bounding.top>=0&&bounding.left>=0&&bounding.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&bounding.right<=(window.innerWidth||document.documentElement.clientWidth);}function isScrollable(element){return element&&element.clientHeight<element.scrollHeight;}var performAction=function performAction(action,payload,actions){var event=payload.event;switch(action){case SelectActions.Last:case SelectActions.First:actions.setIsOpen(true);case SelectActions.Next:case SelectActions.Previous:case SelectActions.PageUp:case SelectActions.PageDown:event.preventDefault();actions.onOptionChange(action);return true;case SelectActions.CloseSelect:event.preventDefault();actions.selectCurrentOption();return true;case SelectActions.Close:event.preventDefault();actions.close();return true;case SelectActions.Type:actions.onComboType(event.key,action);return true;case SelectActions.Open:event.preventDefault();actions.setIsOpen(true);return true;}return false;};var ensureScrollVisiblity=function ensureScrollVisiblity(newActiveIndex,containerElement,options){if(containerElement){if(isScrollable(containerElement)){var optionEl=containerElement.querySelectorAll('[role="option"]');if(newActiveIndex>=0&&optionEl[newActiveIndex].dataset.value===options[newActiveIndex]){var activeElement=optionEl[newActiveIndex];var bodyRect=containerElement.getBoundingClientRect().top;var elementRect=activeElement.getBoundingClientRect().top;var elementPosition=elementRect-bodyRect;var offsetPosition=elementPosition;containerElement.scrollTo({top:offsetPosition});if(!isElementVisibleOnScreen(optionEl[newActiveIndex])){activeElement.scrollIntoView({behavior:'smooth'});}}}}};var makeInputValue=function makeInputValue(selectedIndices,options){if(options.length===0){return '';}return selectedIndices.map(function(selectedIndex){var _options$selectedInde;return (_options$selectedInde=options[selectedIndex])==null?void 0:_options$selectedInde.value;}).join(', ');};var makeInputDisplayValue=function makeInputDisplayValue(selectedIndices,options){if(options.length===0||selectedIndices.length===0){return '';}if(selectedIndices.length===1){return options[selectedIndices[0]].title;}return selectedIndices.length+" items selected";};
 
 var getColorScheme=function getColorScheme(){var colorScheme=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'light';if(colorScheme==='light'||colorScheme==='dark'){return colorScheme;}if(colorScheme==='system'){var _Appearance$getColorS;return (_Appearance$getColorS=Appearance.getColorScheme())!=null?_Appearance$getColorS:'light';}return 'light';};
@@ -77,6 +64,18 @@ var getComponentId=function getComponentId(component){var _component$props,_comp
 
 var getActionListSectionPosition=function getActionListSectionPosition(children){var childComponentIdArray=React__default.Children.toArray(children).map(function(child){return getComponentId(child);});var lastActionListSectionIndex=childComponentIdArray.lastIndexOf(componentIds.ActionListSection);var isActionListItemPresentAfterSection=childComponentIdArray.slice(lastActionListSectionIndex).includes(componentIds.ActionListItem);return {isActionListItemPresentAfterSection:isActionListItemPresentAfterSection,lastActionListSectionIndex:lastActionListSectionIndex};};var actionListAllowedChildren=[componentIds.ActionListItem,componentIds.ActionListSection];var getActionListProperties=function getActionListProperties(children){var sectionData=[];var currentSection=null;var actionListOptions=[];var getActionListItemWithId=function getActionListItemWithId(child,hideDivider){if(React__default.isValidElement(child)&&!child.props.isDisabled){actionListOptions.push({title:child.props.title,value:child.props.value,onClickTrigger:function onClickTrigger(value){var _child$props$isSelect;var anchorLink=child.props.href;child.props.onClick==null?void 0:child.props.onClick({name:child.props.value,value:(_child$props$isSelect=child.props.isSelected)!=null?_child$props$isSelect:value});if(anchorLink&&!isReactNative$4()){var _child$props$target;var target=(_child$props$target=child.props.target)!=null?_child$props$target:'_self';window.open(anchorLink,target);if(window.top){window.top.open(anchorLink,target);}}}});var currentIndex=actionListOptions.length-1;var foundSection=sectionData.find(function(v){return v.title===currentSection;});if(foundSection){foundSection==null?void 0:foundSection.data.push(_extends({},child.props,{_index:currentIndex}));}else {sectionData.push({title:currentSection,hideDivider:hideDivider,data:[_extends({},child.props,{_index:currentIndex})]});}var clonedChild=React__default.cloneElement(child,{_index:currentIndex});return clonedChild;}return child;};var isActionListItemPresentAfterSection;var lastActionListSectionIndex;if(isReactNative$4()){var _getActionListSection=getActionListSectionPosition(children);isActionListItemPresentAfterSection=_getActionListSection.isActionListItemPresentAfterSection;lastActionListSectionIndex=_getActionListSection.lastActionListSectionIndex;}var childrenWithId=React__default.Children.map(children,function(child,index){if(React__default.isValidElement(child)){if(isValidAllowedChildren(child,componentIds.ActionListSection)){var shouldHideDivider=index===lastActionListSectionIndex&&!isActionListItemPresentAfterSection;return React__default.cloneElement(child,{children:React__default.Children.map(child.props.children,function(childInSection){currentSection=child.props.title;if(isValidAllowedChildren(childInSection,componentIds.ActionListItem)){return getActionListItemWithId(childInSection,shouldHideDivider);}return childInSection;}),_hideDivider:isReactNative$4()?shouldHideDivider:undefined});}if(isValidAllowedChildren(child,componentIds.ActionListItem)){return getActionListItemWithId(child,true);}if(__DEV__){throwBladeError({message:"Only "+actionListAllowedChildren.join(', ')+" supported inside ActionList",moduleName:'ActionList'});}}return child;});return {sectionData:sectionData,childrenWithId:childrenWithId,actionListOptions:actionListOptions};};var validateActionListItemProps=function validateActionListItemProps(_ref){var leading=_ref.leading,trailing=_ref.trailing;if(__DEV__){React__default.Children.map(trailing,function(child){if(!isValidAllowedChildren(child,componentIds.ActionListItemIcon)&&!isValidAllowedChildren(child,componentIds.ActionListItemText)){throwBladeError({message:"Only "+componentIds.ActionListItemIcon+" and "+componentIds.ActionListItemText+" are allowed in trailing prop",moduleName:'ActionListItem'});}});React__default.Children.map(leading,function(child){if(!isValidAllowedChildren(child,componentIds.ActionListItemIcon)&&!isValidAllowedChildren(child,componentIds.ActionListItemText)&&!isValidAllowedChildren(child,componentIds.ActionListItemAsset)){throwBladeError({message:"Only "+componentIds.ActionListItemIcon+", "+componentIds.ActionListItemAsset+", and "+componentIds.ActionListItemText+" are allowed in leading prop",moduleName:'ActionListItem'});}});}};var getNormalTextColor=function getNormalTextColor(isDisabled){var _ref2=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},isMuted=_ref2.isMuted;if(isDisabled){return 'surface.text.placeholder.lowContrast';}if(isMuted){return 'surface.text.muted.lowContrast';}return 'surface.text.normal.lowContrast';};
 
+var breakpoints={base:0,xs:320,s:480,m:768,l:1024,xl:1200};
+
+var fontFamily={text:'Lato',code:Platform.OS==='ios'?'Courier':'monospace'};
+
+var fontWeight={regular:400,bold:700};({onDesktop:{fonts:{family:_extends({},fontFamily),size:{10:9,25:10,50:11,75:12,100:14,200:16,300:18,400:20,500:22,600:24,700:28,800:32,900:36,1000:40},weight:_extends({},fontWeight)},lineHeights:{0:0,25:14,50:16,75:18,100:20,200:24,300:24,400:28,500:32,600:40,700:40,800:48}},onMobile:{fonts:{family:_extends({},fontFamily),size:{10:9,25:10,50:11,75:12,100:14,200:16,300:16,400:18,500:20,600:20,700:24,800:28,900:32,1000:32},weight:_extends({},fontWeight)},lineHeights:{0:0,25:14,50:16,75:18,100:20,200:20,300:24,400:24,500:28,600:32,700:40,800:40}}});
+
+var makeBezier=function makeBezier(x1,y1,x2,y2){return Easing.bezier(x1,y1,x2,y2);};
+
+({standard:{attentive:makeBezier(0.5,0,0.3,1.5),effective:makeBezier(0.3,0,0.2,1),revealing:makeBezier(0.5,0,0,1),wary:makeBezier(1,0.5,0,0.5)},entrance:{attentive:makeBezier(0.5,0,0.3,1.5),effective:makeBezier(0,0,0.2,1),revealing:makeBezier(0,0,0,1)},exit:{attentive:makeBezier(0.7,0,0.5,1),effective:makeBezier(0.17,0,1,1),revealing:makeBezier(0.5,0,1,1)}});
+
+var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,8:8,10:10,12:12,16:16,18:18,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,56:56,100:100,120:120,140:140,160:160,200:200,300:300,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
+
 var getBaseListBoxWrapperStyles=function getBaseListBoxWrapperStyles(props){return {maxHeight:props.isInBottomSheet?undefined:makeSize(size[300]),padding:props.isInBottomSheet?undefined:makeSize(props.theme.spacing[3])};};
 
 var StyledListBoxWrapper=styled(SectionList)(function(props){return _extends({},getBaseListBoxWrapperStyles({theme:props.theme,isInBottomSheet:props.isInBottomSheet}),{padding:makeSize(props.theme.spacing[3]),marginBottom:makeSize(props.marginBottom)});});
@@ -1989,7 +1988,7 @@ var isSupportedOnReactNativeElement=function isSupportedOnReactNativeElement(pro
 
 var validBoxAsValues=['div','section','footer','header','main','aside','nav','span','label'];
 
-var validateBackgroundString=function validateBackgroundString(stringBackgroundColorValue){if(__DEV__){if(!stringBackgroundColorValue.startsWith('surface.background')&&!stringBackgroundColorValue.startsWith('brand.')){throwBladeError({message:"Oops! Currently you can only use `surface.background.*` and `brand.*` tokens with backgroundColor property but we received `"+stringBackgroundColorValue+"` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728",moduleName:'Box'});}}};var validateBackgroundProp=function validateBackgroundProp(responsiveBackgroundColor){if(__DEV__){if(responsiveBackgroundColor){if(typeof responsiveBackgroundColor==='string'){validateBackgroundString(responsiveBackgroundColor);return;}Object.values(responsiveBackgroundColor).forEach(function(backgroundColor){if(typeof backgroundColor==='string'){validateBackgroundString(backgroundColor);}});}}};var makeBoxProps=function makeBoxProps(props){return {display:props.display,overflow:props.overflow,overflowX:props.overflowX,overflowY:props.overflowY,height:props.height,minHeight:props.minHeight,maxHeight:props.maxHeight,width:props.width,minWidth:props.minWidth,maxWidth:props.maxWidth,textAlign:props.textAlign,flex:props.flex,flexWrap:props.flexWrap,flexDirection:props.flexDirection,flexGrow:props.flexGrow,flexShrink:props.flexShrink,flexBasis:props.flexBasis,alignItems:props.alignItems,alignContent:props.alignContent,alignSelf:props.alignSelf,justifyItems:props.justifyItems,justifyContent:props.justifyContent,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,grid:props.grid,gridColumn:props.gridColumn,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridArea:props.gridArea,gridAutoFlow:props.gridAutoFlow,gridAutoRows:props.gridAutoRows,gridAutoColumns:props.gridAutoColumns,gridTemplate:props.gridTemplate,gridTemplateAreas:props.gridTemplateAreas,gridTemplateColumns:props.gridTemplateColumns,gridTemplateRows:props.gridTemplateRows,padding:props.padding,paddingTop:props.paddingTop,paddingBottom:props.paddingBottom,paddingRight:props.paddingRight,paddingLeft:props.paddingLeft,paddingX:props.paddingX,paddingY:props.paddingY,margin:props.margin,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,marginX:props.marginX,marginY:props.marginY,gap:props.gap,rowGap:props.rowGap,columnGap:props.columnGap,position:props.position,zIndex:props.zIndex,top:props.top,right:props.right,bottom:props.bottom,left:props.left,backgroundColor:props.backgroundColor,backgroundImage:props.backgroundImage,backgroundSize:props.backgroundSize,backgroundPosition:props.backgroundPosition,backgroundOrigin:props.backgroundOrigin,backgroundRepeat:props.backgroundRepeat,elevation:props.elevation,borderWidth:props.borderWidth,borderColor:props.borderColor,borderTopWidth:props.borderTopWidth,borderTopColor:props.borderTopColor,borderRightWidth:props.borderRightWidth,borderRightColor:props.borderRightColor,borderBottomWidth:props.borderBottomWidth,borderBottomColor:props.borderBottomColor,borderLeftWidth:props.borderLeftWidth,borderLeftColor:props.borderLeftColor,borderRadius:props.borderRadius,borderTopLeftRadius:props.borderTopLeftRadius,borderTopRightRadius:props.borderTopRightRadius,borderBottomRightRadius:props.borderBottomRightRadius,borderBottomLeftRadius:props.borderBottomLeftRadius,onMouseEnter:props.onMouseEnter,onMouseLeave:props.onMouseLeave,onMouseOver:props.onMouseOver,onScroll:props.onScroll,children:props.children,tabIndex:props.tabIndex,as:isReactNative$4()?undefined:props.as};};var _Box=function _Box(props,ref){React__default.useEffect(function(){if(__DEV__){validateBackgroundProp(props.backgroundColor);}},[props.backgroundColor]);React__default.useEffect(function(){if(__DEV__){if(props.as){if(isReactNative$4()){throwBladeError({message:'`as` prop is not supported on React Native',moduleName:'Box'});}if(!validBoxAsValues.includes(props.as)){throwBladeError({message:"Invalid `as` prop value - "+props.as+". Only "+validBoxAsValues.join(', ')+" are valid values",moduleName:'Box'});}}}},[props.as]);return jsx(BaseBox,_extends({ref:ref},metaAttribute({name:MetaConstants.Box,testID:props.testID}),makeBoxProps(props)));};var Box=assignWithoutSideEffects(React__default.forwardRef(_Box),{displayName:'Box'});
+var validateBackgroundString=function validateBackgroundString(stringBackgroundColorValue){if(__DEV__){if(!stringBackgroundColorValue.startsWith('surface.background')&&!stringBackgroundColorValue.startsWith('brand.')&&stringBackgroundColorValue!=='transparent'){throwBladeError({message:"Oops! Currently you can only use `transparent`, `surface.background.*`, and `brand.*` tokens with backgroundColor property but we received `"+stringBackgroundColorValue+"` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728",moduleName:'Box'});}}};var validateBackgroundProp=function validateBackgroundProp(responsiveBackgroundColor){if(__DEV__){if(responsiveBackgroundColor){if(typeof responsiveBackgroundColor==='string'){validateBackgroundString(responsiveBackgroundColor);return;}Object.values(responsiveBackgroundColor).forEach(function(backgroundColor){if(typeof backgroundColor==='string'){validateBackgroundString(backgroundColor);}});}}};var makeBoxProps=function makeBoxProps(props){return {display:props.display,overflow:props.overflow,overflowX:props.overflowX,overflowY:props.overflowY,height:props.height,minHeight:props.minHeight,maxHeight:props.maxHeight,width:props.width,minWidth:props.minWidth,maxWidth:props.maxWidth,textAlign:props.textAlign,flex:props.flex,flexWrap:props.flexWrap,flexDirection:props.flexDirection,flexGrow:props.flexGrow,flexShrink:props.flexShrink,flexBasis:props.flexBasis,alignItems:props.alignItems,alignContent:props.alignContent,alignSelf:props.alignSelf,justifyItems:props.justifyItems,justifyContent:props.justifyContent,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,grid:props.grid,gridColumn:props.gridColumn,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridArea:props.gridArea,gridAutoFlow:props.gridAutoFlow,gridAutoRows:props.gridAutoRows,gridAutoColumns:props.gridAutoColumns,gridTemplate:props.gridTemplate,gridTemplateAreas:props.gridTemplateAreas,gridTemplateColumns:props.gridTemplateColumns,gridTemplateRows:props.gridTemplateRows,padding:props.padding,paddingTop:props.paddingTop,paddingBottom:props.paddingBottom,paddingRight:props.paddingRight,paddingLeft:props.paddingLeft,paddingX:props.paddingX,paddingY:props.paddingY,margin:props.margin,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,marginX:props.marginX,marginY:props.marginY,gap:props.gap,rowGap:props.rowGap,columnGap:props.columnGap,position:props.position,zIndex:props.zIndex,top:props.top,right:props.right,bottom:props.bottom,left:props.left,backgroundColor:props.backgroundColor,backgroundImage:props.backgroundImage,backgroundSize:props.backgroundSize,backgroundPosition:props.backgroundPosition,backgroundOrigin:props.backgroundOrigin,backgroundRepeat:props.backgroundRepeat,elevation:props.elevation,borderWidth:props.borderWidth,borderColor:props.borderColor,borderTopWidth:props.borderTopWidth,borderTopColor:props.borderTopColor,borderRightWidth:props.borderRightWidth,borderRightColor:props.borderRightColor,borderBottomWidth:props.borderBottomWidth,borderBottomColor:props.borderBottomColor,borderLeftWidth:props.borderLeftWidth,borderLeftColor:props.borderLeftColor,borderRadius:props.borderRadius,borderTopLeftRadius:props.borderTopLeftRadius,borderTopRightRadius:props.borderTopRightRadius,borderBottomRightRadius:props.borderBottomRightRadius,borderBottomLeftRadius:props.borderBottomLeftRadius,onMouseEnter:props.onMouseEnter,onMouseLeave:props.onMouseLeave,onMouseOver:props.onMouseOver,onScroll:props.onScroll,children:props.children,tabIndex:props.tabIndex,as:isReactNative$4()?undefined:props.as};};var _Box=function _Box(props,ref){React__default.useEffect(function(){if(__DEV__){validateBackgroundProp(props.backgroundColor);}},[props.backgroundColor]);React__default.useEffect(function(){if(__DEV__){if(props.as){if(isReactNative$4()){throwBladeError({message:'`as` prop is not supported on React Native',moduleName:'Box'});}if(!validBoxAsValues.includes(props.as)){throwBladeError({message:"Invalid `as` prop value - "+props.as+". Only "+validBoxAsValues.join(', ')+" are valid values",moduleName:'Box'});}}}},[props.as]);return jsx(BaseBox,_extends({ref:ref},metaAttribute({name:MetaConstants.Box,testID:props.testID}),makeBoxProps(props)));};var Box=assignWithoutSideEffects(React__default.forwardRef(_Box),{displayName:'Box'});
 
 var removeUndefinedStyledProps=function removeUndefinedStyledProps(obj){var onlyDefinedStyledProps={};for(var key in obj){if(obj[key]!==undefined){onlyDefinedStyledProps[key]=obj[key];}}return onlyDefinedStyledProps;};var makeStyledProps=function makeStyledProps(props){return {alignSelf:props.alignSelf,display:props.display,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,position:props.position,zIndex:props.zIndex,gridColumn:props.gridColumn,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridArea:props.gridArea,margin:props.margin,marginX:props.marginX,marginY:props.marginY,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,top:props.top,right:props.right,bottom:props.bottom,left:props.left};};var getStyledProps=function getStyledProps(props){return removeUndefinedStyledProps(makeStyledProps(props));};
 
@@ -2699,7 +2698,7 @@ var StyledBadge=styled(BaseBox)(function(props){return _extends({},getStyledBadg
 
 var verticalPadding$1={small:'spacing.0',medium:'spacing.1',large:'spacing.2'};var horizontalPadding$1={small:'spacing.3',medium:'spacing.3',large:'spacing.4'};var iconPadding={small:'spacing.1',medium:'spacing.2',large:'spacing.2'};var iconSize={small:'xsmall',medium:'small',large:'small'};
 
-var _excluded$w=["children","contrast","fontWeight","icon","size","variant","testID"];var isFeedbackVariant$1=function isFeedbackVariant(variant){var feedbackVariants=['information','negative','neutral','notice','positive'];return feedbackVariants.includes(variant);};var getColorProps$1=function getColorProps(_ref){var variant=_ref.variant,contrast=_ref.contrast;var props={iconColor:'feedback.icon.neutral.lowContrast',textColor:'feedback.text.neutral.lowContrast',backgroundColor:'feedback.background.neutral.lowContrast'};if(isFeedbackVariant$1(variant)){props.iconColor="feedback.icon."+variant+"."+contrast+"Contrast";props.textColor="feedback.text."+variant+"."+contrast+"Contrast";props.backgroundColor="feedback.background."+variant+"."+contrast+"Contrast";}else {props.iconColor="badge.icon."+variant+"."+contrast+"Contrast";props.textColor="badge.text."+variant+"."+contrast+"Contrast";props.backgroundColor="badge.background."+variant+"."+contrast+"Contrast";}return props;};var _Badge=function _Badge(_ref2){var children=_ref2.children,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,_ref2$fontWeight=_ref2.fontWeight,fontWeight=_ref2$fontWeight===void 0?'regular':_ref2$fontWeight,Icon=_ref2.icon,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,_ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'neutral':_ref2$variant,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded$w);var childrenString=getStringFromReactText(children);if(__DEV__){if(!(childrenString!=null&&childrenString.trim())){throwBladeError({message:'Text as children is required for Badge.',moduleName:'Badge'});}}var _getColorProps=getColorProps$1({variant:variant,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,iconColor=_getColorProps.iconColor,textColor=_getColorProps.textColor;var badgeTextSizes={small:{variant:'body',size:'xsmall'},medium:{variant:'body',size:'small'},large:{variant:'body',size:'small'}};return jsx(BaseBox,_extends({display:"flex"},metaAttribute({name:MetaConstants.Badge,testID:testID}),getStyledProps(styledProps),{children:jsx(StyledBadge,{backgroundColor:backgroundColor,size:size,textAlign:'left',children:jsxs(BaseBox,{paddingRight:horizontalPadding$1[size],paddingLeft:horizontalPadding$1[size],paddingTop:verticalPadding$1[size],paddingBottom:verticalPadding$1[size],display:isReactNative$4()?'flex':'inline-flex',flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:[Icon?jsx(BaseBox,{paddingRight:Boolean(Icon)?iconPadding[size]:'spacing.0',display:"flex",children:jsx(Icon,{color:iconColor,size:iconSize[size]})}):null,jsx(Text,_extends({},badgeTextSizes[size],{type:"normal",weight:fontWeight,truncateAfterLines:1,color:textColor,children:children}))]})})}));};var Badge=assignWithoutSideEffects(_Badge,{displayName:'Badge',componentId:'Badge'});
+var _excluded$w=["children","contrast","fontWeight","icon","size","variant","testID"];var isFeedbackVariant$1=function isFeedbackVariant(variant){var feedbackVariants=['information','negative','neutral','notice','positive'];return feedbackVariants.includes(variant);};var getColorProps$1=function getColorProps(_ref){var variant=_ref.variant,contrast=_ref.contrast;var props={iconColor:'feedback.icon.neutral.lowContrast',textColor:'feedback.text.neutral.lowContrast',backgroundColor:'feedback.background.neutral.lowContrast'};if(isFeedbackVariant$1(variant)){props.iconColor="feedback.icon."+variant+"."+contrast+"Contrast";props.textColor="feedback.text."+variant+"."+contrast+"Contrast";props.backgroundColor="feedback.background."+variant+"."+contrast+"Contrast";}else {props.iconColor="badge.icon."+variant+"."+contrast+"Contrast";props.textColor="badge.text."+variant+"."+contrast+"Contrast";props.backgroundColor="badge.background."+variant+"."+contrast+"Contrast";}return props;};var _Badge=function _Badge(_ref2){var children=_ref2.children,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,_ref2$fontWeight=_ref2.fontWeight,fontWeight=_ref2$fontWeight===void 0?'regular':_ref2$fontWeight,Icon=_ref2.icon,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,_ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'neutral':_ref2$variant,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded$w);var childrenString=getStringFromReactText(children);if(__DEV__){if(!(childrenString!=null&&childrenString.trim())){throwBladeError({message:'Text as children is required for Badge.',moduleName:'Badge'});}}var _getColorProps=getColorProps$1({variant:variant,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,iconColor=_getColorProps.iconColor,textColor=_getColorProps.textColor;var badgeTextSizes={small:{variant:'body',size:'xsmall'},medium:{variant:'body',size:'small'},large:{variant:'body',size:'small'}};return jsx(BaseBox,_extends({display:isReactNative$4()?'flex':'inline-flex'},metaAttribute({name:MetaConstants.Badge,testID:testID}),getStyledProps(styledProps),{children:jsx(StyledBadge,{backgroundColor:backgroundColor,size:size,textAlign:'left',children:jsxs(BaseBox,{paddingRight:horizontalPadding$1[size],paddingLeft:horizontalPadding$1[size],paddingTop:verticalPadding$1[size],paddingBottom:verticalPadding$1[size],display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:[Icon?jsx(BaseBox,{paddingRight:Boolean(Icon)?iconPadding[size]:'spacing.0',display:"flex",children:jsx(Icon,{color:iconColor,size:iconSize[size]})}):null,jsx(Text,_extends({},badgeTextSizes[size],{type:"normal",weight:fontWeight,truncateAfterLines:1,color:textColor,children:children}))]})})}));};var Badge=assignWithoutSideEffects(_Badge,{displayName:'Badge',componentId:'Badge'});
 
 var _excluded$v=["children","surfaceLevel","elevation"];var CardSurfaceStyled=styled(BaseBox)(function(_ref){var surfaceLevel=_ref.surfaceLevel,elevation=_ref.elevation,theme=_ref.theme;var backgroundColor=theme.colors.surface.background["level"+surfaceLevel].lowContrast;return {width:'100%',display:'flex',flexDirection:'column',borderWidth:elevation==='none'?""+theme.border.width.thin:undefined,borderStyle:elevation==='none'?'solid':undefined,borderColor:elevation==='none'?""+theme.colors.surface.border.normal.lowContrast:undefined,backgroundColor:backgroundColor};});var CardSurface=function CardSurface(_ref2){var children=_ref2.children,surfaceLevel=_ref2.surfaceLevel,elevation=_ref2.elevation,props=_objectWithoutProperties(_ref2,_excluded$v);return jsx(CardSurfaceStyled,_extends({},props,{surfaceLevel:surfaceLevel,elevation:elevation,children:children}));};
 
@@ -2717,7 +2716,7 @@ var getStyledCounterStyles=function getStyledCounterStyles(_ref){var theme=_ref.
 
 var StyledCounter=styled(BaseBox)(function(props){return _extends({},getStyledCounterStyles(props),{alignSelf:'center'});});
 
-var _excluded$r=["value","max","intent","variant","contrast","size","testID"];var isFeedbackVariant=function isFeedbackVariant(variant){var feedbackVariants=['information','negative','neutral','notice','positive'];return feedbackVariants.includes(variant);};var getColorProps=function getColorProps(_ref){var _ref$variant=_ref.variant,variant=_ref$variant===void 0?'neutral':_ref$variant,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast;var props={textColor:'feedback.text.neutral.lowContrast',backgroundColor:'feedback.background.neutral.lowContrast'};if(isFeedbackVariant(variant)){props.textColor="feedback.text."+variant+"."+contrast+"Contrast";props.backgroundColor="feedback.background."+variant+"."+contrast+"Contrast";}else {props.textColor="badge.text."+variant+"."+contrast+"Contrast";props.backgroundColor="badge.background."+variant+"."+contrast+"Contrast";}return props;};var Counter=function Counter(_ref2){var value=_ref2.value,max=_ref2.max,intent=_ref2.intent,_ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'neutral':_ref2$variant,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded$r);var content=""+value;if(max&&value>max){content=max+"+";}var _useTheme=useTheme(),platform=_useTheme.platform;var _getColorProps=getColorProps({variant:intent!=null?intent:variant,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,textColor=_getColorProps.textColor;if(__DEV__){if(intent){logger({type:'warn',message:'The prop `intent` is deprecated and will be removed in a future release. Please use `variant` instead.',moduleName:'Counter'});}}var counterTextSizes={small:{variant:'body',size:'xsmall'},medium:{variant:'body',size:'small'},large:{variant:'body',size:'medium'}};return jsx(BaseBox,_extends({display:"flex"},metaAttribute({name:MetaConstants.Counter,testID:testID}),getStyledProps(styledProps),{children:jsx(StyledCounter,{backgroundColor:backgroundColor,size:size,platform:platform,children:jsx(BaseBox,{paddingRight:horizontalPadding[size],paddingLeft:horizontalPadding[size],paddingTop:verticalPadding[size],paddingBottom:verticalPadding[size],display:isReactNative$4()?'flex':'inline-flex',flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:jsx(Text,_extends({},counterTextSizes[size],{textAlign:"center",type:"normal",weight:"regular",truncateAfterLines:1,color:textColor,children:content}))})})}));};
+var _excluded$r=["value","max","intent","variant","contrast","size","testID"];var isFeedbackVariant=function isFeedbackVariant(variant){var feedbackVariants=['information','negative','neutral','notice','positive'];return feedbackVariants.includes(variant);};var getColorProps=function getColorProps(_ref){var _ref$variant=_ref.variant,variant=_ref$variant===void 0?'neutral':_ref$variant,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast;var props={textColor:'feedback.text.neutral.lowContrast',backgroundColor:'feedback.background.neutral.lowContrast'};if(isFeedbackVariant(variant)){props.textColor="feedback.text."+variant+"."+contrast+"Contrast";props.backgroundColor="feedback.background."+variant+"."+contrast+"Contrast";}else {props.textColor="badge.text."+variant+"."+contrast+"Contrast";props.backgroundColor="badge.background."+variant+"."+contrast+"Contrast";}return props;};var Counter=function Counter(_ref2){var value=_ref2.value,max=_ref2.max,intent=_ref2.intent,_ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'neutral':_ref2$variant,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded$r);var content=""+value;if(max&&value>max){content=max+"+";}var _useTheme=useTheme(),platform=_useTheme.platform;var _getColorProps=getColorProps({variant:intent!=null?intent:variant,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,textColor=_getColorProps.textColor;if(__DEV__){if(intent){logger({type:'warn',message:'The prop `intent` is deprecated and will be removed in a future release. Please use `variant` instead.',moduleName:'Counter'});}}var counterTextSizes={small:{variant:'body',size:'xsmall'},medium:{variant:'body',size:'small'},large:{variant:'body',size:'medium'}};return jsx(BaseBox,_extends({display:isReactNative$4()?'flex':'inline-flex'},metaAttribute({name:MetaConstants.Counter,testID:testID}),getStyledProps(styledProps),{children:jsx(StyledCounter,{backgroundColor:backgroundColor,size:size,platform:platform,children:jsx(BaseBox,{paddingRight:horizontalPadding[size],paddingLeft:horizontalPadding[size],paddingTop:verticalPadding[size],paddingBottom:verticalPadding[size],display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:jsx(Text,_extends({},counterTextSizes[size],{textAlign:"center",type:"normal",weight:"regular",truncateAfterLines:1,color:textColor,children:content}))})})}));};
 
 var _CardHeaderIcon=function _CardHeaderIcon(_ref){var Icon=_ref.icon;useVerifyInsideCard('CardHeaderIcon');return jsx(Icon,{color:"surface.text.normal.lowContrast",size:"xlarge"});};var CardHeaderIcon=assignWithoutSideEffects(_CardHeaderIcon,{componentId:ComponentIds$1.CardHeaderIcon});var _CardHeaderCounter=function _CardHeaderCounter(props){useVerifyInsideCard('CardHeaderCounter');return jsx(Counter,_extends({},props));};var CardHeaderCounter=assignWithoutSideEffects(_CardHeaderCounter,{componentId:ComponentIds$1.CardHeaderCounter});var _CardHeaderBadge=function _CardHeaderBadge(props){useVerifyInsideCard('CardHeaderBadge');return jsx(Badge,_extends({},props));};var CardHeaderBadge=assignWithoutSideEffects(_CardHeaderBadge,{componentId:ComponentIds$1.CardHeaderBadge});var _CardHeaderText=function _CardHeaderText(props){useVerifyInsideCard('CardHeaderText');return jsx(Text,_extends({textAlign:"left"},props));};var CardHeaderText=assignWithoutSideEffects(_CardHeaderText,{componentId:ComponentIds$1.CardHeaderText});var _CardHeaderLink=function _CardHeaderLink(props){useVerifyInsideCard('CardHeaderLink');return jsx(Link,_extends({},props));};var CardHeaderLink=assignWithoutSideEffects(_CardHeaderLink,{componentId:ComponentIds$1.CardHeaderLink});var _CardHeaderIconButton=function _CardHeaderIconButton(props){useVerifyInsideCard('CardHeaderIconButton');return jsx(BaseBox,{width:makeSpace(minHeight.xsmall),children:jsx(Button,_extends({},props,{variant:"tertiary",size:"xsmall",iconPosition:"left",isFullWidth:true}))});};var CardHeaderIconButton=assignWithoutSideEffects(_CardHeaderIconButton,{componentId:ComponentIds$1.CardHeaderIconButton});var _CardHeader=function _CardHeader(_ref2){var children=_ref2.children,testID=_ref2.testID;useVerifyInsideCard('CardHeader');useVerifyAllowedComponents(children,'CardHeader',[ComponentIds$1.CardHeaderLeading,ComponentIds$1.CardHeaderTrailing]);return jsxs(BaseBox,_extends({marginBottom:"spacing.7"},metaAttribute({name:MetaConstants.CardHeader,testID:testID}),{children:[jsx(BaseBox,{marginBottom:"spacing.7",display:"flex",flexDirection:"row",justifyContent:"space-between",children:children}),jsx(Divider,{})]}));};var CardHeader=assignWithoutSideEffects(_CardHeader,{componentId:ComponentIds$1.CardHeader});var _CardHeaderLeading=function _CardHeaderLeading(_ref3){var title=_ref3.title,subtitle=_ref3.subtitle,prefix=_ref3.prefix,suffix=_ref3.suffix;useVerifyInsideCard('CardHeaderLeading');if(__DEV__){if(prefix&&!isValidAllowedChildren(prefix,ComponentIds$1.CardHeaderIcon)){throwBladeError({message:"Only `"+ComponentIds$1.CardHeaderIcon+"` component is accepted in prefix",moduleName:'CardHeaderLeading'});}if(suffix&&!isValidAllowedChildren(suffix,ComponentIds$1.CardHeaderCounter)){throwBladeError({message:"Only `"+ComponentIds$1.CardHeaderCounter+"` component is accepted in prefix",moduleName:'CardHeaderLeading'});}}return jsxs(BaseBox,{flex:1,display:"flex",flexDirection:"row",children:[jsx(BaseBox,{marginRight:"spacing.3",alignSelf:"center",display:"flex",children:prefix}),jsxs(BaseBox,{marginRight:"spacing.5",children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",children:[jsx(Heading,{size:"small",variant:"regular",type:"normal",children:title}),jsx(BaseBox,{marginLeft:"spacing.3",children:suffix})]}),subtitle&&jsx(Text,{textAlign:"left",variant:"body",size:"small",weight:"regular",children:subtitle})]})]});};var CardHeaderLeading=assignWithoutSideEffects(_CardHeaderLeading,{componentId:ComponentIds$1.CardHeaderLeading});var headerTrailingAllowedComponents=[ComponentIds$1.CardHeaderLink,ComponentIds$1.CardHeaderText,ComponentIds$1.CardHeaderIconButton,ComponentIds$1.CardHeaderBadge];var _CardHeaderTrailing=function _CardHeaderTrailing(_ref4){var visual=_ref4.visual;useVerifyInsideCard('CardHeaderTrailing');if(__DEV__){if(visual&&!headerTrailingAllowedComponents.includes(getComponentId(visual))){throwBladeError({message:"Only one of `"+headerTrailingAllowedComponents.join(', ')+"` component is accepted in visual",moduleName:'CardHeaderTrailing'});}}return jsx(BaseBox,{alignSelf:"center",children:visual});};var CardHeaderTrailing=assignWithoutSideEffects(_CardHeaderTrailing,{componentId:ComponentIds$1.CardHeaderTrailing});
 
@@ -2775,7 +2774,7 @@ var StyledChevronIconContainer=styled(TouchableOpacity)(function(_props){return
 
 var _excluded$f=["icon","onChange","defaultValue","placeholder","onBlur"];var _SelectInput=function _SelectInput(props,ref){var _props$label;var _useDropdown=useDropdown(),isOpen=_useDropdown.isOpen,value=_useDropdown.value,displayValue=_useDropdown.displayValue,onTriggerClick=_useDropdown.onTriggerClick,onTriggerKeydown=_useDropdown.onTriggerKeydown,onTriggerBlur=_useDropdown.onTriggerBlur,dropdownBaseId=_useDropdown.dropdownBaseId,activeIndex=_useDropdown.activeIndex,triggererRef=_useDropdown.triggererRef,hasFooterAction=_useDropdown.hasFooterAction,dropdownTriggerer=_useDropdown.dropdownTriggerer,shouldIgnoreBlurAnimation=_useDropdown.shouldIgnoreBlurAnimation,setHasLabelOnLeft=_useDropdown.setHasLabelOnLeft,setSelectedIndices=_useDropdown.setSelectedIndices,controlledValueIndices=_useDropdown.controlledValueIndices,options=_useDropdown.options,changeCallbackTriggerer=_useDropdown.changeCallbackTriggerer,isControlled=_useDropdown.isControlled,setIsControlled=_useDropdown.setIsControlled,selectionType=_useDropdown.selectionType,selectedIndices=_useDropdown.selectedIndices;var inputRef=useBladeInnerRef(ref);var icon=props.icon;props.onChange;props.defaultValue;var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?'Select Option':_props$placeholder,_onBlur=props.onBlur,baseInputProps=_objectWithoutProperties(props,_excluded$f);var getValuesArrayFromIndices=function getValuesArrayFromIndices(){var indices=[];if(isControlled){indices=controlledValueIndices;}else {indices=selectedIndices;}return indices.map(function(selectionIndex){return options[selectionIndex].value;});};var isFirstRenderRef=React__default.useRef(true);var selectValues=function selectValues(valuesToSelect){if(options.length>0){if(isEmpty_1(valuesToSelect)){setSelectedIndices([]);}else if(typeof valuesToSelect==='string'){var selectedItemIndex=options.findIndex(function(option){return option.value===valuesToSelect;});if(selectedItemIndex>=0){setSelectedIndices([selectedItemIndex]);}}else {var uniqueValues=Array.from(new Set(valuesToSelect));var userValues=selectionType==='single'?[valuesToSelect==null?void 0:valuesToSelect[0]]:uniqueValues;var selectedItemIndices=userValues.map(function(optionValue){return options.findIndex(function(option){return option.value===optionValue;});}).filter(function(value){return value>=0;});setSelectedIndices(selectedItemIndices);}}};React__default.useEffect(function(){if(options.length>0&&props.defaultValue){selectValues(props.defaultValue);}},[options.length]);React__default.useEffect(function(){if(options.length>0&&props.value!==undefined){if(!isControlled){setIsControlled(true);}selectValues(props.value);}},[props.value,options]);React__default.useEffect(function(){if(isFirstRenderRef.current){isFirstRenderRef.current=false;return;}if(props.onChange&&!isFirstRenderRef.current){props.onChange({name:props.name,values:getValuesArrayFromIndices()});}},[changeCallbackTriggerer]);React__default.useEffect(function(){setHasLabelOnLeft(props.labelPosition==='left');},[props.labelPosition,setHasLabelOnLeft]);return jsxs(BaseBox,{position:"relative",children:[!isReactNative$4()?jsx(VisuallyHidden,{children:jsx("input",{ref:inputRef,tabIndex:-1,required:props.isRequired,name:props.name,value:value,onChange:function onChange(){},"aria-hidden":true})}):null,jsx(BaseInput,_extends({},baseInputProps,{as:"button",label:props.label,hideLabelText:((_props$label=props.label)==null?void 0:_props$label.length)===0,componentName:MetaConstants.SelectInput,ref:!isReactNative$4()?triggererRef:null,textAlign:"left",value:displayValue,placeholder:placeholder,id:dropdownBaseId+"-trigger",labelId:dropdownBaseId+"-label",leadingIcon:icon,hasPopup:getActionListContainerRole(hasFooterAction,dropdownTriggerer),isPopupExpanded:isOpen,onClick:function onClick(e){onTriggerClick();props==null?void 0:props.onClick==null?void 0:props.onClick(e);},onKeyDown:onTriggerKeydown,onBlur:function onBlur(_ref){var name=_ref.name;onTriggerBlur==null?void 0:onTriggerBlur({name:name,value:value,onBlurCallback:_onBlur});},activeDescendant:activeIndex>=0?dropdownBaseId+"-"+activeIndex:undefined,popupId:dropdownBaseId+"-actionlist",shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,interactionElement:jsx(SelectChevronIcon,{onClick:function onClick(){if(!props.isDisabled){if(!isReactNative$4()){var _triggererRef$current2;(_triggererRef$current2=triggererRef.current)==null?void 0:_triggererRef$current2.focus();}onTriggerClick();}},icon:isOpen?ChevronUpIcon:ChevronDownIcon}),testID:props.testID}))]});};var SelectInput=assignWithoutSideEffects(React__default.forwardRef(_SelectInput),{componentId:componentIds$1.triggers.SelectInput});
 
-var _excluded$e=["accessibilityLabel","children","size","intent","testID"];var Indicator=function Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,_ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$e);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var fillColor=theme.colors.feedback.background[intent].highContrast;var strokeColor=theme.colors.brand.gray.a100.highContrast;var getDimension=useCallback(function(){switch(size$1){case'small':return {svgSize:size[6],textSize:'small'};case'large':return {svgSize:size[10],textSize:'medium'};default:return {svgSize:size[8],textSize:'medium'};}},[size$1]);var dimensions=getDimension();var isReactNative=getPlatformType()==='react-native';var isWeb=!isReactNative;var a11yProps=makeAccessible(_extends({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));return jsx(BaseBox,_extends({display:"flex"},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsxs(Svg,{width:String(dimensions.svgSize),height:String(dimensions.svgSize),viewBox:"0 0 10 10",fill:"none",children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColor}),jsx(Circle,{cx:"5",cy:"5",r:"4.75",stroke:strokeColor,strokeWidth:"0.5"})]}),jsx(BaseBox,{marginLeft:"spacing.2",children:jsx(Text,{textAlign:"left",contrast:"low",type:"subtle",size:dimensions.textSize,children:children})})]})}));};
+var _excluded$e=["accessibilityLabel","children","size","intent","testID"];var Indicator=function Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,_ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$e);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var fillColor=theme.colors.feedback.background[intent].highContrast;var strokeColor=theme.colors.brand.gray.a100.highContrast;var getDimension=useCallback(function(){switch(size$1){case'small':return {svgSize:size[6],textSize:'small'};case'large':return {svgSize:size[10],textSize:'medium'};default:return {svgSize:size[8],textSize:'medium'};}},[size$1]);var dimensions=getDimension();var isWeb=!isReactNative$4();var a11yProps=makeAccessible(_extends({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));return jsx(BaseBox,_extends({display:isWeb?'inline-flex':'flex'},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsxs(Svg,{width:String(dimensions.svgSize),height:String(dimensions.svgSize),viewBox:"0 0 10 10",fill:"none",children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColor}),jsx(Circle,{cx:"5",cy:"5",r:"4.75",stroke:strokeColor,strokeWidth:"0.5"})]}),jsx(BaseBox,{marginLeft:"spacing.2",children:jsx(Text,{textAlign:"left",contrast:"low",type:"subtle",size:dimensions.textSize,children:children})})]})}));};
 
 var ListContext=React__default.createContext({level:undefined,size:'medium',variant:'unordered'});var ListProvider=ListContext.Provider;var useListContext=function useListContext(){var context=React__default.useContext(ListContext);return context;};
 
@@ -3060,7 +3059,7 @@ var getTrackStyles=function getTrackStyles(_ref){var isChecked=_ref.isChecked,is
 
 var _excluded$8=["children","isChecked"];var StyledSwitchTrack=styled(Animated.View)(function(_ref){var theme=_ref.theme,size=_ref.size,deviceType=_ref.deviceType,isDisabled=_ref.isDisabled,isChecked=_ref.isChecked;return _extends({},getTrackStyles({theme:theme,size:size,deviceType:deviceType,isDisabled:isDisabled,isChecked:isChecked}));});var SwitchTrack=function SwitchTrack(_ref2){var children=_ref2.children,isChecked=_ref2.isChecked,props=_objectWithoutProperties(_ref2,_excluded$8);var _useTheme=useTheme(),theme=_useTheme.theme;var sharedColor=useSharedValue(isChecked?1:0);var easing=get_1(theme,switchMotion.easing.track);var duration=get_1(theme,switchMotion.duration.track);var checkedColor=get_1(theme,switchColors.track.default.background.checked);var uncheckedColor=get_1(theme,switchColors.track.default.background.unchecked);React__default.useEffect(function(){sharedColor.value=withTiming(isChecked?1:0,{duration:duration,easing:easing});},[isChecked]);var colorStyle=useAnimatedStyle(function(){var _f=function _f(){return {backgroundColor:interpolateColor(sharedColor.value,[0,1],[uncheckedColor,checkedColor])};};_f._closure={interpolateColor:interpolateColor,sharedColor:sharedColor,uncheckedColor:uncheckedColor,checkedColor:checkedColor};_f.asString="function _f(){const{interpolateColor,sharedColor,uncheckedColor,checkedColor}=jsThis._closure;{return{backgroundColor:interpolateColor(sharedColor.value,[0,1],[uncheckedColor,checkedColor])};}}";_f.__workletHash=17154787628336;_f.__location="/home/runner/work/blade/blade/packages/blade/src/components/Switch/SwitchTrack.native.tsx (44:38)";_f.__optimalization=2;return _f;}(),[]);return jsx(StyledSwitchTrack,_extends({isChecked:isChecked},props,{style:colorStyle,children:children}));};
 
-var _excluded$7=["defaultChecked","isChecked","isDisabled","name","onChange","size","value","accessibilityLabel","testID"];var _Switch=function _Switch(_ref,ref){var defaultChecked=_ref.defaultChecked,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,name=_ref.name,onChange=_ref.onChange,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,value=_ref.value,accessibilityLabel=_ref.accessibilityLabel,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$7);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];var _useCheckbox=useCheckbox({role:'switch',defaultChecked:defaultChecked,isChecked:isChecked,isIndeterminate:false,hasError:false,hasHelperText:false,isDisabled:isDisabled,isRequired:false,name:name,value:value,onChange:onChange}),state=_useCheckbox.state,inputProps=_useCheckbox.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(true);},[isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(false);},[isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(true);}},[isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(false);}},[isDisabled]);return jsx(BaseBox,_extends({},metaAttribute({testID:testID,name:MetaConstants.Switch}),{display:state.isReactNative?'flex':'inline-block'},getStyledProps(styledProps),{children:jsxs(SelectorLabel,{componentName:MetaConstants.SwitchLabel,onTouchStart:handlePointerPressedIn,onTouchEnd:handlePointerPressedOut,onMouseDown:handlePointerPressedIn,onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyDown:handleKeyboardPressedIn,onKeyUp:handleKeyboardPressedOut,style:{cursor:'pointer'},inputProps:state.isReactNative?_extends({},inputProps,makeAccessible({label:accessibilityLabel})):{},children:[jsx(SelectorInput,{hoverTokens:switchHoverTokens,ref:ref,isChecked:state.isChecked,isDisabled:isDisabled,hasError:false,inputProps:inputProps,accessibilityLabel:accessibilityLabel}),jsx(SwitchTrack,_extends({size:size,deviceType:matchedDeviceType,isDisabled:Boolean(isDisabled),isChecked:state.isChecked},makeAccessible({hidden:true}),{children:jsx(Thumb,{size:size,deviceType:matchedDeviceType,isChecked:state.isChecked,children:jsx(AnimatedThumb,{isPressed:isPressed,isChecked:state.isChecked,isDisabled:isDisabled,size:size,children:jsx(ThumbIcon,{isChecked:state.isChecked,isDisabled:isDisabled,size:size})})})}))]})}));};var Switch=assignWithoutSideEffects(React__default.forwardRef(_Switch),{displayName:'Switch'});
+var _excluded$7=["defaultChecked","isChecked","isDisabled","name","onChange","size","value","accessibilityLabel","testID"];var _Switch=function _Switch(_ref,ref){var defaultChecked=_ref.defaultChecked,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,name=_ref.name,onChange=_ref.onChange,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,value=_ref.value,accessibilityLabel=_ref.accessibilityLabel,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$7);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];var _useCheckbox=useCheckbox({role:'switch',defaultChecked:defaultChecked,isChecked:isChecked,isIndeterminate:false,hasError:false,hasHelperText:false,isDisabled:isDisabled,isRequired:false,name:name,value:value,onChange:onChange}),state=_useCheckbox.state,inputProps=_useCheckbox.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(true);},[isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(false);},[isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(true);}},[isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(false);}},[isDisabled]);return jsx(BaseBox,_extends({},metaAttribute({testID:testID,name:MetaConstants.Switch}),{display:state.isReactNative?'flex':'inline-block'},getStyledProps(styledProps),{children:jsxs(SelectorLabel,{componentName:MetaConstants.SwitchLabel,onTouchStart:handlePointerPressedIn,onTouchEnd:handlePointerPressedOut,onMouseDown:handlePointerPressedIn,onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyDown:handleKeyboardPressedIn,onKeyUp:handleKeyboardPressedOut,style:{cursor:isDisabled?'not-allowed':'pointer'},inputProps:state.isReactNative?_extends({},inputProps,makeAccessible({label:accessibilityLabel})):{},children:[jsx(SelectorInput,{hoverTokens:switchHoverTokens,ref:ref,isChecked:state.isChecked,isDisabled:isDisabled,hasError:false,inputProps:inputProps,accessibilityLabel:accessibilityLabel}),jsx(SwitchTrack,_extends({size:size,deviceType:matchedDeviceType,isDisabled:Boolean(isDisabled),isChecked:state.isChecked},makeAccessible({hidden:true}),{children:jsx(Thumb,{size:size,deviceType:matchedDeviceType,isChecked:state.isChecked,children:jsx(AnimatedThumb,{isPressed:isPressed,isChecked:state.isChecked,isDisabled:isDisabled,size:size,children:jsx(ThumbIcon,{isChecked:state.isChecked,isDisabled:isDisabled,size:size})})})}))]})}));};var Switch=assignWithoutSideEffects(React__default.forwardRef(_Switch),{displayName:'Switch'});
 
 var _excluded$6=["size","icon","onDismiss","children","isDisabled","testID","_isTagFocussed"];var FocussableTag=styled(BaseBox)(function(props){if(props.isTagFocussed){return {outline:"1px solid "+props.theme.colors.surface.background.level1.lowContrast,boxShadow:"0px 0px 0px 4px "+props.theme.colors.brand.primary[400]};}return {};});var Tag=function Tag(_ref){var _ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,Icon=_ref.icon,onDismiss=_ref.onDismiss,children=_ref.children,isDisabled=_ref.isDisabled,testID=_ref.testID,_isTagFocussed=_ref._isTagFocussed,styledProps=_objectWithoutProperties(_ref,_excluded$6);var isMobile=useIsMobile();var textColor=isDisabled?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast';var mediumPadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.1','spacing.2','spacing.1','spacing.3']};var largePadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.2','spacing.3','spacing.2','spacing.4']};var assetSize=React__default.useMemo(function(){if(isMobile&&size$1==='large'){return 'medium';}return 'small';},[isMobile,size$1]);return jsx(BaseBox,_extends({display:isReactNative$4()?'flex':'inline-flex'},getStyledProps(styledProps),metaAttribute({name:MetaConstants.Tag,testID:testID}),{children:jsxs(FocussableTag,{display:isReactNative$4()?'flex':'inline-flex',alignSelf:isReactNative$4()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",backgroundColor:"brand.gray.a100.lowContrast",borderRadius:"max",padding:size$1==='medium'?mediumPadding:largePadding,isTagFocussed:_isTagFocussed,children:[Icon?jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",children:jsx(Icon,{color:textColor,size:assetSize,marginRight:"spacing.2"})}):null,jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",maxWidth:makeSize(size['100']),children:jsx(Text,{truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:assetSize,children:children})}),jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",children:jsx(IconButton,{size:assetSize,icon:CloseIcon,accessibilityLabel:"Close "+children+" tag",isDisabled:isDisabled,onClick:function onClick(){onDismiss();}})})]})}));};