@razorpay/blade 5.4.0 → 5.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @razorpay/blade
 
+## 5.4.2
+
+### Patch Changes
+
+- da470b0: fix: remove `maxWidth` from Badge
+
+## 5.4.1
+
+### Patch Changes
+
+- 7eb6e4c: feat(Code): Use alpha 50 token in Code component's background
+
 ## 5.4.0
 
 ### Minor Changes

package/build/components/index.native.js

@@ -3341,7 +3341,7 @@ var getProps$2=function getProps(_ref){var variant=_ref.variant,size=_ref.size,t
 
 var getTextProps=function getTextProps(_ref){var variant=_ref.variant,type=_ref.type,weight=_ref.weight,size=_ref.size,contrast=_ref.contrast;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:100,fontWeight:weight!=null?weight:'regular',fontStyle:'normal',lineHeight:'l',fontFamily:'text',forwardedAs:isPlatformWeb?'p':undefined,componentName:'text'};if(variant==='body'){if(size==='small'){props.fontSize=75;props.lineHeight='s';}}else if(variant==='caption'){if(size==='small'){throw new Error("[Blade: Text]: size cannot be 'small' when variant is 'caption'");}props.fontSize=50;props.lineHeight='s';props.fontStyle='italic';}return props;};var StyledText=styled(BaseText)(function(_ref2){var truncateAfterLines=_ref2.truncateAfterLines;if(truncateAfterLines){if(getPlatformType()==='react-native'){return null;}return {overflow:'hidden',display:'-webkit-box','line-clamp':""+truncateAfterLines,'-webkit-line-clamp':""+truncateAfterLines,'-webkit-box-orient':'vertical'};}return {};});var Text=function Text(_ref3){var _ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'body':_ref3$variant,_ref3$weight=_ref3.weight,weight=_ref3$weight===void 0?'regular':_ref3$weight,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,_ref3$type=_ref3.type,type=_ref3$type===void 0?'normal':_ref3$type,_ref3$contrast=_ref3.contrast,contrast=_ref3$contrast===void 0?'low':_ref3$contrast,truncateAfterLines=_ref3.truncateAfterLines,children=_ref3.children,color=_ref3.color;var props=_extends({truncateAfterLines:truncateAfterLines},getTextProps({variant:variant,type:type,weight:weight,size:size,contrast:contrast}),color?{color:color}:{});return jsx(StyledText,_extends({},props,{children:children}));};
 
-var platformType=getPlatformType();var isPlatformWeb=platformType==='browser'||platformType==='node';var getCodeFontSize=function getCodeFontSize(size){switch(size){case'medium':return 100;default:return 75;}};var CodeContainer=styled(Box)(function(props){var padding=makeSpace(props.theme.spacing[0])+" "+makeSpace(props.theme.spacing[2]);return {padding:padding,backgroundColor:props.theme.colors.brand.gray[400].lowContrast,borderRadius:props.theme.border.radius.medium,display:isPlatformWeb?'inline-block':undefined,lineHeight:makeTypographySize(props.theme.typography.lineHeights.s)};});var Code=function Code(_ref){var children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size;return jsx(CodeContainer,_extends({size:size,as:isPlatformWeb?'span':undefined},metaAttribute(),{children:jsx(BaseText,{color:"surface.text.subtle.lowContrast",fontFamily:"code",fontSize:getCodeFontSize(size),as:isPlatformWeb?'code':undefined,children:children})}));};
+var platformType=getPlatformType();var isPlatformWeb=platformType==='browser'||platformType==='node';var getCodeFontSize=function getCodeFontSize(size){switch(size){case'medium':return 100;default:return 75;}};var CodeContainer=styled(Box)(function(props){var padding=makeSpace(props.theme.spacing[0])+" "+makeSpace(props.theme.spacing[2]);return {padding:padding,backgroundColor:props.theme.colors.brand.gray.a50.lowContrast,borderRadius:props.theme.border.radius.medium,display:isPlatformWeb?'inline-block':undefined,lineHeight:makeTypographySize(props.theme.typography.lineHeights.s)};});var Code=function Code(_ref){var children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size;return jsx(CodeContainer,_extends({size:size,as:isPlatformWeb?'span':undefined},metaAttribute(),{children:jsx(BaseText,{color:"surface.text.subtle.lowContrast",fontFamily:"code",fontSize:getCodeFontSize(size),as:isPlatformWeb?'code':undefined,children:children})}));};
 
 var getBaseButtonStyles=function getBaseButtonStyles(_ref){var defaultBorderColor=_ref.defaultBorderColor,minHeight=_ref.minHeight,buttonPaddingTop=_ref.buttonPaddingTop,buttonPaddingBottom=_ref.buttonPaddingBottom,buttonPaddingLeft=_ref.buttonPaddingLeft,buttonPaddingRight=_ref.buttonPaddingRight,defaultBackgroundColor=_ref.defaultBackgroundColor,disabled=_ref.disabled,isFullWidth=_ref.isFullWidth,borderWidth=_ref.borderWidth,borderRadius=_ref.borderRadius;return {minHeight:minHeight,width:isFullWidth?'100%':'auto',cursor:disabled?'not-allowed':'pointer',backgroundColor:defaultBackgroundColor,borderColor:defaultBorderColor,borderWidth:borderWidth,borderRadius:borderRadius,borderStyle:'solid',paddingTop:buttonPaddingTop,paddingBottom:buttonPaddingBottom,paddingLeft:buttonPaddingLeft,paddingRight:buttonPaddingRight};};
 
