@razorpay/blade 3.7.0 → 3.7.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @razorpay/blade
 
+## 3.7.1
+
+### Patch Changes
+
+- 03bb818: feat(tokens): add new tokens
+  - updates color tokens of banking theme to match the designs
+- 002e0a2: feat(tokens): add new tokens
+  - Updates tokens for payment theme to match the designs
+- 66f473e: fix: remove aria-hidden for checkbox and radio
+
 ## 3.7.0
 
 ### Minor Changes

package/build/components/index.native.js

@@ -3411,7 +3411,7 @@ var handoffComplete=false;var id=0;var genId=function genId(){return ++id;};var
 
 var useFormId=function useFormId(prefix){var baseId=useId(prefix);var inputId=useId(baseId+"-input");var errorTextId=useId(baseId+"-errortext");var helpTextId=useId(baseId+"-helptext");var successTextId=useId(baseId+"-successtext");var labelId=useId(baseId+"-label");return {baseId:baseId,inputId:inputId,errorTextId:errorTextId,helpTextId:helpTextId,successTextId:successTextId,labelId:labelId};};
 
-function setMixed(element,mixed){if(mixed){element.indeterminate=true;}else if(element.indeterminate){element.indeterminate=false;}}var useCheckbox=function useCheckbox(_ref){var isChecked=_ref.isChecked,defaultChecked=_ref.defaultChecked,isIndeterminate=_ref.isIndeterminate,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,hasError=_ref.hasError,hasHelperText=_ref.hasHelperText,onChange=_ref.onChange,name=_ref.name,value=_ref.value;var inputRef=React__default.useRef(null);var isReactNative=getPlatformType()==='react-native';if(isChecked&&defaultChecked){throw new Error("[Blade useCheckbox] Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.");}var _useControllableState=useControllableState({value:isChecked,defaultValue:defaultChecked!=null?defaultChecked:false}),_useControllableState2=_slicedToArray(_useControllableState,2),checkboxState=_useControllableState2[0],setCheckboxStateChange=_useControllableState2[1];var handleOnChange=function handleOnChange(event){if(isDisabled){event.stopPropagation();event.preventDefault();return;}setCheckboxStateChange(function(checked){onChange==null?void 0:onChange({isChecked:!checked,event:event,value:value});return !checked;});};React__default.useEffect(function(){var element=inputRef.current;if(!element)return;setMixed(element,isIndeterminate);},[isIndeterminate]);var state={isReactNative:isReactNative,isChecked:checkboxState,setChecked:setCheckboxStateChange};var _useFormId=useFormId('checkbox'),inputId=_useFormId.inputId,errorTextId=_useFormId.errorTextId,helpTextId=_useFormId.helpTextId;var accessibilityProps=makeAccessible(_extends({role:'checkbox',required:Boolean(isRequired),hidden:!isReactNative,invalid:Boolean(hasError),disabled:Boolean(isDisabled),checked:checkboxState},hasError?{errorMessage:errorTextId}:{},hasHelperText?{describedBy:helpTextId}:{}));if(isReactNative){return {state:state,inputProps:_extends({onPress:handleOnChange,name:name,value:value},accessibilityProps)};}return {state:state,ids:{inputId:inputId,errorTextId:errorTextId,helpTextId:helpTextId},inputProps:_extends({ref:inputRef,onChange:handleOnChange,type:'checkbox',name:name,value:value,checked:checkboxState,disabled:isDisabled,required:isRequired},accessibilityProps)};};
+function setMixed(element,mixed){if(mixed){element.indeterminate=true;}else if(element.indeterminate){element.indeterminate=false;}}var useCheckbox=function useCheckbox(_ref){var isChecked=_ref.isChecked,defaultChecked=_ref.defaultChecked,isIndeterminate=_ref.isIndeterminate,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,hasError=_ref.hasError,hasHelperText=_ref.hasHelperText,onChange=_ref.onChange,name=_ref.name,value=_ref.value;var inputRef=React__default.useRef(null);var isReactNative=getPlatformType()==='react-native';if(isChecked&&defaultChecked){throw new Error("[Blade useCheckbox] Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.");}var _useControllableState=useControllableState({value:isChecked,defaultValue:defaultChecked!=null?defaultChecked:false}),_useControllableState2=_slicedToArray(_useControllableState,2),checkboxState=_useControllableState2[0],setCheckboxStateChange=_useControllableState2[1];var handleOnChange=function handleOnChange(event){if(isDisabled){event.stopPropagation();event.preventDefault();return;}setCheckboxStateChange(function(checked){onChange==null?void 0:onChange({isChecked:!checked,event:event,value:value});return !checked;});};React__default.useEffect(function(){var element=inputRef.current;if(!element)return;setMixed(element,isIndeterminate);},[isIndeterminate]);var state={isReactNative:isReactNative,isChecked:checkboxState,setChecked:setCheckboxStateChange};var _useFormId=useFormId('checkbox'),inputId=_useFormId.inputId,errorTextId=_useFormId.errorTextId,helpTextId=_useFormId.helpTextId;var accessibilityProps=makeAccessible(_extends({role:'checkbox',required:Boolean(isRequired),invalid:Boolean(hasError),disabled:Boolean(isDisabled),checked:checkboxState},hasError?{errorMessage:errorTextId}:{},hasHelperText?{describedBy:helpTextId}:{}));if(isReactNative){return {state:state,inputProps:_extends({onPress:handleOnChange,name:name,value:value},accessibilityProps)};}return {state:state,ids:{inputId:inputId,errorTextId:errorTextId,helpTextId:helpTextId},inputProps:_extends({ref:inputRef,onChange:handleOnChange,type:'checkbox',name:name,value:value,checked:checkboxState,disabled:isDisabled,required:isRequired},accessibilityProps)};};
 
 var FormHintWrapper=function FormHintWrapper(_ref){var children=_ref.children;return jsx(View,{style:{display:'flex',flexDirection:'row',alignItems:'center'},children:children});};
 
