@razorpay/blade 8.11.2 → 8.11.3

package/build/components/index.native.js

@@ -2,9 +2,9 @@ import _extends from '@babel/runtime/helpers/extends';
 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 _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
-import { Appearance, Platform, View, SectionList, TouchableOpacity, Image, Pressable, Linking, AccessibilityInfo, Dimensions, Keyboard, findNodeHandle, Modal as Modal$1 } from 'react-native';
+import { Appearance, Platform, View, SectionList, TouchableOpacity, Image, Pressable, Linking, AccessibilityInfo, Dimensions, Keyboard, findNodeHandle, StyleSheet, Modal as Modal$1 } from 'react-native';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import Animated, { Easing, Keyframe, useSharedValue, useAnimatedStyle, withTiming, withRepeat, cancelAnimation, interpolate, withSequence, withDelay, interpolateColor } from 'react-native-reanimated';
+import Animated, { Easing, Keyframe, useSharedValue, useAnimatedStyle, withTiming, withRepeat, cancelAnimation, interpolate, withSequence, withDelay, interpolateColor, useDerivedValue, runOnJS } from 'react-native-reanimated';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import styled, { ThemeProvider } from 'styled-components/native';
 import { PortalProvider, PortalHost, Portal } from '@gorhom/portal';
@@ -4049,7 +4049,7 @@ var _excluded$b=["autoFocus","errorText","helpText","isDisabled","keyboardReturn
 
 var StyledChevronIconContainer=styled(TouchableOpacity)(function(_props){return {display:'flex',justifyContent:'center'};});var SelectChevronIcon=function SelectChevronIcon(props){var Icon=props.icon;return jsx(StyledChevronIconContainer,{accessibilityLabel:"Chevron Icon",onPress:props.onClick,children:jsx(Icon,{color:"surface.text.normal.lowContrast",size:"medium"})});};
 
-var _excluded$a=["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$a);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",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(!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.triggers.SelectInput});
+var _excluded$a=["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$a);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",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.triggers.SelectInput});
 
 var _excluded$9=["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$9);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 jsxs(BaseBox,_extends({display:"flex",flexDirection:"row",alignItems:"center"},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{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})})]}));};
 
@@ -4364,23 +4364,29 @@ var BottomSheetSurface=styled(BaseBox)(function(_ref){var theme=_ref.theme;retur
 
 var AccordionContext=createContext(null);var useAccordion=function useAccordion(){var accordionContext=useContext(AccordionContext);if(!accordionContext){throw new Error("[Blade: AccordionContext]: useAccordion should be only used within AccordionContext");}return accordionContext;};
 
-var _excluded$2=["defaultExpandedIndex","expandedIndex","onExpandChange","showNumberPrefix","children","testID"];var MIN_WIDTH$1={s:makeSize(size[200]),m:makeSize(size[360]),l:makeSize(size[400])};var MAX_WIDTH$1={s:"calc(100vw - "+makeSize(size[40])+")",m:makeSize(size[640]),l:makeSize(size[800])};var Accordion=function Accordion(_ref){var defaultExpandedIndex=_ref.defaultExpandedIndex,expandedIndex=_ref.expandedIndex,onExpandChange=_ref.onExpandChange,_ref$showNumberPrefix=_ref.showNumberPrefix,showNumberPrefix=_ref$showNumberPrefix===void 0?false:_ref$showNumberPrefix,children=_ref.children,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$2);var _useState=useState(defaultExpandedIndex),_useState2=_slicedToArray(_useState,2),expandedAccordionItemIndex=_useState2[0],setExpandedAccordionItemIndex=_useState2[1];var handleExpandChange=useCallback(function(nextExpandedIndex){if(typeof expandedIndex!=='undefined'){onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}else {setExpandedAccordionItemIndex(nextExpandedIndex);onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}},[onExpandChange,expandedIndex]);var accordionContext=useMemo(function(){return {expandedIndex:expandedIndex!=null?expandedIndex:expandedAccordionItemIndex,defaultExpandedIndex:defaultExpandedIndex,onExpandChange:handleExpandChange,showNumberPrefix:showNumberPrefix};},[expandedAccordionItemIndex,handleExpandChange,expandedIndex,showNumberPrefix,defaultExpandedIndex]);return jsx(AccordionContext.Provider,{value:accordionContext,children:jsx(BaseBox,_extends({minWidth:MIN_WIDTH$1,maxWidth:MAX_WIDTH$1},metaAttribute({name:MetaConstants.Accordion,testID:testID}),getStyledProps(styledProps),{children:Children.map(children,function(child,index){return cloneElement(child,{_index:index,key:index});})}))});};
+var MAX_WIDTH$1={s:makeSize(Dimensions.get('window').width-size[40]),m:makeSize(size[640]),l:makeSize(size[800])};
 
-var StyledAccordionButton=styled.Pressable(function(props){var theme=props.theme,isExpanded=props.isExpanded;return {backgroundColor:isExpanded?theme.colors.brand.gray.a50.lowContrast:undefined};});
+var _excluded$2=["defaultExpandedIndex","expandedIndex","onExpandChange","showNumberPrefix","children","testID"];var MIN_WIDTH$1={s:makeSize(size[200]),m:makeSize(size[360]),l:makeSize(size[400])};var Accordion=function Accordion(_ref){var defaultExpandedIndex=_ref.defaultExpandedIndex,expandedIndex=_ref.expandedIndex,onExpandChange=_ref.onExpandChange,_ref$showNumberPrefix=_ref.showNumberPrefix,showNumberPrefix=_ref$showNumberPrefix===void 0?false:_ref$showNumberPrefix,children=_ref.children,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$2);var _useState=useState(defaultExpandedIndex),_useState2=_slicedToArray(_useState,2),expandedAccordionItemIndex=_useState2[0],setExpandedAccordionItemIndex=_useState2[1];var handleExpandChange=useCallback(function(nextExpandedIndex){if(typeof expandedIndex!=='undefined'){onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}else {setExpandedAccordionItemIndex(nextExpandedIndex);onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}},[onExpandChange,expandedIndex]);var accordionContext=useMemo(function(){return {expandedIndex:expandedIndex!=null?expandedIndex:expandedAccordionItemIndex,defaultExpandedIndex:defaultExpandedIndex,onExpandChange:handleExpandChange,showNumberPrefix:showNumberPrefix};},[expandedAccordionItemIndex,handleExpandChange,expandedIndex,showNumberPrefix,defaultExpandedIndex]);return jsx(AccordionContext.Provider,{value:accordionContext,children:jsx(BaseBox,_extends({minWidth:MIN_WIDTH$1,maxWidth:MAX_WIDTH$1},metaAttribute({name:MetaConstants.Accordion,testID:testID}),getStyledProps(styledProps),{children:Children.map(children,function(child,index){return cloneElement(child,{_index:index,key:index});})}))});};
 
-var AccordionButton=function AccordionButton(_ref){var children=_ref.children;return jsx(StyledAccordionButton,{isExpanded:false,children:jsx(Heading,{size:"small",children:children})});};
+var StyledAccordionButton=styled.Pressable(function(props){var theme=props.theme,isExpanded=props.isExpanded;return {backgroundColor:isExpanded?theme.colors.brand.gray.a50.lowContrast:undefined};});
 
 var CollapsibleContext=createContext(null);var useCollapsible=function useCollapsible(){var collapsibleContext=useContext(CollapsibleContext);if(!collapsibleContext){throw new Error("[Blade: CollapsibleContext]: You're trying to use Collapsible sub-components without Collapsible. useCollapsible should only be used within CollapsibleContext");}return collapsibleContext;};
 
-var _excluded$1=["children","direction","defaultIsExpanded","isExpanded","onExpandChange","testID","_shouldApplyWidthRestrictions"];var MIN_WIDTH=makeSize(size[200]);var MAX_WIDTH={s:"calc(100vw - "+makeSize(size[40])+")",m:makeSize(size[640]),l:makeSize(size[1136])};var Collapsible=function Collapsible(_ref){var children=_ref.children,_ref$direction=_ref.direction,direction=_ref$direction===void 0?'bottom':_ref$direction,_ref$defaultIsExpande=_ref.defaultIsExpanded,defaultIsExpanded=_ref$defaultIsExpande===void 0?false:_ref$defaultIsExpande,isExpanded=_ref.isExpanded,onExpandChange=_ref.onExpandChange,testID=_ref.testID,_ref$_shouldApplyWidt=_ref._shouldApplyWidthRestrictions,_shouldApplyWidthRestrictions=_ref$_shouldApplyWidt===void 0?true:_ref$_shouldApplyWidt,styledProps=_objectWithoutProperties(_ref,_excluded$1);var _useState=useState(isExpanded!=null?isExpanded:defaultIsExpanded),_useState2=_slicedToArray(_useState,2),isBodyExpanded=_useState2[0],setIsBodyExpanded=_useState2[1];var collapsibleBodyId=useId(MetaConstants.CollapsibleBody);var initialDefaultExpanded=useRef(Boolean(defaultIsExpanded||isExpanded));var handleExpandChange=useCallback(function(nextIsExpanded){if(typeof isExpanded!=='undefined'){onExpandChange==null?void 0:onExpandChange({isExpanded:nextIsExpanded});}else {setIsBodyExpanded(nextIsExpanded);onExpandChange==null?void 0:onExpandChange({isExpanded:nextIsExpanded});}},[onExpandChange,isExpanded]);var contextValue=useMemo(function(){return {isExpanded:isExpanded!=null?isExpanded:isBodyExpanded,onExpandChange:handleExpandChange,defaultIsExpanded:initialDefaultExpanded.current,direction:direction,collapsibleBodyId:collapsibleBodyId};},[isBodyExpanded,direction,handleExpandChange,isExpanded,collapsibleBodyId]);Children.forEach(children,function(child){if(!(isValidAllowedChildren(child,MetaConstants.CollapsibleBody)||isValidAllowedChildren(child,MetaConstants.CollapsibleButton)||isValidAllowedChildren(child,MetaConstants.CollapsibleLink)||isValidAllowedChildren(child,MetaConstants.AccordionButton))){throw new Error("[Blade: Collapsible]: only the following are supported as valid children: CollapsibleBody, CollapsibleButton, CollapsibleLink");}});return jsx(CollapsibleContext.Provider,{value:contextValue,children:jsx(BaseBox,_extends({display:"flex",flexDirection:direction==='bottom'?'column':'column-reverse',alignItems:"flex-start",minWidth:_shouldApplyWidthRestrictions?MIN_WIDTH:makeSize(size[0]),maxWidth:_shouldApplyWidthRestrictions?MAX_WIDTH:'none'},metaAttribute({name:MetaConstants.Collapsible,testID:testID}),getStyledProps(styledProps),{children:children}))});};
+var _AccordionButton=function _AccordionButton(_ref){var children=_ref.children;var _useCollapsible=useCollapsible(),onExpandChange=_useCollapsible.onExpandChange,isExpanded=_useCollapsible.isExpanded;return jsx(StyledAccordionButton,{isExpanded:isExpanded,onPress:function onPress(){return onExpandChange(!isExpanded);},children:jsx(Heading,{size:"small",children:children})});};var AccordionButton=assignWithoutSideEffects(_AccordionButton,{componentId:MetaConstants.AccordionButton});
+
+var MAX_WIDTH={s:makeSize(Dimensions.get('window').width-size[40]),m:makeSize(size[640]),l:makeSize(size[1136])};var nativeStyles=StyleSheet.create({collapsibleBodyExpanded:{position:'relative'},collapsibleBodyCollapsed:{position:'absolute'}});var MAX_WIDTH_NO_RESTRICTIONS=undefined;
+
+var _excluded$1=["children","direction","defaultIsExpanded","isExpanded","onExpandChange","testID","_shouldApplyWidthRestrictions"];var MIN_WIDTH=makeSize(size[200]);var Collapsible=function Collapsible(_ref){var children=_ref.children,_ref$direction=_ref.direction,direction=_ref$direction===void 0?'bottom':_ref$direction,_ref$defaultIsExpande=_ref.defaultIsExpanded,defaultIsExpanded=_ref$defaultIsExpande===void 0?false:_ref$defaultIsExpande,isExpanded=_ref.isExpanded,onExpandChange=_ref.onExpandChange,testID=_ref.testID,_ref$_shouldApplyWidt=_ref._shouldApplyWidthRestrictions,_shouldApplyWidthRestrictions=_ref$_shouldApplyWidt===void 0?true:_ref$_shouldApplyWidt,styledProps=_objectWithoutProperties(_ref,_excluded$1);var _useState=useState(isExpanded!=null?isExpanded:defaultIsExpanded),_useState2=_slicedToArray(_useState,2),isBodyExpanded=_useState2[0],setIsBodyExpanded=_useState2[1];var collapsibleBodyId=useId(MetaConstants.CollapsibleBody);var initialDefaultExpanded=useRef(Boolean(defaultIsExpanded||isExpanded));var handleExpandChange=useCallback(function(nextIsExpanded){if(typeof isExpanded!=='undefined'){onExpandChange==null?void 0:onExpandChange({isExpanded:nextIsExpanded});}else {setIsBodyExpanded(nextIsExpanded);onExpandChange==null?void 0:onExpandChange({isExpanded:nextIsExpanded});}},[onExpandChange,isExpanded]);var contextValue=useMemo(function(){return {isExpanded:isExpanded!=null?isExpanded:isBodyExpanded,onExpandChange:handleExpandChange,defaultIsExpanded:initialDefaultExpanded.current,direction:direction,collapsibleBodyId:collapsibleBodyId};},[isBodyExpanded,direction,handleExpandChange,isExpanded,collapsibleBodyId]);Children.forEach(children,function(child){if(!(isValidAllowedChildren(child,MetaConstants.CollapsibleBody)||isValidAllowedChildren(child,MetaConstants.CollapsibleButton)||isValidAllowedChildren(child,MetaConstants.CollapsibleLink)||isValidAllowedChildren(child,MetaConstants.AccordionButton))){throw new Error("[Blade: Collapsible]: only the following are supported as valid children: CollapsibleBody, CollapsibleButton, CollapsibleLink");}});return jsx(CollapsibleContext.Provider,{value:contextValue,children:jsx(BaseBox,_extends({display:"flex",flexDirection:direction==='bottom'?'column':'column-reverse',alignItems:"flex-start",minWidth:_shouldApplyWidthRestrictions?MIN_WIDTH:makeSize(size[0]),maxWidth:_shouldApplyWidthRestrictions?MAX_WIDTH:MAX_WIDTH_NO_RESTRICTIONS},metaAttribute({name:MetaConstants.Collapsible,testID:testID}),getStyledProps(styledProps),{children:children}))});};
+
+var getCollapsibleBodyContentBoxProps=function getCollapsibleBodyContentBoxProps(_ref){var direction=_ref.direction;return {marginTop:direction==='bottom'?'spacing.5':'spacing.0',marginBottom:direction==='top'?'spacing.5':'spacing.0'};};var getOpacity=function getOpacity(_ref2){var isExpanded=_ref2.isExpanded;return isExpanded?1:0.8;};var getTransitionDuration=function getTransitionDuration(theme){return makeMotionTime(theme.motion.duration.xmoderate);};var getTransitionEasing=function getTransitionEasing(theme){return theme.motion.easing.standard.effective;};var getCollapsibleChevronIconTransforms=function getCollapsibleChevronIconTransforms(_ref3){var direction=_ref3.direction;var transformExpanded,transformCollapsed;if(direction==='bottom'){transformExpanded=-180;transformCollapsed=0;}else {transformExpanded=0;transformCollapsed=-180;}return {transformExpanded:transformExpanded,transformCollapsed:transformCollapsed};};
 
-var StyledCollapsibleChevronIcon=styled(BaseBox)(function(props){var isExpanded=props.isExpanded,direction=props.direction,theme=props.theme;var transformExpanded,transformCollapsed;if(direction==='bottom'){transformExpanded='rotate(-0.5turn)';transformCollapsed=undefined;}else {transformExpanded=undefined;transformCollapsed='rotate(-0.5turn)';}return {display:'flex',alignItems:'center',transform:isExpanded?transformExpanded:transformCollapsed,transformOrigin:'center center',transitionDuration:castWebType(makeMotionTime(theme.motion.duration.xmoderate)),transitionTimingFunction:castWebType(theme.motion.easing.standard.effective),transitionProperty:'transform'};});var CollapsibleChevronIcon=function CollapsibleChevronIcon(props){var _useCollapsible=useCollapsible(),isExpanded=_useCollapsible.isExpanded,direction=_useCollapsible.direction;return jsx(StyledCollapsibleChevronIcon,_extends({isExpanded:isExpanded,direction:direction},makeAccessible({hidden:true}),{children:jsx(ChevronDownIcon,_extends({},props))}));};
+var CollapsibleChevronIcon=function CollapsibleChevronIcon(props){var _useCollapsible=useCollapsible(),isExpanded=_useCollapsible.isExpanded,direction=_useCollapsible.direction;var _useTheme=useTheme(),theme=_useTheme.theme;var _getCollapsibleChevro=getCollapsibleChevronIconTransforms({direction:direction}),transformExpanded=_getCollapsibleChevro.transformExpanded,transformCollapsed=_getCollapsibleChevro.transformCollapsed;var duration=castNativeType(getTransitionDuration(theme));var easing=castNativeType(getTransitionEasing(theme));var rotateZ=useDerivedValue(function(){var _f=function _f(){return withTiming(isExpanded?transformExpanded:transformCollapsed,{duration:duration,easing:easing});};_f._closure={withTiming:withTiming,isExpanded:isExpanded,transformExpanded:transformExpanded,transformCollapsed:transformCollapsed,duration:duration,easing:easing};_f.asString="function _f(){const{withTiming,isExpanded,transformExpanded,transformCollapsed,duration,easing}=jsThis._closure;{return withTiming(isExpanded?transformExpanded:transformCollapsed,{duration:duration,easing:easing});}}";_f.__workletHash=6055948545361;_f.__location="/home/runner/work/blade/blade/packages/blade/src/components/Collapsible/CollapsibleChevronIcon.native.tsx (24:34)";return _f;}());var animatedStyles=useAnimatedStyle(function(){var _f=function _f(){return {transform:[{rotateZ:rotateZ.value+"deg"}]};};_f._closure={rotateZ:rotateZ};_f.asString="function _f(){const{rotateZ}=jsThis._closure;{return{transform:[{rotateZ:rotateZ.value+\"deg\"}]};}}";_f.__workletHash=15898834984503;_f.__location="/home/runner/work/blade/blade/packages/blade/src/components/Collapsible/CollapsibleChevronIcon.native.tsx (27:42)";_f.__optimalization=3;return _f;}());return jsx(Animated.View,_extends({style:animatedStyles},makeAccessible({hidden:true}),{children:jsx(ChevronDownIcon,_extends({},props))}));};
 
 var _CollapsibleLink=function _CollapsibleLink(_ref){var children=_ref.children,size=_ref.size,isDisabled=_ref.isDisabled,testID=_ref.testID,accessibilityLabel=_ref.accessibilityLabel;var _useCollapsible=useCollapsible(),onExpandChange=_useCollapsible.onExpandChange,isExpanded=_useCollapsible.isExpanded,collapsibleBodyId=_useCollapsible.collapsibleBodyId;var toggleIsExpanded=useCallback(function(){return onExpandChange(!isExpanded);},[onExpandChange,isExpanded]);return jsx(BaseLink,_extends({variant:"button",size:size,icon:CollapsibleChevronIcon,iconPosition:"right",isDisabled:isDisabled,testID:testID,accessibilityLabel:accessibilityLabel,onClick:toggleIsExpanded},makeAccessible({controls:collapsibleBodyId,expanded:isExpanded}),{children:children}));};var CollapsibleLink=assignWithoutSideEffects(_CollapsibleLink,{componentId:MetaConstants.CollapsibleLink});
 
-var _CollapsibleButton=function _CollapsibleButton(_ref,ref){var children=_ref.children,variant=_ref.variant,size=_ref.size,icon=_ref.icon,iconPosition=_ref.iconPosition,isDisabled=_ref.isDisabled,testID=_ref.testID,accessibilityLabel=_ref.accessibilityLabel;var _useCollapsible=useCollapsible(),onExpandChange=_useCollapsible.onExpandChange,isExpanded=_useCollapsible.isExpanded,collapsibleBodyId=_useCollapsible.collapsibleBodyId;var toggleIsExpanded=useCallback(function(){return onExpandChange(!isExpanded);},[onExpandChange,isExpanded]);return jsx(BaseButton,_extends({variant:variant,size:size,icon:icon,iconPosition:iconPosition,isDisabled:isDisabled,testID:testID,accessibilityLabel:accessibilityLabel,ref:ref,onClick:toggleIsExpanded},makeAccessible({controls:collapsibleBodyId,expanded:isExpanded}),{children:children}));};var CollapsibleButton=assignWithoutSideEffects(forwardRef(_CollapsibleButton),{displayName:'CollapsibleButton',componentId:MetaConstants.CollapsibleButton});
+var _CollapsibleButton=function _CollapsibleButton(_ref,ref){var children=_ref.children,variant=_ref.variant,size=_ref.size,icon=_ref.icon,iconPosition=_ref.iconPosition,isDisabled=_ref.isDisabled,testID=_ref.testID,accessibilityLabel=_ref.accessibilityLabel;var _useCollapsible=useCollapsible(),onExpandChange=_useCollapsible.onExpandChange,isExpanded=_useCollapsible.isExpanded,collapsibleBodyId=_useCollapsible.collapsibleBodyId;var toggleIsExpanded=useCallback(function(){return onExpandChange(!isExpanded);},[onExpandChange,isExpanded]);return jsx(BaseButton,_extends({variant:variant,size:size,icon:icon,iconPosition:iconPosition,isDisabled:isDisabled,testID:testID,accessibilityLabel:accessibilityLabel,ref:ref,onClick:toggleIsExpanded,alignSelf:isReactNative$4()?'flex-start':undefined},makeAccessible({controls:collapsibleBodyId,expanded:isExpanded}),{children:children}));};var CollapsibleButton=assignWithoutSideEffects(forwardRef(_CollapsibleButton),{displayName:'CollapsibleButton',componentId:MetaConstants.CollapsibleButton});
 
-var CollapsibleBodyContent=function CollapsibleBodyContent(_ref){var children=_ref.children;return jsxs(Text,{children:["To implement ",children]});};
+var AnimatedStyledCollapsibleBodyContent=styled(Animated.View)(function(){return {overflow:'hidden'};});var CollapsibleBodyContent=function CollapsibleBodyContent(_ref){var children=_ref.children;var _useCollapsible=useCollapsible(),isExpanded=_useCollapsible.isExpanded,direction=_useCollapsible.direction;var _useTheme=useTheme(),theme=_useTheme.theme;var opacity=useSharedValue(getOpacity({isExpanded:isExpanded}));var height=useSharedValue(isExpanded?undefined:0);var _useState=useState(0),_useState2=_slicedToArray(_useState,2),layoutHeight=_useState2[0],setLayoutHeight=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isAnimating=_useState4[0],setIsAnimating=_useState4[1];var onAnimationComplete=useCallback(function(){return setIsAnimating(false);},[]);var duration=castNativeType(getTransitionDuration(theme));var easing=castNativeType(getTransitionEasing(theme));useEffect(function(){setIsAnimating(true);opacity.value=withTiming(getOpacity({isExpanded:isExpanded}),{duration:duration,easing:easing});height.value=withTiming(isExpanded&&layoutHeight?layoutHeight:0,{duration:duration,easing:easing},function(){var _f=function _f(isComplete){if(isComplete){runOnJS(onAnimationComplete)();}};_f._closure={runOnJS:runOnJS,onAnimationComplete:onAnimationComplete};_f.asString="function _f(isComplete){const{runOnJS,onAnimationComplete}=jsThis._closure;{if(isComplete){runOnJS(onAnimationComplete)();}}}";_f.__workletHash=4406217461016;_f.__location="/home/runner/work/blade/blade/packages/blade/src/components/Collapsible/CollapsibleBodyContent.native.tsx (62:6)";return _f;}());},[isExpanded,opacity,duration,easing,height,layoutHeight,onAnimationComplete]);var animatedStyles=useAnimatedStyle(function(){var _f=function _f(){return {opacity:opacity.value,height:height.value};};_f._closure={opacity:opacity,height:height};_f.asString="function _f(){const{opacity,height}=jsThis._closure;{return{opacity:opacity.value,height:height.value};}}";_f.__workletHash=2328932565878;_f.__location="/home/runner/work/blade/blade/packages/blade/src/components/Collapsible/CollapsibleBodyContent.native.tsx (72:42)";_f.__optimalization=3;return _f;}());var onLayout=useCallback(function(event){if(event.nativeEvent.layout.height>layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}},[layoutHeight]);return jsx(AnimatedStyledCollapsibleBodyContent,{isExpanded:isExpanded,style:animatedStyles,children:jsx(View,{onLayout:onLayout,style:isExpanded||isAnimating?nativeStyles.collapsibleBodyExpanded:nativeStyles.collapsibleBodyCollapsed,children:jsx(Box,_extends({},getCollapsibleBodyContentBoxProps({direction:direction}),{children:children}))})});};
 
 var _CollapsibleBody=function _CollapsibleBody(_ref){var children=_ref.children,testID=_ref.testID;var _useCollapsible=useCollapsible(),collapsibleBodyId=_useCollapsible.collapsibleBodyId;return jsx(BaseBox,_extends({id:collapsibleBodyId},makeAccessible({role:'region'}),metaAttribute({name:MetaConstants.CollapsibleBody,testID:testID}),{children:jsx(CollapsibleBodyContent,{children:children})}));};var CollapsibleBody=assignWithoutSideEffects(_CollapsibleBody,{componentId:MetaConstants.CollapsibleBody});