@razorpay/blade 3.7.0 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @razorpay/blade
 
+## 3.8.0
+
+### Minor Changes
+
+- 32c1f05: feat(Counter): design changes
+
+  - Added small variant in Counter
+  - Fixed italic font
+
+## 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.d.ts

@@ -1125,7 +1125,7 @@ declare type CounterProps = {
      *
      * @default 'medium'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
 };
 declare const Counter: ({ value, max, intent, contrast, size, }: CounterProps) => React.ReactElement;
 
@@ -2007,16 +2007,19 @@ declare type TextCommonProps = {
     contrast?: ColorContrastTypes;
     truncateAfterLines?: number;
     children: React.ReactNode;
+    weight?: keyof Theme$1['typography']['fonts']['weight'];
+    /**
+     * **For Internal use only**:  Sets the color of the Text component
+     */
+    color?: BaseTextProps['color'];
 };
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
-    weight?: keyof Theme$1['typography']['fonts']['weight'];
     size?: 'small' | 'medium';
 };
 declare type TextCaptionVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'caption'>;
-    weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'regular'>;
     size?: 'medium';
 };
 /**
@@ -2034,7 +2037,7 @@ declare const getTextProps: <T extends {
 }>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "type" | "size" | "contrast" | "weight" | "variant">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
 declare const Text: <T extends {
     variant: TextVariant;
-}>({ variant, weight, size, type, contrast, truncateAfterLines, children, }: TextProps<T>) => ReactElement;
+}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
 
 declare type CodeProps = {
     children: string;

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

@@ -1125,7 +1125,7 @@ declare type CounterProps = {
      *
      * @default 'medium'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
 };
 declare const Counter: ({ value, max, intent, contrast, size, }: CounterProps) => React.ReactElement;
 
@@ -1995,16 +1995,19 @@ declare type TextCommonProps = {
     contrast?: ColorContrastTypes;
     truncateAfterLines?: number;
     children: React.ReactNode;
+    weight?: keyof Theme$1['typography']['fonts']['weight'];
+    /**
+     * **For Internal use only**:  Sets the color of the Text component
+     */
+    color?: BaseTextProps['color'];
 };
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
-    weight?: keyof Theme$1['typography']['fonts']['weight'];
     size?: 'small' | 'medium';
 };
 declare type TextCaptionVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'caption'>;