@@ -3469,7 +3469,7 @@ var Indicator=function Indicator(_ref){var accessibilityLabel=_ref.accessibility
 
 var Link=function Link(_ref){var children=_ref.children,icon=_ref.icon,_ref$iconPosition=_ref.iconPosition,iconPosition=_ref$iconPosition===void 0?'left':_ref$iconPosition,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,onClick=_ref.onClick,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'anchor':_ref$variant,href=_ref.href,target=_ref.target,rel=_ref.rel,accessibilityLabel=_ref.accessibilityLabel,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;return jsx(BaseLink,_extends({},icon?{icon:icon,children:children}:{children:children},variant==='anchor'?{variant:variant,href:href,target:target,rel:rel}:{variant:variant,isDisabled:isDisabled},{iconPosition:iconPosition,onClick:onClick,accessibilityLabel:accessibilityLabel,size:size}));};
 
-var useRadio=function useRadio(_ref){var isChecked=_ref.isChecked,defaultChecked=_ref.defaultChecked,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,hasError=_ref.hasError,onChange=_ref.onChange,name=_ref.name,value=_ref.value;var inputRef=React__default.useRef(null);var isReactNative=getPlatformType()==='react-native';if(isChecked&&defaultChecked){throw new Error("[Blade: Radio]: Do not provide both 'isChecked' and 'defaultChecked' to useRadio. Consider if you want this component to be controlled or uncontrolled.");}var _useControllableState=useControllableState({value:isChecked,defaultValue:defaultChecked!=null?defaultChecked:false}),_useControllableState2=_slicedToArray(_useControllableState,2),radioState=_useControllableState2[0],setRadioState=_useControllableState2[1];var handleOnChange=function handleOnChange(event){if(isDisabled){event.stopPropagation();event.preventDefault();return;}setRadioState(function(checked){if(checked===false){onChange==null?void 0:onChange({isChecked:true,event:event,value:value});return true;}return checked;});};var state={isChecked:radioState,setChecked:setRadioState};var idBase=useId('radio');var helpTextId=useId(idBase+"-helptext");var accessibilityProps=makeAccessible({role:'radio',required:Boolean(isRequired),hidden:!isReactNative,invalid:Boolean(hasError),disabled:Boolean(isDisabled),checked:radioState,describedBy:helpTextId});if(isReactNative){return {state:state,inputProps:_extends({onPress:handleOnChange,name:name,value:value},accessibilityProps)};}return {state:state,ids:{helpTextId:helpTextId},inputProps:_extends({ref:inputRef,onChange:handleOnChange,type:'radio',name:name,value:value,checked:radioState,disabled:isDisabled,required:isRequired},accessibilityProps)};};
+var useRadio=function useRadio(_ref){var isChecked=_ref.isChecked,defaultChecked=_ref.defaultChecked,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,hasError=_ref.hasError,onChange=_ref.onChange,name=_ref.name,value=_ref.value;var inputRef=React__default.useRef(null);var isReactNative=getPlatformType()==='react-native';if(isChecked&&defaultChecked){throw new Error("[Blade: Radio]: Do not provide both 'isChecked' and 'defaultChecked' to useRadio. Consider if you want this component to be controlled or uncontrolled.");}var _useControllableState=useControllableState({value:isChecked,defaultValue:defaultChecked!=null?defaultChecked:false}),_useControllableState2=_slicedToArray(_useControllableState,2),radioState=_useControllableState2[0],setRadioState=_useControllableState2[1];var handleOnChange=function handleOnChange(event){if(isDisabled){event.stopPropagation();event.preventDefault();return;}setRadioState(function(checked){if(checked===false){onChange==null?void 0:onChange({isChecked:true,event:event,value:value});return true;}return checked;});};var state={isChecked:radioState,setChecked:setRadioState};var idBase=useId('radio');var helpTextId=useId(idBase+"-helptext");var accessibilityProps=makeAccessible({role:'radio',required:Boolean(isRequired),invalid:Boolean(hasError),disabled:Boolean(isDisabled),checked:radioState,describedBy:helpTextId});if(isReactNative){return {state:state,inputProps:_extends({onPress:handleOnChange,name:name,value:value},accessibilityProps)};}return {state:state,ids:{helpTextId:helpTextId},inputProps:_extends({ref:inputRef,onChange:handleOnChange,type:'radio',name:name,value:value,checked:radioState,disabled:isDisabled,required:isRequired},accessibilityProps)};};
 
 var radioSizes={group:{gap:{small:{mobile:'spacing.2',desktop:'spacing.0'},medium:{mobile:'spacing.3',desktop:'spacing.2'}}},icon:{small:{width:12,height:12,dotRadius:2},medium:{width:16,height:16,dotRadius:3}}};var radioIconColors={variants:{default:{dot:{checked:'colors.brand.gray.200.lowContrast',unchecked:'colors.brand.gray.200.lowContrast'},border:{checked:'colors.brand.primary.500',unchecked:'colors.brand.gray.500.lowContrast'},background:{checked:'colors.brand.primary.500',unchecked:'transparent'}},disabled:{dot:{checked:'colors.brand.gray.200.lowContrast',unchecked:'colors.brand.gray.200.lowContrast'},border:{checked:'transparent',unchecked:'colors.brand.gray.a100.lowContrast'},background:{checked:'colors.brand.gray.a100.lowContrast',unchecked:'transparent'}},negative:{dot:{checked:'colors.brand.gray.200.lowContrast',unchecked:'colors.brand.gray.200.lowContrast'},border:{checked:'colors.feedback.border.negative.highContrast',unchecked:'colors.feedback.border.negative.highContrast'},background:{checked:'colors.feedback.background.negative.highContrast',unchecked:'colors.feedback.background.negative.lowContrast'}}}};