@@ -3371,13 +3371,13 @@ var _excluded$3=["currentInteraction","setCurrentInteraction"];var getColorToken
 
 var isReactNative$3=getPlatformType()==='react-native';var CloseButtonWrapper=isReactNative$3?Box:Fragment;var intentIconMap={positive:CheckCircleIcon,negative:AlertTriangleIcon,information:InfoIcon,neutral:InfoIcon,notice:AlertTriangleIcon$1};var Alert=function Alert(_ref){var description=_ref.description,title=_ref.title,_ref$isDismissable=_ref.isDismissable,isDismissable=_ref$isDismissable===void 0?true:_ref$isDismissable,onDismiss=_ref.onDismiss,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast,_ref$isFullWidth=_ref.isFullWidth,isFullWidth=_ref$isFullWidth===void 0?false:_ref$isFullWidth,_ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,actions=_ref.actions;if(!(actions!=null&&actions.primary)&&actions!=null&&actions.secondary){throw new Error('[Blade: Alert]: SecondaryAction is allowed only when PrimaryAction is defined.');}var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isMobile=!isDesktop;var _useState=useState(true),_useState2=_slicedToArray(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1];var contrastType=contrast+"Contrast";var iconSize=isFullWidth?'large':'medium';var textSize=isFullWidth?'medium':'small';var Icon=intentIconMap[intent];var iconOffset='spacing.1';if(isReactNative$3){if(isFullWidth&&!title){iconOffset='spacing.1';}else if(!isFullWidth&&!title){iconOffset='spacing.0';}else if(!isFullWidth&&title){iconOffset='spacing.2';}}else if(isMobile){if(!isFullWidth&&title){iconOffset='spacing.2';}else if(isFullWidth&&!title){iconOffset='spacing.2';}}else if(isFullWidth){iconOffset='spacing.0';}var icon=jsx(Box,{marginTop:iconOffset,display:"flex",children:jsx(Icon,{color:"feedback.icon."+intent+"."+contrastType,size:iconSize})});var _title=title?jsx(Box,{marginBottom:"spacing.2",children:isFullWidth?jsx(Heading,{size:"small",contrast:contrast,children:title}):jsx(Text,{weight:"bold",contrast:contrast,children:title})}):null;var _description=jsx(Box,{marginTop:title||isReactNative$3?'spacing.0':'spacing.1',children:jsx(Text,{size:textSize,contrast:contrast,children:description})});var primaryAction=actions!=null&&actions.primary?jsx(Box,{marginRight:"spacing.5",display:isReactNative$3?'flex':'inline-flex',children:jsx(BaseButton,{size:textSize,onClick:actions.primary.onClick,intent:intent,contrast:contrast,children:actions.primary.text})}):null;var secondaryActionParams=actions!=null&&actions.secondary?{onClick:actions.secondary.onClick}:null;if(actions!=null&&actions.secondary&&secondaryActionParams&&'href'in actions.secondary){secondaryActionParams.href=actions.secondary.href;secondaryActionParams.target=actions.secondary.target;secondaryActionParams.rel=actions.secondary.rel;}var secondaryAction=actions!=null&&actions.secondary?jsx(Box,{marginRight:"spacing.4",display:isReactNative$3?'flex':'inline-flex',children:jsx(BaseLink,_extends({size:textSize,contrast:contrast,intent:intent},secondaryActionParams,{children:actions.secondary.text}))}):null;var showActionsHorizontal=isFullWidth&&isDesktop;var actionsHorizontal=showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(Box,{flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var actionsVertical=!showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(Box,{marginTop:"spacing.4",flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var onClickDismiss=function onClickDismiss(){if(onDismiss){onDismiss();}setIsVisible(false);};var closeButton=isDismissable?jsx(CloseButtonWrapper,{children:jsx(IconButton,{accessibilityLabel:"Dismiss alert",onClick:onClickDismiss,contrast:contrast,size:iconSize,icon:CloseIcon})}):null;var a11yProps=makeAccessible(_extends({role:isReactNative$3||intent==='negative'||intent==='notice'?'alert':'status'},intent==='notice'&&{liveRegion:'polite'}));if(!isVisible){return null;}return jsxs(StyledAlert,_extends({intent:intent,contrastType:contrastType,isFullWidth:isFullWidth,isDesktop:isDesktop},a11yProps,metaAttribute(),{children:[icon,jsxs(Box,{flex:1,paddingLeft:isFullWidth?'spacing.4':'spacing.3',paddingRight:showActionsHorizontal?'spacing.4':'spacing.2',children:[_title,_description,actionsVertical]}),actionsHorizontal,closeButton]}));};
 
-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 maxWidth$1={onMobile:100,onDesktop:120};
-
-var getStyledBadgeStyles=function getStyledBadgeStyles(_ref){var theme=_ref.theme,platform=_ref.platform,backgroundColor=_ref.backgroundColor;return {backgroundColor:get_1(theme.colors,backgroundColor),borderRadius:makeBorderSize(theme.border.radius.max),maxWidth:makeSize(maxWidth$1[platform]),display:'flex',flexWrap:'nowrap'};};
+var getStyledBadgeStyles=function getStyledBadgeStyles(_ref){var theme=_ref.theme,backgroundColor=_ref.backgroundColor;return {backgroundColor:get_1(theme.colors,backgroundColor),borderRadius:makeBorderSize(theme.border.radius.max),display:'flex',flexWrap:'nowrap'};};
 
 var StyledBadge=styled.View(function(props){return _extends({},getStyledBadgeStyles(props),{alignSelf:'center'});});
 
-var isFeedbackVariant=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(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;if(!(children!=null&&children.trim())){throw new Error('[Blade: Badge]: Text as children is required for Badge.');}var _useTheme=useTheme(),platform=_useTheme.platform;var _getColorProps=getColorProps$1({variant:variant,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,iconColor=_getColorProps.iconColor,textColor=_getColorProps.textColor;return jsx(StyledBadge,_extends({backgroundColor:backgroundColor,size:size,platform:platform},metaAttribute(),{children:jsxs(Box,{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(Box,{paddingRight:Boolean(Icon)?iconPadding[size]:'spacing.0',display:"flex",children:jsx(Icon,{color:iconColor,size:iconSize[size]})}):null,jsx(Text,_extends({},size==='small'?{variant:'caption'}:{variant:'body',size:'small'},{type:"normal",weight:fontWeight,truncateAfterLines:1,color:textColor,children:children}))]})}));};
+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 isFeedbackVariant=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(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;if(!(children!=null&&children.trim())){throw new Error('[Blade: Badge]: Text as children is required for Badge.');}var _getColorProps=getColorProps$1({variant:variant,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,iconColor=_getColorProps.iconColor,textColor=_getColorProps.textColor;return jsx(StyledBadge,_extends({backgroundColor:backgroundColor,size:size},metaAttribute(),{children:jsxs(Box,{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(Box,{paddingRight:Boolean(Icon)?iconPadding[size]:'spacing.0',display:"flex",children:jsx(Icon,{color:iconColor,size:iconSize[size]})}):null,jsx(Text,_extends({},size==='small'?{variant:'caption'}:{variant:'body',size:'small'},{type:"normal",weight:fontWeight,truncateAfterLines:1,color:textColor,children:children}))]})}));};
 
 var _excluded$2=["children","surfaceLevel"];var isAndroid=Platform.OS==='android';var androidShadow={color:undefined,elevation:2};var CardSurfaceStyled=styled(Box)(function(_ref){var surfaceLevel=_ref.surfaceLevel,theme=_ref.theme;var backgroundColor=theme.colors.surface.background["level"+surfaceLevel].lowContrast;return {width:'100%',display:'flex',flexDirection:'column',shadowOpacity:'1',shadowRadius:theme.shadows.blurRadius.level[1],shadowColor:isAndroid?androidShadow.color:theme.shadows.color.level[1],shadowOffset:"0px "+theme.shadows.offsetY.level[1]+"px",backgroundColor:backgroundColor};});var CardSurface=function CardSurface(_ref2){var children=_ref2.children,surfaceLevel=_ref2.surfaceLevel,props=_objectWithoutProperties(_ref2,_excluded$2);var _useTheme=useTheme(),theme=_useTheme.theme;return jsx(CardSurfaceStyled,_extends({},props,{surfaceLevel:surfaceLevel,elevation:isAndroid?androidShadow.elevation:theme.shadows.androidElevation.level[1],children:children}));};
 
@@ -3499,7 +3499,7 @@ var PasswordInput=function PasswordInput(_ref){var label=_ref.label,_ref$labelPo
 
 var isReactNative$1=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var TextArea=function TextArea(_ref){var label=_ref.label,labelPosition=_ref.labelPosition,necessityIndicator=_ref.necessityIndicator,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,validationState=_ref.validationState,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,name=_ref.name,onBlur=_ref.onBlur,_onChange=_ref.onChange,placeholder=_ref.placeholder,value=_ref.value,maxCharacters=_ref.maxCharacters,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,autoFocus=_ref.autoFocus,_ref$numberOfLines=_ref.numberOfLines,numberOfLines=_ref$numberOfLines===void 0?2:_ref$numberOfLines;var inputRef=React__default.useRef(null);var _React$useState=React__default.useState(Boolean(showClearButton&&((value==null?void 0:value.length)||(defaultValue==null?void 0:defaultValue.length)))),_React$useState2=_slicedToArray(_React$useState,2),shouldShowClearButton=_React$useState2[0],setShouldShowClearButton=_React$useState2[1];var renderInteractionElement=function renderInteractionElement(){if(shouldShowClearButton){return jsx(Box,{paddingTop:"spacing.3",marginTop:"spacing.1",children:jsx(IconButton,{icon:CloseIcon,accessibilityLabel:"Clear textarea content",onClick:function onClick(){var _inputRef$current;if(isEmpty_1(value)&&inputRef.current){if(isReactNative$1(inputRef.current)){inputRef.current.clear();inputRef.current.focus();}else if(inputRef.current instanceof HTMLTextAreaElement){inputRef.current.value='';inputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();inputRef==null?void 0:(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();setShouldShowClearButton(false);}})});}return null;};return jsx(BaseInput,{as:"textarea",id:"textarea",componentName:"textarea",autoFocus:autoFocus,ref:inputRef,label:label,labelPosition:labelPosition,necessityIndicator:necessityIndicator,errorText:errorText,helpText:helpText,successText:successText,validationState:validationState,isDisabled:isDisabled,isRequired:isRequired,name:name,maxCharacters:maxCharacters,onBlur:onBlur,placeholder:placeholder,interactionElement:renderInteractionElement(),defaultValue:defaultValue,value:value,numberOfLines:numberOfLines,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}_onChange==null?void 0:_onChange({name:name,value:value});},trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(Box,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;}});};
 
-var isReactNative=getPlatformType()==='react-native';var otpToArray=function otpToArray(code){var _code$split;return (_code$split=code==null?void 0:code.split(''))!=null?_code$split:Array(6).fill('');};var OTPInput=function OTPInput(_ref){var autoFocus=_ref.autoFocus,errorText=_ref.errorText,helpText=_ref.helpText,isDisabled=_ref.isDisabled,keyboardReturnKeyType=_ref.keyboardReturnKeyType,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?'decimal':_ref$keyboardType,label=_ref.label,labelPosition=_ref.labelPosition,name=_ref.name,onChange=_ref.onChange,onOTPFilled=_ref.onOTPFilled,_ref$otpLength=_ref.otpLength,otpLength=_ref$otpLength===void 0?6:_ref$otpLength,placeholder=_ref.placeholder,successText=_ref.successText,validationState=_ref.validationState,inputValue=_ref.value,isMasked=_ref.isMasked;var inputRefs=[];var _useState=useState(otpToArray(inputValue)),_useState2=_slicedToArray(_useState,2),otpValue=_useState2[0],setOtpValue=_useState2[1];var isLabelLeftPositioned=labelPosition==='left';var _useFormId=useFormId('otp'),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;var _useTheme=useTheme(),platform=_useTheme.platform;useEffect(function(){if(inputValue&&inputValue.length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:inputValue.slice(0,otpLength),name:name});}else if(!inputValue&&otpValue.join('').length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:otpValue.slice(0,otpLength).join(''),name:name});}},[otpValue,otpLength,name,inputValue,onOTPFilled]);var setOtpValueByIndex=function setOtpValueByIndex(_ref2){var value=_ref2.value,index=_ref2.index;var newOtpValue=Array.from(otpValue);newOtpValue[index]=value;setOtpValue(newOtpValue);return newOtpValue.join('');};var focusOnOtpByIndex=function focusOnOtpByIndex(index){var _inputRefs$index,_inputRefs$index$curr;(_inputRefs$index=inputRefs[index])==null?void 0:(_inputRefs$index$curr=_inputRefs$index.current)==null?void 0:_inputRefs$index$curr.focus();if(!isReactNative){var _inputRefs$index2,_inputRefs$index2$cur;(_inputRefs$index2=inputRefs[index])==null?void 0:(_inputRefs$index2$cur=_inputRefs$index2.current)==null?void 0:_inputRefs$index2$cur.select();}};var handleOnChange=function handleOnChange(_ref3){var value=_ref3.value,currentOtpIndex=_ref3.currentOtpIndex;if(value&&value===' '){return;}if(inputValue&&inputValue.length>0){var newOtpValue=Array.from(inputValue);newOtpValue[currentOtpIndex]=value!=null?value:'';setOtpValue(newOtpValue);onChange==null?void 0:onChange({name:name,value:newOtpValue.join('')});}else if(value&&value.trim().length>1){setOtpValue(Array.from(value));onChange==null?void 0:onChange({name:name,value:value.trim().slice(0,otpLength)});}else if(otpValue[currentOtpIndex]!==(value==null?void 0:value.trim())){var _value$trim;var newValue=setOtpValueByIndex({value:(_value$trim=value==null?void 0:value.trim())!=null?_value$trim:'',index:currentOtpIndex});onChange==null?void 0:onChange({name:name,value:newValue});}};var handleOnInput=function handleOnInput(_ref4){var value=_ref4.value,currentOtpIndex=_ref4.currentOtpIndex;if(value&&value.trim().length===1){focusOnOtpByIndex(++currentOtpIndex);}};var handleOnKeyDown=function handleOnKeyDown(_ref5){var key=_ref5.key,code=_ref5.code,event=_ref5.event,currentOtpIndex=_ref5.currentOtpIndex;if(key==='Backspace'||code==='Backspace'||code==='Delete'||key==='Delete'){event.preventDefault==null?void 0:event.preventDefault();handleOnChange({value:'',currentOtpIndex:currentOtpIndex});focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowLeft'||code==='ArrowLeft'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowRight'||code==='ArrowRight'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(++currentOtpIndex);}else if(key===' '||code==='Space'){event.preventDefault==null?void 0:event.preventDefault();}};var getHiddenInput=function getHiddenInput(){if(!isReactNative){var _ref6;return jsx("input",{hidden:true,id:inputId,name:name,value:(_ref6=inputValue!=null?inputValue:otpValue.join(''))!=null?_ref6:''});}return null;};var getOTPInputFields=function getOTPInputFields(){var inputs=[];var _loop=function _loop(index){var _otpValue$index,_Array$from$index;var currentValue=inputValue?otpToArray(inputValue)[index]||'':otpValue[index]||'';var ref=React__default.createRef();inputRefs.push(ref);inputs.push(jsx(Box,{flex:1,marginLeft:index==0?'spacing.0':'spacing.3',maxWidth:platform==='onDesktop'?36:40,children:jsx(BaseInput,{autoFocus:autoFocus&&index===0,accessibilityLabel:(index===0?label:'')+" character "+(index+1),label:label,hideLabelText:true,id:inputId+"-"+index,textAlign:"center",ref:ref,value:currentValue,maxCharacters:((_otpValue$index=otpValue[index])==null?void 0:_otpValue$index.length)>0?1:undefined,onChange:function onChange(formEvent){return handleOnChange(_extends({},formEvent,{currentOtpIndex:index}));},onInput:function onInput(formEvent){return handleOnInput(_extends({},formEvent,{currentOtpIndex:index}));},onKeyDown:function onKeyDown(keyboardEvent){return handleOnKeyDown(_extends({},keyboardEvent,{currentOtpIndex:index}));},isDisabled:isDisabled,placeholder:(_Array$from$index=Array.from(placeholder!=null?placeholder:'')[index])!=null?_Array$from$index:'',isRequired:true,autoCompleteSuggestionType:"oneTimeCode",keyboardType:keyboardType,keyboardReturnKeyType:keyboardReturnKeyType,validationState:validationState,successText:successText,errorText:errorText,helpText:helpText,hideFormHint:true,type:isMasked?'password':undefined})},inputId+"-"+index));};for(var index=0;index<otpLength;index++){_loop(index);}return inputs;};return jsxs(Box,_extends({},metaAttribute(),{children:[jsxs(Box,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",children:[jsx(FormLabel,{as:"label",position:labelPosition,htmlFor:inputId,children:label}),jsxs(Box,{display:"flex",flexDirection:"row",children:[getHiddenInput(),getOTPInputFields()]})]}),jsx(Box,{marginLeft:isLabelLeftPositioned?136:0,children:jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId})})]}));};
+var isReactNative=getPlatformType()==='react-native';var otpToArray=function otpToArray(code){var _code$split;return (_code$split=code==null?void 0:code.split(''))!=null?_code$split:Array(6).fill('');};var OTPInput=function OTPInput(_ref){var autoFocus=_ref.autoFocus,errorText=_ref.errorText,helpText=_ref.helpText,isDisabled=_ref.isDisabled,keyboardReturnKeyType=_ref.keyboardReturnKeyType,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?'decimal':_ref$keyboardType,label=_ref.label,labelPosition=_ref.labelPosition,name=_ref.name,onChange=_ref.onChange,onOTPFilled=_ref.onOTPFilled,_ref$otpLength=_ref.otpLength,otpLength=_ref$otpLength===void 0?6:_ref$otpLength,placeholder=_ref.placeholder,successText=_ref.successText,validationState=_ref.validationState,inputValue=_ref.value,isMasked=_ref.isMasked;var inputRefs=[];var _useState=useState(otpToArray(inputValue)),_useState2=_slicedToArray(_useState,2),otpValue=_useState2[0],setOtpValue=_useState2[1];var isLabelLeftPositioned=labelPosition==='left';var _useFormId=useFormId('otp'),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;var _useTheme=useTheme(),platform=_useTheme.platform;useEffect(function(){if(inputValue&&inputValue.length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:inputValue.slice(0,otpLength),name:name});}else if(!inputValue&&otpValue.join('').length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:otpValue.slice(0,otpLength).join(''),name:name});}},[otpValue,otpLength,name,inputValue,onOTPFilled]);var setOtpValueByIndex=function setOtpValueByIndex(_ref2){var value=_ref2.value,index=_ref2.index;var newOtpValue=Array.from(otpValue);newOtpValue[index]=value;setOtpValue(newOtpValue);return newOtpValue.join('');};var focusOnOtpByIndex=function focusOnOtpByIndex(index){var _inputRefs$index,_inputRefs$index$curr;(_inputRefs$index=inputRefs[index])==null?void 0:(_inputRefs$index$curr=_inputRefs$index.current)==null?void 0:_inputRefs$index$curr.focus();if(!isReactNative){var _inputRefs$index2,_inputRefs$index2$cur;(_inputRefs$index2=inputRefs[index])==null?void 0:(_inputRefs$index2$cur=_inputRefs$index2.current)==null?void 0:_inputRefs$index2$cur.select();}};var handleOnChange=function handleOnChange(_ref3){var value=_ref3.value,currentOtpIndex=_ref3.currentOtpIndex;if(value&&value===' '){return;}if(inputValue&&inputValue.length>0){var newOtpValue=Array.from(inputValue);newOtpValue[currentOtpIndex]=value!=null?value:'';setOtpValue(newOtpValue);onChange==null?void 0:onChange({name:name,value:newOtpValue.join('')});}else if(value&&value.trim().length>1){setOtpValue(Array.from(value));onChange==null?void 0:onChange({name:name,value:value.trim().slice(0,otpLength)});}else if(otpValue[currentOtpIndex]!==(value==null?void 0:value.trim())){var _value$trim;var newValue=setOtpValueByIndex({value:(_value$trim=value==null?void 0:value.trim())!=null?_value$trim:'',index:currentOtpIndex});onChange==null?void 0:onChange({name:name,value:newValue});}};var handleOnInput=function handleOnInput(_ref4){var value=_ref4.value,currentOtpIndex=_ref4.currentOtpIndex;if(value&&value.trim().length===1){focusOnOtpByIndex(++currentOtpIndex);}};var handleOnKeyDown=function handleOnKeyDown(_ref5){var key=_ref5.key,code=_ref5.code,event=_ref5.event,currentOtpIndex=_ref5.currentOtpIndex;if(key==='Backspace'||code==='Backspace'||code==='Delete'||key==='Delete'){event.preventDefault==null?void 0:event.preventDefault();handleOnChange({value:'',currentOtpIndex:currentOtpIndex});focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowLeft'||code==='ArrowLeft'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowRight'||code==='ArrowRight'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(++currentOtpIndex);}else if(key===' '||code==='Space'){event.preventDefault==null?void 0:event.preventDefault();}};var getHiddenInput=function getHiddenInput(){if(!isReactNative){var _ref6;return jsx("input",{hidden:true,id:inputId,name:name,value:(_ref6=inputValue!=null?inputValue:otpValue.join(''))!=null?_ref6:'',readOnly:true});}return null;};var getOTPInputFields=function getOTPInputFields(){var inputs=[];var _loop=function _loop(index){var _otpValue$index,_Array$from$index;var currentValue=inputValue?otpToArray(inputValue)[index]||'':otpValue[index]||'';var ref=React__default.createRef();inputRefs.push(ref);inputs.push(jsx(Box,{flex:1,marginLeft:index==0?'spacing.0':'spacing.3',maxWidth:platform==='onDesktop'?36:40,children:jsx(BaseInput,{autoFocus:autoFocus&&index===0,accessibilityLabel:(index===0?label:'')+" character "+(index+1),label:label,hideLabelText:true,id:inputId+"-"+index,textAlign:"center",ref:ref,value:currentValue,maxCharacters:((_otpValue$index=otpValue[index])==null?void 0:_otpValue$index.length)>0?1:undefined,onChange:function onChange(formEvent){return handleOnChange(_extends({},formEvent,{currentOtpIndex:index}));},onInput:function onInput(formEvent){return handleOnInput(_extends({},formEvent,{currentOtpIndex:index}));},onKeyDown:function onKeyDown(keyboardEvent){return handleOnKeyDown(_extends({},keyboardEvent,{currentOtpIndex:index}));},isDisabled:isDisabled,placeholder:(_Array$from$index=Array.from(placeholder!=null?placeholder:'')[index])!=null?_Array$from$index:'',isRequired:true,autoCompleteSuggestionType:"oneTimeCode",keyboardType:keyboardType,keyboardReturnKeyType:keyboardReturnKeyType,validationState:validationState,successText:successText,errorText:errorText,helpText:helpText,hideFormHint:true,type:isMasked?'password':undefined})},inputId+"-"+index));};for(var index=0;index<otpLength;index++){_loop(index);}return inputs;};return jsxs(Box,_extends({},metaAttribute(),{children:[jsxs(Box,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",children:[jsx(FormLabel,{as:"label",position:labelPosition,htmlFor:inputId,children:label}),jsxs(Box,{display:"flex",flexDirection:"row",children:[getHiddenInput(),getOTPInputFields()]})]}),jsx(Box,{marginLeft:isLabelLeftPositioned?136:0,children:jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId})})]}));};
 
 var Circle=function Circle(_ref){var cx=_ref.cx,cy=_ref.cy,x=_ref.x,y=_ref.y,r=_ref.r,fill=_ref.fill,stroke=_ref.stroke,strokeWidth=_ref.strokeWidth;return jsx(Circle$1,{cx:cx,cy:cy,x:x,y:y,r:r,fill:fill,stroke:stroke,strokeWidth:strokeWidth});};
 
@@ -3699,7 +3699,7 @@ var Radio=function Radio(_ref){var _groupProps$state,_groupProps$size;var value=
 
 var useRadioGroup=function useRadioGroup(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,labelPosition=_ref.labelPosition,_onChange=_ref.onChange,validationState=_ref.validationState,necessityIndicator=_ref.necessityIndicator,name=_ref.name,size=_ref.size;var _useTheme=useTheme(),platform=_useTheme.platform;var idBase=useId('radio-group');var labelId=idBase+"-label";var fallbackName=name!=null?name:idBase;var _useControllableState=useControllableState({value:value,defaultValue:defaultValue,onChange:function onChange(v){return _onChange==null?void 0:_onChange({value:v,name:fallbackName});}}),_useControllableState2=_slicedToArray(_useControllableState,2),checkedValue=_useControllableState2[0],setValue=_useControllableState2[1];var state=React__default.useMemo(function(){return {value:checkedValue,setValue:function(_setValue){function setValue(_x){return _setValue.apply(this,arguments);}setValue.toString=function(){return _setValue.toString();};return setValue;}(function(v){if(isDisabled){return;}setValue(function(){return v;});}),removeValue:function removeValue(){if(isDisabled){return;}setValue(undefined);},isChecked:function isChecked(v){if(isUndefined_1(v)||isUndefined_1(checkedValue))return false;return checkedValue===v;}};},[checkedValue,isDisabled,setValue]);var contextValue=React__default.useMemo(function(){return {necessityIndicator:necessityIndicator,validationState:validationState,isDisabled:isDisabled,labelPosition:platform==='onMobile'?'top':labelPosition,name:fallbackName,state:state,size:size};},[validationState,isDisabled,platform,labelPosition,state,fallbackName,necessityIndicator,size]);return {state:state,contextValue:contextValue,ids:{labelId:labelId}};};
 
-var RadioGroup=function RadioGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_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,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_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;var _useRadioGroup=useRadioGroup({defaultValue:defaultValue,isDisabled:isDisabled,labelPosition:labelPosition,name:name,onChange:onChange,validationState:validationState,value:value,size:size}),contextValue=_useRadioGroup.contextValue,ids=_useRadioGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=","+(showError?errorText:'')+" "+(showHelpText?helpText:'');var isReactNative=getPlatformType()==='react-native';var gap=radioSizes.group.gap[size][matchedDeviceType];var childCount=React__default.Children.count(children);return jsx(RadioGroupProvider,{value:contextValue,children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,accessibilityRole:isReactNative?'radiogroup':'group',componentName:"radio-group",children:[jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,children:label}),jsxs(Box,{children:[jsx(Box,{display:"flex",flexDirection:"column",children:React__default.Children.map(children,function(child,index){return jsx(Box,{marginBottom:index===childCount-1?0:gap,children:child},index);})}),jsx(FormHint,{type:validationState==='error'?'error':'help',errorText:errorText,helpText:helpText})]})]})});};
+var RadioGroup=function RadioGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_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,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_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;var _useRadioGroup=useRadioGroup({defaultValue:defaultValue,isDisabled:isDisabled,labelPosition:labelPosition,name:name,onChange:onChange,validationState:validationState,value:value,size:size}),contextValue=_useRadioGroup.contextValue,ids=_useRadioGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=((showError?errorText:'')+" "+(showHelpText?helpText:'')).trim();var isReactNative=getPlatformType()==='react-native';var gap=radioSizes.group.gap[size][matchedDeviceType];var childCount=React__default.Children.count(children);return jsx(RadioGroupProvider,{value:contextValue,children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,accessibilityRole:isReactNative?'radiogroup':'group',componentName:"radio-group",children:[jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText&&","+accessibilityText,children:label}),jsxs(Box,{children:[jsx(Box,{display:"flex",flexDirection:"column",children:React__default.Children.map(children,function(child,index){return jsx(Box,{marginBottom:index===childCount-1?0:gap,children:child},index);})}),jsx(FormHint,{type:validationState==='error'?'error':'help',errorText:errorText,helpText:helpText})]})]})});};
 
 var SkipNavLink=function SkipNavLink(_props){throw new Error('[Blade: SkipNav]: SkipNavLink is not available on React Native');};var SkipNavContent=function SkipNavContent(_props){throw new Error('[Blade: SkipNav]: SkipNavContent is not available on React Native');};