-    weight?: keyof Pick<Theme$1['typography']['fonts']['weight'], 'regular'>;
     size?: 'medium';
 };
 /**
@@ -2022,7 +2025,7 @@ declare const getTextProps: <T extends {
 }>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "type" | "size" | "weight" | "contrast" | "variant">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
 declare const Text: <T extends {
     variant: TextVariant;
-}>({ variant, weight, size, type, contrast, truncateAfterLines, children, }: TextProps<T>) => ReactElement;
+}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
 
 declare type CodeProps = {
     children: string;

package/build/components/index.native.js

@@ -3323,7 +3323,7 @@ var getProps$3=function getProps(_ref){var size=_ref.size,type=_ref.type,contras
 
 var getProps$2=function getProps(_ref){var variant=_ref.variant,size=_ref.size,type=_ref.type,weight=_ref.weight,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:200,fontWeight:weight!=null?weight:'bold',fontStyle:'normal',lineHeight:'xl',fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'}};if(variant==='regular'){if(!size||size==='small'){props.fontSize=200;props.lineHeight='2xl';props.as=isPlatformWeb?'h6':undefined;}else if(size==='medium'){props.fontSize=300;props.lineHeight='3xl';props.as=isPlatformWeb?'h5':undefined;}else if(size==='large'){props.fontSize=400;props.lineHeight='3xl';props.as=isPlatformWeb?'h4':undefined;}}else if(variant==='subheading'){if(weight==='regular'){throw new Error("[Blade: Heading]: weight cannot be 'regular' when variant is 'subheading'");}if(size){throw new Error("[Blade: Heading]: size prop cannot be added when variant is 'subheading'. Use variant 'regular' or remove size prop");}props.fontSize=75;props.lineHeight='s';props.as=isPlatformWeb?'h6':undefined;}return props;};var Heading=function Heading(_ref2){var _ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'regular':_ref2$variant,size=_ref2.size,_ref2$type=_ref2.type,type=_ref2$type===void 0?'normal':_ref2$type,_ref2$weight=_ref2.weight,weight=_ref2$weight===void 0?'bold':_ref2$weight,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,children=_ref2.children;var props=getProps$2({variant:variant,size:size,type:type,weight:weight,contrast:contrast});return jsx(BaseText,_extends({},props,{children:children}));};
 
-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};if(variant==='body'){if(size==='small'){props.fontSize=75;props.lineHeight='s';}}else if(variant==='caption'){if(weight==='bold'){throw new Error("[Blade: Text]: weight cannot be 'bold' when variant is '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 {numberOfLines:truncateAfterLines};}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;var props=_extends({truncateAfterLines:truncateAfterLines},getTextProps({variant:variant,type:type,weight:weight,size:size,contrast:contrast}));return jsx(StyledText,_extends({},props,{children:children}));};
+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};if(variant==='body'){if(size==='small'){props.fontSize=75;props.lineHeight='s';}}else if(variant==='caption'){if(weight==='bold'){throw new Error("[Blade: Text]: weight cannot be 'bold' when variant is '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,{size:size,as:isPlatformWeb?'span':undefined,children:jsx(BaseText,{color:"surface.text.subtle.lowContrast",fontFamily:"code",fontSize:getCodeFontSize(size),as:isPlatformWeb?'code':undefined,children:children})});};
 
@@ -3355,17 +3355,23 @@ var _excluded$2=["currentInteraction","setCurrentInteraction"];var getColorToken
 
 var isReactNative$3=getPlatformType()==='react-native';var SecondaryActionWrapper=isReactNative$3?Box:Fragment;var CloseButtonWrapper=isReactNative$3?Box:Fragment;var intentIconMap={positive:CheckCircleIcon,negative:AlertTriangleIcon,information:AlertTriangleIcon,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?'information':_ref$intent,_ref$isBorderless=_ref.isBorderless,isBorderless=_ref$isBorderless===void 0?false:_ref$isBorderless,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 _useState=useState(true),_useState2=_slicedToArray(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1];var contrastType=contrast+"Contrast";var Icon=intentIconMap[intent];var icon=jsx(Icon,{color:"feedback.icon."+intent+"."+contrastType,size:"large"});var _title=title?jsx(Box,{marginBottom:"spacing.2",children:jsx(Heading,{size:"small",contrast:contrast,children:title})}):null;var _description=jsx(Text,{contrast:contrast,children:description});var primaryAction=actions!=null&&actions.primary?jsx(Box,{marginRight:"spacing.5",display:isReactNative$3?'flex':'inline-flex',children:jsx(BaseButton,{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(SecondaryActionWrapper,{children:jsx(BaseLink,_extends({contrast:contrast,intent:intent},secondaryActionParams,{children:actions.secondary.text}))}):null;var _actions=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:"large",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,isBorderless:isBorderless},a11yProps,{children:[icon,jsxs(Box,{flex:1,paddingLeft:"spacing.4",paddingRight:"spacing.2",children:[_title,_description,_actions]}),closeButton]}));};
 
-var minHeight={small:20,medium:24};var maxWidth={onMobile:100,onDesktop:120};
+var minHeight={small:20,medium:24};var maxWidth$1={onMobile:100,onDesktop:120};
 
-var getStyledBadgeStyles=function getStyledBadgeStyles(_ref){var theme=_ref.theme,size=_ref.size,platform=_ref.platform,backgroundColor=_ref.backgroundColor;return {backgroundColor:get_1(theme.colors,backgroundColor),minHeight:makeSize(minHeight[size]),borderRadius:makeBorderSize(theme.border.radius.max),maxWidth:makeSize(maxWidth[platform]),display:'flex',flexWrap:'nowrap'};};
+var getStyledBadgeStyles=function getStyledBadgeStyles(_ref){var theme=_ref.theme,size=_ref.size,platform=_ref.platform,backgroundColor=_ref.backgroundColor;return {backgroundColor:get_1(theme.colors,backgroundColor),minHeight:makeSize(minHeight[size]),borderRadius:makeBorderSize(theme.border.radius.max),maxWidth:makeSize(maxWidth$1[platform]),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=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 StyledBaseText=styled(BaseText)(function(){if(getPlatformType()!=='react-native'){return {whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'};}return {};});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({variant:variant,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,iconColor=_getColorProps.iconColor,textColor=_getColorProps.textColor;return jsx(StyledBadge,{backgroundColor:backgroundColor,size:size,platform:platform,children:jsxs(Box,{paddingRight:"spacing.3",paddingLeft:"spacing.3",display:"flex",flex:1,flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:[Icon?jsx(Box,{paddingRight:Boolean(Icon)?'spacing.2':'spacing.0',display:"flex",children:jsx(Icon,{color:iconColor,size:"small"})}):null,jsx(StyledBaseText,{fontSize:75,fontWeight:fontWeight,lineHeight:"s",color:textColor,textAlign:"center",truncateAfterLines:1,children:children})]})});};
+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 StyledBaseText=styled(BaseText)(function(){if(getPlatformType()!=='react-native'){return {whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'};}return {};});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,{backgroundColor:backgroundColor,size:size,platform:platform,children:jsxs(Box,{paddingRight:"spacing.3",paddingLeft:"spacing.3",display:"flex",flex:1,flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:[Icon?jsx(Box,{paddingRight:Boolean(Icon)?'spacing.2':'spacing.0',display:"flex",children:jsx(Icon,{color:iconColor,size:"small"})}):null,jsx(StyledBaseText,{fontSize:75,fontWeight:fontWeight,lineHeight:"s",color:textColor,textAlign:"center",truncateAfterLines:1,children:children})]})});};
 
 var Button=function Button(_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,_ref$isFullWidth=_ref.isFullWidth,isFullWidth=_ref$isFullWidth===void 0?false:_ref$isFullWidth,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,onClick=_ref.onClick,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$type=_ref.type,type=_ref$type===void 0?'button':_ref$type,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'primary':_ref$variant,accessibilityLabel=_ref.accessibilityLabel;return jsx(BaseButton,_extends({},icon?{icon:icon,children:children}:{children:children},{accessibilityLabel:accessibilityLabel,iconPosition:iconPosition,isDisabled:isDisabled,isFullWidth:isFullWidth,onClick:onClick,size:size,type:type,variant:variant,isLoading:isLoading}));};
 
-var Counter=function Counter(_ref){var value=_ref.value,max=_ref.max,_ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var content=""+value;if(max&&value>max){content=max+"+";}return jsx(Badge,{size:size,variant:intent,contrast:contrast,children:content});};
+var verticalPadding={small:'spacing.0',medium:'spacing.1',large:'spacing.1'};var horizontalPadding={small:'spacing.2',medium:'spacing.3',large:'spacing.3'};var maxWidth={onMobile:100,onDesktop:120};
+
+var getStyledCounterStyles=function getStyledCounterStyles(_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[platform]),display:'flex',flexWrap:'nowrap'};};
+
+var StyledCounter=styled.View(function(props){return _extends({},getStyledCounterStyles(props),{alignSelf:'center'});});
+
+var getColorProps=function getColorProps(_ref){var _ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast;var props={textColor:"feedback.text."+intent+"."+contrast+"Contrast",backgroundColor:"feedback.background."+intent+"."+contrast+"Contrast"};return props;};var Counter=function Counter(_ref2){var value=_ref2.value,max=_ref2.max,_ref2$intent=_ref2.intent,intent=_ref2$intent===void 0?'neutral':_ref2$intent,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size;var content=""+value;if(max&&value>max){content=max+"+";}var _useTheme=useTheme(),platform=_useTheme.platform;var _getColorProps=getColorProps({intent:intent,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,textColor=_getColorProps.textColor;var textSizes={small:{variant:'caption'},medium:{variant:'body',size:'small'},large:{variant:'body',size:'medium'}};return jsx(StyledCounter,{backgroundColor:backgroundColor,size:size,platform:platform,children:jsx(Box,{paddingRight:horizontalPadding[size],paddingLeft:horizontalPadding[size],paddingTop:verticalPadding[size],paddingBottom:verticalPadding[size],display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:jsx(Text,_extends({},textSizes[size],{type:"normal",weight:"regular",truncateAfterLines:1,color:textColor,children:content}))})});};
 
 /**
  * Checks if `value` is `undefined`.
@@ -3411,7 +3417,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 +3475,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'}}}};