@razorpay/blade 6.6.2 → 6.6.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @razorpay/blade
 
+## 6.6.3
+
+### Patch Changes
+
+- 0d7bb723: fix(blade): FileTextIcon alignment
+- b62358cb: perf: improve dropdown/actionlist performance
+
 ## 6.6.2
 
 ### Patch Changes

package/build/components/index.d.ts

@@ -955,51 +955,7 @@ declare type ActionListProps = {
      */
     surfaceLevel?: 2 | 3;
 } & TestID$1;
-/**
- * ### ActionList
- *
- * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
- * `BottomSheet` and as selectable items when combined with `SelectInput`
- *
- * #### Usage
- *
- * ```jsx
- * <Dropdown>
- *  <SelectInput label="Select Action" />
- *  <DropdownOverlay>
- *    <ActionList>
- *      <ActionListHeader
- *        title="Recent Searches"
- *        leading={<ActionListHeaderIcon icon={HistoryIcon} />}
- *      />
- *      <ActionListItem
- *        title="Home"
- *        value="home"
- *        leading={<ActionListItemIcon icon={HomeIcon} />}
- *      />
- *      <ActionListItem
- *        title="Pricing"
- *        value="pricing"
- *        leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
- *      />
- *      <ActionListHeader
- *        title="Search Tips"
- *        leading={<ActionListFooterIcon icon={SearchIcon} />}
- *        trailing={
- *          <Button
- *            onClick={() => console.log('clicked')}
- *          >
- *            Apply
- *          </Button>
- *        }
- *      />
- *    </ActionList>
- *  </DropdownOverlay>
- * </Dropdown>
- * ```
- *
- */
-declare const ActionList: ({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element;
+declare const ActionList: React__default.MemoExoticComponent<({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element>;
 
 type Theme$1 = {
   name: ThemeTokens['name'];
@@ -1475,7 +1431,7 @@ declare const ActionListItemIcon: ({ icon }: {
 declare const ActionListItemText: ({ children, }: {
     children: StringChildrenType;
 }) => React__default.ReactElement;
-declare const ActionListItem: (props: ActionListItemProps) => JSX.Element;
+declare const ActionListItem: React__default.MemoExoticComponent<(props: ActionListItemProps) => JSX.Element>;
 
 declare type ActionListHeaderProps = {
     title: string;

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

@@ -956,51 +956,7 @@ declare type ActionListProps = {
      */
     surfaceLevel?: 2 | 3;
 } & TestID$1;
-/**
- * ### ActionList
- *
- * List of multiple actionable items. Can be used as menu items inside `Dropdown`,
- * `BottomSheet` and as selectable items when combined with `SelectInput`
- *
- * #### Usage
- *
- * ```jsx
- * <Dropdown>
- *  <SelectInput label="Select Action" />
- *  <DropdownOverlay>
- *    <ActionList>
- *      <ActionListHeader
- *        title="Recent Searches"
- *        leading={<ActionListHeaderIcon icon={HistoryIcon} />}
- *      />
- *      <ActionListItem
- *        title="Home"
- *        value="home"
- *        leading={<ActionListItemIcon icon={HomeIcon} />}
- *      />
- *      <ActionListItem
- *        title="Pricing"
- *        value="pricing"
- *        leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
- *      />
- *      <ActionListHeader
- *        title="Search Tips"
- *        leading={<ActionListFooterIcon icon={SearchIcon} />}
- *        trailing={
- *          <Button
- *            onClick={() => console.log('clicked')}
- *          >
- *            Apply
- *          </Button>
- *        }
- *      />
- *    </ActionList>
- *  </DropdownOverlay>
- * </Dropdown>
- * ```
- *
- */
-declare const ActionList: ({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element;
+declare const ActionList: React__default.MemoExoticComponent<({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element>;
 
 type Theme$1 = {
   name: ThemeTokens['name'];
@@ -1476,7 +1432,7 @@ declare const ActionListItemIcon: ({ icon }: {
 declare const ActionListItemText: ({ children, }: {
     children: StringChildrenType;
 }) => React__default.ReactElement;
-declare const ActionListItem: (props: ActionListItemProps) => JSX.Element;
+declare const ActionListItem: React__default.MemoExoticComponent<(props: ActionListItemProps) => JSX.Element>;
 
 declare type ActionListHeaderProps = {
     title: string;

package/build/components/index.native.js

@@ -3256,7 +3256,7 @@ var ThemeContext=createContext({theme:null,colorScheme:'light',platform:'onDeskt
 
 var BladeProvider=function BladeProvider(_ref){var themeTokens=_ref.themeTokens,initialColorScheme=_ref.colorScheme,children=_ref.children;if(!themeTokens){throw new Error("[BladeProvider]: Expected valid themeTokens of type ThemeTokens to be passed but found "+typeof themeTokens);}if(initialColorScheme&&!colorSchemeNamesInput.includes(initialColorScheme)){throw new Error("[BladeProvider]: Expected color scheme to be one of ["+colorSchemeNamesInput.toString()+"] but received "+initialColorScheme);}var _useColorScheme=useColorScheme(initialColorScheme),colorScheme=_useColorScheme.colorScheme,setColorScheme=_useColorScheme.setColorScheme;var _useBreakpoint=useBreakpoint({breakpoints:themeTokens.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var onColorMode="on"+toTitleCase(colorScheme);var onDeviceType="on"+toTitleCase(matchedDeviceType);var theme=_extends({},themeTokens,{colors:themeTokens.colors[onColorMode],shadows:_extends({},themeTokens.shadows,{color:themeTokens.shadows.color[onColorMode]}),typography:themeTokens.typography[onDeviceType]});var themeContextValue={theme:theme,colorScheme:colorScheme,setColorScheme:setColorScheme,platform:onDeviceType};return jsx(ThemeContext.Provider,{value:themeContextValue,children:jsx(ThemeProvider,{theme:theme,children:children})});};
 
-var ActionList=function ActionList(_ref){var children=_ref.children,_ref$surfaceLevel=_ref.surfaceLevel,surfaceLevel=_ref$surfaceLevel===void 0?2:_ref$surfaceLevel,testID=_ref.testID;var _useDropdown=useDropdown(),setOptions=_useDropdown.setOptions,actionListItemRef=_useDropdown.actionListItemRef,selectionType=_useDropdown.selectionType,dropdownBaseId=_useDropdown.dropdownBaseId,setSelectedIndices=_useDropdown.setSelectedIndices,dropdownTriggerer=_useDropdown.dropdownTriggerer,hasFooterAction=_useDropdown.hasFooterAction;var _useTheme=useTheme(),theme=_useTheme.theme;var _React$useMemo=React__default.useMemo(function(){return getActionListProperties(children);},[children]),childrenWithId=_React$useMemo.childrenWithId,actionListOptions=_React$useMemo.actionListOptions,defaultSelectedIndices=_React$useMemo.defaultSelectedIndices,actionListHeaderChild=_React$useMemo.actionListHeaderChild,actionListFooterChild=_React$useMemo.actionListFooterChild;React__default.useEffect(function(){setOptions(actionListOptions);},[actionListOptions]);React__default.useEffect(function(){setSelectedIndices(defaultSelectedIndices);},[]);var actionListContainerRole=getActionListContainerRole(hasFooterAction,dropdownTriggerer);var actionListItemWrapperRole=getActionListItemWrapperRole(hasFooterAction,dropdownTriggerer);var isMultiSelectable=selectionType==='multiple';return jsxs(StyledActionList,_extends({surfaceLevel:surfaceLevel,elevation:theme.shadows.androidElevation.level[2],id:dropdownBaseId+"-actionlist"},makeAccessible({role:actionListContainerRole,multiSelectable:actionListContainerRole==='listbox'?isMultiSelectable:undefined,labelledBy:dropdownBaseId+"-label"}),metaAttribute({name:MetaConstants.ActionList,testID:testID}),{children:[actionListHeaderChild,jsx(StyledListBoxWrapper,_extends({ref:actionListItemRef},makeAccessible({role:actionListItemWrapperRole,multiSelectable:actionListItemWrapperRole==='listbox'?isMultiSelectable:undefined}),{children:childrenWithId})),actionListFooterChild]}));};
+var _ActionList=function _ActionList(_ref){var children=_ref.children,_ref$surfaceLevel=_ref.surfaceLevel,surfaceLevel=_ref$surfaceLevel===void 0?2:_ref$surfaceLevel,testID=_ref.testID;var _useDropdown=useDropdown(),setOptions=_useDropdown.setOptions,actionListItemRef=_useDropdown.actionListItemRef,selectionType=_useDropdown.selectionType,dropdownBaseId=_useDropdown.dropdownBaseId,setSelectedIndices=_useDropdown.setSelectedIndices,dropdownTriggerer=_useDropdown.dropdownTriggerer,hasFooterAction=_useDropdown.hasFooterAction;var _useTheme=useTheme(),theme=_useTheme.theme;var _React$useMemo=React__default.useMemo(function(){return getActionListProperties(children);},[children]),childrenWithId=_React$useMemo.childrenWithId,actionListOptions=_React$useMemo.actionListOptions,defaultSelectedIndices=_React$useMemo.defaultSelectedIndices,actionListHeaderChild=_React$useMemo.actionListHeaderChild,actionListFooterChild=_React$useMemo.actionListFooterChild;React__default.useEffect(function(){setOptions(actionListOptions);},[actionListOptions]);React__default.useEffect(function(){setSelectedIndices(defaultSelectedIndices);},[]);var actionListContainerRole=getActionListContainerRole(hasFooterAction,dropdownTriggerer);var actionListItemWrapperRole=getActionListItemWrapperRole(hasFooterAction,dropdownTriggerer);var isMultiSelectable=selectionType==='multiple';return jsxs(StyledActionList,_extends({surfaceLevel:surfaceLevel,elevation:theme.shadows.androidElevation.level[2],id:dropdownBaseId+"-actionlist"},makeAccessible({role:actionListContainerRole,multiSelectable:actionListContainerRole==='listbox'?isMultiSelectable:undefined,labelledBy:dropdownBaseId+"-label"}),metaAttribute({name:MetaConstants.ActionList,testID:testID}),{children:[actionListHeaderChild,jsx(StyledListBoxWrapper,_extends({ref:actionListItemRef},makeAccessible({role:actionListItemWrapperRole,multiSelectable:actionListItemWrapperRole==='listbox'?isMultiSelectable:undefined}),{children:childrenWithId})),actionListFooterChild]}));};var ActionList=React__default.memo(_ActionList);
 
 var getBaseActionListItemStyles=function getBaseActionListItemStyles(props){return {borderWidth:makeSize(props.theme.spacing[2]),borderStyle:'solid',borderColor:'transparent',textAlign:isReactNative$4()?undefined:'left',backgroundColor:'transparent',padding:makeSize(props.theme.spacing[2]),borderRadius:makeSize(props.theme.border.radius.medium),textDecoration:'none',cursor:'pointer',width:'100%'};};
 
@@ -3380,7 +3380,7 @@ var _excluded$4q=["size","color"];var EyeIcon=function EyeIcon(_ref){var size=_r
 
 var _excluded$4p=["size","color"];var EyeOffIcon=function EyeOffIcon(_ref){var size=_ref.size,color=_ref.color,styledProps=_objectWithoutProperties(_ref,_excluded$4p);var _useIconProps=useIconProps({size:size,color:color}),height=_useIconProps.height,width=_useIconProps.width,iconColor=_useIconProps.iconColor;return jsxs(Svg,_extends({},styledProps,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:[jsx(G,{clipPath:"url(#clip0_60_186)",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L4.54852 5.96273C2.11768 8.23575 0.611157 10.5466 0.105573 11.5577C-0.0388552 11.8466 -0.0348927 12.1874 0.116212 12.4728C0.911795 13.9756 2.43155 16.1767 4.44905 17.9657C6.44912 19.7391 9.07199 21.2217 12.0463 21.0043C14.1054 20.965 16.1069 20.3524 17.8291 19.2433L22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L1.70711 0.292893ZM16.3745 17.7888L14.0529 15.4671C13.137 16.0423 12.0118 16.2303 10.9354 15.9554C9.51816 15.5934 8.4115 14.4868 8.04956 13.0695C7.77466 11.9931 7.96267 10.8679 8.53787 9.95208L5.96358 7.3778C4.02162 9.18305 2.73293 11.0024 2.14239 12.0023C2.8992 13.3055 4.16865 15.044 5.77595 16.4692C7.59406 18.0814 9.71013 19.1781 11.9233 19.0079C11.9434 19.0063 11.9635 19.0054 11.9837 19.0051C13.5332 18.9797 15.0437 18.558 16.3745 17.7888ZM10.0291 11.4433C9.90866 11.8023 9.89029 12.1946 9.98736 12.5747C10.1683 13.2833 10.7217 13.8366 11.4303 14.0176C11.8104 14.1146 12.2026 14.0963 12.5616 13.9758L10.0291 11.4433ZM23.8777 11.5256C23.0808 10.0665 21.5613 7.9214 19.5476 6.15178C17.5484 4.3949 14.9387 2.90282 11.9828 3.00492C11.2049 3.00459 10.4296 3.09396 9.67209 3.27126C9.13434 3.39713 8.80045 3.93511 8.92632 4.47286C9.05219 5.0106 9.59016 5.3445 10.1279 5.21862C10.7408 5.07517 11.3682 5.00346 11.9977 5.00494C12.0107 5.00497 12.0238 5.00474 12.0369 5.00426C14.273 4.9217 16.4061 6.05356 18.2274 7.65411C19.8179 9.05181 21.0762 10.7264 21.8355 11.9857C21.6047 12.3498 21.3179 12.7884 21.0346 13.2066C20.8197 13.5237 20.6117 13.8221 20.4357 14.0622C20.2457 14.3213 20.1312 14.4595 20.0929 14.4978C19.7024 14.8884 19.7024 15.5215 20.0929 15.912C20.4834 16.3026 21.1166 16.3026 21.5071 15.912C21.6688 15.7504 21.8668 15.4927 22.0487 15.2446C22.2446 14.9774 22.4678 14.657 22.6904 14.3283C23.1344 13.6729 23.5951 12.9567 23.8575 12.5194C24.04 12.2152 24.0477 11.837 23.8777 11.5256Z",fill:iconColor})}),jsx(Defs,{children:jsx(ClipPath,{id:"clip0_60_186",children:jsx(Rect,{width:"100%",height:"100%",fill:"none"})})})]}));};
 
-var _excluded$4o=["size","color"];var FileTextIcon=function FileTextIcon(_ref){var size=_ref.size,color=_ref.color,styledProps=_objectWithoutProperties(_ref,_excluded$4o);var _useIconProps=useIconProps({size:size,color:color}),height=_useIconProps.height,width=_useIconProps.width,iconColor=_useIconProps.iconColor;return jsxs(Svg,_extends({},styledProps,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:[jsx(Path,{d:"M5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H13C13.5523 13 14 12.5523 14 12C14 11.4477 13.5523 11 13 11H5Z",fill:iconColor}),jsx(Path,{d:"M4 16C4 15.4477 4.44772 15 5 15H13C13.5523 15 14 15.4477 14 16C14 16.5523 13.5523 17 13 17H5C4.44772 17 4 16.5523 4 16Z",fill:iconColor}),jsx(Path,{d:"M5 7C4.44772 7 4 7.44772 4 8C4 8.55229 4.44772 9 5 9H7C7.55228 9 8 8.55229 8 8C8 7.44772 7.55228 7 7 7H5Z",fill:iconColor}),jsx(Path,{d:"M0 3C0 1.34315 1.34315 0 3 0H11C11.2652 0 11.5196 0.105357 11.7071 0.292893L17.7071 6.29289C17.8946 6.48043 18 6.73478 18 7V19C18 20.6569 16.6569 22 15 22H3C1.34315 22 0 20.6569 0 19V3ZM3 2C2.44772 2 2 2.44772 2 3V19C2 19.5523 2.44772 20 3 20H15C15.5523 20 16 19.5523 16 19V8H11C10.4477 8 10 7.55228 10 7V2H3ZM12 3.41421L14.5858 6H12V3.41421Z",fill:iconColor})]}));};
+var _excluded$4o=["size","color"];var FileTextIcon=function FileTextIcon(_ref){var size=_ref.size,color=_ref.color,styledProps=_objectWithoutProperties(_ref,_excluded$4o);var _useIconProps=useIconProps({size:size,color:color}),height=_useIconProps.height,width=_useIconProps.width,iconColor=_useIconProps.iconColor;return jsxs(Svg,_extends({},styledProps,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:[jsx(Path,{d:"M8 12C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H16C16.5523 14 17 13.5523 17 13C17 12.4477 16.5523 12 16 12H8Z",fill:iconColor}),jsx(Path,{d:"M7 17C7 16.4477 7.44772 16 8 16H16C16.5523 16 17 16.4477 17 17C17 17.5523 16.5523 18 16 18H8C7.44772 18 7 17.5523 7 17Z",fill:iconColor}),jsx(Path,{d:"M8 8C7.44772 8 7 8.44772 7 9C7 9.55229 7.44772 10 8 10H10C10.5523 10 11 9.55229 11 9C11 8.44772 10.5523 8 10 8H8Z",fill:iconColor}),jsx(Path,{d:"M3 4C3 2.34315 4.34315 1 6 1H14C14.2652 1 14.5196 1.10536 14.7071 1.29289L20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V9H14C13.4477 9 13 8.55228 13 8V3H6ZM15 4.41421L17.5858 7H15V4.41421Z",fillRule:"evenodd",clipRule:"evenodd",fill:iconColor})]}));};
 
 var _excluded$4n=["size","color"];var HistoryIcon=function HistoryIcon(_ref){var size=_ref.size,color=_ref.color,styledProps=_objectWithoutProperties(_ref,_excluded$4n);var _useIconProps=useIconProps({size:size,color:color}),height=_useIconProps.height,width=_useIconProps.width,iconColor=_useIconProps.iconColor;return jsx(Svg,_extends({},styledProps,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M5.944 4.921a10 10 0 1 1-2.377 10.411 1 1 0 1 1 1.886-.664 8 8 0 1 0 1.872-8.3L4.475 9H8a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1V4a1 1 0 1 1 2 0v3.64L5.944 4.92ZM12 6a1 1 0 0 1 1 1v5.586l2.707 2.707a1 1 0 0 1-1.414 1.414l-3-3A1 1 0 0 1 11 13V7a1 1 0 0 1 1-1Z",fill:iconColor})}));};
 
@@ -3912,7 +3912,7 @@ var SelectorGroupField=function SelectorGroupField(_ref){var children=_ref.child
 
 var _excluded$q=["children","label","helpText","isDisabled","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID"];var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,isDisabled=_ref.isDisabled,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$q);var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=","+(showError?errorText:'')+" "+(showHelpText?helpText:'');var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];var childCount=React__default.Children.count(children);return jsx(CheckboxGroupProvider,{value:contextValue,children:jsx(BaseBox,_extends({},getStyledProps(styledProps),{children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,componentName:"checkbox-group",testID:testID,children:[jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,children:label}),jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:"column",children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{marginBottom:index===childCount-1?makeSize(0):gap,children:child},index);})}),jsx(FormHint,{errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]})}))});};
 
-var ActionListItemContext=React__default.createContext({});var StyledSectionDivider=styled(BaseBox)(function(props){return {height:makeSize(size[1]),backgroundColor:props.theme.colors.surface.border.normal.lowContrast,margin:makeSize(props.theme.spacing[1])+" "+makeSize(props.theme.spacing[3])};});var ActionListSectionDivider=function ActionListSectionDivider(){return jsx(StyledSectionDivider,_extends({},makeAccessible({role:getSeparatorRole()})));};var StyledActionListSectionTitle=styled(BaseBox)(function(props){return {padding:makeSize(props.theme.spacing[3])};});var _ActionListSection=function _ActionListSection(_ref){var title=_ref.title,children=_ref.children,testID=_ref.testID,_hideDivider=_ref._hideDivider;return jsxs(BaseBox,_extends({},makeAccessible({role:getActionListSectionRole(),label:title}),metaAttribute({name:MetaConstants.ActionListSection,testID:testID}),{children:[jsx(StyledActionListSectionTitle,_extends({},makeAccessible({hidden:true}),{children:jsx(Text,{color:"surface.text.muted.lowContrast",size:"small",weight:"bold",children:title})})),jsx(BaseBox,_extends({},makeAccessible({role:isReactNative$4()?undefined:'listbox'}),{children:children})),_hideDivider&&isReactNative$4()?null:jsx(ActionListSectionDivider,{})]}));};var ActionListSection=assignWithoutSideEffects(_ActionListSection,{componentId:componentIds$1.ActionListSection});var _ActionListItemIcon=function _ActionListItemIcon(_ref2){var icon=_ref2.icon;var Icon=icon;var _React$useContext=React__default.useContext(ActionListItemContext),intent=_React$useContext.intent,isDisabled=_React$useContext.isDisabled;return jsx(Icon,{color:intent==='negative'?'feedback.icon.negative.lowContrast':getNormalTextColor(isDisabled,{isMuted:true}),size:"medium"});};var ActionListItemIcon=assignWithoutSideEffects(_ActionListItemIcon,{componentId:componentIds$1.ActionListItemIcon});var _ActionListItemText=function _ActionListItemText(_ref3){var children=_ref3.children;var _React$useContext2=React__default.useContext(ActionListItemContext),isDisabled=_React$useContext2.isDisabled;return jsx(Text,{variant:"caption",color:getNormalTextColor(isDisabled,{isMuted:true}),children:children});};var ActionListItemText=assignWithoutSideEffects(_ActionListItemText,{componentId:componentIds$1.ActionListItemText});var ActionListCheckboxWrapper=styled(BaseBox)(function(_props){return {pointerEvents:'none'};});var makeActionListItemClickable=function makeActionListItemClickable(clickHandler){if(isReactNative$4()){return {onPress:clickHandler};}return {onClick:clickHandler};};var _ActionListItem=function _ActionListItem(props){var _useDropdown=useDropdown(),activeIndex=_useDropdown.activeIndex,dropdownBaseId=_useDropdown.dropdownBaseId,onOptionClick=_useDropdown.onOptionClick,selectedIndices=_useDropdown.selectedIndices,setShouldIgnoreBlur=_useDropdown.setShouldIgnoreBlur,setShouldIgnoreBlurAnimation=_useDropdown.setShouldIgnoreBlurAnimation,selectionType=_useDropdown.selectionType,dropdownTriggerer=_useDropdown.dropdownTriggerer,isKeydownPressed=_useDropdown.isKeydownPressed;var renderOnWebAs=props.href?'a':'button';var isSelected=typeof props._index==='number'?selectedIndices.includes(props._index):props.isDefaultSelected;React__default.useEffect(function(){validateActionListItemProps({leading:props.leading,trailing:props.trailing});},[props.leading,props.trailing]);React__default.useEffect(function(){if(dropdownTriggerer==='SelectInput'&&props.intent==='negative'){throw new Error('[ActionListItem]: negative intent ActionListItem cannot be used inside Dropdown with SelectInput trigger');}},[props.intent,dropdownTriggerer]);return jsx(ActionListItemContext.Provider,{value:{intent:props.intent,isDisabled:props.isDisabled},children:jsxs(StyledActionListItem,_extends({as:!isReactNative$4()?renderOnWebAs:undefined,id:dropdownBaseId+"-"+props._index,type:"button",tabIndex:-1,href:props.href,className:activeIndex===props._index?'active-focus':''},makeAccessible({selected:isSelected,current:isRoleMenu(dropdownTriggerer)?isSelected:undefined,role:getActionListItemRole(dropdownTriggerer,props.href),disabled:props.isDisabled}),makeActionListItemClickable(function(e){if(typeof props._index==='number'){onOptionClick(e,props._index);}props.onClick==null?void 0:props.onClick({name:props.value,value:isSelected});}),metaAttribute({name:MetaConstants.ActionListItem,testID:props.testID}),{onMouseDown:function onMouseDown(){setShouldIgnoreBlur(true);setShouldIgnoreBlurAnimation(true);},onMouseUp:function onMouseUp(){setShouldIgnoreBlurAnimation(false);},"data-value":props.value,"data-index":props._index,selectionType:selectionType,hasDescription:Boolean(props.description),intent:props.intent,isSelected:isSelected,isKeydownPressed:isKeydownPressed,children:[jsxs(BaseBox,{display:"flex",justifyContent:"center",flexDirection:"row",alignItems:"center",maxHeight:isReactNative$4()?undefined:makeSize(size[20]),children:[jsx(BaseBox,{display:"flex",justifyContent:"center",alignItems:"center",children:selectionType==='multiple'?jsx(ActionListCheckboxWrapper,_extends({hasDescription:Boolean(props.description)},makeAccessible({hidden:true}),{children:jsx(Checkbox,{isChecked:isSelected,tabIndex:-1,isDisabled:props.isDisabled,children:null})})):props.leading}),jsx(BaseBox,{paddingLeft:selectionType==='multiple'||!props.leading?'spacing.0':'spacing.3',paddingRight:"spacing.3",children:jsx(Text,{truncateAfterLines:1,color:props.intent==='negative'?'feedback.text.negative.lowContrast':getNormalTextColor(props.isDisabled),children:props.title})}),jsx(BaseBox,{marginLeft:"auto",children:props.trailing})]}),jsx(BaseBox,{paddingLeft:props.leading||selectionType==='multiple'?'spacing.7':undefined,children:props.description?jsx(Text,{color:getNormalTextColor(props.isDisabled,{isMuted:true}),size:"small",children:props.description}):null})]}))});};var ActionListItem=assignWithoutSideEffects(_ActionListItem,{componentId:componentIds$1.ActionListItem});
+var ActionListItemContext=React__default.createContext({});var StyledSectionDivider=styled(BaseBox)(function(props){return {height:makeSize(size[1]),backgroundColor:props.theme.colors.surface.border.normal.lowContrast,margin:makeSize(props.theme.spacing[1])+" "+makeSize(props.theme.spacing[3])};});var ActionListSectionDivider=function ActionListSectionDivider(){return jsx(StyledSectionDivider,_extends({},makeAccessible({role:getSeparatorRole()})));};var StyledActionListSectionTitle=styled(BaseBox)(function(props){return {padding:makeSize(props.theme.spacing[3])};});var _ActionListSection=function _ActionListSection(_ref){var title=_ref.title,children=_ref.children,testID=_ref.testID,_hideDivider=_ref._hideDivider;return jsxs(BaseBox,_extends({},makeAccessible({role:getActionListSectionRole(),label:title}),metaAttribute({name:MetaConstants.ActionListSection,testID:testID}),{children:[jsx(StyledActionListSectionTitle,_extends({},makeAccessible({hidden:true}),{children:jsx(Text,{color:"surface.text.muted.lowContrast",size:"small",weight:"bold",children:title})})),jsx(BaseBox,_extends({},makeAccessible({role:isReactNative$4()?undefined:'listbox'}),{children:children})),_hideDivider&&isReactNative$4()?null:jsx(ActionListSectionDivider,{})]}));};var ActionListSection=assignWithoutSideEffects(_ActionListSection,{componentId:componentIds$1.ActionListSection});var _ActionListItemIcon=function _ActionListItemIcon(_ref2){var icon=_ref2.icon;var Icon=icon;var _React$useContext=React__default.useContext(ActionListItemContext),intent=_React$useContext.intent,isDisabled=_React$useContext.isDisabled;return jsx(Icon,{color:intent==='negative'?'feedback.icon.negative.lowContrast':getNormalTextColor(isDisabled,{isMuted:true}),size:"medium"});};var ActionListItemIcon=assignWithoutSideEffects(_ActionListItemIcon,{componentId:componentIds$1.ActionListItemIcon});var _ActionListItemText=function _ActionListItemText(_ref3){var children=_ref3.children;var _React$useContext2=React__default.useContext(ActionListItemContext),isDisabled=_React$useContext2.isDisabled;return jsx(Text,{variant:"caption",color:getNormalTextColor(isDisabled,{isMuted:true}),children:children});};var ActionListItemText=assignWithoutSideEffects(_ActionListItemText,{componentId:componentIds$1.ActionListItemText});var ActionListCheckboxWrapper=styled(BaseBox)(function(_props){return {pointerEvents:'none'};});var makeActionListItemClickable=function makeActionListItemClickable(clickHandler){if(isReactNative$4()){return {onPress:clickHandler};}return {onClick:clickHandler};};var _ActionListItemBody=function _ActionListItemBody(_ref4){var selectionType=_ref4.selectionType,intent=_ref4.intent,description=_ref4.description,isDisabled=_ref4.isDisabled,leading=_ref4.leading,trailing=_ref4.trailing,title=_ref4.title,isSelected=_ref4.isSelected;return jsxs(Fragment,{children:[jsxs(BaseBox,{display:"flex",justifyContent:"center",flexDirection:"row",alignItems:"center",maxHeight:isReactNative$4()?undefined:makeSize(size[20]),children:[jsx(BaseBox,{display:"flex",justifyContent:"center",alignItems:"center",children:selectionType==='multiple'?jsx(ActionListCheckboxWrapper,_extends({hasDescription:Boolean(description)},makeAccessible({hidden:true}),{children:jsx(Checkbox,{isChecked:isSelected,tabIndex:-1,isDisabled:isDisabled,children:null})})):leading}),jsx(BaseBox,{paddingLeft:selectionType==='multiple'||!leading?'spacing.0':'spacing.3',paddingRight:"spacing.3",children:jsx(Text,{truncateAfterLines:1,color:intent==='negative'?'feedback.text.negative.lowContrast':getNormalTextColor(isDisabled),children:title})}),jsx(BaseBox,{marginLeft:"auto",children:trailing})]}),jsx(BaseBox,{paddingLeft:leading||selectionType==='multiple'?'spacing.7':undefined,children:description?jsx(Text,{color:getNormalTextColor(isDisabled,{isMuted:true}),size:"small",children:description}):null})]});};var ActionListItemBody=React__default.memo(_ActionListItemBody);var _ActionListItem=function _ActionListItem(props){var _useDropdown=useDropdown(),activeIndex=_useDropdown.activeIndex,dropdownBaseId=_useDropdown.dropdownBaseId,onOptionClick=_useDropdown.onOptionClick,selectedIndices=_useDropdown.selectedIndices,setShouldIgnoreBlur=_useDropdown.setShouldIgnoreBlur,setShouldIgnoreBlurAnimation=_useDropdown.setShouldIgnoreBlurAnimation,selectionType=_useDropdown.selectionType,dropdownTriggerer=_useDropdown.dropdownTriggerer,isKeydownPressed=_useDropdown.isKeydownPressed;var renderOnWebAs=props.href?'a':'button';var isSelected=typeof props._index==='number'?selectedIndices.includes(props._index):props.isDefaultSelected;React__default.useEffect(function(){validateActionListItemProps({leading:props.leading,trailing:props.trailing});},[props.leading,props.trailing]);React__default.useEffect(function(){if(dropdownTriggerer==='SelectInput'&&props.intent==='negative'){throw new Error('[ActionListItem]: negative intent ActionListItem cannot be used inside Dropdown with SelectInput trigger');}},[props.intent,dropdownTriggerer]);return jsx(ActionListItemContext.Provider,{value:{intent:props.intent,isDisabled:props.isDisabled},children:jsx(StyledActionListItem,_extends({as:!isReactNative$4()?renderOnWebAs:undefined,id:dropdownBaseId+"-"+props._index,type:"button",tabIndex:-1,href:props.href,className:activeIndex===props._index?'active-focus':''},makeAccessible({selected:isSelected,current:isRoleMenu(dropdownTriggerer)?isSelected:undefined,role:getActionListItemRole(dropdownTriggerer,props.href),disabled:props.isDisabled}),makeActionListItemClickable(function(e){if(typeof props._index==='number'){onOptionClick(e,props._index);}props.onClick==null?void 0:props.onClick({name:props.value,value:isSelected});}),metaAttribute({name:MetaConstants.ActionListItem,testID:props.testID}),{onMouseDown:function onMouseDown(){setShouldIgnoreBlur(true);setShouldIgnoreBlurAnimation(true);},onMouseUp:function onMouseUp(){setShouldIgnoreBlurAnimation(false);},"data-value":props.value,"data-index":props._index,selectionType:selectionType,hasDescription:Boolean(props.description),intent:props.intent,isSelected:isSelected,isKeydownPressed:isKeydownPressed,children:jsx(ActionListItemBody,{selectionType:selectionType,intent:props.intent,description:props.description,isDisabled:props.isDisabled,leading:props.leading,trailing:props.trailing,title:props.title,isSelected:isSelected})}))});};var ActionListItem=assignWithoutSideEffects(React__default.memo(_ActionListItem),{componentId:componentIds$1.ActionListItem});
 
 var StyledActionListHeader=styled(BaseBox)(function(props){return {display:'flex',flexDirection:'row',alignItems:'center',padding:makeSize(props.theme.spacing[3])+" "+makeSize(props.theme.spacing[5]),backgroundColor:props.theme.colors.brand.gray.a50.lowContrast};});var _ActionListHeader=function _ActionListHeader(props){React__default.useEffect(function(){React__default.Children.map(props.leading,function(child){if(!isValidAllowedChildren(child,componentIds$1.ActionListHeaderIcon)){throw new Error("[ActionListHeader]: Only "+componentIds$1.ActionListHeaderIcon+" is allowed in leading prop");}});},[props.leading]);return jsxs(StyledActionListHeader,_extends({},metaAttribute({name:MetaConstants.ActionListHeader,testID:props.testID}),{children:[jsx(BaseBox,{children:props.leading}),jsx(BaseBox,{paddingLeft:"spacing.3",paddingRight:"spacing.3",children:jsx(Text,{variant:"caption",color:"surface.text.subdued.lowContrast",children:props.title})})]}));};var ActionListHeader=assignWithoutSideEffects(_ActionListHeader,{componentId:componentIds$1.ActionListHeader});var _ActionListHeaderIcon=function _ActionListHeaderIcon(_ref){var icon=_ref.icon;var Icon=icon;return jsx(Icon,{color:"surface.text.muted.lowContrast",size:"small"});};var ActionListHeaderIcon=assignWithoutSideEffects(_ActionListHeaderIcon,{componentId:componentIds$1.ActionListHeaderIcon});
 
@@ -3996,7 +3996,7 @@ var _CardHeaderIcon=function _CardHeaderIcon(_ref){var Icon=_ref.icon;useVerifyI
 
 var useIsMobile=function useIsMobile(){var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;return matchedDeviceType==='mobile';};var _CardFooter=function _CardFooter(_ref){var children=_ref.children,testID=_ref.testID;var isMobile=useIsMobile();useVerifyInsideCard('CardFooter');useVerifyAllowedComponents(children,'CardFooter',[ComponentIds$1.CardFooterLeading,ComponentIds$1.CardFooterTrailing]);return jsxs(BaseBox,_extends({marginTop:"auto"},metaAttribute({name:MetaConstants.CardFooter,testID:testID}),{children:[jsx(BaseBox,{marginTop:"spacing.7"}),jsx(Divider,{}),jsx(BaseBox,{marginTop:"spacing.7",display:"flex",flexDirection:isMobile?'column':'row',justifyContent:"space-between",alignItems:isMobile?'stretch':'center',children:children})]}));};var CardFooter=assignWithoutSideEffects(_CardFooter,{componentId:ComponentIds$1.CardFooter});var _CardFooterLeading=function _CardFooterLeading(_ref2){var title=_ref2.title,subtitle=_ref2.subtitle;useVerifyInsideCard('CardFooterLeading');return jsxs(BaseBox,{children:[title&&jsx(Text,{variant:"body",size:"medium",weight:"bold",children:title}),subtitle&&jsx(Text,{variant:"body",size:"small",weight:"regular",children:subtitle})]});};var CardFooterLeading=assignWithoutSideEffects(_CardFooterLeading,{componentId:ComponentIds$1.CardFooterLeading});var _CardFooterTrailing=function _CardFooterTrailing(_ref3){var actions=_ref3.actions;var isMobile=useIsMobile();useVerifyInsideCard('CardFooterTrailing');return jsxs(BaseBox,{display:"flex",flexDirection:"row",alignSelf:isMobile?'auto':'center',marginTop:isMobile?'spacing.5':'spacing.0',marginLeft:isMobile?'spacing.0':'spacing.5',children:[jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.secondary?jsx(Button,_extends({isFullWidth:true,size:"medium",variant:"secondary"},actions.secondary,{children:actions.secondary.text})):null}),jsx(BaseBox,{marginLeft:"spacing.5"}),jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.primary?jsx(Button,_extends({isFullWidth:true,size:"medium"},actions.primary,{children:actions.primary.text})):null})]});};var CardFooterTrailing=assignWithoutSideEffects(_CardFooterTrailing,{componentId:ComponentIds$1.CardFooterTrailing});
 
-var _excluded$e=["children","selectionType"];var _Dropdown=function _Dropdown(_ref){var children=_ref.children,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,styledProps=_objectWithoutProperties(_ref,_excluded$e);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isOpen=_React$useState2[0],setIsOpen=_React$useState2[1];var _React$useState3=React__default.useState([]),_React$useState4=_slicedToArray(_React$useState3,2),options=_React$useState4[0],setOptions=_React$useState4[1];var _React$useState5=React__default.useState([]),_React$useState6=_slicedToArray(_React$useState5,2),selectedIndices=_React$useState6[0],setSelectedIndices=_React$useState6[1];var _React$useState7=React__default.useState(-1),_React$useState8=_slicedToArray(_React$useState7,2),activeIndex=_React$useState8[0],setActiveIndex=_React$useState8[1];var _React$useState9=React__default.useState(false),_React$useState10=_slicedToArray(_React$useState9,2),shouldIgnoreBlur=_React$useState10[0],setShouldIgnoreBlur=_React$useState10[1];var _React$useState11=React__default.useState(false),_React$useState12=_slicedToArray(_React$useState11,2),shouldIgnoreBlurAnimation=_React$useState12[0],setShouldIgnoreBlurAnimation=_React$useState12[1];var triggererRef=React__default.useRef(null);var actionListItemRef=React__default.useRef(null);var _React$useState13=React__default.useState(false),_React$useState14=_slicedToArray(_React$useState13,2),hasFooterAction=_React$useState14[0],setHasFooterAction=_React$useState14[1];var _React$useState15=React__default.useState(false),_React$useState16=_slicedToArray(_React$useState15,2),hasLabelOnLeft=_React$useState16[0],setHasLabelOnLeft=_React$useState16[1];var _React$useState17=React__default.useState(false),_React$useState18=_slicedToArray(_React$useState17,2),isKeydownPressed=_React$useState18[0],setIsKeydownPressed=_React$useState18[1];var dropdownBaseId=useId('dropdown');var dropdownTriggerer;React__default.Children.map(children,function(child){if(React__default.isValidElement(child)){if(!isValidAllowedChildren(child,'SelectInput')&&!isValidAllowedChildren(child,componentIds.DropdownOverlay)){throw new Error("[Dropdown]: Dropdown can only have `SelectInput` and `DropdownOverlay` as children\n\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown");}if(isValidAllowedChildren(child,'SelectInput')){dropdownTriggerer='SelectInput';}}});var contextValue=React__default.useMemo(function(){return {isOpen:isOpen,setIsOpen:setIsOpen,selectedIndices:selectedIndices,setSelectedIndices:setSelectedIndices,options:options,setOptions:setOptions,activeIndex:activeIndex,setActiveIndex:setActiveIndex,shouldIgnoreBlur:shouldIgnoreBlur,setShouldIgnoreBlur:setShouldIgnoreBlur,shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,isKeydownPressed:isKeydownPressed,setIsKeydownPressed:setIsKeydownPressed,dropdownBaseId:dropdownBaseId,triggererRef:triggererRef,actionListItemRef:actionListItemRef,selectionType:selectionType,hasFooterAction:hasFooterAction,setHasFooterAction:setHasFooterAction,hasLabelOnLeft:hasLabelOnLeft,setHasLabelOnLeft:setHasLabelOnLeft,dropdownTriggerer:dropdownTriggerer};},[isOpen,selectedIndices,options,activeIndex,shouldIgnoreBlur,shouldIgnoreBlurAnimation,selectionType,hasFooterAction,hasLabelOnLeft,isKeydownPressed]);return jsx(DropdownContext.Provider,{value:contextValue,children:jsx(BaseBox,_extends({position:"relative"},getStyledProps(styledProps),{children:children}))});};var Dropdown=assignWithoutSideEffects(_Dropdown,{componentId:componentIds.Dropdown});
+var _excluded$e=["children","selectionType"];var _Dropdown=function _Dropdown(_ref){var children=_ref.children,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,styledProps=_objectWithoutProperties(_ref,_excluded$e);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isOpen=_React$useState2[0],setIsOpen=_React$useState2[1];var _React$useState3=React__default.useState([]),_React$useState4=_slicedToArray(_React$useState3,2),options=_React$useState4[0],setOptions=_React$useState4[1];var _React$useState5=React__default.useState([]),_React$useState6=_slicedToArray(_React$useState5,2),selectedIndices=_React$useState6[0],setSelectedIndices=_React$useState6[1];var _React$useState7=React__default.useState(-1),_React$useState8=_slicedToArray(_React$useState7,2),activeIndex=_React$useState8[0],setActiveIndex=_React$useState8[1];var _React$useState9=React__default.useState(false),_React$useState10=_slicedToArray(_React$useState9,2),shouldIgnoreBlur=_React$useState10[0],setShouldIgnoreBlur=_React$useState10[1];var _React$useState11=React__default.useState(false),_React$useState12=_slicedToArray(_React$useState11,2),shouldIgnoreBlurAnimation=_React$useState12[0],setShouldIgnoreBlurAnimation=_React$useState12[1];var triggererRef=React__default.useRef(null);var actionListItemRef=React__default.useRef(null);var _React$useState13=React__default.useState(false),_React$useState14=_slicedToArray(_React$useState13,2),hasFooterAction=_React$useState14[0],setHasFooterAction=_React$useState14[1];var _React$useState15=React__default.useState(false),_React$useState16=_slicedToArray(_React$useState15,2),hasLabelOnLeft=_React$useState16[0],setHasLabelOnLeft=_React$useState16[1];var _React$useState17=React__default.useState(false),_React$useState18=_slicedToArray(_React$useState17,2),isKeydownPressed=_React$useState18[0],setIsKeydownPressed=_React$useState18[1];var dropdownBaseId=useId('dropdown');var dropdownTriggerer=React__default.useRef();React__default.Children.map(children,function(child){if(React__default.isValidElement(child)){if(!isValidAllowedChildren(child,'SelectInput')&&!isValidAllowedChildren(child,componentIds.DropdownOverlay)){throw new Error("[Dropdown]: Dropdown can only have `SelectInput` and `DropdownOverlay` as children\n\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown");}if(isValidAllowedChildren(child,'SelectInput')){dropdownTriggerer.current='SelectInput';}}});var contextValue=React__default.useMemo(function(){return {isOpen:isOpen,setIsOpen:setIsOpen,selectedIndices:selectedIndices,setSelectedIndices:setSelectedIndices,options:options,setOptions:setOptions,activeIndex:activeIndex,setActiveIndex:setActiveIndex,shouldIgnoreBlur:shouldIgnoreBlur,setShouldIgnoreBlur:setShouldIgnoreBlur,shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,isKeydownPressed:isKeydownPressed,setIsKeydownPressed:setIsKeydownPressed,dropdownBaseId:dropdownBaseId,triggererRef:triggererRef,actionListItemRef:actionListItemRef,selectionType:selectionType,hasFooterAction:hasFooterAction,setHasFooterAction:setHasFooterAction,hasLabelOnLeft:hasLabelOnLeft,setHasLabelOnLeft:setHasLabelOnLeft,dropdownTriggerer:dropdownTriggerer.current};},[isOpen,selectedIndices,options,activeIndex,shouldIgnoreBlur,shouldIgnoreBlurAnimation,selectionType,hasFooterAction,hasLabelOnLeft,isKeydownPressed]);return jsx(DropdownContext.Provider,{value:contextValue,children:jsx(BaseBox,_extends({position:"relative"},getStyledProps(styledProps),{children:children}))});};var Dropdown=assignWithoutSideEffects(_Dropdown,{componentId:componentIds.Dropdown});
 
 var StyledDropdownOverlay=styled(BaseBox)(function(props){return {transform:"translateY("+makeSize(props.theme.spacing[3])+")"};});var StyledCloseableArea=styled(Pressable)(function(props){return {position:'static',height:'100%',width:'100%',display:props.display};});var _DropdownOverlay=function _DropdownOverlay(_ref){var children=_ref.children,testID=_ref.testID;var _useDropdown=useDropdown(),isOpen=_useDropdown.isOpen,setIsOpen=_useDropdown.setIsOpen;return jsx(BaseBox,{position:"relative",children:jsx(StyledCloseableArea,{display:isOpen?'flex':'none',onPress:function onPress(){setIsOpen(false);},testID:"closeable-area",children:jsx(StyledDropdownOverlay,_extends({display:isOpen?'flex':'none',position:"absolute",width:"100%",testID:"dropdown-overlay"},metaAttribute({name:MetaConstants.DropdownOverlay,testID:testID}),{children:children}))})});};var DropdownOverlay=assignWithoutSideEffects(_DropdownOverlay,{componentId:componentIds.DropdownOverlay});